Installer: Implement multi network selector
Change-Id: I52227a0f0e964ac48cb378ead077fad941c3315c
diff --git a/core/installer/welcome/appmanager-tmpl/app.html b/core/installer/welcome/appmanager-tmpl/app.html
index 2967bd0..e65c612 100644
--- a/core/installer/welcome/appmanager-tmpl/app.html
+++ b/core/installer/welcome/appmanager-tmpl/app.html
@@ -42,12 +42,37 @@
<label {{ if $schema.Advanced }}hidden{{ end }}>
{{ $schema.Name }}
<select name="{{ $name }}" oninput="valueChanged({{ $name }}, this.value)" {{ if $readonly }}disabled{{ end }} >
- {{ if not $readonly }}<option disabled selected value>Available networks</option>{{ end }}
+ {{ if not $readonly }}<option disabled selected value></option>{{ end }}
{{ range $networks }}
<option {{if eq .Name (index $data $name) }}selected{{ end }}>{{ .Name }}</option>
{{ end }}
</select>
</label>
+ {{ else if eq $schema.Kind 10 }}
+ <label {{ if $schema.Advanced }}hidden{{ end }}>
+ {{ $schema.Name }}
+ <details class="dropdown">
+ {{ $selectedNetworks := index $data $name }}
+ <summary id="{{ $name }}">{{ $selectedNetworks | join "," }}</summary>
+ <ul>
+ {{ range $networks }}
+ {{ $networkName := .Name }}
+ {{ $selected := false }}
+ {{ range $selectedNetworks }}
+ {{ if eq . $networkName }}
+ {{ $selected = true }}
+ {{ end }}
+ {{ end }}
+ <li>
+ <label>
+ <input type="checkbox" name="{{ $networkName }}" oninput="multiNetworkSelected('{{ $name }}', '{{ $networkName }}', this.checked)" {{ if $selected }}checked{{ end }} />
+ {{ .Name }}
+ </label>
+ </li>
+ {{ end }}
+ </ul>
+ </details>
+ </label>
{{ else if eq $schema.Kind 5 }}
{{ $auth := index $data $name }}
{{ $authEnabled := false }}
@@ -146,11 +171,37 @@
config = config[items[i]];
}
config[items[items.length - 1]] = value;
-}
+ }
+
+ function getValue(name, value) {
+ let items = name.split(".")
+ for (let i = 0; i < items.length - 1; i++) {
+ if (!(items[i] in config)) {
+ config[items[i]] = {}
+ }
+ config = config[items[i]];
+ }
+ return config[items[items.length - 1]];
+ }
+
function valueChanged(name, value) {
setValue(name, value, config);
}
+ function multiNetworkSelected(name, network, selected) {
+ let v = getValue(name, config);
+ if (v === undefined) {
+ v = [];
+ }
+ if (selected) {
+ v.push(network);
+ } else {
+ v = v.filter((n) => n != network);
+ }
+ setValue(name, v, config);
+ document.getElementById(name).innerHTML = v.join(",");
+ }
+
function disableForm() {
document.querySelectorAll("#config-form input").forEach((i) => i.setAttribute("disabled", ""));
document.querySelectorAll("#config-form select").forEach((i) => i.setAttribute("disabled", ""));
diff --git a/core/installer/welcome/appmanager-tmpl/base.html b/core/installer/welcome/appmanager-tmpl/base.html
index a32809f..efa4a35 100644
--- a/core/installer/welcome/appmanager-tmpl/base.html
+++ b/core/installer/welcome/appmanager-tmpl/base.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/static/pico.2.0.6.min.css">
- <link rel="stylesheet" type="text/css" href="/static/appmanager.css?v=0.0.11">
+ <link rel="stylesheet" type="text/css" href="/static/appmanager.css?v=0.0.12">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
diff --git a/core/installer/welcome/static/appmanager.css b/core/installer/welcome/static/appmanager.css
index 5bd3dc4..26bce1a 100644
--- a/core/installer/welcome/static/appmanager.css
+++ b/core/installer/welcome/static/appmanager.css
@@ -11,6 +11,9 @@
--pico-form-element-background-color: #d6d6d6;
--pico-form-element-active-background-color: #d6d6d6;
--pico-form-element-selected-background-color: #d6d6d6;
+ --pico-dropdown-background-color: #d6d6d6;
+ --pico-dropdown-border-color: #7f9f7f;
+ --pico-dropdown-hover-background-color: #7f9f7f;
--pico-primary: #7f9f7f;
--pico-primary-background: #7f9f7f;
--pico-primary-hover: #d4888d;