Move settings menu to a tab

settings is now its own tab instead of a modal.
pull/20/head
Harvey Tindall 4 years ago
parent b6ceee508c
commit 2ab9b48f4b
No known key found for this signature in database
GPG Key ID: BBC65952848FB1A2

@ -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">&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 @@
<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 @@
<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>

5
package-lock.json generated

@ -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 {

@ -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');

@ -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();
});
}

@ -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…
Cancel
Save