Cory McWilliams
855f5f7af4
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 20m6s
291 lines
7.7 KiB
JavaScript
291 lines
7.7 KiB
JavaScript
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},
|
|
connect_attempt: {type: Object},
|
|
connect_message: {type: String},
|
|
connect_success: {type: Boolean},
|
|
};
|
|
}
|
|
|
|
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`<div>
|
|
<small>${connection.address}:${connection.port}</small>
|
|
</div>`;
|
|
} else if (connection.tunnel) {
|
|
return html`<div>room peer</div>`;
|
|
} 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>
|
|
<button
|
|
class="w3-button w3-theme-d1"
|
|
@click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}
|
|
>
|
|
Connect
|
|
</button>
|
|
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> 📡
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
render_message(connection) {
|
|
return html`<div
|
|
?hidden=${this.connect_message === undefined ||
|
|
this.connect_attempt != connection}
|
|
style="cursor: pointer"
|
|
class=${'w3-panel ' + (this.connect_success ? 'w3-green' : 'w3-red')}
|
|
@click=${() => (this.connect_attempt = undefined)}
|
|
>
|
|
<p>${this.connect_message}</p>
|
|
</div>`;
|
|
}
|
|
|
|
render_broadcast(connection) {
|
|
let self = this;
|
|
return html`
|
|
<li>
|
|
<div class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap">
|
|
<button
|
|
class="w3-bar-item w3-button w3-theme-d1"
|
|
@click=${() => self.connect(connection)}
|
|
>
|
|
Connect
|
|
</button>
|
|
<div class="w3-bar-item">
|
|
${TfTabConnectionsElement.k_broadcast_emojis[connection.origin]}
|
|
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
|
|
${this.render_connection_summary(connection)}
|
|
</div>
|
|
</div>
|
|
${this.render_message(connection)}
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
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`
|
|
<button
|
|
class="w3-button w3-theme-d1"
|
|
@click=${() => tfrpc.rpc.closeConnection(connection.id)}
|
|
>
|
|
Close
|
|
</button>
|
|
${connection.flags.one_shot ? '🔃' : undefined}
|
|
<tf-user id=${connection.id} .users=${this.users}></tf-user>
|
|
${connection.tunnel !== undefined
|
|
? '🚇'
|
|
: html`(${connection.host}:${connection.port})`}
|
|
<div>
|
|
${requests.map(
|
|
(x) => html`
|
|
<span
|
|
class=${'w3-tag w3-small ' +
|
|
(x.active ? 'w3-theme-l3' : 'w3-theme-d3')}
|
|
>${x.request_number > 0 ? '🟩' : '🟥'} ${x.name}
|
|
<span
|
|
class="w3-badge w3-white"
|
|
style=${x.count > 1 ? undefined : 'display: none'}
|
|
>${x.count}</span
|
|
></span
|
|
>
|
|
`
|
|
)}
|
|
</div>
|
|
<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>
|
|
<div ?hidden=${!connection.destroy_reason} class="w3-panel w3-red">
|
|
<p>${connection.destroy_reason}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
connect(address) {
|
|
let self = this;
|
|
self.connect_attempt = address;
|
|
self.connect_message = undefined;
|
|
self.connect_success = false;
|
|
tfrpc.rpc
|
|
.connect(address)
|
|
.then(function () {
|
|
if (self.connect_attempt == address) {
|
|
self.connect_message = 'Connected.';
|
|
self.connect_success = true;
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
if (self.connect_attempt == address) {
|
|
self.connect_message = 'Error: ' + error;
|
|
self.connect_success = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
render() {
|
|
let self = this;
|
|
return html`
|
|
<div class="w3-container" style="box-sizing: border-box">
|
|
<h2>New Connection</h2>
|
|
<textarea class="w3-input w3-theme-d1" id="code"></textarea>
|
|
${this.render_message(this.renderRoot.getElementById('code')?.value)}
|
|
<button
|
|
class="w3-button w3-theme-d1"
|
|
@click=${() =>
|
|
self.connect(self.renderRoot.getElementById('code')?.value)}
|
|
>
|
|
Connect
|
|
</button>
|
|
<h2>Broadcasts</h2>
|
|
<ul class="w3-ul w3-border">
|
|
${this.broadcasts
|
|
.filter((x) => x.address)
|
|
.filter(
|
|
(x) => self.connections.map((c) => c.id).indexOf(x.pubkey) == -1
|
|
)
|
|
.map((x) => self.render_broadcast(x))}
|
|
</ul>
|
|
<h2>Connections</h2>
|
|
<ul class="w3-ul w3-border">
|
|
${this.connections
|
|
.filter((x) => x.tunnel === undefined)
|
|
.map(
|
|
(x) => html`
|
|
<li class="w3-bar">${this.render_connection(x)}</li>
|
|
`
|
|
)}
|
|
</ul>
|
|
<h2>Stored Connections</h2>
|
|
<ul class="w3-ul w3-border">
|
|
${this.stored_connections.map(
|
|
(x) => html`
|
|
<li>
|
|
<div class="w3-bar">
|
|
<button
|
|
class="w3-bar-item w3-button w3-theme-d1"
|
|
@click=${() => self.forget_stored_connection(x)}
|
|
>
|
|
Forget
|
|
</button>
|
|
<button
|
|
class="w3-bar-item w3-button w3-theme-d1"
|
|
@click=${() => this.connect(x)}
|
|
>
|
|
Connect
|
|
</button>
|
|
<div class="w3-bar-item">
|
|
<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
|
|
<div><small>${x.address}:${x.port}</small></div>
|
|
</div>
|
|
</div>
|
|
${this.render_message(x)}
|
|
</li>
|
|
`
|
|
)}
|
|
</ul>
|
|
<h2>Local Accounts</h2>
|
|
<ul class="w3-ul w3-border">
|
|
${this.identities.map(
|
|
(x) =>
|
|
html`<li class="w3-bar">
|
|
${x == this.server_identity
|
|
? html`<span class="w3-tag w3-medium w3-round w3-theme-l1"
|
|
>🖥 local server</span
|
|
>`
|
|
: undefined}
|
|
${this.my_identities.indexOf(x) != -1
|
|
? html`<span class="w3-tag w3-medium w3-round w3-theme-d1"
|
|
>😎 you</span
|
|
>`
|
|
: undefined}
|
|
<tf-user id=${x} .users=${this.users}></tf-user>
|
|
</li>`
|
|
)}
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-tab-connections', TfTabConnectionsElement);
|