mirror of https://github.com/hrfee/jfa-go
i wanted to split up the web ui components into multiple files, and figured it'd be a good chance to try out typescript. run make typescript to compile everything in ts/ and put it in data/static/. This is less of a rewrite and more of a refactoring, most of it still works the same but bits have been cleaned up too. Remaining javascript found in setup.js and form.htmlpull/20/head
Harvey Tindall
4 years ago
parent
73886fc037
commit
32b8ed4aa2
@ -1,356 +0,0 @@
|
|||||||
document.getElementById('selectAll').onclick = function() {
|
|
||||||
const checkboxes = document.getElementById('accountsList').querySelectorAll('input[type=checkbox]');
|
|
||||||
for (check of checkboxes) {
|
|
||||||
check.checked = this.checked;
|
|
||||||
}
|
|
||||||
checkCheckboxes();
|
|
||||||
};
|
|
||||||
|
|
||||||
function checkCheckboxes() {
|
|
||||||
const defaultsButton = document.getElementById('accountsTabSetDefaults');
|
|
||||||
const deleteButton = document.getElementById('accountsTabDelete');
|
|
||||||
const checkboxes = document.getElementById('accountsList').querySelectorAll('input[type=checkbox]');
|
|
||||||
let checked = 0;
|
|
||||||
for (check of checkboxes) {
|
|
||||||
if (check.checked) {
|
|
||||||
checked++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (checked == 0) {
|
|
||||||
defaultsButton.classList.add('unfocused');
|
|
||||||
deleteButton.classList.add('unfocused');
|
|
||||||
} else {
|
|
||||||
if (defaultsButton.classList.contains('unfocused')) {
|
|
||||||
defaultsButton.classList.remove('unfocused');
|
|
||||||
}
|
|
||||||
if (deleteButton.classList.contains('unfocused')) {
|
|
||||||
deleteButton.classList.remove('unfocused');
|
|
||||||
}
|
|
||||||
if (checked == 1) {
|
|
||||||
deleteButton.textContent = 'Delete User';
|
|
||||||
} else {
|
|
||||||
deleteButton.textContent = 'Delete Users';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('deleteModalNotify').onclick = function() {
|
|
||||||
const textbox = document.getElementById('deleteModalReasonBox');
|
|
||||||
if (this.checked && textbox.classList.contains('unfocused')) {
|
|
||||||
textbox.classList.remove('unfocused');
|
|
||||||
} else if (!this.checked) {
|
|
||||||
textbox.classList.add('unfocused');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById('accountsTabDelete').onclick = function() {
|
|
||||||
const deleteButton = this;
|
|
||||||
let selected = [];
|
|
||||||
const checkboxes = document.getElementById('accountsList').querySelectorAll('input[type=checkbox]');
|
|
||||||
for (check of checkboxes) {
|
|
||||||
if (check.checked) {
|
|
||||||
selected.push(check.id.replace('select_', ''));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let title = " user";
|
|
||||||
let msg = "Notify user";
|
|
||||||
if (selected.length > 1) {
|
|
||||||
title += "s";
|
|
||||||
msg += "s";
|
|
||||||
}
|
|
||||||
title = "Delete " + selected.length + title;
|
|
||||||
msg += " of account deletion";
|
|
||||||
document.getElementById('deleteModalTitle').textContent = title;
|
|
||||||
document.getElementById('deleteModalNotify').checked = false;
|
|
||||||
document.getElementById('deleteModalNotifyLabel').textContent = msg;
|
|
||||||
document.getElementById('deleteModalReason').value = '';
|
|
||||||
document.getElementById('deleteModalReasonBox').classList.add('unfocused');
|
|
||||||
document.getElementById('deleteModalSend').textContent = 'Delete';
|
|
||||||
|
|
||||||
document.getElementById('deleteModalSend').onclick = function() {
|
|
||||||
const button = this;
|
|
||||||
const send = {
|
|
||||||
'users': selected,
|
|
||||||
'notify': document.getElementById('deleteModalNotify').checked,
|
|
||||||
'reason': document.getElementById('deleteModalReason').value
|
|
||||||
};
|
|
||||||
let req = new XMLHttpRequest();
|
|
||||||
req.open("POST", "/deleteUser", true);
|
|
||||||
req.responseType = 'json';
|
|
||||||
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
|
|
||||||
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
|
||||||
req.onreadystatechange = function() {
|
|
||||||
if (this.readyState == 4) {
|
|
||||||
if (this.status == 500) {
|
|
||||||
if ("error" in req.response) {
|
|
||||||
button.textContent = 'Failed';
|
|
||||||
} else {
|
|
||||||
button.textContent = 'Partial fail (check console)';
|
|
||||||
console.log(req.response);
|
|
||||||
}
|
|
||||||
setTimeout(function() {
|
|
||||||
deleteModal.hide();
|
|
||||||
deleteButton.classList.add('unfocused');
|
|
||||||
}, 4000);
|
|
||||||
} else {
|
|
||||||
deleteButton.classList.add('unfocused');
|
|
||||||
deleteModal.hide();
|
|
||||||
}
|
|
||||||
populateUsers();
|
|
||||||
checkCheckboxes();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
req.send(JSON.stringify(send));
|
|
||||||
};
|
|
||||||
deleteModal.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
var jfUsers = [];
|
|
||||||
|
|
||||||
function validEmail(email) {
|
|
||||||
const re = /\S+@\S+\.\S+/;
|
|
||||||
return re.test(email);
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeEmail(icon, id) {
|
|
||||||
const iconContent = icon.outerHTML;
|
|
||||||
icon.setAttribute("class", "");
|
|
||||||
const entry = icon.nextElementSibling;
|
|
||||||
const ogEmail = entry.value;
|
|
||||||
entry.readOnly = false;
|
|
||||||
entry.classList.remove('form-control-plaintext');
|
|
||||||
entry.classList.add('form-control');
|
|
||||||
if (entry.value == "") {
|
|
||||||
entry.placeholder = 'Address';
|
|
||||||
}
|
|
||||||
const tick = document.createElement('i');
|
|
||||||
tick.classList.add("fa", "fa-check", "d-inline-block", "icon-button", "text-success");
|
|
||||||
tick.setAttribute('style', 'margin-left: 0.5rem; margin-right: 0.5rem;');
|
|
||||||
tick.onclick = function() {
|
|
||||||
const newEmail = entry.value;
|
|
||||||
if (!validEmail(newEmail) || newEmail == ogEmail) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
cross.remove();
|
|
||||||
this.outerHTML = `
|
|
||||||
<div class="spinner-border spinner-border-sm" role="status" style="width: 1rem; height: 1rem; margin-left: 0.5rem;">
|
|
||||||
<span class="sr-only">Saving...</span>
|
|
||||||
</div>`;
|
|
||||||
//this.remove();
|
|
||||||
let send = {};
|
|
||||||
send[id] = newEmail;
|
|
||||||
let req = new XMLHttpRequest();
|
|
||||||
req.open("POST", "/modifyEmails", true);
|
|
||||||
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
|
|
||||||
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
|
||||||
req.onreadystatechange = function() {
|
|
||||||
if (this.readyState == 4) {
|
|
||||||
if (this.status == 200 || this.status == 204) {
|
|
||||||
entry.nextElementSibling.remove();
|
|
||||||
} else {
|
|
||||||
entry.value = ogEmail;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
req.send(JSON.stringify(send));
|
|
||||||
icon.outerHTML = iconContent;
|
|
||||||
entry.readOnly = true;
|
|
||||||
entry.classList.remove('form-control');
|
|
||||||
entry.classList.add('form-control-plaintext');
|
|
||||||
entry.placeholder = '';
|
|
||||||
};
|
|
||||||
const cross = document.createElement('i');
|
|
||||||
cross.classList.add("fa", "fa-close", "d-inline-block", "icon-button", "text-danger");
|
|
||||||
cross.onclick = function() {
|
|
||||||
tick.remove();
|
|
||||||
this.remove();
|
|
||||||
icon.outerHTML = iconContent;
|
|
||||||
entry.readOnly = true;
|
|
||||||
entry.classList.remove('form-control');
|
|
||||||
entry.classList.add('form-control-plaintext');
|
|
||||||
entry.placeholder = '';
|
|
||||||
entry.value = ogEmail;
|
|
||||||
};
|
|
||||||
icon.parentNode.appendChild(tick);
|
|
||||||
icon.parentNode.appendChild(cross);
|
|
||||||
}
|
|
||||||
|
|
||||||
function populateUsers() {
|
|
||||||
const acList = document.getElementById('accountsList');
|
|
||||||
acList.innerHTML = `
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<strong>Getting Users...</strong>
|
|
||||||
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
|
|
||||||
</div>`;
|
|
||||||
acList.parentNode.querySelector('thead').classList.add('unfocused');
|
|
||||||
const accountsList = document.createElement('tbody');
|
|
||||||
accountsList.id = 'accountsList';
|
|
||||||
const generateEmail = function(id, name, email) {
|
|
||||||
let entry = document.createElement('div');
|
|
||||||
// entry.classList.add('py-1');
|
|
||||||
entry.id = 'email_' + id;
|
|
||||||
let emailValue = email;
|
|
||||||
if (email === undefined) {
|
|
||||||
emailValue = "";
|
|
||||||
}
|
|
||||||
entry.innerHTML = `
|
|
||||||
<i class="fa fa-edit d-inline-block icon-button" style="margin-right: 2%;" onclick="changeEmail(this, '${id}')"></i>
|
|
||||||
<input type="email" class="form-control-plaintext form-control-sm text-muted d-inline-block addressText" id="address_${id}" style="width: auto;" value="${emailValue}" readonly>
|
|
||||||
`;
|
|
||||||
return entry.outerHTML
|
|
||||||
};
|
|
||||||
const template = function(id, username, email, lastActive, admin) {
|
|
||||||
let isAdmin = "No";
|
|
||||||
if (admin) {
|
|
||||||
isAdmin = "Yes";
|
|
||||||
}
|
|
||||||
let fci = "form-check-input";
|
|
||||||
if (bsVersion != 5) {
|
|
||||||
fci = "";
|
|
||||||
}
|
|
||||||
return `
|
|
||||||
<td nowrap="nowrap" class="align-middle" scope="row"><input class="${fci}" type="checkbox" value="" id="select_${id}" onclick="checkCheckboxes();"></td>
|
|
||||||
<td nowrap="nowrap" class="align-middle">${username}</td>
|
|
||||||
<td nowrap="nowrap" class="align-middle">${generateEmail(id, name, email)}</td>
|
|
||||||
<td nowrap="nowrap" class="align-middle">${lastActive}</td>
|
|
||||||
<td nowrap="nowrap" class="align-middle">${isAdmin}</td>
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
|
|
||||||
let req = new XMLHttpRequest();
|
|
||||||
req.responseType = 'json';
|
|
||||||
req.open("GET", "/getUsers", true);
|
|
||||||
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
|
|
||||||
req.onreadystatechange = function() {
|
|
||||||
if (this.readyState == 4) {
|
|
||||||
if (this.status == 200) {
|
|
||||||
jfUsers = req.response['users'];
|
|
||||||
for (user of jfUsers) {
|
|
||||||
let tr = document.createElement('tr');
|
|
||||||
tr.innerHTML = template(user['id'], user['name'], user['email'], user['last_active'], user['admin']);
|
|
||||||
accountsList.appendChild(tr);
|
|
||||||
}
|
|
||||||
const header = acList.parentNode.querySelector('thead');
|
|
||||||
if (header.classList.contains('unfocused')) {
|
|
||||||
header.classList.remove('unfocused');
|
|
||||||
}
|
|
||||||
acList.replaceWith(accountsList);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
req.send();
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('selectAll').checked = false;
|
|
||||||
|
|
||||||
document.getElementById('accountsTabSetDefaults').onclick = function() {
|
|
||||||
const checkboxes = document.getElementById('accountsList').querySelectorAll('input[type=checkbox]');
|
|
||||||
let userIDs = [];
|
|
||||||
for (check of checkboxes) {
|
|
||||||
if (check.checked) {
|
|
||||||
userIDs.push(check.id.replace('select_', ''));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (userIDs.length == 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
populateRadios();
|
|
||||||
let userstring = 'user';
|
|
||||||
if (userIDs.length > 1) {
|
|
||||||
userstring += 's';
|
|
||||||
}
|
|
||||||
document.getElementById('defaultsTitle').textContent = `Apply settings to ${userIDs.length} ${userstring}`;
|
|
||||||
document.getElementById('userDefaultsDescription').textContent = `
|
|
||||||
Create an account and configure it to your liking, then choose it from below to apply to your selected users.`;
|
|
||||||
document.getElementById('storeHomescreenLabel').textContent = `Apply homescreen layout`;
|
|
||||||
if (document.getElementById('defaultsSourceSection').classList.contains('unfocused')) {
|
|
||||||
document.getElementById('defaultsSourceSection').classList.remove('unfocused');
|
|
||||||
}
|
|
||||||
document.getElementById('defaultsSource').value = 'userTemplate';
|
|
||||||
document.getElementById('defaultUserRadios').classList.add('unfocused');
|
|
||||||
document.getElementById('storeDefaults').onclick = function() {
|
|
||||||
storeDefaults(userIDs);
|
|
||||||
};
|
|
||||||
userDefaultsModal.show();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById('defaultsSource').addEventListener('change', function() {
|
|
||||||
const radios = document.getElementById('defaultUserRadios');
|
|
||||||
if (this.value == 'userTemplate') {
|
|
||||||
radios.classList.add('unfocused');
|
|
||||||
} else if (radios.classList.contains('unfocused')) {
|
|
||||||
radios.classList.remove('unfocused');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
document.getElementById('newUserCreate').onclick = function() {
|
|
||||||
const ogText = this.textContent;
|
|
||||||
this.innerHTML = `
|
|
||||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Creating...`;
|
|
||||||
const email = document.getElementById('newUserEmail').value;
|
|
||||||
var username = email;
|
|
||||||
if (document.getElementById('newUserName') != null) {
|
|
||||||
username = document.getElementById('newUserName').value;
|
|
||||||
}
|
|
||||||
const password = document.getElementById('newUserPassword').value;
|
|
||||||
if (!validEmail(email) && email != "") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const send = {
|
|
||||||
'username': username,
|
|
||||||
'password': password,
|
|
||||||
'email': email
|
|
||||||
}
|
|
||||||
let req = new XMLHttpRequest()
|
|
||||||
req.open("POST", "/newUserAdmin", true);
|
|
||||||
req.responseType = 'json';
|
|
||||||
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
|
|
||||||
const button = this;
|
|
||||||
req.onreadystatechange = function() {
|
|
||||||
if (this.readyState == 4) {
|
|
||||||
button.textContent = ogText;
|
|
||||||
if (this.status == 200) {
|
|
||||||
if (button.classList.contains('btn-primary')) {
|
|
||||||
button.classList.remove('btn-primary');
|
|
||||||
}
|
|
||||||
button.classList.add('btn-success');
|
|
||||||
button.textContent = 'Success';
|
|
||||||
setTimeout(function() {
|
|
||||||
if (button.classList.contains('btn-success')) {
|
|
||||||
button.classList.remove('btn-success');
|
|
||||||
}
|
|
||||||
button.classList.add('btn-primary');
|
|
||||||
button.textContent = ogText;
|
|
||||||
newUserModal.hide();
|
|
||||||
}, 1000);
|
|
||||||
} else {
|
|
||||||
if (button.classList.contains('btn-primary')) {
|
|
||||||
button.classList.remove('btn-primary');
|
|
||||||
}
|
|
||||||
button.classList.add('btn-danger');
|
|
||||||
if ("error" in req.response) {
|
|
||||||
button.textContent = req.response["error"];
|
|
||||||
} else {
|
|
||||||
button.textContent = 'Failed';
|
|
||||||
}
|
|
||||||
setTimeout(function() {
|
|
||||||
if (button.classList.contains('btn-danger')) {
|
|
||||||
button.classList.remove('btn-danger');
|
|
||||||
}
|
|
||||||
button.classList.add('btn-primary');
|
|
||||||
button.textContent = ogText;
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
req.send(JSON.stringify(send));
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('accountsTabAddUser').onclick = function() {
|
|
||||||
document.getElementById('newUserEmail').value = '';
|
|
||||||
document.getElementById('newUserPassword').value = '';
|
|
||||||
if (document.getElementById('newUserName') != null) {
|
|
||||||
document.getElementById('newUserName').value = '';
|
|
||||||
}
|
|
||||||
newUserModal.show();
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,32 +0,0 @@
|
|||||||
function serializeForm(id) {
|
|
||||||
var form = document.getElementById(id);
|
|
||||||
var formData = {};
|
|
||||||
for (var i = 0; i < form.elements.length; i++) {
|
|
||||||
var el = form.elements[i];
|
|
||||||
if (el.type != 'submit') {
|
|
||||||
var name = el.name;
|
|
||||||
if (name == '') {
|
|
||||||
name = el.id;
|
|
||||||
};
|
|
||||||
switch (el.type) {
|
|
||||||
case 'checkbox':
|
|
||||||
formData[name] = el.checked;
|
|
||||||
break;
|
|
||||||
case 'text':
|
|
||||||
case 'password':
|
|
||||||
case 'email':
|
|
||||||
case 'number':
|
|
||||||
formData[name] = el.value;
|
|
||||||
break;
|
|
||||||
case 'select-one':
|
|
||||||
let val = el.value;
|
|
||||||
if (!isNaN(val)) {
|
|
||||||
val = parseInt(val)
|
|
||||||
}
|
|
||||||
formData[name] = val;
|
|
||||||
break;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
return formData;
|
|
||||||
};
|
|
||||||
@ -0,0 +1,271 @@
|
|||||||
|
interface Window {
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set in admin.html
|
||||||
|
var cssFile: string;
|
||||||
|
|
||||||
|
const _post = (url: string, data: Object, onreadystatechange: () => void): void => {
|
||||||
|
let req = new XMLHttpRequest();
|
||||||
|
req.open("POST", url, true);
|
||||||
|
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
|
||||||
|
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
||||||
|
req.onreadystatechange = onreadystatechange;
|
||||||
|
req.send(JSON.stringify(data));
|
||||||
|
};
|
||||||
|
|
||||||
|
const _get = (url: string, data: Object, onreadystatechange: () => void): void => {
|
||||||
|
let req = new XMLHttpRequest();
|
||||||
|
req.open("GET", url, true);
|
||||||
|
req.responseType = 'json';
|
||||||
|
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
|
||||||
|
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
||||||
|
req.onreadystatechange = onreadystatechange;
|
||||||
|
req.send(JSON.stringify(data));
|
||||||
|
};
|
||||||
|
|
||||||
|
const rmAttr = (el: HTMLElement, attr: string): void => {
|
||||||
|
if (el.classList.contains(attr)) {
|
||||||
|
el.classList.remove(attr);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const addAttr = (el: HTMLElement, attr: string): void => el.classList.add(attr);
|
||||||
|
|
||||||
|
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;
|
||||||
|
invites: () => void;
|
||||||
|
accounts: () => 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");
|
||||||
|
},
|
||||||
|
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.invitesTabButton.onclick = tabs.invites;
|
||||||
|
tabs.accountsTabButton.onclick = tabs.accounts;
|
||||||
|
|
||||||
|
tabs.invites();
|
||||||
|
|
||||||
|
// Predefined colors for the theme button.
|
||||||
|
var buttonColor: string = "custom";
|
||||||
|
if (cssFile.includes("jf")) {
|
||||||
|
buttonColor = "rgb(255,255,255)";
|
||||||
|
} else if (cssFile == ("bs" + bsVersion + ".css")) {
|
||||||
|
buttonColor = "rgb(16,16,16)";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (buttonColor != "custom") {
|
||||||
|
const switchButton = document.createElement('button') as HTMLButtonElement;
|
||||||
|
switchButton.classList.add('btn', 'btn-secondary');
|
||||||
|
switchButton.innerHTML = `
|
||||||
|
Theme
|
||||||
|
<i class="fa fa-circle circle" style="color: ${buttonColor}; margin-left: 0.4rem;" id="fakeButton"></i>
|
||||||
|
`;
|
||||||
|
switchButton.onclick = (): void => toggleCSS(document.getElementById('fakeButton'));
|
||||||
|
document.getElementById('headerButtons').appendChild(switchButton);
|
||||||
|
}
|
||||||
|
|
||||||
|
var loginModal = createModal('login');
|
||||||
|
var settingsModal = createModal('settingsMenu');
|
||||||
|
var userDefaultsModal = createModal('userDefaults');
|
||||||
|
var usersModal = createModal('users');
|
||||||
|
var restartModal = createModal('restartModal');
|
||||||
|
var refreshModal = createModal('refreshModal');
|
||||||
|
var aboutModal = createModal('aboutModal');
|
||||||
|
var deleteModal = createModal('deleteModal');
|
||||||
|
var newUserModal = createModal('newUserModal');
|
||||||
|
|
||||||
|
var availableProfiles: Array<string>;
|
||||||
|
|
||||||
|
window["token"] = "";
|
||||||
|
|
||||||
|
function toClipboard(str: string): void {
|
||||||
|
const el = document.createElement('textarea') as HTMLTextAreaElement;
|
||||||
|
el.value = str;
|
||||||
|
el.readOnly = true;
|
||||||
|
el.style.position = "absolute";
|
||||||
|
el.style.left = "-9999px";
|
||||||
|
document.body.appendChild(el);
|
||||||
|
const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
|
||||||
|
el.select();
|
||||||
|
document.execCommand("copy");
|
||||||
|
document.body.removeChild(el);
|
||||||
|
if (selected) {
|
||||||
|
document.getSelection().removeAllRanges();
|
||||||
|
document.getSelection().addRange(selected);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function login(username: string, password: string, modal: boolean, button?: HTMLButtonElement, run?: (arg0: number) => void): void {
|
||||||
|
const req = new XMLHttpRequest();
|
||||||
|
req.responseType = 'json';
|
||||||
|
req.open("GET", "/getToken", true);
|
||||||
|
req.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
|
||||||
|
req.onreadystatechange = function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status != 200) {
|
||||||
|
let errorMsg = this.response["error"];
|
||||||
|
if (!errorMsg) {
|
||||||
|
errorMsg = "Unknown error";
|
||||||
|
}
|
||||||
|
if (modal) {
|
||||||
|
button.disabled = false;
|
||||||
|
button.textContent = errorMsg;
|
||||||
|
addAttr(button, "btn-danger");
|
||||||
|
rmAttr(button, "btn-primary");
|
||||||
|
setTimeout((): void => {
|
||||||
|
addAttr(button, "btn-primary");
|
||||||
|
rmAttr(button, "btn-danger");
|
||||||
|
button.textContent = "Login";
|
||||||
|
}, 4000);
|
||||||
|
} else {
|
||||||
|
loginModal.show();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const data = this.response;
|
||||||
|
window.token = data["token"];
|
||||||
|
generateInvites();
|
||||||
|
setInterval((): void => generateInvites(), 60 * 1000);
|
||||||
|
addOptions(30, document.getElementById('days') as HTMLSelectElement);
|
||||||
|
addOptions(24, document.getElementById('hours') as HTMLSelectElement);
|
||||||
|
const minutes = document.getElementById('minutes') as HTMLSelectElement;
|
||||||
|
addOptions(59, minutes);
|
||||||
|
minutes.value = "30";
|
||||||
|
checkDuration();
|
||||||
|
if (modal) {
|
||||||
|
loginModal.hide();
|
||||||
|
}
|
||||||
|
Focus(document.getElementById('logoutButton'));
|
||||||
|
}
|
||||||
|
if (run) {
|
||||||
|
run(+this.status);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
req.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createEl(html: string): HTMLElement {
|
||||||
|
let div = document.createElement('div') as HTMLDivElement;
|
||||||
|
div.innerHTML = html;
|
||||||
|
return div.firstElementChild as HTMLElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
(document.getElementById('loginForm') as HTMLFormElement).onsubmit = function (): boolean {
|
||||||
|
window.token = "";
|
||||||
|
const details = serializeForm('loginForm');
|
||||||
|
const button = document.getElementById('loginSubmit') as HTMLButtonElement;
|
||||||
|
addAttr(button, "btn-primary");
|
||||||
|
rmAttr(button, "btn-danger");
|
||||||
|
button.disabled = true;
|
||||||
|
button.innerHTML = `
|
||||||
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>
|
||||||
|
Loading...`;
|
||||||
|
login(details["username"], details["password"], true, button);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
function storeDefaults(users: string | Array<string>): void {
|
||||||
|
// not sure if this does anything, but w/e
|
||||||
|
this.disabled = true;
|
||||||
|
this.innerHTML =
|
||||||
|
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
|
||||||
|
'Loading...';
|
||||||
|
const button = document.getElementById('storeDefaults') as HTMLButtonElement;
|
||||||
|
const radio = document.querySelector('input[name=defaultRadios]:checked') as HTMLInputElement
|
||||||
|
let id = radio.id.replace("default_", "");
|
||||||
|
let route = "/setDefaults";
|
||||||
|
let data = {
|
||||||
|
"from": "user",
|
||||||
|
"id": id,
|
||||||
|
"homescreen": false
|
||||||
|
};
|
||||||
|
if ((document.getElementById('defaultsSource') as HTMLSelectElement).value == 'userTemplate') {
|
||||||
|
data["from"] = "template";
|
||||||
|
}
|
||||||
|
if (users != "all") {
|
||||||
|
data["apply_to"] = users;
|
||||||
|
route = "/applySettings";
|
||||||
|
}
|
||||||
|
if ((document.getElementById('storeDefaultHomescreen') as HTMLInputElement).checked) {
|
||||||
|
data["homescreen"] = true;
|
||||||
|
}
|
||||||
|
_post(route, data, function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status == 200 || this.status == 204) {
|
||||||
|
button.textContent = "Success";
|
||||||
|
addAttr(button, "btn-success");
|
||||||
|
rmAttr(button, "btn-danger");
|
||||||
|
rmAttr(button, "btn-primary");
|
||||||
|
button.disabled = false;
|
||||||
|
setTimeout((): void => {
|
||||||
|
button.textContent = "Submit";
|
||||||
|
addAttr(button, "btn-primary");
|
||||||
|
rmAttr(button, "btn-success");
|
||||||
|
button.disabled = false;
|
||||||
|
userDefaultsModal.hide();
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
if ("error" in this.response) {
|
||||||
|
button.textContent = this.response["error"];
|
||||||
|
} else if (("policy" in this.response) || ("homescreen" in this.response)) {
|
||||||
|
button.textContent = "Failed (check console)";
|
||||||
|
} else {
|
||||||
|
button.textContent = "Failed";
|
||||||
|
}
|
||||||
|
addAttr(button, "btn-danger");
|
||||||
|
rmAttr(button, "btn-primary");
|
||||||
|
setTimeout((): void => {
|
||||||
|
button.textContent = "Submit";
|
||||||
|
addAttr(button, "btn-primary");
|
||||||
|
rmAttr(button, "btn-danger");
|
||||||
|
button.disabled = false;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
generateInvites(true);
|
||||||
|
|
||||||
|
login("", "", false, null, (status: number): void => {
|
||||||
|
if (!(status == 200 || status == 204)) {
|
||||||
|
loginModal.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
(document.getElementById('logoutButton') as HTMLButtonElement).onclick = function (): void {
|
||||||
|
_post("/logout", null, function (): boolean {
|
||||||
|
if (this.readyState == 4 && this.status == 200) {
|
||||||
|
window.token = "";
|
||||||
|
location.reload();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
// Used for animation on theme change
|
||||||
|
const whichTransitionEvent = (): string => {
|
||||||
|
const el = document.createElement('fakeElement');
|
||||||
|
const transitions = {
|
||||||
|
'transition': 'transitionend',
|
||||||
|
'OTransition': 'oTransitionEnd',
|
||||||
|
'MozTransition': 'transitionend',
|
||||||
|
'WebkitTransition': 'webkitTransitionEnd'
|
||||||
|
};
|
||||||
|
for (const t in transitions) {
|
||||||
|
if (el.style[t] !== undefined) {
|
||||||
|
return transitions[t];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
var transitionEndEvent = whichTransitionEvent();
|
||||||
|
|
||||||
|
// Toggles between light and dark themes
|
||||||
|
const _toggleCSS = (): void => {
|
||||||
|
const els: NodeListOf<HTMLLinkElement> = document.querySelectorAll('link[rel="stylesheet"][type="text/css"]');
|
||||||
|
let cssEl = 0;
|
||||||
|
let remove = false;
|
||||||
|
if (els.length != 1) {
|
||||||
|
cssEl = 1;
|
||||||
|
remove = true
|
||||||
|
}
|
||||||
|
let href: string = "bs" + bsVersion;
|
||||||
|
if (!els[cssEl].href.includes(href + "-jf")) {
|
||||||
|
href += "-jf";
|
||||||
|
}
|
||||||
|
href += ".css";
|
||||||
|
let newEl = els[cssEl].cloneNode(true) as HTMLLinkElement;
|
||||||
|
newEl.href = href;
|
||||||
|
els[cssEl].parentNode.insertBefore(newEl, els[cssEl].nextSibling);
|
||||||
|
if (remove) {
|
||||||
|
els[0].remove();
|
||||||
|
}
|
||||||
|
document.cookie = "css=" + href;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggles between light and dark themes, but runs animation if window small enough.
|
||||||
|
var buttonWidth = 0;
|
||||||
|
const toggleCSS = (el: HTMLElement): void => {
|
||||||
|
const switchToColor = window.getComputedStyle(document.body, null).backgroundColor;
|
||||||
|
// Max page width for animation to take place
|
||||||
|
let maxWidth = 1500;
|
||||||
|
if (window.innerWidth < maxWidth) {
|
||||||
|
// Calculate minimum radius to cover screen
|
||||||
|
const radius = Math.sqrt(Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2));
|
||||||
|
const currentRadius = el.getBoundingClientRect().width / 2;
|
||||||
|
const scale = radius / currentRadius;
|
||||||
|
buttonWidth = +window.getComputedStyle(el, null).width;
|
||||||
|
document.body.classList.remove('smooth-transition');
|
||||||
|
el.style.transform = `scale(${scale})`;
|
||||||
|
el.style.color = switchToColor;
|
||||||
|
el.addEventListener(transitionEndEvent, function (): void {
|
||||||
|
if (this.style.transform.length != 0) {
|
||||||
|
_toggleCSS();
|
||||||
|
this.style.removeProperty('transform');
|
||||||
|
document.body.classList.add('smooth-transition');
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
} else {
|
||||||
|
_toggleCSS();
|
||||||
|
el.style.color = switchToColor;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rotateButton = (el: HTMLElement): void => {
|
||||||
|
if (el.classList.contains("rotated")) {
|
||||||
|
rmAttr(el, "rotated")
|
||||||
|
addAttr(el, "not-rotated");
|
||||||
|
} else {
|
||||||
|
rmAttr(el, "not-rotated");
|
||||||
|
addAttr(el, "rotated");
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
var bsVersion = 4;
|
||||||
|
|
||||||
|
const send_to_addess_enabled = document.getElementById('send_to_addess_enabled');
|
||||||
|
if (send_to_addess_enabled) {
|
||||||
|
send_to_addess_enabled.classList.remove("form-check-input");
|
||||||
|
}
|
||||||
|
const multiUseEnabled = document.getElementById('multiUseEnabled');
|
||||||
|
if (multiUseEnabled) {
|
||||||
|
multiUseEnabled.classList.remove("form-check-input");
|
||||||
|
}
|
||||||
|
|
||||||
|
function createModal(id: string, find?: boolean): any {
|
||||||
|
$(`#${id}`).on("shown.bs.modal", (): void => document.body.classList.add("modal-open"));
|
||||||
|
return {
|
||||||
|
show: function (): any {
|
||||||
|
const temp = ($(`#${id}`) as any).modal("show");
|
||||||
|
return temp;
|
||||||
|
},
|
||||||
|
hide: function (): any {
|
||||||
|
return ($(`#${id}`) as any).modal("hide");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
declare var bootstrap: any;
|
||||||
|
|
||||||
|
var bsVersion = 5;
|
||||||
|
|
||||||
|
function createModal(id: string, find?: boolean): any {
|
||||||
|
let modal: any;
|
||||||
|
if (find) {
|
||||||
|
modal = bootstrap.Modal.getInstance(document.getElementById(id));
|
||||||
|
} else {
|
||||||
|
modal = new bootstrap.Modal(document.getElementById(id));
|
||||||
|
}
|
||||||
|
document.getElementById(id).addEventListener('shown.bs.modal', (): void => document.body.classList.add("modal-open"));
|
||||||
|
return {
|
||||||
|
modal: modal,
|
||||||
|
show: function (): any {
|
||||||
|
const temp = this.modal.show();
|
||||||
|
return temp;
|
||||||
|
},
|
||||||
|
hide: function (): any { return this.modal.hide(); }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,362 @@
|
|||||||
|
// Actually defined by templating in admin.html, this is just to avoid errors from tsc.
|
||||||
|
var notifications_enabled: any;
|
||||||
|
|
||||||
|
interface Invite {
|
||||||
|
code?: string;
|
||||||
|
expiresIn?: string;
|
||||||
|
empty: boolean;
|
||||||
|
remainingUses?: string;
|
||||||
|
email?: string;
|
||||||
|
usedBy?: Array<Array<string>>;
|
||||||
|
created?: string;
|
||||||
|
notifyExpiry?: boolean;
|
||||||
|
notifyCreation?: boolean;
|
||||||
|
profile?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emptyInvite = (): Invite => { return { code: "None", empty: true } as Invite; }
|
||||||
|
|
||||||
|
function parseInvite(invite: Object): Invite {
|
||||||
|
let inv: Invite = { code: invite["code"], empty: false, };
|
||||||
|
if (invite["email"]) {
|
||||||
|
inv.email = invite["email"];
|
||||||
|
}
|
||||||
|
let time = ""
|
||||||
|
const f = ["days", "hours", "minutes"];
|
||||||
|
for (const i in f) {
|
||||||
|
if (invite[f[i]] != 0) {
|
||||||
|
time += `${invite[f[i]]}${f[i][0]} `;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
inv.expiresIn = `Expires in ${time.slice(0, -1)}`;
|
||||||
|
if (invite["no-limit"]) {
|
||||||
|
inv.remainingUses = "∞";
|
||||||
|
} else if ("remaining-uses" in invite) {
|
||||||
|
inv.remainingUses = invite["remaining-uses"];
|
||||||
|
}
|
||||||
|
if ("used-by" in invite) {
|
||||||
|
inv.usedBy = invite["used-by"];
|
||||||
|
}
|
||||||
|
if ("created" in invite) {
|
||||||
|
inv.created = invite["created"];
|
||||||
|
}
|
||||||
|
if ("notify-expiry" in invite) {
|
||||||
|
inv.notifyExpiry = invite["notify-expiry"];
|
||||||
|
}
|
||||||
|
if ("notify-creation" in invite) {
|
||||||
|
inv.notifyCreation = invite["notify-creation"];
|
||||||
|
}
|
||||||
|
if ("profile" in invite) {
|
||||||
|
inv.profile = invite["profile"];
|
||||||
|
}
|
||||||
|
return inv;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setNotify(el: HTMLElement): void {
|
||||||
|
let send = {};
|
||||||
|
let code: string;
|
||||||
|
let notifyType: string;
|
||||||
|
if (el.id.includes("Expiry")) {
|
||||||
|
code = el.id.replace("_notifyExpiry", "");
|
||||||
|
notifyType = "notify-expiry";
|
||||||
|
} else if (el.id.includes("Creation")) {
|
||||||
|
code = el.id.replace("_notifyCreation", "");
|
||||||
|
notifyType = "notify-creation";
|
||||||
|
}
|
||||||
|
send[code] = {};
|
||||||
|
send[code][notifyType] = (el as HTMLInputElement).checked;
|
||||||
|
_post("/setNotify", send, function (): void {
|
||||||
|
if (this.readyState == 4 && this.status != 200) {
|
||||||
|
(el as HTMLInputElement).checked = !(el as HTMLInputElement).checked;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function genUsedBy(usedBy: Array<Array<string>>): string {
|
||||||
|
let uB = "";
|
||||||
|
if (usedBy && usedBy.length != 0) {
|
||||||
|
uB = `
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item py-1">Users created:</li>
|
||||||
|
`;
|
||||||
|
for (const i in usedBy) {
|
||||||
|
uB += `
|
||||||
|
<li class="list-group-item py-1 disabled">
|
||||||
|
<div class="d-flex float-left">${usedBy[i][0]}</div>
|
||||||
|
<div class="d-flex float-right">${usedBy[i][1]}</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
uB += `</ul>`
|
||||||
|
}
|
||||||
|
return uB;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addItem(invite: Invite): void {
|
||||||
|
const links = document.getElementById('invites');
|
||||||
|
const container = document.createElement('div') as HTMLDivElement;
|
||||||
|
container.id = invite.code;
|
||||||
|
const item = document.createElement('div') as HTMLDivElement;
|
||||||
|
item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'd-inline-block');
|
||||||
|
let link = "";
|
||||||
|
let innerHTML = `<a>None</a>`;
|
||||||
|
if (invite.empty) {
|
||||||
|
item.innerHTML = `
|
||||||
|
<div class="d-flex align-items-center font-monospace" style="width: 40%;">
|
||||||
|
${innerHTML}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
container.appendChild(item);
|
||||||
|
links.appendChild(container);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
link = window.location.href.split('#')[0] + "invite/" + invite.code;
|
||||||
|
innerHTML = `
|
||||||
|
<div class="d-flex align-items-center font-monospace" style="width: 40%;">
|
||||||
|
<a class="invite-link" href="${link}">${invite.code.replace(/-/g, '-')}</a>
|
||||||
|
<i class="fa fa-clipboard icon-button" onclick="toClipboard('${link}')" style="margin-right: 0.5rem; margin-left: 0.5rem;"></i>
|
||||||
|
`;
|
||||||
|
if (invite.email) {
|
||||||
|
let email = invite.email;
|
||||||
|
if (!invite.email.includes("Failed to send to")) {
|
||||||
|
email = `Sent to ${email}`;
|
||||||
|
}
|
||||||
|
innerHTML += `
|
||||||
|
<span class="text-muted" style="margin-left: 0.4rem; font-style: italic; font-size: 0.8rem;">${email}</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
innerHTML += `
|
||||||
|
</div>
|
||||||
|
<div style="text-align: right;">
|
||||||
|
<span id="${invite.code}_expiry" style="margin-right: 1rem;">${invite.expiresIn}</span>
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
<button class="btn btn-outline-danger" onclick="deleteInvite('${invite.code}')">Delete</button>
|
||||||
|
<i class="fa fa-angle-down collapsed icon-button not-rotated" style="padding: 1rem; margin: -1rem -1rem -1rem 0;" data-toggle="collapse" aria-expanded="false" data-target="#${CSS.escape(invite.code)}_collapse" onclick="rotateButton(this)"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
item.innerHTML = innerHTML;
|
||||||
|
container.appendChild(item);
|
||||||
|
|
||||||
|
let profiles = `
|
||||||
|
<label class="input-group-text" for="profile_${CSS.escape(invite.code)}">Profile: </label>
|
||||||
|
<select class="form-select" id="profile_${CSS.escape(invite.code)}" onchange="setProfile(this)">
|
||||||
|
`;
|
||||||
|
let match = false;
|
||||||
|
for (const i in availableProfiles) {
|
||||||
|
let selected = "";
|
||||||
|
if (availableProfiles[i] == invite.profile) {
|
||||||
|
selected = "selected";
|
||||||
|
match = true;
|
||||||
|
}
|
||||||
|
profiles += `<option value="${availableProfiles[i]}" ${selected}>${availableProfiles[i]}</option>`;
|
||||||
|
}
|
||||||
|
if (!match) {
|
||||||
|
profiles += `<option value="" selected></option>`;
|
||||||
|
}
|
||||||
|
profiles += `</select>`;
|
||||||
|
|
||||||
|
let dateCreated: string;
|
||||||
|
if (invite.created) {
|
||||||
|
dateCreated = `<li class="list-group-item py-1">Created: ${invite.created}</li>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let middle: string;
|
||||||
|
if (notifications_enabled) {
|
||||||
|
middle = `
|
||||||
|
<div class="col" id="${CSS.escape(invite.code)}_notifyButtons">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
Notify on:
|
||||||
|
<li class="list-group-item py-1 form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" id="${CSS.escape(invite.code)}_notifyExpiry" onclick="setNotify(this)" ${invite.notifyExpiry ? "checked" : ""}>
|
||||||
|
<label class="form-check-label" for="${CSS.escape(invite.code)}_notifyExpiry">Expiry</label>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item py-1 form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" id="${CSS.escape(invite.code)}_notifyCreation" onclick="setNotify(this)" ${invite.notifyCreation ? "checked" : ""}>
|
||||||
|
<label class="form-check-label" for="${CSS.escape(invite.code)}_notifyCreation">User creation</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let right: string = genUsedBy(invite.usedBy)
|
||||||
|
|
||||||
|
const dropdown = document.createElement('div') as HTMLDivElement;
|
||||||
|
dropdown.id = `${CSS.escape(invite.code)}_collapse`;
|
||||||
|
dropdown.classList.add("collapse");
|
||||||
|
dropdown.innerHTML = `
|
||||||
|
<div class="container row align-items-start card-body">
|
||||||
|
<div class="col">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="input-group py-1">
|
||||||
|
${profiles}
|
||||||
|
</li>
|
||||||
|
${dateCreated}
|
||||||
|
<li class="list-group-item py-1" id="${CSS.escape(invite.code)}_remainingUses">Remaining uses: ${invite.remainingUses}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
${middle}
|
||||||
|
<div class="col" id="${CSS.escape(invite.code)}_usersCreated">
|
||||||
|
${right}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(dropdown);
|
||||||
|
links.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateInvite(invite: Invite): void {
|
||||||
|
document.getElementById(CSS.escape(invite.code) + "_expiry").textContent = invite.expiresIn;
|
||||||
|
const remainingUses: any = document.getElementById(CSS.escape(invite.code) + "_remainingUses");
|
||||||
|
if (remainingUses) {
|
||||||
|
remainingUses.textContent = `Remaining uses: ${invite.remainingUses}`;
|
||||||
|
}
|
||||||
|
document.getElementById(CSS.escape(invite.code) + "_usersCreated").innerHTML = genUsedBy(invite.usedBy);
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete invite from DOM
|
||||||
|
const hideInvite = (code: string): void => document.getElementById(CSS.escape(code)).remove();
|
||||||
|
|
||||||
|
// delete invite from jfa-go
|
||||||
|
const deleteInvite = (code: string): void => _post("/deleteInvite", { "code": code }, function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
generateInvites();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function generateInvites(empty?: boolean): void {
|
||||||
|
if (empty) {
|
||||||
|
document.getElementById('invites').textContent = '';
|
||||||
|
addItem(emptyInvite());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
_get("/getInvites", null, function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
let data = this.response;
|
||||||
|
availableProfiles = data['profiles'];
|
||||||
|
if (data['invites'] == null || data['invites'].length == 0) {
|
||||||
|
document.getElementById('invites').textContent = '';
|
||||||
|
addItem(emptyInvite());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let items = document.getElementById('invites').children;
|
||||||
|
for (const i in data['invites']) {
|
||||||
|
let match = false;
|
||||||
|
const inv = parseInvite(data['invites'][i]);
|
||||||
|
for (const x in items) {
|
||||||
|
if (items[x].id == inv.code) {
|
||||||
|
match = true;
|
||||||
|
updateInvite(inv);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!match) {
|
||||||
|
addItem(inv);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// second pass to check for expired invites
|
||||||
|
items = document.getElementById('invites').children;
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
let exists = false;
|
||||||
|
for (const x in data['invites']) {
|
||||||
|
if (items[i].id == data['invites'][x]['code']) {
|
||||||
|
exists = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!exists) {
|
||||||
|
hideInvite(items[i].id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const addOptions = (length: number, el: HTMLSelectElement): void => {
|
||||||
|
for (let v = 0; v <= length; v++) {
|
||||||
|
const opt = document.createElement('option');
|
||||||
|
opt.textContent = ""+v;
|
||||||
|
opt.value = ""+v;
|
||||||
|
el.appendChild(opt);
|
||||||
|
}
|
||||||
|
el.value = "0";
|
||||||
|
};
|
||||||
|
|
||||||
|
function fixCheckboxes(): void {
|
||||||
|
const send_to_address: Array<HTMLInputElement> = [document.getElementById('send_to_address') as HTMLInputElement, document.getElementById('send_to_address_enabled') as HTMLInputElement];
|
||||||
|
if (send_to_address[0] != null) {
|
||||||
|
send_to_address[0].disabled = !send_to_address[1].checked;
|
||||||
|
}
|
||||||
|
const multiUseEnabled = document.getElementById('multiUseEnabled') as HTMLInputElement;
|
||||||
|
const multiUseCount = document.getElementById('multiUseCount') as HTMLInputElement;
|
||||||
|
const noUseLimit = document.getElementById('noUseLimit') as HTMLInputElement;
|
||||||
|
multiUseCount.disabled = !multiUseEnabled.checked;
|
||||||
|
noUseLimit.checked = false;
|
||||||
|
noUseLimit.disabled = !multiUseEnabled.checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
fixCheckboxes();
|
||||||
|
|
||||||
|
(document.getElementById('inviteForm') as HTMLFormElement).onsubmit = function (): boolean {
|
||||||
|
const button = document.getElementById('generateSubmit') as HTMLButtonElement;
|
||||||
|
button.disabled = true;
|
||||||
|
button.innerHTML = `
|
||||||
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>
|
||||||
|
Loading...`;
|
||||||
|
let send = serializeForm('inviteForm');
|
||||||
|
send["remaining-uses"] = +send["remaining-uses"];
|
||||||
|
if (!send['multiple-uses'] || send['no-limit']) {
|
||||||
|
delete send['remaining-uses'];
|
||||||
|
}
|
||||||
|
const sendToAddress: any = document.getElementById('send_to_address');
|
||||||
|
const sendToAddressEnabled: any = document.getElementById('send_to_address_enabled');
|
||||||
|
if (sendToAddress && sendToAddressEnabled) {
|
||||||
|
send['email'] = send['send_to_address'];
|
||||||
|
delete send['send_to_address'];
|
||||||
|
delete send['send_to_address_enabled'];
|
||||||
|
}
|
||||||
|
_post("/generateInvite", send, function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
button.textContent = 'Generate';
|
||||||
|
button.disabled = false;
|
||||||
|
generateInvites();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
triggerTooltips();
|
||||||
|
|
||||||
|
function setProfile(select: HTMLSelectElement): void {
|
||||||
|
if (!select.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const invite = select.id.replace("profile_", "");
|
||||||
|
const send = {
|
||||||
|
"invite": invite,
|
||||||
|
"profile": select.value
|
||||||
|
};
|
||||||
|
_post("/setProfile", send, function (): void {
|
||||||
|
if (this.readyState == 4 && this.status != 200) {
|
||||||
|
generateInvites();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkDuration(): void {
|
||||||
|
const boxVals: Array<number> = [+(document.getElementById("days") as HTMLSelectElement).value, +(document.getElementById("hours") as HTMLSelectElement).value, +(document.getElementById("minutes") as HTMLSelectElement).value];
|
||||||
|
const submit = document.getElementById('generateSubmit') as HTMLButtonElement;
|
||||||
|
if (boxVals.reduce((a: number, b: number): number => a + b) == 0) {
|
||||||
|
submit.disabled = true;
|
||||||
|
} else {
|
||||||
|
submit.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const nE: Array<string> = ["days", "hours", "minutes"];
|
||||||
|
for (const i in nE) {
|
||||||
|
document.getElementById(nE[i]).addEventListener("change", checkDuration);
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
const ombiDefaultsModal = createModal('ombiDefaults');
|
||||||
|
(document.getElementById('openOmbiDefaults') 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...';
|
||||||
|
_get("/getOmbiUsers", null, function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status == 200) {
|
||||||
|
const users = this.response['users'];
|
||||||
|
const radioList = document.getElementById('ombiUserRadios');
|
||||||
|
radioList.textContent = '';
|
||||||
|
let first = true;
|
||||||
|
for (const i in users) {
|
||||||
|
const user = users[i];
|
||||||
|
const radio = document.createElement('div') as HTMLDivElement;
|
||||||
|
radio.classList.add('form-check');
|
||||||
|
let checked = '';
|
||||||
|
if (first) {
|
||||||
|
checked = 'checked';
|
||||||
|
first = false;
|
||||||
|
}
|
||||||
|
radio.innerHTML = `
|
||||||
|
<input class="form-check-input" type="radio" name="ombiRadios" id="ombiDefault_${user['id']}" ${checked}>
|
||||||
|
<label class="form-check-label" for="ombiDefault_${user['id']}">${user['name']}</label>
|
||||||
|
`;
|
||||||
|
radioList.appendChild(radio);
|
||||||
|
}
|
||||||
|
button.disabled = false;
|
||||||
|
button.innerHTML = ogHTML;
|
||||||
|
const submitButton = document.getElementById('storeOmbiDefaults') as HTMLButtonElement;
|
||||||
|
submitButton.disabled = false;
|
||||||
|
submitButton.textContent = 'Submit';
|
||||||
|
addAttr(submitButton, "btn-primary");
|
||||||
|
rmAttr(submitButton, "btn-success");
|
||||||
|
rmAttr(submitButton, "btn-danger");
|
||||||
|
settingsModal.hide();
|
||||||
|
ombiDefaultsModal.show();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
(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...';
|
||||||
|
const radio = document.querySelector('input[name=ombiRadios]:checked') as HTMLInputElement;
|
||||||
|
const data = {
|
||||||
|
"id": radio.id.replace("ombiDefault_", "")
|
||||||
|
};
|
||||||
|
_post("/setOmbiDefaults", data, function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status == 200 || this.status == 204) {
|
||||||
|
button.textContent = "Success";
|
||||||
|
addAttr(button, "btn-success");
|
||||||
|
rmAttr(button, "btn-danger");
|
||||||
|
rmAttr(button, "btn-primary");
|
||||||
|
button.disabled = false;
|
||||||
|
setTimeout((): void => ombiDefaultsModal.hide(), 1000);
|
||||||
|
} else {
|
||||||
|
button.textContent = "Failed";
|
||||||
|
rmAttr(button, "btn-primary");
|
||||||
|
addAttr(button, "btn-danger");
|
||||||
|
setTimeout((): void => {
|
||||||
|
button.textContent = "Submit";
|
||||||
|
addAttr(button, "btn-primary");
|
||||||
|
rmAttr(button, "btn-danger");
|
||||||
|
button.disabled = false;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
function serializeForm(id: string): Object {
|
||||||
|
const form = document.getElementById(id) as HTMLFormElement;
|
||||||
|
let formData = {};
|
||||||
|
for (let i = 0; i < form.elements.length; i++) {
|
||||||
|
const el = form.elements[i];
|
||||||
|
if ((el as HTMLInputElement).type == "submit") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
let name = (el as HTMLInputElement).name;
|
||||||
|
if (!name) {
|
||||||
|
name = el.id;
|
||||||
|
}
|
||||||
|
switch ((el as HTMLInputElement).type) {
|
||||||
|
case "checkbox":
|
||||||
|
formData[name] = (el as HTMLInputElement).checked;
|
||||||
|
break;
|
||||||
|
case "text":
|
||||||
|
case "password":
|
||||||
|
case "email":
|
||||||
|
case "number":
|
||||||
|
formData[name] = (el as HTMLInputElement).value;
|
||||||
|
break;
|
||||||
|
case "select-one":
|
||||||
|
case "select":
|
||||||
|
let val: string | number = (el as HTMLSelectElement).value;
|
||||||
|
if (+val != NaN) {
|
||||||
|
val = +val;
|
||||||
|
}
|
||||||
|
formData[name] = val;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return formData;
|
||||||
|
}
|
||||||
@ -0,0 +1,206 @@
|
|||||||
|
var config: Object = {};
|
||||||
|
var modifiedConfig: Object = {};
|
||||||
|
|
||||||
|
function sendConfig(modalID: string, restart?: boolean): void {
|
||||||
|
modifiedConfig["restart-program"] = restart;
|
||||||
|
_post("/modifyConfig", modifiedConfig, function (): void {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status == 200 || this.status == 204) {
|
||||||
|
createModal(modalID, true).hide();
|
||||||
|
if (modalID != "settingsMenu") {
|
||||||
|
settingsModal.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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'));
|
||||||
|
settingsModal.hide();
|
||||||
|
userDefaultsModal.show();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
(document.getElementById('openAbout') as HTMLButtonElement).onclick = (): void => {
|
||||||
|
settingsModal.hide();
|
||||||
|
aboutModal.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
(document.getElementById('openSettings') as HTMLButtonElement).onclick = (): 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");
|
||||||
|
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" data-toggle="collapse" data-target="#${section}">${title}</button>
|
||||||
|
`;
|
||||||
|
settingsList.appendChild(sectionCollapse);
|
||||||
|
}
|
||||||
|
settingsModal.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
(document.getElementById('settingsSave') as HTMLButtonElement).onclick = function (): void {
|
||||||
|
modifiedConfig = {};
|
||||||
|
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"]) {
|
||||||
|
if (!(section in modifiedConfig)) {
|
||||||
|
modifiedConfig[section] = {};
|
||||||
|
}
|
||||||
|
modifiedConfig[section][entry] = val;
|
||||||
|
settingsChanged = true;
|
||||||
|
if (config[section][entry]["requires_restart"]) {
|
||||||
|
restartSettingsChanged = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (restartSettingsChanged) {
|
||||||
|
(document.getElementById('applyRestarts') as HTMLButtonElement).onclick = (): void => sendConfig("restartModal");
|
||||||
|
const restartButton = document.getElementById('applyAndRestart') as HTMLButtonElement;
|
||||||
|
if (restartButton) {
|
||||||
|
restartButton.onclick = (): void => sendConfig("restartModal", true);
|
||||||
|
}
|
||||||
|
settingsModal.hide();
|
||||||
|
restartModal.show();
|
||||||
|
} else if (settingsChanged) {
|
||||||
|
sendConfig("settingsMenu");
|
||||||
|
} else {
|
||||||
|
settingsModal.hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../data/static",
|
||||||
|
"target": "es6",
|
||||||
|
"lib": ["dom", "es2017"],
|
||||||
|
"types": ["jquery"]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,6 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es6",
|
|
||||||
"lib": ["dom", "es2017"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue