forked from cory/tildefriends
118 lines
3.3 KiB
JavaScript
118 lines
3.3 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},
|
|
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);
|