Title case settings names in the admin app.

This commit is contained in:
Cory McWilliams 2024-08-26 12:24:36 -04:00
parent e6f5eb244e
commit f80a44ccd7
2 changed files with 8 additions and 4 deletions

View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🎛", "emoji": "🎛",
"previous": "&cv8SAWUlFEc4rpJVAdySG4wF8Jjv3CdxLmoFfx/wqzw=.sha256" "previous": "&2pviG1KjMF1Q3yCsJJpEMDJG3AI0qG8enuUso0Z42Aw=.sha256"
} }

View File

@ -27,13 +27,17 @@ function global_settings_set(key, value) {
}); });
} }
function title_case(name) {
return name.split('_').map(x => x.charAt(0).toUpperCase() + x.substring(1)).join(' ');
}
window.addEventListener('load', function () { window.addEventListener('load', function () {
const permission_template = (permission) => html` <code>${permission}</code>`; const permission_template = (permission) => html` <code>${permission}</code>`;
function input_template(key, description) { function input_template(key, description) {
if (description.type === 'boolean') { if (description.type === 'boolean') {
return html` return html`
<li class="w3-row"> <li class="w3-row">
<label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold">${key}</label> <label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold">${title_case(key)}</label>
<div class="w3-quarter w3-padding">${description.description}</div> <div class="w3-quarter w3-padding">${description.description}</div>
<div class="w3-quarter w3-padding w3-center"><input class="w3-check" type="checkbox" ?checked=${description.value} id=${'gs_' + key}></input></div> <div class="w3-quarter w3-padding w3-center"><input class="w3-check" type="checkbox" ?checked=${description.value} id=${'gs_' + key}></input></div>
<button class="w3-quarter w3-button w3-theme-action" @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.checked)}>Set</button> <button class="w3-quarter w3-button w3-theme-action" @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.checked)}>Set</button>
@ -43,7 +47,7 @@ window.addEventListener('load', function () {
return html` return html`
<li class="w3-row"> <li class="w3-row">
<label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold" <label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold"
>${key}</label >${title_case(key)}</label
> >
<div class="w3-rest w3-padding">${description.description}</div> <div class="w3-rest w3-padding">${description.description}</div>
<textarea <textarea
@ -68,7 +72,7 @@ ${description.value}</textarea
} else { } else {
return html` return html`
<li class="w3-row"> <li class="w3-row">
<label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold">${key}</label> <label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold">${title_case(key)}</label>
<div class="w3-quarter w3-padding">${description.description}</div> <div class="w3-quarter w3-padding">${description.description}</div>
<input class="w3-input w3-quarter" type="text" value="${description.value}" id=${'gs_' + key}></input> <input class="w3-input w3-quarter" type="text" value="${description.value}" id=${'gs_' + key}></input>
<button class="w3-button w3-quarter w3-theme-action" @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.value)}>Set</button> <button class="w3-button w3-quarter w3-theme-action" @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.value)}>Set</button>