add advanced setting type with toggle in settings

config/config-base.json

@@ -72,6 +72,7 @@
                     "name": "Client Name",
                     "required": true,
                     "requires_restart": true,
+                    "advanced": true,
                     "type": "text",
                     "value": "jfa-go",
                     "description": "The name of the client that will show up in the Jellyfin dashboard."
@@ -80,6 +81,7 @@
                     "name": "User cache timeout (minutes)",
                     "required": false,
                     "requires_restart": true,
+                    "advanced": true,
                     "type": "number",
                     "value": 30,
                     "description": "Timeout of user cache in minutes. Set to 0 to disable."
@@ -383,6 +385,7 @@
                     "name": "Date format",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "method",
                     "type": "text",
                     "value": "%d/%m/%y",
@@ -432,6 +435,7 @@
                     "name": "Send emails as plain text",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "method",
                     "type": "bool",
                     "value": false,
@@ -468,6 +472,7 @@
                     "name": "Custom email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -477,6 +482,7 @@
                     "name": "Custom email (plaintext)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -512,6 +518,7 @@
                     "name": "Custom email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -521,6 +528,7 @@
                     "name": "Custom email (plaintext)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -566,6 +574,7 @@
                     "name": "Expiry email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced":  true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -575,6 +584,7 @@
                     "name": "Expiry email (Plaintext)",
                     "required": false,
                     "requires_restart": "false",
+                    "advanced":  true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -584,6 +594,7 @@
                     "name": "User created email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced":  true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -593,6 +604,7 @@
                     "name": "User created email (Plaintext)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced":  true,
                     "depends_true": "enabled",
                     "type": "text",
                     "value": "",
@@ -678,6 +690,7 @@
                     "name": "Path to custom SSL certificate",
                     "required": false,
                     "requires_restart": false,
+                    "advanced":  true,
                     "type": "text",
                     "value": "",
                     "description": "Use if your SMTP server's SSL Certificate is not trusted by the system."
@@ -747,6 +760,7 @@
                     "name": "Custom email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "type": "text",
                     "value": "",
                     "description": "Path to custom email html"
@@ -755,6 +769,7 @@
                     "name": "Custom email (plaintext)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "type": "text",
                     "value": "",
                     "description": "Path to custom email in plain text"
@@ -788,6 +803,7 @@
                     "name": "Custom email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "type": "text",
                     "value": "",
                     "description": "Path to custom email html"
@@ -796,6 +812,7 @@
                     "name": "Custom email (plaintext)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "type": "text",
                     "value": "",
                     "description": "Path to custom email in plain text"
@@ -843,6 +860,7 @@
                     "name": "Custom email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "email|method",
                     "type": "text",
                     "value": "",
@@ -852,6 +870,7 @@
                     "name": "Custom email (plaintext)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "depends_true": "email|method",
                     "type": "text",
                     "value": "",
@@ -879,6 +898,7 @@
                     "name": "Custom email (HTML)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "type": "text",
                     "value": "",
                     "description": "Path to custom email html"
@@ -887,6 +907,7 @@
                     "name": "Custom email (plaintext)",
                     "required": false,
                     "requires_restart": false,
+                    "advanced": true,
                     "type": "text",
                     "value": "",
                     "description": "Path to custom email in plain text"
