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_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>
		`;
	}

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

	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">
				<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>
				${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);