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

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_error: {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`<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_broadcast(connection) {
		return html`
			<li class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap">
				<button
					class="w3-bar-item w3-button w3-theme-d1"
					@click=${() => tfrpc.rpc.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>
			</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>
		`;
	}

	refresh() {
		tfrpc.rpc.sync();
	}

	connect(address) {
		let self = this;
		tfrpc.rpc.connect(address).then(function() {
			self.connect_error = 'connected!';
		}).catch(function(error) {
			self.connect_error = error;
		});
	}

	render() {
		let self = this;
		return html`
			<div class="w3-container" style="box-sizing: border-box">
				<button
					class="w3-button w3-theme-l3 w3-circle w3-ripple w3-large"
					@click=${this.refresh}
				>
					🔃
				</button>
				<h2>New Connection</h2>
				<textarea class="w3-input w3-theme-d1" id="code"></textarea>
				<button
					class="w3-button w3-theme-d1"
					@click=${() =>
						self.connect(self.renderRoot.getElementById('code').value)}
				>
					Connect
				</button>
				<div ?hidden=${this.connect_error === undefined}>${this.connect_error}</div>
				<h2>Broadcasts</h2>
				<ul class="w3-ul w3-border">
					${this.broadcasts
						.filter((x) => x.address)
						.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 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=${() => tfrpc.rpc.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>
							</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);