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);