Move settings menu to a tab

settings is now its own tab instead of a modal.
hrfee · Sep 22, 2020 · 2ab9b48 · 2ab9b48
1 parent b6ceee5
commit 2ab9b48
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 105 deletions.
diff --git 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
@@ -88,40 +88,6 @@ <h5 class="modal-title" id="loginTitle">Login</h5>
                 </div>
             </div>
         </div>
-        <div class="modal fade" id="settingsMenu" role="dialog" aria-labelledby="settings menu" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="settingsTitle">Settings</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        <ul class="list-group list-group-flush" style="margin-bottom: 1rem;">
-                            <p>Note: <sup class="text-danger">*</sup> Indicates required field, <sup class="text-danger">R</sup> Indicates changes require a restart.</p>
-                            <button type="button" class="list-group-item list-group-item-action" id="openAbout">
-                            About <i class="fa fa-info-circle settingIcon"></i>
-                            </button>
-                            <button type="button" class="list-group-item list-group-item-action" id="openDefaultsWizard">
-                                New User Defaults <i class="fa fa-user settingIcon"></i>
-                            </button>
-                            {{ if .ombiEnabled }}
-                            <button type="button" class="list-group-item list-group-item-action" id="openOmbiDefaults">
-                                Ombi User Defaults <i class="fa fa-chain-broken settingIcon"></i>
-                            </button>
-                            {{ end }}
-                        </ul>
-                        <div class="list-group list-group-flush" id="settingsList">
-                        </div>
-                    </div>
-                    <div class="modal-footer" id="settingsFooter">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <button type="button" class="btn btn-primary" id="settingsSave">Save</button>
-                    </div>
-                </div>
-            </div>
-        </div>
         <div class="modal fade" id="users" role="dialog" aria-labelledby="users" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered" role="document">
                 <div class="modal-content">
@@ -204,7 +170,7 @@ <h5 class="modal-title">Warning</h5>
                         <p>A restart is needed to apply some settings. Restart now, later, or cancel?</p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-light" data-dismiss="modal" id="restartModalCancel">Cancel</button>
                         <button type="button" class="btn btn-secondary" id="applyRestarts" data-dismiss="modal">Apply, Restart later</button>
                         <button type="button" class="btn btn-primary" id="applyAndRestart" data-dismiss="modal">Apply &amp; Restart</button>
                     </div>
@@ -308,6 +274,9 @@ <h2><a id="invitesTabButton" class="nl nav-link active">Invites</a></h2>
                 <li class="nav-item">
                     <h2><a id="accountsTabButton" class="nl nav-link">Accounts</a></h2>
                 </li>
+                <li class="nav-item">
+                    <h2><a id="settingsTabButton" class="nl nav-link">Settings</a></h2>
+                </li>
             </ul>
             <div class="btn-group" role="group" id="headerButtons">
                 <button type="button" class="btn btn-primary" id="openSettings">
@@ -428,6 +397,42 @@ <h2><a id="accountsTabButton" class="nl nav-link">Accounts</a></h2>
                     </div>
                 </div>
             </div>
+            <div id="settingsTab" class="unfocused mb-3 tabGroup card">
+                <div class="card-header d-flex" style="align-items: center;">
+                    <div>Settings</div>
+                    <div class="ml-auto">
+                        <button type="button" class="btn btn-primary" id="settingsSave">Save</button>
+                    </div>
+                </div>
+                <div class="container card-body">
+                    <div class="row">
+                        <div class="col-sm">
+                            <div class="" id="settingsLeft">
+                                <ul class="list-group list-group-flush" style="margin-bottom: 1rem;">
+                                    <p>Note: <sup class="text-danger">*</sup> Indicates required field, <sup class="text-danger">R</sup> Indicates changes require a restart.</p>
+                                    <button type="button" class="list-group-item list-group-item-action" id="openAbout">
+                                    About <i class="fa fa-info-circle settingIcon"></i>
+                                    </button>
+                                    <button type="button" class="list-group-item list-group-item-action" id="openDefaultsWizard">
+                                        New User Defaults <i class="fa fa-user settingIcon"></i>
+                                    </button>
+                                    {{ if .ombiEnabled }}
+                                    <button type="button" class="list-group-item list-group-item-action" id="openOmbiDefaults">
+                                        Ombi User Defaults <i class="fa fa-chain-broken settingIcon"></i>
+                                    </button>
+                                    {{ end }}
+                                </ul>
+                                <div class="list-group list-group-flush" id="settingsSections">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="" id="settingsContent">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="contactBox">
                 <p>{{ .contactMessage }}</p>
             </div>

diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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<HTMLDivElement>;
+    tabButtons: Array<HTMLAnchorElement>;
+    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
@@ -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
@@ -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
@@ -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 =
         '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
         'Loading...';