tildefriends/apps/wiki/tf-collection.js
2024-02-24 11:09:34 -05:00

116 lines
3.2 KiB
JavaScript

import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
class TfCollectionElement extends LitElement {
static get properties() {
return {
whoami: {type: String},
collection: {type: Object},
selected_id: {type: String},
is_creating: {type: Boolean},
is_renaming: {type: Boolean},
};
}
on_create(event) {
let name = this.shadowRoot.getElementById('create_name').value;
this.dispatchEvent(
new CustomEvent('create', {
bubbles: true,
detail: {
name: name,
},
})
);
this.is_creating = false;
}
on_rename(event) {
let id = this.shadowRoot.getElementById('select').value;
let name = this.shadowRoot.getElementById('rename_name').value;
this.dispatchEvent(
new CustomEvent('rename', {
bubbles: true,
detail: {
id: id,
value: this.collection[id],
name: name,
},
})
);
this.is_renaming = false;
}
on_tombstone(event) {
let id = this.shadowRoot.getElementById('select').value;
if (
confirm(`Are you sure you want to delete '${this.collection[id].name}'?`)
) {
this.dispatchEvent(
new CustomEvent('tombstone', {
bubbles: true,
detail: {
id: id,
value: this.collection[id],
},
})
);
}
}
on_selected(event) {
let id = event.srcElement.value;
this.selected_id = id != '' ? id : undefined;
this.dispatchEvent(
new CustomEvent('change', {
bubbles: true,
detail: {
id: id,
value: this.collection[id],
},
})
);
}
render() {
let self = this;
return html`
<span style="display: inline-flex; flex-direction: row">
<select @change=${this.on_selected} id="select" value=${this.selected_id}>
<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select)</option>
${Object.values(this.collection ?? {})
.sort((x, y) => x.name.localeCompare(y.name))
.map(
(x) =>
html`<option
value=${x.id}
?selected=${this.selected_id === x.id}
>
${x.name}
</option>`
)}
</select>
<span ?hidden=${!this.is_renaming || !this.whoami}>
<span style="display: inline-flex; flex-direction: row; margin-left: 8px; margin-right: 8px">
<label for="rename_name">🏷Rename to:</label>
<input type="text" id="rename_name"></input>
<button @click=${this.on_rename}>Rename ${this.type}</button>
<button @click=${() => (self.is_renaming = false)}>x</button>
</span>
</span>
<button @click=${() => (self.is_renaming = true)} ?disabled=${this.is_renaming || !this.selected_id} ?hidden=${!this.whoami}>🏷</button>
<button @click=${self.on_tombstone} ?disabled=${!this.selected_id} ?hidden=${!this.whoami}>🪦</button>
<span ?hidden=${!this.is_creating || !this.whoami}>
<label for="create_name">New ${this.type} name:</label>
<input type="text" id="create_name"></input>
<button @click=${this.on_create}>Create ${this.type}</button>
<button @click=${() => (self.is_creating = false)}>x</button>
</span>
<button @click=${() => (self.is_creating = true)} ?hidden=${this.is_creating || !this.whoami}>+</button>
</span>
`;
}
}
customElements.define('tf-collection', TfCollectionElement);