48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
|
|
import {styles} from './tf-styles.js';
|
|
|
|
class TfReactionsModalElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
users: {type: Object},
|
|
votes: {type: Array},
|
|
};
|
|
}
|
|
|
|
static styles = styles;
|
|
|
|
constructor() {
|
|
super();
|
|
this.votes = [];
|
|
this.users = {};
|
|
}
|
|
|
|
clear() {
|
|
this.votes = [];
|
|
}
|
|
|
|
render() {
|
|
let self = this;
|
|
return this.votes?.length ? html`
|
|
<div class="w3-modal w3-animate-opacity" style="display: block">
|
|
<div class="w3-modal-content w3-card-4 w3-theme-d1">
|
|
<header class="w3-container">
|
|
<h2>Reactions</h2>
|
|
<span class="w3-button w3-display-topright" @click=${this.clear}>×</span>
|
|
</header>
|
|
<ul class="w3-theme-dark w3-container w3-ul">
|
|
${this.votes.map(x => html`
|
|
<li class="w3-bar">
|
|
<span class="w3-bar-item">${x?.content?.vote?.expression}</span>
|
|
<tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user>
|
|
<span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span>
|
|
</li>
|
|
`)}
|
|
</ul>
|
|
</div>
|
|
</div>` : undefined;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-reactions-modal', TfReactionsModalElement);
|