forked from cory/tildefriends
52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
import {LitElement, html, nothing} from './lit-all.min.js';
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
|
|
class TfThemePickerElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
selected: {type: String},
|
|
themes: {type: Array},
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.load();
|
|
}
|
|
|
|
async load() {
|
|
this.themes = await tfrpc.rpc.getThemes();
|
|
this.selected = await tfrpc.rpc.getTheme();
|
|
|
|
let select = this.renderRoot?.querySelector('#theme-select');
|
|
select.value = this.selected;
|
|
}
|
|
|
|
changed(event) {
|
|
this.selected = event.srcElement.value;
|
|
console.log('selected theme', this.selected);
|
|
// TODO
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<link rel="stylesheet" href="/static/tildefriends-v1.css" />
|
|
|
|
<label for="theme">[Not implemented] Choose your theme:</label>
|
|
|
|
<select
|
|
name="theme"
|
|
id="theme-select"
|
|
?hidden=${!this.themes?.length}
|
|
@change=${this.changed}
|
|
>
|
|
${(this.themes ?? []).map(
|
|
(name) => html`<option value=${name}>${name}</option>`
|
|
)}
|
|
</select>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-theme-picker', TfThemePickerElement);
|