tildefriends/apps/ssb/tf-tab-connections.js

127 lines
3.8 KiB
JavaScript
Raw Normal View History

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);