tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

Freaking CSS. Trying to make the admin page...work.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4385 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-08-05 01:22:27 +00:00
parent d0177d24cb
commit 9179746763
3 changed files with 44 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/admin/app.js
View File

@ -9,6 +9,7 @@ tfrpc.register(function global_settings_set(key, value) {
}); });
async function main() { async function main() {
try {
let data = { let data = {
users: {}, users: {},
granted: await core.allPermissionsGranted(), granted: await core.allPermissionsGranted(),
@ -18,5 +19,8 @@ async function main() {
data.users[user] = await core.permissionsForUser(user); data.users[user] = await core.permissionsForUser(user);
} }
await app.setDocument(utf8Decode(getFile('index.html')).replace('$data', JSON.stringify(data))); await app.setDocument(utf8Decode(getFile('index.html')).replace('$data', JSON.stringify(data)));
} catch {
await app.setDocument('<span style="color: #f00">Only an administrator can modify these settings.</span>');
}
} }
main(); main();

4
apps/admin/index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html style="width: 100%">
<head> <head>
<script>const g_data = $data;</script> <script>const g_data = $data;</script>
</head> </head>
<body style="color: #fff"> <body style="color: #fff; width: 100%">
<h1>Tilde Friends Administration</h1> <h1>Tilde Friends Administration</h1>
</body> </body>
<script type="module" src="script.js"></script> <script type="module" src="script.js"></script>

39
apps/admin/script.js
View File

@ -25,29 +25,37 @@ window.addEventListener('load', function() {
function input_template(key, description) { function input_template(key, description) {
if (description.type === 'boolean') { if (description.type === 'boolean') {
return html` return html`
<label ?for=${'gs_' + key} style="grid-column: 1">${key}: </label> <div style="margin-top: 1em">
<input type="checkbox" ?checked=${description.value} ?id=${'gs_' + key} style="grid-column: 2"></input> <label for=${'gs_' + key} style="font-weight: bold">${key}: </label>
<div style="grid-column: 3"> <div>
<input type="checkbox" ?checked=${description.value} id=${'gs_' + key}></input>
<button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.checked)}>Set</button> <button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.checked)}>Set</button>
<span>${description.description}</span> <div>${description.description}</div>
</div>
</div> </div>
`; `;
} else if (description.type === 'textarea') { } else if (description.type === 'textarea') {
return html` return html`
<label ?for=${'gs_' + key} style="grid-column: 1">${key}: </label> <div style="margin-top: 1em"">
<textarea style="vertical-align: top" rows=20 cols=80 ?id=${'gs_' + key}>${description.value}</textarea> <label for=${'gs_' + key} style="font-weight: bold">${key}: </label>
<div style="grid-column: 3"> <div style="width: 100%; padding: 0; margin: 0">
<div style="width: 90%; padding: 0 margin: 0">
<textarea style="vertical-align: top; width: 100%" rows=20 cols=80 id=${'gs_' + key}>${description.value}</textarea>
</div>
<button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.value)}>Set</button> <button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.value)}>Set</button>
<span>${description.description}</span> <div>${description.description}</div>
</div>
</div> </div>
`; `;
} else { } else {
return html` return html`
<label ?for=${'gs_' + key} style="grid-column: 1">${key}: </label> <div style="margin-top: 1em">
<input type="text" value="${description.value}" ?id=${'gs_' + key}></input> <label for=${'gs_' + key} style="font-weight: bold">${key}: </label>
<div style="grid-column: 3"> <div>
<input type="text" value="${description.value}" id=${'gs_' + key}></input>
<button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.value)}>Set</button> <button @click=${(e) => global_settings_set(key, e.srcElement.parentElement.previousElementSibling.value)}>Set</button>
<span>${description.description}</span> <div>${description.description}</div>
</div>
</div> </div>
`; `;
} }
@ -67,12 +75,13 @@ window.addEventListener('load', function() {
${Object.entries(users).map(u => user_template(u[0], u[1]))} ${Object.entries(users).map(u => user_template(u[0], u[1]))}
</ul>`; </ul>`;
const page_template = (data) => const page_template = (data) =>
html`<div> html`<div style="padding: 0; margin: 0; width: 100%; max-width: 100%">
<h2>Global Settings</h2> <h2>Global Settings</h2>
<div style="display: grid"> <div>
${Object.keys(data.settings).sort().map(x => html`${input_template(x, data.settings[x])}`)} ${Object.keys(data.settings).sort().map(x => html`${input_template(x, data.settings[x])}`)}
</div> </div>
${users_template(data.users)} ${users_template(data.users)}
</div>`; </div>
`;
render(page_template(g_data), document.body); render(page_template(g_data), document.body);
}); });