add advanced setting type with toggle in settings

This commit is contained in:
Harvey Tindall 2021-03-15 22:51:17 +00:00
parent 5dc0a68b44
commit 111533fa2d
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
5 changed files with 124 additions and 6 deletions

View File

@ -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": {

View File

@ -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="fr">
<span class="button ~neutral !normal" id="settings-restart">{{ .strings.settingsRestart }}</span>
<span class="button ~urge !normal unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
<div class="flex-expand">
<div class="flex-row">
<span class="heading">{{ .strings.settings }}</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">

View File

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

View File

@ -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"`

View File

@ -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;
}