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},
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 || [];
});
}
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) {
return html`
${peers.map(x => html`${self.render_room_peer(x)}`)}
`;
}
}
async _tunnel(portal, target) {
let request_number = await tfrpc.rpc.connectionSendJson(portal, {name: ['tunnel', 'connect'], args: [{portal: portal, target: target}], type: 'duplex'});
return tfrpc.rpc.createTunnel(portal, request_number, target);
}
render_room_peer(connection) {
let self = this;
return html`
self._tunnel(connection.tunnel.id, connection.pubkey)} value="Connect">
`;
}
render_broadcast(connection) {
return html`
tfrpc.rpc.connect(connection)} value="Connect">
${this.render_connection_summary(connection)}
`
}
render() {
let self = this;
return html`
New Connection
tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)} value="Connect">
Broadcasts
${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))}
Connections
Local Accounts
${this.identities.map(x => html` `)}
`;
}
}
customElements.define('tf-tab-connections', TfTabConnectionsElement);