import {html, render} from './lit.min.js'; import * as tfrpc from '/static/tfrpc.js'; function delete_user(user) { if (confirm(`Are you sure you want to delete the user "${user}"?`)) { tfrpc.rpc.delete_user(user).then(function() { alert(`User "${user}" deleted successfully.`); }).catch(function(error) { alert(`Failed to delete user "${user}": ${JSON.stringify(error, null, 2)}.`); }); } } function global_settings_set(key, value) { tfrpc.rpc.global_settings_set(key, value).then(function() { alert(`Set "${key}" to "${value}".`); }).catch(function(error) { alert(`Failed to set "${key}": ${JSON.stringify(error, null, 2)}.`); }); } window.addEventListener('load', function() { const permission_template = (permission) => html` <code>${permission}</code>`; function input_template(key, description) { if (description.type === 'boolean') { return html` <label ?for=${'gs_' + key} style="grid-column: 1">${key}: </label> <input type="checkbox" ?checked=${description.value} ?id=${'gs_' + key} style="grid-column: 2"></input> <div style="grid-column: 3"> <button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.checked)}>Set</button> <span>${description.description}</span> </div> `; } else if (description.type === 'textarea') { return html` <label ?for=${'gs_' + key} style="grid-column: 1">${key}: </label> <textarea style="vertical-align: top" rows=20 cols=80 ?id=${'gs_' + key}>${description.value}</textarea> <div style="grid-column: 3"> <button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.value)}>Set</button> <span>${description.description}</span> </div> `; } else { return html` <label ?for=${'gs_' + key} style="grid-column: 1">${key}: </label> <input type="text" value="${description.value}" ?id=${'gs_' + key}></input> <div style="grid-column: 3"> <button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.value)}>Set</button> <span>${description.description}</span> </div> `; } } const user_template = (user, permissions) => html` <li> <button @click=${(e) => delete_user(user)}> Delete </button> ${user}: ${permissions.map(x => permission_template(x))} </li> `; const users_template = (users) => html`<h2>Users</h2> <ul> ${Object.entries(users).map(u => user_template(u[0], u[1]))} </ul>`; const page_template = (data) => html`<div> <h2>Global Settings</h2> <div style="display: grid"> ${Object.keys(data.settings).sort().map(x => html`${input_template(x, data.settings[x])}`)} </div> ${users_template(data.users)} </div>`; render(page_template(g_data), document.body); });