mirror of https://github.com/hrfee/jfa-go.git
Move settings menu to a tab
settings is now its own tab instead of a modal.
This commit is contained in:
parent
b6ceee508c
commit
2ab9b48f4b
GPG Key ID:
BBC65952848FB1A2
2
api.go
2
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 {
|
||||
|
|
|
|||
|
|
@ -88,40 +88,6 @@
|
|||
</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">×</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 @@
|
|||
<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 & Restart</button>
|
||||
</div>
|
||||
|
|
@ -308,6 +274,9 @@
|
|||
<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 @@
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
52
ts/admin.ts
52
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');
|
||||
|
|
|
|||
18
ts/bs4.ts
18
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();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
18
ts/bs5.ts
18
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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...';
|
||||
|
|
|
|||
|
|
@ -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 += `
|
||||
<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 {
|
||||
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 = `
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>
|
||||
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";
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
