import {LitElement, html} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; class TfConnectionsElement extends LitElement { static get properties() { return { broadcasts: {type: Array}, identities: {type: Array}, connections: {type: Array}, users: {type: Object}, } } constructor() { super(); let self = this; this.broadcasts = []; this.identities = []; this.connections = []; this.users = {}; tfrpc.rpc.getAllIdentities().then(function(identities) { self.identities = identities || []; }); } _emit_change() { let changed_event = new Event('change', { srcElement: this, }); this.dispatchEvent(changed_event); } changed(event) { this.selected = event.srcElement.value; tfrpc.rpc.localStorageSet('whoami', this.selected); this._emit_change(); } render() { return html` <h2>Broadcasts</h2> <ul> ${this.broadcasts.map(x => html`<li><tf-user id=${x.pubkey} .users=${this.users}></tf-user></li>`)} </ul> <h2>Connections</h2> <ul> ${this.connections.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)} </ul> <h2>Local Accounts</h2> <ul> ${this.identities.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)} </ul> `; } } customElements.define('tf-connections', TfConnectionsElement);