Merge a17t-redesign, kinda ts-ify setup.js
the web ui has been redesigned with the a17t toolkit, which imo looks a lot better than bootstrap. This also brought a complete rework of the web code, which now makes a lot more sense hopefully. the setup page is still stuck with bootstrap, its not much of a priority but i'll rewrite it eventually.
This commit is contained in:
Harvey Tindall
+594
-144
@@ -1,164 +1,614 @@
|
||||
import { _get, _post, _delete, rmAttr, addAttr } from "../modules/common.js";
|
||||
import { Focus, Unfocus } from "../modules/admin.js";
|
||||
import { _get, _post, toggleLoader } from "../modules/common.js";
|
||||
|
||||
interface Profile {
|
||||
Admin: boolean;
|
||||
LibraryAccess: string;
|
||||
FromUser: string;
|
||||
interface settingsBoolEvent extends Event {
|
||||
detail: boolean;
|
||||
}
|
||||
|
||||
export const populateProfiles = (noTable?: boolean): void => _get("/profiles", null, function (): void {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
const profileList = document.getElementById('profileList');
|
||||
profileList.textContent = '';
|
||||
window.availableProfiles = [this.response["default_profile"]];
|
||||
for (let name in this.response["profiles"]) {
|
||||
if (name != window.availableProfiles[0]) {
|
||||
window.availableProfiles.push(name);
|
||||
}
|
||||
const reqProfile = this.response["profiles"][name];
|
||||
if (!noTable && name != "default_profile") {
|
||||
const profile: Profile = {
|
||||
Admin: reqProfile["admin"],
|
||||
LibraryAccess: reqProfile["libraries"],
|
||||
FromUser: reqProfile["fromUser"]
|
||||
};
|
||||
profileList.innerHTML += `
|
||||
<td nowrap="nowrap" class="align-middle"><strong>${name}</strong></td>
|
||||
<td nowrap="nowrap" class="align-middle"><input class="${window.bs5 ? "form-check-input" : ""}" type="radio" name="defaultProfile" onclick="setDefaultProfile('${name}')" ${(name == window.availableProfiles[0]) ? "checked" : ""}></td>
|
||||
<td nowrap="nowrap" class="align-middle">${profile.FromUser}</td>
|
||||
<td nowrap="nowrap" class="align-middle">${profile.Admin ? "Yes" : "No"}</td>
|
||||
<td nowrap="nowrap" class="align-middle">${profile.LibraryAccess}</td>
|
||||
<td nowrap="nowrap" class="align-middle"><button class="btn btn-outline-danger" id="defaultProfile_${name}" onclick="deleteProfile('${name}')">Delete</button></td>
|
||||
`;
|
||||
}
|
||||
interface Meta {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface Setting {
|
||||
name: string;
|
||||
description: string;
|
||||
required: boolean;
|
||||
requires_restart: boolean;
|
||||
type: string;
|
||||
value: string | boolean | number;
|
||||
depends_true?: Setting;
|
||||
depends_false?: Setting;
|
||||
|
||||
asElement: () => HTMLElement;
|
||||
update: (s: Setting) => void;
|
||||
}
|
||||
|
||||
class DOMInput {
|
||||
protected _input: HTMLInputElement;
|
||||
private _container: HTMLDivElement;
|
||||
private _tooltip: HTMLDivElement;
|
||||
private _required: HTMLSpanElement;
|
||||
private _restart: HTMLSpanElement;
|
||||
|
||||
get name(): string { return this._container.querySelector("span.setting-label").textContent; }
|
||||
set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
|
||||
|
||||
get description(): string { return this._tooltip.querySelector("span.content").textContent; }
|
||||
set description(d: string) {
|
||||
const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
|
||||
content.textContent = d;
|
||||
if (d == "") {
|
||||
this._tooltip.classList.add("unfocused");
|
||||
} else {
|
||||
this._tooltip.classList.remove("unfocused");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export const openSettings = (settingsList: HTMLElement, settingsContent: HTMLElement, callback?: () => void): void => _get("/config", null, function (): void {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
settingsList.textContent = '';
|
||||
window.config = this.response;
|
||||
for (const i in window.config["order"]) {
|
||||
const section: string = window.config["order"][i]
|
||||
const sectionCollapse = document.createElement('div') as HTMLDivElement;
|
||||
Unfocus(sectionCollapse);
|
||||
sectionCollapse.id = section;
|
||||
get required(): boolean { return this._required.classList.contains("badge"); }
|
||||
set required(state: boolean) {
|
||||
if (state) {
|
||||
this._required.classList.add("badge", "~critical");
|
||||
this._required.textContent = "*";
|
||||
} else {
|
||||
this._required.classList.remove("badge", "~critical");
|
||||
this._required.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
|
||||
set requires_restart(state: boolean) {
|
||||
if (state) {
|
||||
this._restart.classList.add("badge", "~info");
|
||||
this._restart.textContent = "R";
|
||||
} else {
|
||||
this._restart.classList.remove("badge", "~info");
|
||||
this._restart.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
const title: string = window.config[section]["meta"]["name"];
|
||||
const description: string = window.config[section]["meta"]["description"];
|
||||
const entryListID: string = `${section}_entryList`;
|
||||
// const footerID: string = `${section}_footer`;
|
||||
|
||||
sectionCollapse.innerHTML = `
|
||||
<div class="card card-body">
|
||||
<small class="text-muted">${description}</small>
|
||||
<div class="${entryListID}">
|
||||
</div>
|
||||
constructor(inputType: string, setting: Setting, section: string, name: string) {
|
||||
this._container = document.createElement("div");
|
||||
this._container.classList.add("setting");
|
||||
this._container.innerHTML = `
|
||||
<label class="label">
|
||||
<span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
|
||||
<div class="setting-tooltip tooltip right unfocused">
|
||||
<i class="icon ri-information-line"></i>
|
||||
<span class="content sm"></span>
|
||||
</div>
|
||||
`;
|
||||
<input type="${inputType}" class="input ~neutral !normal mt-half">
|
||||
</label>
|
||||
`;
|
||||
this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
|
||||
this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
|
||||
this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
|
||||
this._input = this._container.querySelector("input[type=" + inputType + "]") as HTMLInputElement;
|
||||
if (setting.depends_false || setting.depends_true) {
|
||||
let dependant = setting.depends_true || setting.depends_false;
|
||||
let state = true;
|
||||
if (setting.depends_false) { state = false; }
|
||||
document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
|
||||
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);
|
||||
}
|
||||
|
||||
for (const x in config[section]["order"]) {
|
||||
const entry: string = config[section]["order"][x];
|
||||
if (entry == "meta") {
|
||||
continue;
|
||||
get value(): any { return this._input.value; }
|
||||
set value(v: any) { this._input.value = v; }
|
||||
|
||||
update = (s: Setting) => {
|
||||
this.name = s.name;
|
||||
this.description = s.description;
|
||||
this.required = s.required;
|
||||
this.requires_restart = s.requires_restart;
|
||||
this.value = s.value;
|
||||
}
|
||||
|
||||
asElement = (): HTMLDivElement => { return this._container; }
|
||||
}
|
||||
|
||||
interface SText extends Setting {
|
||||
value: string;
|
||||
}
|
||||
class DOMText extends DOMInput implements SText {
|
||||
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; }
|
||||
}
|
||||
|
||||
interface SPassword extends Setting {
|
||||
value: string;
|
||||
}
|
||||
class DOMPassword extends DOMInput implements SPassword {
|
||||
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; }
|
||||
}
|
||||
|
||||
interface SEmail extends Setting {
|
||||
value: string;
|
||||
}
|
||||
class DOMEmail extends DOMInput implements SEmail {
|
||||
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; }
|
||||
}
|
||||
|
||||
interface SNumber extends Setting {
|
||||
value: number;
|
||||
}
|
||||
class DOMNumber extends DOMInput implements SNumber {
|
||||
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; }
|
||||
}
|
||||
|
||||
interface SBool extends Setting {
|
||||
value: boolean;
|
||||
}
|
||||
class DOMBool implements SBool {
|
||||
protected _input: HTMLInputElement;
|
||||
private _container: HTMLDivElement;
|
||||
private _tooltip: HTMLDivElement;
|
||||
private _required: HTMLSpanElement;
|
||||
private _restart: HTMLSpanElement;
|
||||
type: string = "bool";
|
||||
|
||||
get name(): string { return this._container.querySelector("span.setting-label").textContent; }
|
||||
set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
|
||||
|
||||
get description(): string { return this._tooltip.querySelector("span.content").textContent; }
|
||||
set description(d: string) {
|
||||
const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
|
||||
content.textContent = d;
|
||||
if (d == "") {
|
||||
this._tooltip.classList.add("unfocused");
|
||||
} else {
|
||||
this._tooltip.classList.remove("unfocused");
|
||||
}
|
||||
}
|
||||
|
||||
get required(): boolean { return this._required.classList.contains("badge"); }
|
||||
set required(state: boolean) {
|
||||
if (state) {
|
||||
this._required.classList.add("badge", "~critical");
|
||||
this._required.textContent = "*";
|
||||
} else {
|
||||
this._required.classList.remove("badge", "~critical");
|
||||
this._required.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
|
||||
set requires_restart(state: boolean) {
|
||||
if (state) {
|
||||
this._restart.classList.add("badge", "~info");
|
||||
this._restart.textContent = "R";
|
||||
} else {
|
||||
this._restart.classList.remove("badge", "~info");
|
||||
this._restart.textContent = "";
|
||||
}
|
||||
}
|
||||
get value(): boolean { return this._input.checked; }
|
||||
set value(state: boolean) { this._input.checked = state; }
|
||||
constructor(setting: SBool, section: string, name: string) {
|
||||
this._container = document.createElement("div");
|
||||
this._container.classList.add("setting");
|
||||
this._container.innerHTML = `
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
|
||||
<div class="setting-tooltip tooltip right unfocused">
|
||||
<i class="icon ri-information-line"></i>
|
||||
<span class="content sm"></span>
|
||||
</div>
|
||||
</label>
|
||||
`;
|
||||
this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
|
||||
this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
|
||||
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.value })
|
||||
document.dispatchEvent(event);
|
||||
};
|
||||
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) {
|
||||
let dependant = setting.depends_true || setting.depends_false;
|
||||
let state = true;
|
||||
if (setting.depends_false) { state = false; }
|
||||
document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
|
||||
this._input.disabled = (event.detail !== state);
|
||||
});
|
||||
}
|
||||
this.update(setting);
|
||||
}
|
||||
update = (s: SBool) => {
|
||||
this.name = s.name;
|
||||
this.description = s.description;
|
||||
this.required = s.required;
|
||||
this.requires_restart = s.requires_restart;
|
||||
this.value = s.value;
|
||||
}
|
||||
|
||||
asElement = (): HTMLDivElement => { return this._container; }
|
||||
}
|
||||
|
||||
interface SSelect extends Setting {
|
||||
options: string[];
|
||||
value: string;
|
||||
}
|
||||
class DOMSelect implements SSelect {
|
||||
protected _select: HTMLSelectElement;
|
||||
private _container: HTMLDivElement;
|
||||
private _tooltip: HTMLDivElement;
|
||||
private _required: HTMLSpanElement;
|
||||
private _restart: HTMLSpanElement;
|
||||
private _options: string[];
|
||||
type: string = "bool";
|
||||
|
||||
get name(): string { return this._container.querySelector("span.setting-label").textContent; }
|
||||
set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
|
||||
|
||||
get description(): string { return this._tooltip.querySelector("span.content").textContent; }
|
||||
set description(d: string) {
|
||||
const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
|
||||
content.textContent = d;
|
||||
if (d == "") {
|
||||
this._tooltip.classList.add("unfocused");
|
||||
} else {
|
||||
this._tooltip.classList.remove("unfocused");
|
||||
}
|
||||
}
|
||||
|
||||
get required(): boolean { return this._required.classList.contains("badge"); }
|
||||
set required(state: boolean) {
|
||||
if (state) {
|
||||
this._required.classList.add("badge", "~critical");
|
||||
this._required.textContent = "*";
|
||||
} else {
|
||||
this._required.classList.remove("badge", "~critical");
|
||||
this._required.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
|
||||
set requires_restart(state: boolean) {
|
||||
if (state) {
|
||||
this._restart.classList.add("badge", "~info");
|
||||
this._restart.textContent = "R";
|
||||
} else {
|
||||
this._restart.classList.remove("badge", "~info");
|
||||
this._restart.textContent = "";
|
||||
}
|
||||
}
|
||||
get value(): string { return this._select.value; }
|
||||
set value(v: string) { this._select.value = v; }
|
||||
|
||||
get options(): string[] { return this._options; }
|
||||
set options(opt: string[]) {
|
||||
this._options = opt;
|
||||
let innerHTML = "";
|
||||
for (let option of this._options) {
|
||||
innerHTML += `<option value="${option}">${option}</option>`;
|
||||
}
|
||||
this._select.innerHTML = innerHTML;
|
||||
}
|
||||
|
||||
constructor(setting: SSelect, section: string, name: string) {
|
||||
this._options = [];
|
||||
this._container = document.createElement("div");
|
||||
this._container.classList.add("setting");
|
||||
this._container.innerHTML = `
|
||||
<label class="label">
|
||||
<span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
|
||||
<div class="setting-tooltip tooltip right unfocused">
|
||||
<i class="icon ri-information-line"></i>
|
||||
<span class="content sm"></span>
|
||||
</div>
|
||||
<div class="select ~neutral !normal mt-half">
|
||||
<select class="settings-select"></select>
|
||||
</div>
|
||||
</label>
|
||||
`;
|
||||
this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
|
||||
this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
|
||||
this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
|
||||
this._select = this._container.querySelector("select.settings-select") as HTMLSelectElement;
|
||||
if (setting.depends_false || setting.depends_true) {
|
||||
let dependant = setting.depends_true || setting.depends_false;
|
||||
let state = true;
|
||||
if (setting.depends_false) { state = false; }
|
||||
document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
|
||||
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) => {
|
||||
this.name = s.name;
|
||||
this.description = s.description;
|
||||
this.required = s.required;
|
||||
this.requires_restart = s.requires_restart;
|
||||
this.options = s.options;
|
||||
this.value = s.value;
|
||||
}
|
||||
|
||||
asElement = (): HTMLDivElement => { return this._container; }
|
||||
}
|
||||
|
||||
interface Section {
|
||||
meta: Meta;
|
||||
order: string[];
|
||||
settings: { [settingName: string]: Setting };
|
||||
}
|
||||
|
||||
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 = `
|
||||
<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) {
|
||||
let setting: Setting = s.settings[name];
|
||||
if (name in this._settings) {
|
||||
this._settings[name].update(setting);
|
||||
} else {
|
||||
switch (setting.type) {
|
||||
case "text":
|
||||
setting = new DOMText(setting, this._sectionName, name);
|
||||
break;
|
||||
case "password":
|
||||
setting = new DOMPassword(setting, this._sectionName, name);
|
||||
break;
|
||||
case "email":
|
||||
setting = new DOMEmail(setting, this._sectionName, name);
|
||||
break;
|
||||
case "number":
|
||||
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, name);
|
||||
break;
|
||||
}
|
||||
let entryName: string = window.config[section][entry]["name"];
|
||||
let required = false;
|
||||
if (window.config[section][entry]["required"]) {
|
||||
entryName += ` <sup class="text-danger">*</sup>`;
|
||||
required = true;
|
||||
}
|
||||
if (window.config[section][entry]["requires_restart"]) {
|
||||
entryName += ` <sup class="text-danger">R</sup>`;
|
||||
}
|
||||
if ("description" in window.config[section][entry]) {
|
||||
entryName +=`
|
||||
<a class="text-muted" href="#" data-toggle="tooltip" data-placement="right" title="${window.config[section][entry]['description']}"><i class="fa fa-question-circle-o"></i></a>
|
||||
`;
|
||||
}
|
||||
const entryValue: boolean | string = window.config[section][entry]["value"];
|
||||
const entryType: string = window.config[section][entry]["type"];
|
||||
const entryGroup = document.createElement('div');
|
||||
if (entryType == "bool") {
|
||||
entryGroup.classList.add("form-check");
|
||||
entryGroup.innerHTML = `
|
||||
<input class="form-check-input" type="checkbox" value="" id="${section}_${entry}" ${(entryValue as boolean) ? 'checked': ''} ${required ? 'required' : ''}>
|
||||
<label class="form-check-label" for="${section}_${entry}">${entryName}</label>
|
||||
`;
|
||||
(entryGroup.querySelector('input[type=checkbox]') as HTMLInputElement).onclick = function (): void {
|
||||
const me = this as HTMLInputElement;
|
||||
for (const y in window.config["order"]) {
|
||||
const sect: string = window.config["order"][y];
|
||||
for (const z in window.config[sect]["order"]) {
|
||||
const ent: string = window.config[sect]["order"][z];
|
||||
if (`${sect}_${window.config[sect][ent]['depends_true']}` == me.id) {
|
||||
(document.getElementById(`${sect}_${ent}`) as HTMLInputElement).disabled = !(me.checked);
|
||||
} else if (`${sect}_${window.config[sect][ent]['depends_false']}` == me.id) {
|
||||
(document.getElementById(`${sect}_${ent}`) as HTMLInputElement).disabled = me.checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
} else if ((entryType == 'text') || (entryType == 'email') || (entryType == 'password') || (entryType == 'number')) {
|
||||
entryGroup.classList.add("form-group");
|
||||
entryGroup.innerHTML = `
|
||||
<label for="${section}_${entry}">${entryName}</label>
|
||||
<input type="${entryType}" class="form-control" id="${section}_${entry}" aria-describedby="${entry}" value="${entryValue}" ${required ? 'required' : ''}>
|
||||
`;
|
||||
} else if (entryType == 'select') {
|
||||
entryGroup.classList.add("form-group");
|
||||
const entryOptions: Array<string> = window.config[section][entry]["options"];
|
||||
let innerGroup = `
|
||||
<label for="${section}_${entry}">${entryName}</label>
|
||||
<select class="form-control" id="${section}_${entry}" ${required ? 'required' : ''}>
|
||||
`;
|
||||
for (const z in entryOptions) {
|
||||
const entryOption = entryOptions[z];
|
||||
let selected: boolean = (entryOption == entryValue);
|
||||
innerGroup += `
|
||||
<option value="${entryOption}" ${selected ? 'selected' : ''}>${entryOption}</option>
|
||||
`;
|
||||
}
|
||||
innerGroup += `</select>`;
|
||||
entryGroup.innerHTML = innerGroup;
|
||||
}
|
||||
sectionCollapse.getElementsByClassName(entryListID)[0].appendChild(entryGroup);
|
||||
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;
|
||||
}
|
||||
|
||||
settingsList.innerHTML += `
|
||||
<button type="button" class="list-group-item list-group-item-action" id="${section}_button" onclick="showSetting('${section}')">${title}</button>
|
||||
`;
|
||||
settingsContent.appendChild(sectionCollapse);
|
||||
}
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
get visible(): boolean { return !this._section.classList.contains("unfocused"); }
|
||||
set visible(s: boolean) {
|
||||
if (s) {
|
||||
this._section.classList.remove("unfocused");
|
||||
} else {
|
||||
this._section.classList.add("unfocused");
|
||||
}
|
||||
}
|
||||
|
||||
export function showSetting(id: string, runBefore?: () => void): void {
|
||||
const els = document.getElementById('settingsLeft').querySelectorAll("button[type=button]:not(.static)") as NodeListOf<HTMLButtonElement>;
|
||||
for (let i = 0; i < els.length; i++) {
|
||||
const el = els[i];
|
||||
if (el.id != `${id}_button`) {
|
||||
rmAttr(el, "active");
|
||||
}
|
||||
const sectEl = document.getElementById(el.id.replace("_button", ""));
|
||||
if (sectEl.id != id) {
|
||||
Unfocus(sectEl);
|
||||
asElement = (): HTMLDivElement => { return this._section; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface Settings {
|
||||
order: string[];
|
||||
sections: { [sectionName: string]: Section };
|
||||
}
|
||||
|
||||
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);
|
||||
this._sections[name] = section;
|
||||
this._panel.appendChild(this._sections[name].asElement());
|
||||
const button = document.createElement("span") as HTMLSpanElement;
|
||||
button.classList.add("button", "~neutral", "!low", "settings-section-button", "mb-half");
|
||||
button.textContent = s.meta.name;
|
||||
button.onclick = () => { this._showPanel(name); };
|
||||
this._buttons[name] = button;
|
||||
this._sidebar.appendChild(this._buttons[name]);
|
||||
}
|
||||
|
||||
private _showPanel = (name: string) => {
|
||||
for (let n in this._sections) {
|
||||
if (n == name) {
|
||||
this._sections[name].visible = true;
|
||||
this._buttons[name].classList.add("selected");
|
||||
} else {
|
||||
this._sections[n].visible = false;
|
||||
this._buttons[n].classList.remove("selected");
|
||||
}
|
||||
}
|
||||
}
|
||||
addAttr(document.getElementById(`${id}_button`), "active");
|
||||
const section = document.getElementById(id);
|
||||
if (runBefore) {
|
||||
runBefore();
|
||||
|
||||
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);
|
||||
}
|
||||
Focus(section);
|
||||
if (screen.width <= 1100) {
|
||||
// ugly
|
||||
setTimeout((): void => section.scrollIntoView(<ScrollIntoViewOptions>{ block: "center", behavior: "smooth" }), 200);
|
||||
|
||||
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) => {
|
||||
if (req.readyState == 4) {
|
||||
if (req.status != 200) {
|
||||
window.notifications.customError("settingsLoadError", "Failed to load settings.");
|
||||
return;
|
||||
}
|
||||
let settings = req.response as Settings;
|
||||
for (let name of settings.order) {
|
||||
if (name in this._sections) {
|
||||
this._sections[name].update(settings.sections[name]);
|
||||
} else {
|
||||
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.")
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user