hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 17:10:10 +00:00
Code Issues Projects Releases Wiki Activity

Move settings menu to a tab

Browse Source 
settings is now its own tab instead of a modal.
This commit is contained in:
Harvey Tindall 2020-09-22 20:46:48 +01:00
parent b6ceee508c
commit 2ab9b48f4b
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
9 changed files with 150 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api.go
View File

@ -891,7 +891,7 @@ func (app *appContext) ModifyConfig(gc *gin.Context) {
tempConfig.SaveTo(app.config_path) tempConfig.SaveTo(app.config_path)
app.debug.Println("Config saved") app.debug.Println("Config saved")
gc.JSON(200, map[string]bool{"success": true}) 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...") app.info.Println("Restarting...")
err := app.Restart() err := app.Restart()
if err != nil { if err != nil {

75
data/templates/admin.html
View File

@ -88,40 +88,6 @@
</div> </div>
</div> </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 fade" id="users" role="dialog" aria-labelledby="users" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
@ -204,7 +170,7 @@
<p>A restart is needed to apply some settings. Restart now, later, or cancel?</p> <p>A restart is needed to apply some settings. Restart now, later, or cancel?</p>
</div> </div>
<div class="modal-footer"> <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-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> <button type="button" class="btn btn-primary" id="applyAndRestart" data-dismiss="modal">Apply &amp; Restart</button>
</div> </div>
@ -308,6 +274,9 @@
<li class="nav-item"> <li class="nav-item">
<h2><a id="accountsTabButton" class="nl nav-link">Accounts</a></h2> <h2><a id="accountsTabButton" class="nl nav-link">Accounts</a></h2>
</li> </li>
<li class="nav-item">
<h2><a id="settingsTabButton" class="nl nav-link">Settings</a></h2>
</li>
</ul> </ul>
<div class="btn-group" role="group" id="headerButtons"> <div class="btn-group" role="group" id="headerButtons">
<button type="button" class="btn btn-primary" id="openSettings"> <button type="button" class="btn btn-primary" id="openSettings">
@ -428,6 +397,42 @@
</div> </div>
</div> </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"> <div class="contactBox">
<p>{{ .contactMessage }}</p> <p>{{ .contactMessage }}</p>
</div> </div>

5
package-lock.json generated
View File

@ -1858,11 +1858,6 @@
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" "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": { "postcss": {
"version": "7.0.32", "version": "7.0.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",

5
scss/base.scss
View File

@ -1,5 +1,10 @@
.pageContainer { .pageContainer {
margin: 5% 30% 5% 30%;
}
@media (max-width: 1900px) {
.pageContainer {
margin: 5% 20% 5% 20%; margin: 5% 20% 5% 20%;
}
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
.pageContainer { .pageContainer {

52
ts/admin.ts
View File

@ -35,38 +35,49 @@ const Focus = (el: HTMLElement): void => rmAttr(el, 'unfocused');
const Unfocus = (el: HTMLElement): void => addAttr(el, 'unfocused'); const Unfocus = (el: HTMLElement): void => addAttr(el, 'unfocused');
interface TabSwitcher { interface TabSwitcher {
invitesEl: HTMLDivElement; els: Array<HTMLDivElement>;
accountsEl: HTMLDivElement; tabButtons: Array<HTMLAnchorElement>;
invitesTabButton: HTMLAnchorElement; focus: (el: number) => void;
accountsTabButton: HTMLAnchorElement;
invites: () => void; invites: () => void;
accounts: () => void; accounts: () => void;
settings: () => void;
} }
const tabs: TabSwitcher = { const tabs: TabSwitcher = {
invitesEl: document.getElementById('invitesTab') as HTMLDivElement, els: [document.getElementById('invitesTab') as HTMLDivElement, document.getElementById('accountsTab') as HTMLDivElement, document.getElementById('settingsTab') as HTMLDivElement],
accountsEl: document.getElementById('accountsTab') as HTMLDivElement, tabButtons: [document.getElementById('invitesTabButton') as HTMLAnchorElement, document.getElementById('accountsTabButton') as HTMLAnchorElement, document.getElementById('settingsTabButton') as HTMLAnchorElement],
invitesTabButton: document.getElementById('invitesTabButton') as HTMLAnchorElement, focus: (el: number): void => {
accountsTabButton: document.getElementById('accountsTabButton') as HTMLAnchorElement, for (let i = 0; i < tabs.els.length; i++) {
invites: (): void => { if (i == el) {
Unfocus(tabs.accountsEl); Focus(tabs.els[i]);
Focus(tabs.invitesEl); addAttr(tabs.tabButtons[i], "active");
rmAttr(tabs.accountsTabButton, "active"); } else {
addAttr(tabs.invitesTabButton, "active"); Unfocus(tabs.els[i]);
rmAttr(tabs.tabButtons[i], "active");
}
}
}, },
invites: (): void => tabs.focus(0),
accounts: (): void => { accounts: (): void => {
populateUsers(); populateUsers();
(document.getElementById('selectAll') as HTMLInputElement).checked = false; (document.getElementById('selectAll') as HTMLInputElement).checked = false;
checkCheckboxes(); checkCheckboxes();
Unfocus(tabs.invitesEl); tabs.focus(1);
Focus(tabs.accountsEl); },
rmAttr(tabs.invitesTabButton, "active"); settings: (): void => openSettings(document.getElementById('settingsSections'), document.getElementById('settingsContent'), (): void => {
addAttr(tabs.accountsTabButton, "active"); triggerTooltips();
} showSetting("ui");
tabs.focus(2);
})
}; };
tabs.invitesTabButton.onclick = tabs.invites; // for (let i = 0; i < tabs.els.length; i++) {
tabs.accountsTabButton.onclick = tabs.accounts; // 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(); tabs.invites();
@ -90,7 +101,6 @@ if (buttonColor != "custom") {
} }
var loginModal = createModal('login'); var loginModal = createModal('login');
var settingsModal = createModal('settingsMenu');
var userDefaultsModal = createModal('userDefaults'); var userDefaultsModal = createModal('userDefaults');
var usersModal = createModal('users'); var usersModal = createModal('users');
var restartModal = createModal('restartModal'); var restartModal = createModal('restartModal');

4
ts/bs4.ts
View File

@ -23,8 +23,7 @@ function createModal(id: string, find?: boolean): any {
} }
function triggerTooltips(): void { function triggerTooltips(): void {
$("#settingsMenu").on("shown.bs.modal", (): void => { const checkboxes = [].slice.call(document.getElementById('settingsContent').querySelectorAll('input[type="checkbox"]'));
const checkboxes = [].slice.call(document.getElementById('settingsMenu').querySelectorAll('input[type="checkbox"]'));
for (const i in checkboxes) { for (const i in checkboxes) {
checkboxes[i].click(); checkboxes[i].click();
checkboxes[i].click(); checkboxes[i].click();
@ -33,6 +32,5 @@ function triggerTooltips(): void {
tooltips.map((el: HTMLAnchorElement): any => { tooltips.map((el: HTMLAnchorElement): any => {
return ($(el) as any).tooltip(); return ($(el) as any).tooltip();
}); });
});
} }

4
ts/bs5.ts
View File

@ -21,8 +21,7 @@ function createModal(id: string, find?: boolean): any {
} }
function triggerTooltips(): void { function triggerTooltips(): void {
(document.getElementById('settingsMenu') as HTMLButtonElement).addEventListener('shown.bs.modal', (): void => { const checkboxes = [].slice.call(document.getElementById('settingsContent').querySelectorAll('input[type="checkbox"]'));
const checkboxes = [].slice.call(document.getElementById('settingsMenu').querySelectorAll('input[type="checkbox"]'));
for (const i in checkboxes) { for (const i in checkboxes) {
checkboxes[i].click(); checkboxes[i].click();
checkboxes[i].click(); checkboxes[i].click();
@ -31,6 +30,5 @@ function triggerTooltips(): void {
tooltips.map((el: HTMLAnchorElement): any => { tooltips.map((el: HTMLAnchorElement): any => {
return new bootstrap.Tooltip(el); return new bootstrap.Tooltip(el);
}); });
});
} }

2
ts/ombi.ts
View File

@ -36,7 +36,6 @@ const ombiDefaultsModal = createModal('ombiDefaults');
addAttr(submitButton, "btn-primary"); addAttr(submitButton, "btn-primary");
rmAttr(submitButton, "btn-success"); rmAttr(submitButton, "btn-success");
rmAttr(submitButton, "btn-danger"); rmAttr(submitButton, "btn-danger");
settingsModal.hide();
ombiDefaultsModal.show(); ombiDefaultsModal.show();
} }
} }
@ -46,7 +45,6 @@ const ombiDefaultsModal = createModal('ombiDefaults');
(document.getElementById('storeOmbiDefaults') as HTMLButtonElement).onclick = function (): void { (document.getElementById('storeOmbiDefaults') as HTMLButtonElement).onclick = function (): void {
let button = this as HTMLButtonElement; let button = this as HTMLButtonElement;
button.disabled = true; button.disabled = true;
const ogHTML = button.innerHTML;
button.innerHTML = button.innerHTML =
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' + '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
'Loading...'; 'Loading...';

76
ts/settings.ts
View File

@ -1,15 +1,22 @@
var config: Object = {}; var config: Object = {};
var modifiedConfig: Object = {}; var modifiedConfig: Object = {};
function sendConfig(modalID: string, restart?: boolean): void { function sendConfig(restart?: boolean): void {
modifiedConfig["restart-program"] = restart; modifiedConfig["restart-program"] = restart;
_post("/modifyConfig", modifiedConfig, function (): void { _post("/modifyConfig", modifiedConfig, function (): void {
if (this.readyState == 4) { if (this.readyState == 4) {
const save = document.getElementById("settingsSave") as HTMLButtonElement
if (this.status == 200 || this.status == 204) { if (this.status == 200 || this.status == 204) {
createModal(modalID, true).hide(); save.textContent = "Success";
if (modalID != "settingsMenu") { addAttr(save, "btn-success");
settingsModal.hide(); rmAttr(save, "btn-primary");
} setTimeout((): void => {
save.textContent = "Save";
addAttr(save, "btn-primary");
rmAttr(save, "btn-success");
}, 1000);
} else {
save.textContent = "Save";
} }
if (restart) { if (restart) {
refreshModal.show(); refreshModal.show();
@ -46,7 +53,6 @@ function sendConfig(modalID: string, restart?: boolean): void {
document.getElementById('defaultsSourceSection').classList.add('unfocused'); document.getElementById('defaultsSourceSection').classList.add('unfocused');
(document.getElementById('storeDefaults') as HTMLButtonElement).onclick = (): void => storeDefaults('all'); (document.getElementById('storeDefaults') as HTMLButtonElement).onclick = (): void => storeDefaults('all');
Focus(document.getElementById('defaultUserRadios')); Focus(document.getElementById('defaultUserRadios'));
settingsModal.hide();
userDefaultsModal.show(); userDefaultsModal.show();
} }
} }
@ -54,19 +60,17 @@ function sendConfig(modalID: string, restart?: boolean): void {
}; };
(document.getElementById('openAbout') as HTMLButtonElement).onclick = (): void => { (document.getElementById('openAbout') as HTMLButtonElement).onclick = (): void => {
settingsModal.hide();
aboutModal.show(); 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) { if (this.readyState == 4 && this.status == 200) {
const settingsList = document.getElementById('settingsList');
settingsList.textContent = ''; settingsList.textContent = '';
config = this.response; config = this.response;
for (const i in config["order"]) { for (const i in config["order"]) {
const section: string = config["order"][i] const section: string = config["order"][i]
const sectionCollapse = document.createElement('div') as HTMLDivElement; const sectionCollapse = document.createElement('div') as HTMLDivElement;
addAttr(sectionCollapse, "collapse"); Unfocus(sectionCollapse);
sectionCollapse.id = section; sectionCollapse.id = section;
const title: string = config[section]["meta"]["name"]; const title: string = config[section]["meta"]["name"];
@ -151,16 +155,42 @@ function sendConfig(modalID: string, restart?: boolean): void {
} }
settingsList.innerHTML += ` settingsList.innerHTML += `
<button type="button" class="list-group-item list-group-item-action" id="${section}_button" data-toggle="collapse" data-target="#${section}">${title}</button> <button type="button" class="list-group-item list-group-item-action" id="${section}_button" onclick="showSetting('${section}')">${title}</button>
`; `;
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<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);
}
}
addAttr(document.getElementById(`${id}_button`), "active");
const section = document.getElementById(id);
Focus(section);
if (screen.width <= 1100) {
// ugly
setTimeout((): void => section.scrollIntoView(<ScrollIntoViewOptions>{ 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 { (document.getElementById('settingsSave') as HTMLButtonElement).onclick = function (): void {
modifiedConfig = {}; modifiedConfig = {};
const save = this as HTMLButtonElement;
let restartSettingsChanged = false; let restartSettingsChanged = false;
let settingsChanged = false; let settingsChanged = false;
for (const i in config["order"]) { for (const i in config["order"]) {
@ -178,7 +208,7 @@ function sendConfig(modalID: string, restart?: boolean): void {
} else { } else {
val = el.value.toString(); val = el.value.toString();
} }
if (val != config[section][entry]["value"]) { if (val != config[section][entry]["value"].toString()) {
if (!(section in modifiedConfig)) { if (!(section in modifiedConfig)) {
modifiedConfig[section] = {}; modifiedConfig[section] = {};
} }
@ -190,17 +220,23 @@ function sendConfig(modalID: string, restart?: boolean): void {
} }
} }
} }
const spinnerHTML = `
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>
Loading...`;
if (restartSettingsChanged) { 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; const restartButton = document.getElementById('applyAndRestart') as HTMLButtonElement;
if (restartButton) { if (restartButton) {
restartButton.onclick = (): void => sendConfig("restartModal", true); restartButton.onclick = (): void => sendConfig(true);
} }
settingsModal.hide();
restartModal.show(); restartModal.show();
} else if (settingsChanged) { } else if (settingsChanged) {
sendConfig("settingsMenu"); save.innerHTML = spinnerHTML;
} else { sendConfig();
settingsModal.hide();
} }
}; };
(document.getElementById('restartModalCancel') as HTMLButtonElement).onclick = (): void => {
document.getElementById('settingsSave').textContent = "Save";
};