@@ -897,7 +918,8 @@
             "order": [],
             "meta": {
                 "name": "File Storage",
-                "description": "Optional settings for changing storage locations."
+                "description": "Optional settings for changing storage locations.",
+                "advanced": true
             },
             "settings": {
                 "invites": {

html/admin.html

@@ -427,10 +427,18 @@
             </div>
             <div id="tab-settings" class="unfocused">
                 <div class="card ~neutral !low settings overflow">
-                    <span class="heading">{{ .strings.settings }}</span>
+                    <div class="flex-expand">
-                    <div class="fr">
+                        <div class="flex-row">
-                        <span class="button ~neutral !normal" id="settings-restart">{{ .strings.settingsRestart }}</span>
+                            <span class="heading">{{ .strings.settings }}</span>
-                        <span class="button ~urge !normal unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
+                            <label for="settings-advanced-enabled" class="button ~neutral !normal ml-1">
+                                <input type="checkbox" id="settings-advanced-enabled" aria-label="Advanced settings enabled">
+                                <span class="ml-half">{{ .strings.advancedSettings }} </span>
+                            </label>
+                        </div>
+                        <div>
+                            <span class="button ~neutral !normal" id="settings-restart">{{ .strings.settingsRestart }}</span>
+                            <span class="button ~urge !normal unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
+                        </div>
                     </div>
                     <div class="row">
                         <div class="card ~neutral !normal col" id="settings-sidebar">

lang/admin/en-us.json

@@ -28,6 +28,7 @@
         "update": "Update",
         "download": "Download",
         "search": "Search",
+        "advancedSettings": "Advanced Settings",
         "lastActiveTime": "Last Active",
         "from": "From",
         "user": "User",

models.go

@@ -156,6 +156,7 @@ type configDTO map[string]interface{}
 type meta struct {
 	Name         string `json:"name"`
 	Description  string `json:"description"`
+	Advanced     bool   `json:"advanced,omitempty"`
 	DependsTrue  string `json:"depends_true,omitempty"`
 	DependsFalse string `json:"depends_false,omitempty"`
 }
@@ -164,6 +165,7 @@ type setting struct {
 	Name            string      `json:"name"`
 	Description     string      `json:"description"`
 	Required        bool        `json:"required"`
+	Advanced        bool        `json:"advanced,omitempty"`
 	RequiresRestart bool        `json:"requires_restart"`
 	Type            string      `json:"type"` // Type (string, number, bool, etc.)
 	Value           interface{} `json:"value"`

ts/modules/settings.ts

@@ -9,6 +9,7 @@ interface settingsBoolEvent extends Event {
 interface Meta {
     name: string;
     description: string;
+    advanced?: boolean;
     depends_true?: string;
     depends_false?: string;
 }
@@ -18,6 +19,7 @@ interface Setting {
     description: string;
     required: boolean;
     requires_restart: boolean;
+    advanced?: boolean;
     type: string;
     value: string | boolean | number;
     depends_true?: string;
@@ -41,6 +43,25 @@ class DOMInput {
     private _tooltip: HTMLDivElement;
     private _required: HTMLSpanElement;
     private _restart: HTMLSpanElement;
+    private _advanced: boolean;
+
+    private _advancedListener = (event: settingsBoolEvent) => {
+        if (!Boolean(event.detail)) {
+            this._input.parentElement.classList.add("unfocused");
+        } else {
+            this._input.parentElement.classList.remove("unfocused");
+        }
+    }
+
+    get advanced(): boolean { return this._advanced; }
+    set advanced(advanced: boolean) {
+        this._advanced = advanced;
+        if (advanced) {
+            document.addEventListener("settings-advancedState", this._advancedListener);
+        } else {
+            document.removeEventListener("settings-advancedState", this._advancedListener);
+        }
+    }
 
     get name(): string { return this._container.querySelector("span.setting-label").textContent; }
     set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
@@ -125,6 +146,7 @@ class DOMInput {
         this.required = s.required;
         this.requires_restart = s.requires_restart;
         this.value = s.value;
+        this.advanced = s.advanced;
     }
     
     asElement = (): HTMLDivElement => { return this._container; }
@@ -180,6 +202,25 @@ class DOMBool implements SBool {
     private _required: HTMLSpanElement;
     private _restart: HTMLSpanElement;
     type: string = "bool";
+    private _advanced: boolean;
+
+    private _advancedListener = (event: settingsBoolEvent) => {
+        if (!Boolean(event.detail)) {
+            this._input.parentElement.classList.add("unfocused");
+        } else {
+            this._input.parentElement.classList.remove("unfocused");
+        }
+    }
+
+    get advanced(): boolean { return this._advanced; }
+    set advanced(advanced: boolean) {
+        this._advanced = advanced;
+        if (advanced) {
+            document.addEventListener("settings-advancedState", this._advancedListener);
+        } else {
+            document.removeEventListener("settings-advancedState", this._advancedListener);
+        }
+    }
 
     get name(): string { return this._container.querySelector("span.setting-label").textContent; }
     set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
@@ -265,6 +306,7 @@ class DOMBool implements SBool {
         this.required = s.required;
         this.requires_restart = s.requires_restart;
         this.value = s.value;
+        this.advanced = s.advanced;
     }
     
     asElement = (): HTMLDivElement => { return this._container; }
@@ -282,6 +324,25 @@ class DOMSelect implements SSelect {
     private _restart: HTMLSpanElement;
     private _options: string[][];
     type: string = "bool";
+    private _advanced: boolean;
+
+    private _advancedListener = (event: settingsBoolEvent) => {
+        if (!Boolean(event.detail)) {
+            this._container.classList.add("unfocused");
+        } else {
+            this._container.classList.remove("unfocused");
+        }
+    }
+
+    get advanced(): boolean { return this._advanced; }
+    set advanced(advanced: boolean) {
+        this._advanced = advanced;
+        if (advanced) {
+            document.addEventListener("settings-advancedState", this._advancedListener);
+        } else {
+            document.removeEventListener("settings-advancedState", this._advancedListener);
+        }
+    }
 
     get name(): string { return this._container.querySelector("span.setting-label").textContent; }
     set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
@@ -444,7 +505,7 @@ class sectionPanel {
                 }
                 this.values[name] = ""+setting.value;
                 document.addEventListener(`settings-${this._sectionName}-${name}`, (event: CustomEvent) => {
-                    const oldValue = this.values[name];
+                    // const oldValue = this.values[name];
                     this.values[name] = ""+event.detail;
                     document.dispatchEvent(new CustomEvent("settings-section-changed"));
                 });
@@ -504,6 +565,15 @@ export class settingsList {
                 }
             });
         }
+        if (s.meta.advanced) {
+            document.addEventListener("settings-advancedState", (event: settingsBoolEvent) => {
+                if (!Boolean(event.detail)) {
+                    button.classList.add("unfocused");
+                } else {
+                    button.classList.remove("unfocused");
+                }
+            });
+        }
         this._buttons[name] = button;
         this._sidebar.appendChild(this._buttons[name]);
     }
@@ -567,6 +637,20 @@ export class settingsList {
         };
         this._saveButton.onclick = this._save;
         document.addEventListener("settings-requires-restart", () => { this._needsRestart = true; });
+        
+        const advancedEnableToggle = document.getElementById("settings-advanced-enabled") as HTMLInputElement;
+        advancedEnableToggle.onchange = () => {
+            document.dispatchEvent(new CustomEvent("settings-advancedState", { detail: advancedEnableToggle.checked }));
+            const parent = advancedEnableToggle.parentElement;
+            if (advancedEnableToggle.checked) {
+                parent.classList.add("~urge");
+                parent.classList.remove("~neutral");
+            } else {
+                parent.classList.add("~neutral");
+                parent.classList.remove("~urge");
+            }
+        };
+        advancedEnableToggle.checked = false;
 
         if (window.ombiEnabled) {
             let ombi = new ombiDefaults();
@@ -613,6 +697,7 @@ export class settingsList {
             }
             this._showPanel(settings.order[0]);
             document.dispatchEvent(new CustomEvent("settings-loaded"));
+            document.dispatchEvent(new CustomEvent("settings-advancedState", { detail: false }));
             this._saveButton.classList.add("unfocused");
             this._needsRestart = false;
         }