import {LitElement, html} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; import {styles} from './tf-styles.js'; class TfTabConnectionsElement extends LitElement { static get properties() { return { broadcasts: {type: Array}, identities: {type: Array}, my_identities: {type: Array}, connections: {type: Array}, stored_connections: {type: Array}, users: {type: Object}, server_identity: {type: String}, }; } static styles = styles; static k_broadcast_emojis = { discovery: '🏓', room: '🚪', peer_exchange: '🕸', }; constructor() { super(); let self = this; this.broadcasts = []; this.identities = []; this.my_identities = []; this.connections = []; this.stored_connections = []; this.users = {}; tfrpc.rpc.getIdentities().then(function (identities) { self.my_identities = identities || []; }); tfrpc.rpc.getAllIdentities().then(function (identities) { self.identities = identities || []; }); tfrpc.rpc.getStoredConnections().then(function (connections) { self.stored_connections = connections || []; }); tfrpc.rpc.getServerIdentity().then(function (identity) { self.server_identity = identity; }); } render_connection_summary(connection) { if (connection.address && connection.port) { return html`
${connection.address}:${connection.port}
`; } 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`
  • 📡
  • `; } render_broadcast(connection) { return html`
  • ${TfTabConnectionsElement.k_broadcast_emojis[connection.origin]} ${this.render_connection_summary(connection)}
  • `; } async forget_stored_connection(connection) { await tfrpc.rpc.forgetStoredConnection(connection); this.stored_connections = (await tfrpc.rpc.getStoredConnections()) || []; } render_connection(connection) { let requests = Object.values( connection.requests.reduce(function (accumulator, value) { let key = `${value.name}:${Math.sign(value.request_number)}`; if (!accumulator[key]) { accumulator[key] = Object.assign({count: 0}, value); } accumulator[key].count++; return accumulator; }, {}) ); return html` ${connection.tunnel !== undefined ? '🚇' : html`(${connection.host}:${connection.port})`}
    ${requests.map( (x) => html` ${x.request_number > 0 ? '🟩' : '🟥'} ${x.name} 1 ? undefined : 'display: none'} >${x.count} ` )}
    `; } refresh() { tfrpc.rpc.sync(); } render() { let self = this; return html`

    New Connection

    Broadcasts

    Connections

    Stored Connections

    Local Accounts

    `; } } customElements.define('tf-tab-connections', TfTabConnectionsElement);