tildefriends/apps/ssb/tf-reactions-modal.js

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; box-sizing: border-box">
			<div class="w3-modal-content w3-card-4 w3-theme-d1">
				<div class="w3-container w3-padding">
					<header class="w3-container">
						<h2>Reactions</h2>
						<span class="w3-button w3-display-topright" @click=${this.clear}>&times;</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>
					<footer class="w3-container w3-padding">
						<button class="w3-button" @click=${this.clear}>Close</button>
					</footer>
				</div>
			</div>
		</div>` : undefined;
	}
}

customElements.define('tf-reactions-modal', TfReactionsModalElement);