import {LitElement, html} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; import {styles} from './tf-styles.js'; class TfUserElement extends LitElement { static get properties() { return { id: {type: String}, users: {type: Object}, }; } static styles = styles; constructor() { super(); this.id = null; this.users = {}; } render() { let name = this.users?.[this.id]?.name; name = name !== undefined ? html`<a target="_top" href=${'#' + this.id}>${name}</a>` : html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`; if (this.users[this.id]) { let image = this.users[this.id].image; image = typeof(image) == 'string' ? image : image?.link; return html` <div style="display: inline-block; font-weight: bold"> <img style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%" ?hidden=${image === undefined} src="${image ? '/' + image + '/view' : undefined}"> ${name} </div>`; } else { return html` <div style="display: inline-block; font-weight: bold"> ${name} </div>`; } } } customElements.define('tf-user', TfUserElement);