mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-11-14 14:20:11 +00:00
243 lines
12 KiB
TypeScript
243 lines
12 KiB
TypeScript
var config: Object = {};
|
|
var modifiedConfig: Object = {};
|
|
|
|
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) {
|
|
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();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
(document.getElementById('openDefaultsWizard') as HTMLButtonElement).onclick = function (): void {
|
|
const 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...`;
|
|
_get("/getUsers", null, function (): void {
|
|
if (this.readyState == 4) {
|
|
if (this.status == 200) {
|
|
jfUsers = this.response['users'];
|
|
populateRadios();
|
|
button.disabled = false;
|
|
button.innerHTML = ogHTML;
|
|
const submitButton = document.getElementById('storeDefaults') as HTMLButtonElement;
|
|
submitButton.disabled = false;
|
|
submitButton.textContent = 'Submit';
|
|
addAttr(submitButton, "btn-primary");
|
|
rmAttr(submitButton, "btn-danger");
|
|
rmAttr(submitButton, "btn-success");
|
|
document.getElementById('defaultsTitle').textContent = `New user defaults`;
|
|
document.getElementById('userDefaultsDescription').textContent = `
|
|
Create an account and configure it to your liking, then choose it from below to store the settings as a template for all new users.`;
|
|
document.getElementById('storeHomescreenLabel').textContent = `Store homescreen layout`;
|
|
(document.getElementById('defaultsSource') as HTMLSelectElement).value = 'fromUser';
|
|
document.getElementById('defaultsSourceSection').classList.add('unfocused');
|
|
(document.getElementById('storeDefaults') as HTMLButtonElement).onclick = (): void => storeDefaults('all');
|
|
Focus(document.getElementById('defaultUserRadios'));
|
|
userDefaultsModal.show();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
(document.getElementById('openAbout') as HTMLButtonElement).onclick = (): void => {
|
|
aboutModal.show();
|
|
};
|
|
|
|
const openSettings = (settingsList: HTMLElement, settingsContent: HTMLElement, callback?: () => void): void => _get("/getConfig", null, function (): void {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
settingsList.textContent = '';
|
|
config = this.response;
|
|
for (const i in config["order"]) {
|
|
const section: string = config["order"][i]
|
|
const sectionCollapse = document.createElement('div') as HTMLDivElement;
|
|
Unfocus(sectionCollapse);
|
|
sectionCollapse.id = section;
|
|
|
|
const title: string = config[section]["meta"]["name"];
|
|
const description: string = config[section]["meta"]["description"];
|
|
const entryListID: string = `${section}_entryList`;
|
|
// const footerID: string = `${section}_footer`;
|
|
|
|
sectionCollapse.innerHTML = `
|
|
<div class="card card-body">
|
|
<small class="text-muted">${description}</small>
|
|
<div class="${entryListID}">
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
for (const x in config[section]["order"]) {
|
|
const entry: string = config[section]["order"][x];
|
|
if (entry == "meta") {
|
|
continue;
|
|
}
|
|
let entryName: string = config[section][entry]["name"];
|
|
let required = false;
|
|
if (config[section][entry]["required"]) {
|
|
entryName += ` <sup class="text-danger">*</sup>`;
|
|
required = true;
|
|
}
|
|
if (config[section][entry]["requires_restart"]) {
|
|
entryName += ` <sup class="text-danger">R</sup>`;
|
|
}
|
|
if ("description" in config[section][entry]) {
|
|
entryName +=`
|
|
<a class="text-muted" href="#" data-toggle="tooltip" data-placement="right" title="${config[section][entry]['description']}"><i class="fa fa-question-circle-o"></i></a>
|
|
`;
|
|
}
|
|
const entryValue: boolean | string = config[section][entry]["value"];
|
|
const entryType: string = config[section][entry]["type"];
|
|
const entryGroup = document.createElement('div');
|
|
if (entryType == "bool") {
|
|
entryGroup.classList.add("form-check");
|
|
entryGroup.innerHTML = `
|
|
<input class="form-check-input" type="checkbox" value="" id="${section}_${entry}" ${(entryValue as boolean) ? 'checked': ''} ${required ? 'required' : ''}>
|
|
<label class="form-check-label" for="${section}_${entry}">${entryName}</label>
|
|
`;
|
|
(entryGroup.querySelector('input[type=checkbox]') as HTMLInputElement).onclick = function (): void {
|
|
const me = this as HTMLInputElement;
|
|
for (const y in config["order"]) {
|
|
const sect: string = config["order"][y];
|
|
for (const z in config[sect]["order"]) {
|
|
const ent: string = config[sect]["order"][z];
|
|
if (`${sect}_${config[sect][ent]['depends_true']}` == me.id) {
|
|
(document.getElementById(`${sect}_${ent}`) as HTMLInputElement).disabled = !(me.checked);
|
|
} else if (`${sect}_${config[sect][ent]['depends_false']}` == me.id) {
|
|
(document.getElementById(`${sect}_${ent}`) as HTMLInputElement).disabled = me.checked;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
} else if ((entryType == 'text') || (entryType == 'email') || (entryType == 'password') || (entryType == 'number')) {
|
|
entryGroup.classList.add("form-group");
|
|
entryGroup.innerHTML = `
|
|
<label for="${section}_${entry}">${entryName}</label>
|
|
<input type="${entryType}" class="form-control" id="${section}_${entry}" aria-describedby="${entry}" value="${entryValue}" ${required ? 'required' : ''}>
|
|
`;
|
|
} else if (entryType == 'select') {
|
|
entryGroup.classList.add("form-group");
|
|
const entryOptions: Array<string> = config[section][entry]["options"];
|
|
let innerGroup = `
|
|
<label for="${section}_${entry}">${entryName}</label>
|
|
<select class="form-control" id="${section}_${entry}" ${required ? 'required' : ''}>
|
|
`;
|
|
for (const z in entryOptions) {
|
|
const entryOption = entryOptions[z];
|
|
let selected: boolean = (entryOption == entryValue);
|
|
innerGroup += `
|
|
<option value="${entryOption}" ${selected ? 'selected' : ''}>${entryOption}</option>
|
|
`;
|
|
}
|
|
innerGroup += `</select>`;
|
|
entryGroup.innerHTML = innerGroup;
|
|
}
|
|
sectionCollapse.getElementsByClassName(entryListID)[0].appendChild(entryGroup);
|
|
}
|
|
|
|
settingsList.innerHTML += `
|
|
<button type="button" class="list-group-item list-group-item-action" id="${section}_button" onclick="showSetting('${section}')">${title}</button>
|
|
`;
|
|
settingsContent.appendChild(sectionCollapse);
|
|
}
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
});
|
|
|
|
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"]) {
|
|
const section = config["order"][i];
|
|
for (const x in config[section]["order"]) {
|
|
const entry = config[section]["order"][x];
|
|
if (entry == "meta") {
|
|
continue;
|
|
}
|
|
let val: string;
|
|
const entryID = `${section}_${entry}`;
|
|
const el = document.getElementById(entryID) as HTMLInputElement;
|
|
if (el.type == "checkbox") {
|
|
val = el.checked.toString();
|
|
} else {
|
|
val = el.value.toString();
|
|
}
|
|
if (val != config[section][entry]["value"].toString()) {
|
|
if (!(section in modifiedConfig)) {
|
|
modifiedConfig[section] = {};
|
|
}
|
|
modifiedConfig[section][entry] = val;
|
|
settingsChanged = true;
|
|
if (config[section][entry]["requires_restart"]) {
|
|
restartSettingsChanged = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const spinnerHTML = `
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>
|
|
Loading...`;
|
|
if (restartSettingsChanged) {
|
|
save.innerHTML = spinnerHTML;
|
|
(document.getElementById('applyRestarts') as HTMLButtonElement).onclick = (): void => sendConfig();
|
|
const restartButton = document.getElementById('applyAndRestart') as HTMLButtonElement;
|
|
if (restartButton) {
|
|
restartButton.onclick = (): void => sendConfig(true);
|
|
}
|
|
restartModal.show();
|
|
} else if (settingsChanged) {
|
|
save.innerHTML = spinnerHTML;
|
|
sendConfig();
|
|
}
|
|
};
|
|
|
|
(document.getElementById('restartModalCancel') as HTMLButtonElement).onclick = (): void => {
|
|
document.getElementById('settingsSave').textContent = "Save";
|
|
};
|