import {LitElement, html} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; class TfTabConnectionsElement extends LitElement { static get properties() { return { broadcasts: {type: Array}, identities: {type: Array}, connections: {type: Array}, stored_connections: {type: Array}, users: {type: Object}, }; } constructor() { super(); let self = this; this.broadcasts = []; this.identities = []; this.connections = []; this.stored_connections = []; this.users = {}; tfrpc.rpc.getAllIdentities().then(function(identities) { self.identities = identities || []; }); tfrpc.rpc.getStoredConnections().then(function(connections) { self.stored_connections = connections || []; }); } render_connection_summary(connection) { if (connection.address && connection.port) { return html`(<small>${connection.address}:${connection.port}</small>)`; } else if (connection.tunnel) { return html`(room peer)`; } else { return JSON.stringify(connection); } } render_room_peers(connection) { let self = this; let peers = this.broadcasts.filter(x => x.tunnel?.id == connection); if (peers.length) { let connections = this.connections.map(x => x.id); return html`${peers.filter(x => connections.indexOf(x.pubkey) == -1).map(x => html`${self.render_room_peer(x)}`)}`; } } async _tunnel(portal, target) { return tfrpc.rpc.createTunnel(portal, target); } render_room_peer(connection) { let self = this; return html` <li> <input type="button" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)} value="Connect"></input> <tf-user id=${connection.pubkey} .users=${this.users}></tf-user> 📡 </li> `; } render_broadcast(connection) { return html` <li> <input type="button" @click=${() => tfrpc.rpc.connect(connection)} value="Connect"></input> <tf-user id=${connection.pubkey} .users=${this.users}></tf-user> ${this.render_connection_summary(connection)} </li> `; } async forget_stored_connection(connection) { await tfrpc.rpc.forgetStoredConnection(connection); this.stored_connections = (await tfrpc.rpc.getStoredConnections()) || []; } render_connection(connection) { return html` <input type="button" @click=${() => tfrpc.rpc.closeConnection(connection.id)} value="Close"></input> <tf-user id=${connection.id} .users=${this.users}></tf-user> ${connection.tunnel !== undefined ? '🚇' : html`(${connection.host}:${connection.port})`} <ul> ${this.connections.filter(x => x.tunnel === this.connections.indexOf(connection)).map(x => html`<li>${this.render_connection(x)}</li>`)} ${this.render_room_peers(connection.id)} </ul> `; } render() { let self = this; return html` <h2>New Connection</h2> <div style="display: flex; flex-direction: column"> <textarea id="code"></textarea> </div> <input type="button" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)} value="Connect"></input> <h2>Broadcasts</h2> <ul> ${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))} </ul> <h2>Connections</h2> <ul> ${this.connections.filter(x => x.tunnel === undefined).map(x => html` <li>${this.render_connection(x)}</li> `)} </ul> <h2>Stored Connections (WIP)</h2> <ul> ${this.stored_connections.map(x => html` <li> <input type="button" @click=${() => self.forget_stored_connection(x)} value="Forget"></input> <input type="button" @click=${() => tfrpc.rpc.connect(x)} value="Connect"></input> ${x.address}:${x.port} <tf-user id=${x.pubkey} .users=${self.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-tab-connections', TfTabConnectionsElement);