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}, category: {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` <link rel="stylesheet" href="tildefriends.css"/> <span class="inline-flex-row"> <select @change=${this.on_selected} id="select" value=${this.selected_id}> <option value="" ?selected=${this.selected_id === ''} disabled hidden>(select ${this.category})</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 class="inline-flex-row" style="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 class="yellow" @click=${() => (self.is_renaming = true)} ?disabled=${this.is_renaming || !this.selected_id} ?hidden=${!this.whoami}>🏷</button> <button class="red" @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 class="green" @click=${() => (self.is_creating = true)} ?hidden=${this.is_creating || !this.whoami}>+</button> </span> `; } } customElements.define('tf-collection', TfCollectionElement);