diff --git a/api.go b/api.go index 73a1e94..ffb7548 100644 --- a/api.go +++ b/api.go @@ -891,7 +891,7 @@ func (app *appContext) ModifyConfig(gc *gin.Context) { tempConfig.SaveTo(app.config_path) app.debug.Println("Config saved") gc.JSON(200, map[string]bool{"success": true}) - if req["restart-program"].(bool) { + if req["restart-program"] != nil && req["restart-program"].(bool) { app.info.Println("Restarting...") err := app.Restart() if err != nil { diff --git a/data/templates/admin.html b/data/templates/admin.html index f97d023..89c414a 100644 --- a/data/templates/admin.html +++ b/data/templates/admin.html @@ -88,40 +88,6 @@ - +
+
+
Settings
+
+ +
+
+
+
+
+
+
    +

    Note: * Indicates required field, R Indicates changes require a restart.

    + + + {{ if .ombiEnabled }} + + {{ end }} +
+
+
+
+
+
+
+
+
+
+
+

{{ .contactMessage }}

diff --git a/package-lock.json b/package-lock.json index fdd1e10..b374259 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1858,11 +1858,6 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" }, - "popper.js": { - "version": "1.16.1", - "resolved": "https://registry.npm.taobao.org/popper.js/download/popper.js-1.16.1.tgz", - "integrity": "sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs=" - }, "postcss": { "version": "7.0.32", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", diff --git a/scss/base.scss b/scss/base.scss index 365b1a9..b2fcf69 100644 --- a/scss/base.scss +++ b/scss/base.scss @@ -1,5 +1,10 @@ .pageContainer { - margin: 5% 20% 5% 20%; + margin: 5% 30% 5% 30%; +} +@media (max-width: 1900px) { + .pageContainer { + margin: 5% 20% 5% 20%; + } } @media (max-width: 1100px) { .pageContainer { diff --git a/ts/admin.ts b/ts/admin.ts index 1268826..0102297 100644 --- a/ts/admin.ts +++ b/ts/admin.ts @@ -35,38 +35,49 @@ const Focus = (el: HTMLElement): void => rmAttr(el, 'unfocused'); const Unfocus = (el: HTMLElement): void => addAttr(el, 'unfocused'); interface TabSwitcher { - invitesEl: HTMLDivElement; - accountsEl: HTMLDivElement; - invitesTabButton: HTMLAnchorElement; - accountsTabButton: HTMLAnchorElement; + els: Array; + tabButtons: Array; + focus: (el: number) => void; invites: () => void; accounts: () => void; + settings: () => void; } const tabs: TabSwitcher = { - invitesEl: document.getElementById('invitesTab') as HTMLDivElement, - accountsEl: document.getElementById('accountsTab') as HTMLDivElement, - invitesTabButton: document.getElementById('invitesTabButton') as HTMLAnchorElement, - accountsTabButton: document.getElementById('accountsTabButton') as HTMLAnchorElement, - invites: (): void => { - Unfocus(tabs.accountsEl); - Focus(tabs.invitesEl); - rmAttr(tabs.accountsTabButton, "active"); - addAttr(tabs.invitesTabButton, "active"); + els: [document.getElementById('invitesTab') as HTMLDivElement, document.getElementById('accountsTab') as HTMLDivElement, document.getElementById('settingsTab') as HTMLDivElement], + tabButtons: [document.getElementById('invitesTabButton') as HTMLAnchorElement, document.getElementById('accountsTabButton') as HTMLAnchorElement, document.getElementById('settingsTabButton') as HTMLAnchorElement], + focus: (el: number): void => { + for (let i = 0; i < tabs.els.length; i++) { + if (i == el) { + Focus(tabs.els[i]); + addAttr(tabs.tabButtons[i], "active"); + } else { + Unfocus(tabs.els[i]); + rmAttr(tabs.tabButtons[i], "active"); + } + } }, + invites: (): void => tabs.focus(0), accounts: (): void => { populateUsers(); (document.getElementById('selectAll') as HTMLInputElement).checked = false; checkCheckboxes(); - Unfocus(tabs.invitesEl); - Focus(tabs.accountsEl); - rmAttr(tabs.invitesTabButton, "active"); - addAttr(tabs.accountsTabButton, "active"); - } + tabs.focus(1); + }, + settings: (): void => openSettings(document.getElementById('settingsSections'), document.getElementById('settingsContent'), (): void => { + triggerTooltips(); + showSetting("ui"); + tabs.focus(2); + }) }; -tabs.invitesTabButton.onclick = tabs.invites; -tabs.accountsTabButton.onclick = tabs.accounts; +// for (let i = 0; i < tabs.els.length; i++) { +// tabs.tabButtons[i].onclick = (): void => tabs.focus(i); +// } +tabs.tabButtons[0].onclick = tabs.invites; +tabs.tabButtons[1].onclick = tabs.accounts; +tabs.tabButtons[2].onclick = tabs.settings; + tabs.invites(); @@ -90,7 +101,6 @@ if (buttonColor != "custom") { } var loginModal = createModal('login'); -var settingsModal = createModal('settingsMenu'); var userDefaultsModal = createModal('userDefaults'); var usersModal = createModal('users'); var restartModal = createModal('restartModal'); diff --git a/ts/bs4.ts b/ts/bs4.ts index 005e7af..61131e0 100644 --- a/ts/bs4.ts +++ b/ts/bs4.ts @@ -23,16 +23,14 @@ function createModal(id: string, find?: boolean): any { } function triggerTooltips(): void { - $("#settingsMenu").on("shown.bs.modal", (): void => { - const checkboxes = [].slice.call(document.getElementById('settingsMenu').querySelectorAll('input[type="checkbox"]')); - for (const i in checkboxes) { - checkboxes[i].click(); - checkboxes[i].click(); - } - const tooltips = [].slice.call(document.querySelectorAll('a[data-toggle="tooltip"]')); - tooltips.map((el: HTMLAnchorElement): any => { - return ($(el) as any).tooltip(); - }); + const checkboxes = [].slice.call(document.getElementById('settingsContent').querySelectorAll('input[type="checkbox"]')); + for (const i in checkboxes) { + checkboxes[i].click(); + checkboxes[i].click(); + } + const tooltips = [].slice.call(document.querySelectorAll('a[data-toggle="tooltip"]')); + tooltips.map((el: HTMLAnchorElement): any => { + return ($(el) as any).tooltip(); }); } diff --git a/ts/bs5.ts b/ts/bs5.ts index f83bb47..5dc69cd 100644 --- a/ts/bs5.ts +++ b/ts/bs5.ts @@ -21,16 +21,14 @@ function createModal(id: string, find?: boolean): any { } function triggerTooltips(): void { - (document.getElementById('settingsMenu') as HTMLButtonElement).addEventListener('shown.bs.modal', (): void => { - const checkboxes = [].slice.call(document.getElementById('settingsMenu').querySelectorAll('input[type="checkbox"]')); - for (const i in checkboxes) { - checkboxes[i].click(); - checkboxes[i].click(); - } - const tooltips = [].slice.call(document.querySelectorAll('a[data-toggle="tooltip"]')); - tooltips.map((el: HTMLAnchorElement): any => { - return new bootstrap.Tooltip(el); - }); + const checkboxes = [].slice.call(document.getElementById('settingsContent').querySelectorAll('input[type="checkbox"]')); + for (const i in checkboxes) { + checkboxes[i].click(); + checkboxes[i].click(); + } + const tooltips = [].slice.call(document.querySelectorAll('a[data-toggle="tooltip"]')); + tooltips.map((el: HTMLAnchorElement): any => { + return new bootstrap.Tooltip(el); }); } diff --git a/ts/ombi.ts b/ts/ombi.ts index 2217bf0..792de69 100644 --- a/ts/ombi.ts +++ b/ts/ombi.ts @@ -36,7 +36,6 @@ const ombiDefaultsModal = createModal('ombiDefaults'); addAttr(submitButton, "btn-primary"); rmAttr(submitButton, "btn-success"); rmAttr(submitButton, "btn-danger"); - settingsModal.hide(); ombiDefaultsModal.show(); } } @@ -46,7 +45,6 @@ const ombiDefaultsModal = createModal('ombiDefaults'); (document.getElementById('storeOmbiDefaults') as HTMLButtonElement).onclick = function (): void { let button = this as HTMLButtonElement; button.disabled = true; - const ogHTML = button.innerHTML; button.innerHTML = '' + 'Loading...'; diff --git a/ts/settings.ts b/ts/settings.ts index fae354a..1de7c40 100644 --- a/ts/settings.ts +++ b/ts/settings.ts @@ -1,15 +1,22 @@ var config: Object = {}; var modifiedConfig: Object = {}; -function sendConfig(modalID: string, restart?: boolean): void { +function sendConfig(restart?: boolean): void { modifiedConfig["restart-program"] = restart; _post("/modifyConfig", modifiedConfig, function (): void { if (this.readyState == 4) { + const save = document.getElementById("settingsSave") as HTMLButtonElement if (this.status == 200 || this.status == 204) { - createModal(modalID, true).hide(); - if (modalID != "settingsMenu") { - settingsModal.hide(); - } + save.textContent = "Success"; + addAttr(save, "btn-success"); + rmAttr(save, "btn-primary"); + setTimeout((): void => { + save.textContent = "Save"; + addAttr(save, "btn-primary"); + rmAttr(save, "btn-success"); + }, 1000); + } else { + save.textContent = "Save"; } if (restart) { refreshModal.show(); @@ -46,7 +53,6 @@ function sendConfig(modalID: string, restart?: boolean): void { document.getElementById('defaultsSourceSection').classList.add('unfocused'); (document.getElementById('storeDefaults') as HTMLButtonElement).onclick = (): void => storeDefaults('all'); Focus(document.getElementById('defaultUserRadios')); - settingsModal.hide(); userDefaultsModal.show(); } } @@ -54,19 +60,17 @@ function sendConfig(modalID: string, restart?: boolean): void { }; (document.getElementById('openAbout') as HTMLButtonElement).onclick = (): void => { - settingsModal.hide(); aboutModal.show(); }; -(document.getElementById('openSettings') as HTMLButtonElement).onclick = (): void => _get("/getConfig", null, function (): void { +const openSettings = (settingsList: HTMLElement, settingsContent: HTMLElement, callback?: () => void): void => _get("/getConfig", null, function (): void { if (this.readyState == 4 && this.status == 200) { - const settingsList = document.getElementById('settingsList'); settingsList.textContent = ''; config = this.response; for (const i in config["order"]) { const section: string = config["order"][i] const sectionCollapse = document.createElement('div') as HTMLDivElement; - addAttr(sectionCollapse, "collapse"); + Unfocus(sectionCollapse); sectionCollapse.id = section; const title: string = config[section]["meta"]["name"]; @@ -151,16 +155,42 @@ function sendConfig(modalID: string, restart?: boolean): void { } settingsList.innerHTML += ` - + `; - settingsList.appendChild(sectionCollapse); + settingsContent.appendChild(sectionCollapse); + } + if (callback) { + callback(); } - settingsModal.show(); } }); +function showSetting(id: string): void { + const els = document.getElementById('settingsSections').querySelectorAll("button[type=button]") as NodeListOf; + 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); + } + } + addAttr(document.getElementById(`${id}_button`), "active"); + const section = document.getElementById(id); + Focus(section); + if (screen.width <= 1100) { + // ugly + setTimeout((): void => section.scrollIntoView({ block: "center", behavior: "smooth" }), 200); + } +} + +// (document.getElementById('openSettings') as HTMLButtonElement).onclick = (): void => openSettings(document.getElementById('settingsList'), document.getElementById('settingsList'), (): void => settingsModal.show()); + (document.getElementById('settingsSave') as HTMLButtonElement).onclick = function (): void { modifiedConfig = {}; + const save = this as HTMLButtonElement; let restartSettingsChanged = false; let settingsChanged = false; for (const i in config["order"]) { @@ -178,7 +208,7 @@ function sendConfig(modalID: string, restart?: boolean): void { } else { val = el.value.toString(); } - if (val != config[section][entry]["value"]) { + if (val != config[section][entry]["value"].toString()) { if (!(section in modifiedConfig)) { modifiedConfig[section] = {}; } @@ -190,17 +220,23 @@ function sendConfig(modalID: string, restart?: boolean): void { } } } + const spinnerHTML = ` + + Loading...`; if (restartSettingsChanged) { - (document.getElementById('applyRestarts') as HTMLButtonElement).onclick = (): void => sendConfig("restartModal"); + save.innerHTML = spinnerHTML; + (document.getElementById('applyRestarts') as HTMLButtonElement).onclick = (): void => sendConfig(); const restartButton = document.getElementById('applyAndRestart') as HTMLButtonElement; if (restartButton) { - restartButton.onclick = (): void => sendConfig("restartModal", true); + restartButton.onclick = (): void => sendConfig(true); } - settingsModal.hide(); restartModal.show(); } else if (settingsChanged) { - sendConfig("settingsMenu"); - } else { - settingsModal.hide(); + save.innerHTML = spinnerHTML; + sendConfig(); } }; + +(document.getElementById('restartModalCancel') as HTMLButtonElement).onclick = (): void => { + document.getElementById('settingsSave').textContent = "Save"; +};