From db3b992857e993a4a2383a5aa8510c7ff5f04b47 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Thu, 9 Jul 2020 23:00:59 +0100 Subject: [PATCH] refactor admin.js, add initial ui elements for multi-use invites multi-use invites will have a set limit of how many times they can be used. They can also be set to have no limit. An additional menu is planned for multi use invites to see when they have been used, and by who. --- jellyfin_accounts/data/static/serialize.js | 3 +- jellyfin_accounts/data/templates/admin.html | 87 ++- jellyfin_accounts/data/templates/admin.js | 770 ++++++++++---------- 3 files changed, 437 insertions(+), 423 deletions(-) diff --git a/jellyfin_accounts/data/static/serialize.js b/jellyfin_accounts/data/static/serialize.js index 41a3279..ed082fa 100644 --- a/jellyfin_accounts/data/static/serialize.js +++ b/jellyfin_accounts/data/static/serialize.js @@ -16,10 +16,11 @@ function serializeForm(id) { case 'password': case 'select-one': case 'email': + case 'number': formData[name] = el.value; break; }; }; }; return formData; -}; \ No newline at end of file +}; diff --git a/jellyfin_accounts/data/templates/admin.html b/jellyfin_accounts/data/templates/admin.html index 1336931..175f98a 100644 --- a/jellyfin_accounts/data/templates/admin.html +++ b/jellyfin_accounts/data/templates/admin.html @@ -31,9 +31,9 @@ return ""; }; {% if bs5 %} - var bsVersion = 5; + const bsVersion = 5; {% else %} - var bsVersion = 4; + const bsVersion = 4; {% endif %} console.log('create'); var css = document.createElement('link'); @@ -237,34 +237,65 @@
Generate Invite
-
-
- - -
-
- - -
-
- - -
- {% if email_enabled %} -
- -
-
- -
- + +
+
+
+ + +
+
+ + +
+
+ +
- {% endif %} - +
+
+ +
+
+ +
+ +
+
+
+ + +
+ {% if email_enabled %} +
+ +
+
+ +
+ +
+
+ {% endif %} +
+
+
+
+
+ +
+
+
diff --git a/jellyfin_accounts/data/templates/admin.js b/jellyfin_accounts/data/templates/admin.js index 0cd8600..ebb1035 100644 --- a/jellyfin_accounts/data/templates/admin.js +++ b/jellyfin_accounts/data/templates/admin.js @@ -1,58 +1,69 @@ +// Substitution from jinja +const cssFile = "{{ css_file }}"; + +// To grab theme preference function getCookie(cname) { - var name = cname + "="; - var decodedCookie = decodeURIComponent(document.cookie); - var ca = decodedCookie.split(';'); - for(var i = 0; i , , <1: Empty invite (no delete/link), 0: Actual invite>, ] function parseInvite(invite, empty = false) { - if (empty === true) { - return ["None", "", "1"] - } else { - var i = ["", "", "0", invite['email']]; - i[0] = invite['code']; - var time = "" - if (invite['days'] != 0) { - time += invite['days'] + 'd '; - } - if (invite['hours'] != 0) { - time += invite['hours'] + 'h '; - } - if (invite['minutes'] != 0) { - time += invite['minutes'] + 'm '; - } - i[1] = "Expires in " + time.slice(0, -1); - return i - + if (empty) { + return ["None", "", 1]; } + let i = [invite["code"], "", 0, invite["email"]]; + let time = "" + for (m of ["days", "hours", "minutes"]) { + if (invite[m] != 0) { + time += `${invite[m]}${m[0]} `; + } + } + i[1] = `Expires in ${time.slice(0, -1)}` + return i; } -function addItem(invite) { - var links = document.getElementById('invites'); - var listItem = document.createElement('li'); - listItem.id = invite[0] + +function addItem(parsedInvite) { + let links = document.getElementById('invites'); + let listItem = document.createElement('li'); + listItem.id = parsedInvite[0]; listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'd-inline-block'); - var listCode = document.createElement('div'); - listCode.classList.add('d-flex', 'align-items-center', 'font-monospace'); - var codeLink = document.createElement('a'); + + let code = document.createElement('div'); + code.classList.add('d-flex', 'align-items-center', 'font-monospace'); + let codeLink = document.createElement('a'); codeLink.setAttribute('style', 'margin-right: 0.5rem;'); - codeLink.appendChild(document.createTextNode(invite[0].replace(/-/g, '‑'))); - listCode.appendChild(codeLink); - listItem.appendChild(listCode); - var listRight = document.createElement('div'); - listText = document.createElement('span'); - listText.id = invite[0] + '_expiry' + codeLink.textContent = parsedInvite[0].replace(/-/g, '-'); + + code.appendChild(codeLink); + + listItem.appendChild(code); + + let listRight = document.createElement('div'); + let listText = document.createElement('span'); + listText.id = parsedInvite[0] + '_expiry'; listText.setAttribute('style', 'margin-right: 1rem;'); - listText.appendChild(document.createTextNode(invite[1])); + listText.textContent = parsedInvite[1]; + listRight.appendChild(listText); - if (invite[2] == 0) { - var inviteCode = window.location.href.replace('#', '') + 'invite/' + invite[0]; + + if (parsedInvite[2] == 0) { + // Check this works! + let inviteCode = window.location.href.split('#')[0] + 'invite/' + parsedInvite[0]; + // codeLink.href = inviteCode; - // listCode.appendChild(document.createTextNode(" ")); - var codeCopy = document.createElement('i'); - codeCopy.onclick = function(){toClipboard(inviteCode)}; - codeCopy.classList.add('fa', 'fa-clipboard', 'icon-button'); - listCode.appendChild(codeCopy); - if (typeof(invite[3]) != 'undefined') { - var sentTo = document.createElement('span'); - sentTo.setAttribute('style', 'color: grey; margin-left: 2%; font-style: italic; font-size: 75%;'); - if (invite[3].includes('Failed to send to')) { - sentTo.appendChild(document.createTextNode(invite[3])); - } else { - sentTo.appendChild(document.createTextNode('Sent to ' + invite[3])); + let copyButton = document.createElement('i'); + copyButton.onclick = function() { toClipboard(inviteCode); }; + copyButton.classList.add('fa', 'fa-clipboard', 'icon-button'); + + code.appendChild(copyButton); + + if (parsedInvite[3] !== undefined) { + let sentTo = document.createElement('span'); + sentTo.classList.add('text-muted'); + sentTo.setAttribute('style', 'margin-left: 0.4rem; font-style: italic, font-size: 0.75rem;'); + if (!parsedInvite[3].includes('Failed to send to')) { + sentTo.textContent = "Sent to "; } - listCode.appendChild(sentTo); - }; - var listDelete = document.createElement('button'); - listDelete.onclick = function(){deleteInvite(invite[0])}; - listDelete.classList.add('btn', 'btn-outline-danger'); - listDelete.appendChild(document.createTextNode('Delete')); - listRight.appendChild(listDelete); - }; + sentTo.textContent += parsedInvite[3]; + + code.appendChild(sentTo); + } + + let deleteButton = document.createElement('button'); + deleteButton.onclick = function() { deleteInvite(parsedInvite[0]); }; + deleteButton.classList.add('btn', 'btn-outline-danger'); + deleteButton.textContent = "Delete"; + + listRight.appendChild(deleteButton); + } + listItem.appendChild(listRight); links.appendChild(listItem); -}; -function updateInvite(invite) { - var expiry = document.getElementById(invite[0] + '_expiry'); - expiry.textContent = invite[1]; } + +function updateInvite(parsedInvite) { + let expiry = document.getElementById(parsedInvite[0] + '_expiry'); + expiry.textContent = parsedInvite[1]; +} + +// delete from list on page function removeInvite(code) { - var item = document.getElementById(code); + let item = document.getElementById(code); item.parentNode.removeChild(item); } + function generateInvites(empty = false) { - // document.getElementById('invites').textContent = ''; if (empty === false) { - var req = new XMLHttpRequest(); + let req = new XMLHttpRequest(); req.open("GET", "/getInvites", true); req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); req.responseType = 'json'; @@ -235,61 +257,66 @@ function generateInvites(empty = false) { document.getElementById('invites').textContent = ''; addItem(parseInvite([], true)); } else { - data['invites'].forEach(function(invite) { - var match = false; - var items = document.getElementById('invites').children; - for (var i = 0; i < items.length; i++) { - if (items[i].id == invite['code']) { + for (let invite of data['invites']) { + let match = false; + let items = document.getElementById('invites').children; + for (let item of items) { + if (item.id == invite['code']) { match = true; updateInvite(parseInvite(invite)); - }; - }; + } + } if (match == false) { addItem(parseInvite(invite)); - }; - }); - var items = document.getElementById('invites').children; - for (var i = 0; i < items.length; i++) { + } + } + let items = document.getElementById('invites').children; + for (let item of items) { var exists = false; - data['invites'].forEach(function(invite) { - if (items[i].id == invite['code']) { + for (let invite of data['invites']) { + if (item.id == invite['code']) { exists = true; } - }); - if (exists == false) { - removeInvite(items[i].id); } - }; - }; - }; + if (exists == false) { + removeInvite(item.id); + } + } + } + } }; req.send(); } else if (empty === true) { document.getElementById('invites').textContent = ''; addItem(parseInvite([], true)); - }; -}; + } +} + +// actually delete invite function deleteInvite(code) { - var send = JSON.stringify({ "code": code }); - var req = new XMLHttpRequest(); + let send = JSON.stringify({ "code": code }); + let req = new XMLHttpRequest(); req.open("POST", "/deleteInvite", true); req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); req.onreadystatechange = function() { if (this.readyState == 4) { generateInvites(); - }; + } }; req.send(send); -}; -function addOptions(le, sel) { - for (v = 0; v <= le; v++) { - var opt = document.createElement('option'); - opt.appendChild(document.createTextNode(v)); +} + +// Add numbers to select element +function addOptions(length, selectElement) { + for (let v = 0; v <= length; v++) { + let opt = document.createElement('option'); + opt.textContent = v; opt.value = v; - sel.appendChild(opt); + selectElement.appendChild(opt); } -}; +} + function toClipboard(str) { const el = document.createElement('textarea'); el.value = str; @@ -297,10 +324,7 @@ function toClipboard(str) { el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); - const selected = - document.getSelection().rangeCount > 0 - ? document.getSelection().getRangeAt(0) - : false; + const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand('copy'); document.body.removeChild(el); @@ -308,16 +332,33 @@ function toClipboard(str) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } -}; +} + +function fixCheckboxes() { + let send_to_address = [document.getElementById('send_to_address'), document.getElementById('send_to_address_enabled')] + if (send_to_address[0] != null) { + send_to_address[0].disabled = !send_to_address[1].checked; + } + let multiUseEnabled = document.getElementById('multiUseEnabled'); + let multiUseCount = document.getElementById('multiUseCount'); + let noUseLimit = document.getElementById('noUseLimit'); + multiUseCount.disabled = !multiUseEnabled.checked; + noUseLimit.checked = false; + noUseLimit.disabled = !multiUseEnabled.checked; +} + +fixCheckboxes(); document.getElementById('inviteForm').onsubmit = function() { - var button = document.getElementById('generateSubmit'); + let button = document.getElementById('generateSubmit'); button.disabled = true; button.innerHTML = '' + 'Loading...'; send_object = serializeForm('inviteForm'); - console.log(send_object); + if (!send_object['multiple-uses'] || send_object['no-limit']) { + delete send_object['remaining-uses']; + } if (document.getElementById('send_to_address') != null) { if (send_object['send_to_address_enabled']) { send_object['email'] = send_object['send_to_address']; @@ -325,8 +366,8 @@ document.getElementById('inviteForm').onsubmit = function() { delete send_object['send_to_address_enabled']; } } - var send = JSON.stringify(send_object); - var req = new XMLHttpRequest(); + let send = JSON.stringify(send_object); + let req = new XMLHttpRequest(); req.open("POST", "/generateInvite", true); req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); @@ -335,93 +376,94 @@ document.getElementById('inviteForm').onsubmit = function() { button.textContent = 'Generate'; button.disabled = false; generateInvites(); - }; + } }; req.send(send); return false; }; + document.getElementById('loginForm').onsubmit = function() { window.token = ""; - var details = serializeForm('loginForm'); - var errorArea = document.getElementById('loginErrorArea'); + let details = serializeForm('loginForm'); + let errorArea = document.getElementById('loginErrorArea'); errorArea.textContent = ''; - var button = document.getElementById('loginSubmit'); + let button = document.getElementById('loginSubmit'); button.disabled = true; button.innerHTML = '' + 'Loading...'; - var req = new XMLHttpRequest(); + let req = new XMLHttpRequest(); req.responseType = 'json'; req.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 401) { button.disabled = false; button.textContent = 'Login'; - var wrongPassword = document.createElement('div'); + let wrongPassword = document.createElement('div'); wrongPassword.classList.add('alert', 'alert-danger'); wrongPassword.setAttribute('role', 'alert'); - wrongPassword.appendChild(document.createTextNode('Incorrect username or password.')); + wrongPassword.textContent = "Incorrect username or password."; errorArea.appendChild(wrongPassword); } else { - var data = this.response; + const data = this.response; window.token = data['token']; generateInvites(); - var interval = setInterval(function() { generateInvites(); }, 60 * 1000); - var day = document.getElementById('days'); + const interval = setInterval(function() { generateInvites(); }, 60 * 1000); + let day = document.getElementById('days'); addOptions(30, day); day.selected = "0"; - var hour = document.getElementById('hours'); + let hour = document.getElementById('hours'); addOptions(24, hour); hour.selected = "0"; - var minutes = document.getElementById('minutes'); + let minutes = document.getElementById('minutes'); addOptions(59, minutes); minutes.selected = "30"; loginModal.hide(); - }; - }; + } + } }; req.open("GET", "/getToken", true); req.setRequestHeader("Authorization", "Basic " + btoa(details['username'] + ":" + details['password'])); req.send(); return false; }; + document.getElementById('openDefaultsWizard').onclick = function() { this.disabled = true this.innerHTML = '' + 'Loading...'; - var req = new XMLHttpRequest(); + 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) { - var users = req.response['users']; - var radioList = document.getElementById('defaultUserRadios'); + let users = req.response['users']; + let radioList = document.getElementById('defaultUserRadios'); radioList.textContent = ''; if (document.getElementById('setDefaultUser')) { document.getElementById('setDefaultUser').remove(); - }; - for (var i = 0; i < users.length; i++) { - var user = users[i] - var radio = document.createElement('div'); + } + let first = true; + for (user of users) { + let radio = document.createElement('div'); radio.classList.add('radio'); - if (i == 0) { - var checked = 'checked'; + if (first) { + const checked = 'checked'; + first = false; } else { - var checked = ''; + const checked = ''; }; radio.innerHTML = - ''; + ``; radioList.appendChild(radio); } - var button = document.getElementById('openDefaultsWizard'); + let button = document.getElementById('openDefaultsWizard'); button.disabled = false; button.innerHTML = 'Set new account defaults'; - var submitButton = document.getElementById('storeDefaults'); + let submitButton = document.getElementById('storeDefaults'); submitButton.disabled = false; submitButton.textContent = 'Submit'; if (submitButton.classList.contains('btn-success')) { @@ -430,178 +472,133 @@ document.getElementById('openDefaultsWizard').onclick = function() { } else if (submitButton.classList.contains('btn-danger')) { submitButton.classList.remove('btn-danger'); submitButton.classList.add('btn-primary'); - }; + } settingsModal.hide(); userDefaultsModal.show(); - }; - }; + } + } }; req.send(); }; + document.getElementById('storeDefaults').onclick = function () { this.disabled = true; this.innerHTML = '' + 'Loading...'; - var button = document.getElementById('storeDefaults'); - var radios = document.getElementsByName('defaultRadios'); - for (var i = 0; i < radios.length; i++) { - if (radios[i].checked) { - var data = {'username':radios[i].id.slice(8), 'homescreen':false}; + let button = document.getElementById('storeDefaults'); + let radios = document.getElementsByName('defaultRadios'); + for (let radio of radios) { + if (radio.checked) { + let data = { + 'username': radio.id.slice(8), + 'homescreen': false}; if (document.getElementById('storeDefaultHomescreen').checked) { data['homescreen'] = true; } - var req = new XMLHttpRequest(); + let req = new XMLHttpRequest(); req.open("POST", "/setDefaults", 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) { - button.textContent = 'Success'; + button.textContent = "Success"; if (button.classList.contains('btn-danger')) { button.classList.remove('btn-danger'); } else if (button.classList.contains('btn-primary')) { button.classList.remove('btn-primary'); - }; + } button.classList.add('btn-success'); button.disabled = false; - setTimeout(function(){$('#userDefaults').modal('hide');}, 1000); + setTimeout(function() { userDefaultsModal.hide(); }, 1000); } else { - button.textContent = 'Failed'; + button.textContent = "Failed"; button.classList.remove('btn-primary'); button.classList.add('btn-danger'); - setTimeout(function(){ - var button = document.getElementById('storeDefaults'); - button.textContent = 'Submit'; + setTimeout(function() { + let button = document.getElementById('storeDefaults'); + button.textContent = "Submit"; button.classList.remove('btn-danger'); button.classList.add('btn-primary'); button.disabled = false; }, 1000); - }; - }; + } + } }; req.send(JSON.stringify(data)); - }; - }; + } + } }; -// $.ajax('/setDefaults', { -// data : JSON.stringify(data), -// contentType : 'application/json', -// type : 'POST', -// xhrFields : { -// withCredentials: true -// }, -// beforeSend : function (xhr) { -// xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); -// }, -// success: function() { -// button.textContent = 'Success'; -// if (button.classList.contains('btn-danger')) { -// button.classList.remove('btn-danger'); -// } else if (button.classList.contains('btn-primary')) { -// button.classList.remove('btn-primary'); -// }; -// button.classList.add('btn-success'); -// button.disabled = false; -// setTimeout(function(){$('#userDefaults').modal('hide');}, 1000); -// }, -// error: function() { -// button.textContent = 'Failed'; -// button.classList.remove('btn-primary'); -// button.classList.add('btn-danger'); -// setTimeout(function(){ -// var button = document.getElementById('storeDefaults'); -// button.textContent = 'Submit'; -// button.classList.remove('btn-danger'); -// button.classList.add('btn-primary'); -// button.disabled = false; -// }, 1000); -// } -// }); -// } -// } -// }; document.getElementById('openUsers').onclick = function () { this.disabled = true; this.innerHTML = '' + 'Loading...'; - var req = new XMLHttpRequest(); + let req = new XMLHttpRequest(); req.open("GET", "/getUsers", true); req.responseType = 'json'; req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); req.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { - var list = document.getElementById('userList'); + let list = document.getElementById('userList'); list.textContent = ''; if (document.getElementById('saveUsers')) { document.getElementById('saveUsers').remove(); - }; - var users = req.response['users']; - for (var i = 0; i < users.length; i++) { - var user = users[i] - var entry = document.createElement('div'); + } + let users = req.response['users']; + for (let user of users) { + let entry = document.createElement('div'); entry.classList.add('form-group', 'list-group-item', 'py-1'); entry.id = 'user_' + user['name']; - var label = document.createElement('label'); + let label = document.createElement('label'); label.classList.add('d-inline-block'); label.setAttribute('for', 'address_' + user['email']); - label.appendChild(document.createTextNode(user['name'])); + label.textContent = user['name']; entry.appendChild(label); - var address = document.createElement('input'); + let address = document.createElement('input'); address.setAttribute('type', 'email'); address.readOnly = true; - address.classList.add('form-control-plaintext', 'text-muted', 'd-inline-block'); - //address.setAttribute('style', 'margin-left: 2%; margin-right: 2%; color: grey;'); - address.classList.add('addressText'); + address.classList.add('form-control-plaintext', 'text-muted', 'd-inline-block', 'addressText'); address.id = 'address_' + user['email']; if (typeof(user['email']) != 'undefined') { address.value = user['email']; address.setAttribute('style', 'width: auto; margin-left: 2%;'); - }; - var editButton = document.createElement('i'); + } + let editButton = document.createElement('i'); editButton.classList.add('fa', 'fa-edit', 'd-inline-block', 'icon-button'); editButton.setAttribute('style', 'margin-left: 2%;'); editButton.onclick = function() { this.classList.remove('fa', 'fa-edit'); - // var input = document.createElement('input'); - // input.setAttribute('type', 'email'); - // input.classList.add('email-input'); - //var addressElement = this.parentNode.getElementsByClassName('addressText')[0]; - var addressElement = this.parentNode.getElementsByClassName('form-control-plaintext')[0]; + let addressElement = this.parentNode.getElementsByClassName('form-control-plaintext')[0]; addressElement.classList.remove('form-control-plaintext', 'text-muted'); addressElement.classList.add('form-control'); addressElement.readOnly = false; if (addressElement.value == '') { - // input.value = addressElement.textContent; - // } else { addressElement.placeholder = 'Email Address'; address.setAttribute('style', 'width: auto; margin-left: 2%;'); - }; - // this.parentNode.replaceChild(input, addressElement); + } if (document.getElementById('saveUsers') == null) { - var footer = document.getElementById('userFooter') - var saveUsers = document.createElement('input'); + let footer = document.getElementById('userFooter') + let saveUsers = document.createElement('input'); saveUsers.classList.add('btn', 'btn-primary'); saveUsers.setAttribute('type', 'button'); saveUsers.value = 'Save Changes'; saveUsers.id = 'saveUsers'; saveUsers.onclick = function() { - var send = {} - var entries = document.getElementById('userList').children; - for (var i = 0; i < entries.length; i++) { - var entry = entries[i]; + let send = {} + let entries = document.getElementById('userList').children; + for (let entry of entries) { if (typeof(entry.getElementsByTagName('input')[0]) != 'undefined') { - var name = entry.id.replace(/user_/g, '') - var address = entry.getElementsByTagName('input')[0].value; - send[name] = address - }; - }; + const name = entry.id.replace(/user_/g, ''); + const address = entry.getElementsByTagName('input')[0].value; + send[name] = address; + } + } send = JSON.stringify(send); - var req = new XMLHttpRequest(); + let req = new XMLHttpRequest(); req.open("POST", "/modifyUsers", true); req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); @@ -609,57 +606,56 @@ document.getElementById('openUsers').onclick = function () { if (this.readyState == 4) { if (this.status == 200 || this.status == 204) { usersModal.hide(); - }; - }; + } + } }; req.send(send); }; footer.appendChild(saveUsers); - }; + } }; entry.appendChild(editButton); entry.appendChild(address); list.appendChild(entry); }; - var button = document.getElementById('openUsers'); + let button = document.getElementById('openUsers'); button.disabled = false; button.innerHTML = 'Users '; settingsModal.hide(); usersModal.show(); - }; + } } }; req.send(); }; generateInvites(empty = true); -loginModal.show() +loginModal.show(); var config = {}; var modifiedConfig = {}; document.getElementById('openSettings').onclick = function () { - restart_setting_changed = false; - var req = new XMLHttpRequest(); + let req = new XMLHttpRequest(); req.open("GET", "/getConfig", true); req.responseType = 'json'; req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); req.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { - var settingsList = document.getElementById('settingsList'); + let settingsList = document.getElementById('settingsList'); settingsList.textContent = ''; config = this.response; - for (var section of Object.keys(config)) { - var sectionCollapse = document.createElement('div'); + for (let section of Object.keys(config)) { + let sectionCollapse = document.createElement('div'); sectionCollapse.classList.add('collapse'); sectionCollapse.id = section; - var sectionTitle = config[section]['meta']['name']; - var sectionDescription = config[section]['meta']['description']; - var entryListID = section + '_entryList'; - var sectionFooter = section + '_footer'; + let sectionTitle = config[section]['meta']['name']; + let sectionDescription = config[section]['meta']['description']; + let entryListID = section + '_entryList'; + let sectionFooter = section + '_footer'; - var innerCollapse = ` + let innerCollapse = `
${sectionDescription}
@@ -671,32 +667,32 @@ document.getElementById('openSettings').onclick = function () { for (var entry of Object.keys(config[section])) { if (entry != 'meta') { - var entryName = config[section][entry]['name']; - var required = false; + let entryName = config[section][entry]['name']; + let required = false; if (config[section][entry]['required']) { entryName += ' *'; required = true; - }; + } if (config[section][entry]['requires_restart']) { entryName += ' R'; - }; + } if (config[section][entry].hasOwnProperty('description')) { - var tooltip = ` + let tooltip = ` `; entryName += ' '; entryName += tooltip; }; - var entryValue = config[section][entry]['value']; - var entryType = config[section][entry]['type']; - var entryGroup = document.createElement('div'); + let entryValue = config[section][entry]['value']; + let entryType = config[section][entry]['type']; + let entryGroup = document.createElement('div'); if (entryType == 'bool') { entryGroup.classList.add('form-check'); if (entryValue.toString() == 'true') { var checked = true; } else { var checked = false; - }; + } entryGroup.innerHTML = ` @@ -711,9 +707,9 @@ document.getElementById('openSettings').onclick = function () { document.getElementById(sect + '_' + ent).disabled = !state; } else if ((sect + '_' + config[sect][ent]['depends_false']) == this.id) { document.getElementById(sect + '_' + ent).disabled = state; - }; - }; - }; + } + } + } }; } else if ((entryType == 'text') || (entryType == 'email') || (entryType == 'password') || (entryType == 'number')) { entryGroup.classList.add('form-group'); @@ -724,30 +720,30 @@ document.getElementById('openSettings').onclick = function () { entryGroup.getElementsByClassName('form-control')[0].required = required; } else if (entryType == 'select') { entryGroup.classList.add('form-group'); - var entryOptions = config[section][entry]['options']; - var innerGroup = ` + let entryOptions = config[section][entry]['options']; + let innerGroup = ` '; entryGroup.innerHTML = innerGroup; entryGroup.getElementsByClassName('form-control')[0].required = required; - }; + } sectionCollapse.getElementsByClassName(entryListID)[0].appendChild(entryGroup); - }; - }; - var sectionButton = document.createElement('button'); + } + } + let sectionButton = document.createElement('button'); sectionButton.setAttribute('type', 'button'); sectionButton.classList.add('list-group-item', 'list-group-item-action'); sectionButton.appendChild(document.createTextNode(sectionTitle)); @@ -756,25 +752,19 @@ document.getElementById('openSettings').onclick = function () { sectionButton.setAttribute('data-target', '#' + section); settingsList.appendChild(sectionButton); settingsList.appendChild(sectionCollapse); - }; - }; + } + } }; req.send(); settingsModal.show(); -}; +} triggerTooltips(); -// -// $('#settingsMenu').on('shown.bs.modal', function() { -// $("a[data-toggle='tooltip']").each(function (i, obj) { -// $(obj).tooltip(); -// }); -// }); -// + function sendConfig(modalId) { - var modal = document.getElementById(modalId); - var send = JSON.stringify(modifiedConfig); - var req = new XMLHttpRequest(); + let modal = document.getElementById(modalId); + let send = JSON.stringify(modifiedConfig); + let req = new XMLHttpRequest(); req.open("POST", "/modifyConfig", true); req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":")); req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); @@ -784,50 +774,41 @@ function sendConfig(modalId) { createModal(modalId, true).hide(); if (modalId != 'settingsMenu') { settingsModal.hide(); - }; - }; - }; - // fail: function(xhr, textStatus, errorThrown) { - // var footer = modal.getElementsByClassName('modal-dialog')[0].getElementsByClassName('modal-content')[0].getElementsByClassName('modal-footer')[0]; - // var alert = document.createElement('div'); - // alert.classList.add('alert', 'alert-danger'); - // alert.setAttribute('role', 'alert'); - // alert.appendChild(document.createTextNode('Error: ' + errorThrown)); - // footer.appendChild(alert); - // }, + } + } + } }; req.send(send); -}; +} document.getElementById('settingsSave').onclick = function() { modifiedConfig = {}; var restart_setting_changed = false; var settings_changed = false; - for (var section of Object.keys(config)) { - for (var entry of Object.keys(config[section])) { + for (let section of Object.keys(config)) { + for (let entry of Object.keys(config[section])) { if (entry != 'meta') { - var entryID = section + '_' + entry; - var el = document.getElementById(entryID); + let entryID = section + '_' + entry; + let el = document.getElementById(entryID); if (el.type == 'checkbox') { var value = el.checked.toString(); } else { var value = el.value.toString(); - }; + } if (value != config[section][entry]['value'].toString()) { if (!modifiedConfig.hasOwnProperty(section)) { modifiedConfig[section] = {}; - }; + } modifiedConfig[section][entry] = value; settings_changed = true; if (config[section][entry]['requires_restart']) { restart_setting_changed = true; - }; - }; - }; - }; - }; - // if (restart_setting_changed) { + } + } + } + } + } if (restart_setting_changed) { document.getElementById('applyRestarts').onclick = function(){sendConfig('restartModal');}; settingsModal.hide(); @@ -836,5 +817,6 @@ document.getElementById('settingsSave').onclick = function() { sendConfig('settingsMenu'); } else { settingsModal.hide(); - }; -}; + } +} +