fully implements settings load/save, add ombi user defaults

all that remains is the User profiles menu.

api.go

@@ -1097,15 +1097,12 @@ func (app *appContext) GetConfig(gc *gin.Context) {
 		}
 	}
 	s := resp.Sections["ui"].Settings["language"]
-	s.Options = app.lang.langOptions
-	s.Value = app.lang.langOptions[app.lang.chosenIndex]
-	resp.Sections["ui"].Settings["language"] = s
 	for sectName, section := range resp.Sections {
 		for settingName, setting := range section.Settings {
 			val := app.config.Section(sectName).Key(settingName)
 			s := resp.Sections[sectName].Settings[settingName]
 			switch setting.Type {
-			case "text", "email", "select":
+			case "text", "email", "select", "password":
 				s.Value = val.MustString("")
 			case "number":
 				s.Value = val.MustInt(0)
@@ -1115,6 +1112,9 @@ func (app *appContext) GetConfig(gc *gin.Context) {
 			resp.Sections[sectName].Settings[settingName] = s
 		}
 	}
+	s.Options = app.lang.langOptions
+	s.Value = app.lang.langOptions[app.lang.chosenIndex]
+	resp.Sections["ui"].Settings["language"] = s
 	gc.JSON(200, resp)
 }
 

css/base.css

@@ -68,6 +68,10 @@
     margin-left: 1rem;
 }
 
+.ml-half {
+    margin-left: 0.5rem;
+}
+
 .mr-1 {
     margin-right: 1rem;
 }
@@ -96,6 +100,10 @@
     align-items: top;
 }
 
+.flex {
+    display: flex;
+}
+
 .flex-expand {
     display: flex;
     justify-content: space-between;

html/admin.html

@@ -101,17 +101,17 @@
             </form>
         </div>
         <div id="modal-restart" class="modal">
-            <div class="modal-content card ~critical !normal">
+            <div class="modal-content card ~critical !low">
                 <span class="heading">Restart needed <span class="modal-close">&times;</span></span>
                 <p class="content pb-1">A restart is needed to apply some settings you changed. Do it now or later?</p>
                 <div class="fr">
-                    <span class="button ~info !normal">Apply, restart later</span>
+                    <span class="button ~info !normal" id="settings-apply-no-restart">Apply, restart later</span>
-                    <span class="button ~critical !normal">Apply &amp; restart</span>
+                    <span class="button ~critical !normal" id="settings-apply-restart">Apply &amp; restart</span>
                 </div>
             </div>
         </div>
         <div id="modal-refresh" class="modal">
-            <div class="modal-content card ~urge !normal">
+            <div class="modal-content card ~neutral !normal">
                 <span class="heading">Settings applied.</span>
                 <p class="content">Refresh the page in a few seconds.</p>
             </div>
@@ -230,17 +230,17 @@
                 </div>
             </div>
             <div id="settingsTab" class="unfocused">
-                <div class="card ~neutral !low settings">
+                <div class="card ~neutral !low settings overflow">
                     <span class="heading">Settings</span>
                     <div class="fr">
-                        <span class="button ~neutral !normal" id="accounts-add-user">Save</span>
+                        <span class="button ~neutral !normal unfocused" id="settings-save">Save</span>
                     </div>
                     <div class="row">
                         <div class="card ~neutral !normal col" id="settings-sidebar">
-                            <aside class="aside sm ~info mb-half">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~critical">R</span> indicates changes require a restart.</aside> 
+                            <aside class="aside sm ~info mb-half">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside> 
-                            <span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span>
+                            <span class="button ~neutral !low settings-section-button mb-half" id="setting-about"><span class="flex">About <i class="ri-information-line ml-half"></i></span></span>
                         </div>
-                        <div class="card ~neutral !normal col" id="settings-panel"></div>
+                        <div class="card ~neutral !normal col overflow" id="settings-panel"></div>
                     </div>
                 </div>
             </div>

ts/modules/settings.ts

@@ -1,4 +1,4 @@
-import { _get } from "../modules/common.js";
+import { _get, _post, toggleLoader } from "../modules/common.js";
 
 interface settingsBoolEvent extends Event { 
     detail: boolean;
@@ -64,15 +64,15 @@ class DOMInput {
     get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
     set requires_restart(state: boolean) {
         if (state) {
-            this._restart.classList.add("badge", "~critical");
+            this._restart.classList.add("badge", "~info");
             this._restart.textContent = "R";
         } else {
-            this._restart.classList.remove("badge", "~critical");
+            this._restart.classList.remove("badge", "~info");
             this._restart.textContent = "";
         }
     }
 
-    constructor(inputType: string, setting: Setting, section: string) {
+    constructor(inputType: string, setting: Setting, section: string, name: string) {
         this._container = document.createElement("div");
         this._container.classList.add("setting");
         this._container.innerHTML = `
@@ -97,6 +97,12 @@ class DOMInput {
                 this._input.disabled = (event.detail !== state);
             });
         }
+        const onValueChange = () => {
+            const event = new CustomEvent(`settings-${section}-${name}`, { "detail": this.value })
+            document.dispatchEvent(event);
+            if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
+        };
+        this._input.onchange = onValueChange;
         this.update(setting);
     }
 
@@ -118,7 +124,7 @@ interface SText extends Setting {
     value: string;
 }
 class DOMText extends DOMInput implements SText {
-    constructor(setting: Setting, section: string) { super("text", setting, section); }
+    constructor(setting: Setting, section: string, name: string) { super("text", setting, section, name); }
     type: string = "text";
     get value(): string { return this._input.value }
     set value(v: string) { this._input.value = v; }
@@ -128,7 +134,7 @@ interface SPassword extends Setting {
     value: string;
 }
 class DOMPassword extends DOMInput implements SPassword {
-    constructor(setting: Setting, section: string) { super("password", setting, section); }
+    constructor(setting: Setting, section: string, name: string) { super("password", setting, section, name); }
     type: string = "password";
     get value(): string { return this._input.value }
     set value(v: string) { this._input.value = v; }
@@ -138,7 +144,7 @@ interface SEmail extends Setting {
     value: string;
 }
 class DOMEmail extends DOMInput implements SEmail {
-    constructor(setting: Setting, section: string) { super("email", setting, section); }
+    constructor(setting: Setting, section: string, name: string) { super("email", setting, section, name); }
     type: string = "email";
     get value(): string { return this._input.value }
     set value(v: string) { this._input.value = v; }
@@ -148,7 +154,7 @@ interface SNumber extends Setting {
     value: number;
 }
 class DOMNumber extends DOMInput implements SNumber {
-    constructor(setting: Setting, section: string) { super("number", setting, section); }
+    constructor(setting: Setting, section: string, name: string) { super("number", setting, section, name); }
     type: string = "number";
     get value(): number { return +this._input.value; }
     set value(v: number) { this._input.value = ""+v; }
@@ -193,10 +199,10 @@ class DOMBool implements SBool {
     get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
     set requires_restart(state: boolean) {
         if (state) {
-            this._restart.classList.add("badge", "~critical");
+            this._restart.classList.add("badge", "~info");
             this._restart.textContent = "R";
         } else {
-            this._restart.classList.remove("badge", "~critical");
+            this._restart.classList.remove("badge", "~info");
             this._restart.textContent = "";
         }
     }
@@ -220,10 +226,13 @@ class DOMBool implements SBool {
         this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
         this._input = this._container.querySelector("input[type=checkbox]") as HTMLInputElement;
         const onValueChange = () => {
-            const event = new CustomEvent(`settings-${section}-${name}`, { "detail": this._input.checked })
+            const event = new CustomEvent(`settings-${section}-${name}`, { "detail": this.value })
             document.dispatchEvent(event);
         };
-        this._input.onchange = onValueChange;
+        this._input.onchange = () => { 
+            onValueChange();
+            if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
+        };
         document.addEventListener(`settings-loaded`, onValueChange);
 
         if (setting.depends_false || setting.depends_true) {
@@ -288,10 +297,10 @@ class DOMSelect implements SSelect {
     get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
     set requires_restart(state: boolean) {
         if (state) {
-            this._restart.classList.add("badge", "~critical");
+            this._restart.classList.add("badge", "~info");
             this._restart.textContent = "R";
         } else {
-            this._restart.classList.remove("badge", "~critical");
+            this._restart.classList.remove("badge", "~info");
             this._restart.textContent = "";
         }
     }
@@ -308,7 +317,7 @@ class DOMSelect implements SSelect {
         this._select.innerHTML = innerHTML;
     }
 
-    constructor(setting: SSelect, section: string) {
+    constructor(setting: SSelect, section: string, name: string) {
         this._options = [];
         this._container = document.createElement("div");
         this._container.classList.add("setting");
@@ -336,6 +345,12 @@ class DOMSelect implements SSelect {
                 this._input.disabled = (event.detail !== state);
             });
         }
+        const onValueChange = () => {
+            const event = new CustomEvent(`settings-${section}-${name}`, { "detail": this.value })
+            document.dispatchEvent(event);
+            if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
+        };
+        this._select.onchange = onValueChange;
         this.update(setting);
     }
     update = (s: SSelect) => {
@@ -360,15 +375,18 @@ class sectionPanel {
     private _section: HTMLDivElement;
     private _settings: { [name: string]: Setting };
     private _sectionName: string;
+    values: { [field: string]: string } = {};
 
     constructor(s: Section, sectionName: string) {
         this._sectionName = sectionName;
         this._settings = {};
         this._section = document.createElement("div") as HTMLDivElement;
         this._section.classList.add("settings-section", "unfocused");
-        this._section.innerHTML = `<p class="support lg mb-half">${s.meta.description}</p>`;
+        this._section.innerHTML = `
+        <span class="heading">${s.meta.name}</span>
+        <p class="support lg">${s.meta.description}</p>
+        `;
         this.update(s);
-
     }
     update = (s: Section) => {
         for (let name of s.order) {
@@ -378,24 +396,30 @@ class sectionPanel {
             } else {
                 switch (setting.type) {
                     case "text":
-                        setting = new DOMText(setting, this._sectionName);
+                        setting = new DOMText(setting, this._sectionName, name);
                         break;
                     case "password":
-                        setting = new DOMPassword(setting, this._sectionName);
+                        setting = new DOMPassword(setting, this._sectionName, name);
                         break;
                     case "email":
-                        setting = new DOMEmail(setting, this._sectionName);
+                        setting = new DOMEmail(setting, this._sectionName, name);
                         break;
                     case "number":
-                        setting = new DOMNumber(setting, this._sectionName);
+                        setting = new DOMNumber(setting, this._sectionName, name);
                         break;
                     case "bool":
                         setting = new DOMBool(setting as SBool, this._sectionName, name);
                         break;
                     case "select":
-                        setting = new DOMSelect(setting as SSelect, this._sectionName);
+                        setting = new DOMSelect(setting as SSelect, this._sectionName, name);
                         break;
                 }
+                this.values[name] = ""+setting.value;
+                document.addEventListener(`settings-${this._sectionName}-${name}`, (event: CustomEvent) => {
+                    const oldValue = this.values[name];
+                    this.values[name] = ""+event.detail;
+                    document.dispatchEvent(new CustomEvent("settings-section-changed"));
+                });
                 this._section.appendChild(setting.asElement());
                 this._settings[name] = setting;
             }
@@ -422,10 +446,15 @@ interface Settings {
 }
 
 export class settingsList {
+    private _saveButton = document.getElementById("settings-save") as HTMLSpanElement;
+    private _saveNoRestart = document.getElementById("settings-apply-no-restart") as HTMLSpanElement;
+    private _saveRestart = document.getElementById("settings-apply-restart") as HTMLSpanElement;
+
     private _panel = document.getElementById("settings-panel") as HTMLDivElement;
     private _sidebar = document.getElementById("settings-sidebar") as HTMLDivElement;
     private _sections: { [name: string]: sectionPanel }
     private _buttons: { [name: string]: HTMLSpanElement }
+    private _needsRestart: boolean = false;
 
     addSection = (name: string, s: Section) => {
         const section = new sectionPanel(s, name);
@@ -442,7 +471,6 @@ export class settingsList {
     private _showPanel = (name: string) => {
         for (let n in this._sections) {
             if (n == name) {
-                console.log("found", n);
                 this._sections[name].visible = true;
                 this._buttons[name].classList.add("selected");
             } else {
@@ -452,9 +480,53 @@ export class settingsList {
         }
     }
 
+    private _save = () => {
+        let config = {};
+        for (let name in this._sections) {
+            config[name] = this._sections[name].values;
+        }
+        if (this._needsRestart) { 
+            this._saveRestart.onclick = () => {
+                config["restart-program"] = true;
+                this._send(config, () => {
+                    window.modals.settingsRestart.close(); 
+                    window.modals.settingsRefresh.show();
+                });
+            };
+            this._saveNoRestart.onclick = () => {
+                config["restart-program"] = false;
+                this._send(config, window.modals.settingsRestart.close); 
+            }
+            window.modals.settingsRestart.show(); 
+        } else {
+            this._send(config);
+        }
+        // console.log(config);
+    }
+
+    private _send = (config: Object, run?: () => void) => _post("/config", config, (req: XMLHttpRequest) => {
+        if (req.readyState == 4) {
+            if (req.status == 200 || req.status == 204) {
+                window.notifications.customPositive("settingsSaved", "Success:", "settings were saved.");
+            } else {
+                window.notifications.customError("settingsSaved", "Couldn't save settings.");
+            }
+            this.reload();
+            if (run) { run(); }
+        }
+    });
+
     constructor() {
         this._sections = {};
         this._buttons = {};
+        document.addEventListener("settings-section-changed", () => this._saveButton.classList.remove("unfocused"));
+        this._saveButton.onclick = this._save;
+        document.addEventListener("settings-requires-restart", () => { this._needsRestart = true; });
+
+        if (window.ombiEnabled) {
+            let ombi = new ombiDefaults();
+            this._sidebar.appendChild(ombi.button());
+        }
     }
 
     reload = () => _get("/config", null, (req: XMLHttpRequest) => {
@@ -471,8 +543,78 @@ export class settingsList {
                     this.addSection(name, settings.sections[name]);
                 }
             }
+            this._showPanel(settings.order[0]);
+            this._needsRestart = false;
             document.dispatchEvent(new CustomEvent("settings-loaded"));
+            this._saveButton.classList.add("unfocused");
         }
     })
-
 }
+
+interface ombiUser {
+    id: string;
+    name: string;
+}
+
+class ombiDefaults {
+    private _form: HTMLFormElement;
+    private _button: HTMLSpanElement;
+    private _select: HTMLSelectElement;
+    private _users: { [id: string]: string } = {};
+    constructor() {
+        this._button = document.createElement("span") as HTMLSpanElement;
+        this._button.classList.add("button", "~neutral", "!low", "settings-section-button", "mb-half");
+        this._button.innerHTML = `<span class="flex">Ombi user defaults <i class="ri-link-unlink-m ml-half"></i></span>`;
+        this._button.onclick = this.load;
+        this._form = document.getElementById("form-ombi-defaults") as HTMLFormElement;
+        this._form.onsubmit = this.send;
+        this._select = this._form.querySelector("select") as HTMLSelectElement;
+    }
+    button = (): HTMLSpanElement => { return this._button; }
+    send = () => {
+        const button = this._form.querySelector("span.submit") as HTMLSpanElement;
+        toggleLoader(button);
+        let resp = {} as ombiUser;
+        resp.id = this._select.value;
+        resp.name = this._users[resp.id];
+        _post("/ombi/defaults", resp, (req: XMLHttpRequest) => {
+            if (req.readyState == 4) {
+                toggleLoader(button);
+                if (req.status == 200 || req.status == 204) {
+                    window.notifications.customPositive("ombiDefaults", "Success:", "stored ombi defaults.");
+                } else {
+                    window.notifications.customError("ombiDefaults", "Failed to store ombi defaults.");
+                }
+                window.modals.ombiDefaults.close();
+            }
+        });
+    }
+
+    load = () => {
+        toggleLoader(this._button);
+        _get("/ombi/users", null, (req: XMLHttpRequest) => {
+            if (req.readyState == 4) {
+                if (req.status == 200 && "users" in req.response) {
+                    const users = req.response["users"] as ombiUser[]; 
+                    let innerHTML = "";
+                    for (let user of users) {
+                        this._users[user.id] = user.name;
+                        innerHTML += `<option value="${user.id}">${user.name}</option>`;
+                    }
+                    this._select.innerHTML = innerHTML;
+                    toggleLoader(this._button);
+                    window.modals.ombiDefaults.show();
+                } else {
+                    toggleLoader(this._button);
+                    window.notifications.customError("ombiLoadError", "Failed to load ombi users.")
+                }
+            }
+        });
+    }
+}
+
+
+
+
+
+