tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

w3.css-ified ssb more.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4762 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2024-01-13 02:55:52 +00:00
parent 18e9252998
commit dc0e58afc1
6 changed files with 66 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
apps/ssb/tf-tab-connections.js
View File

@ -1,5 +1,6 @@
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() {
@ -12,6 +13,8 @@ class TfTabConnectionsElement extends LitElement {
};
}
static styles = styles;
constructor() {
super();
let self = this;
@ -55,7 +58,7 @@ class TfTabConnectionsElement extends LitElement {
let self = this;
return html`
<li>
<input type="button" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)} value="Connect"></input>
<button class="w3-button w3-dark-grey" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}>Connect</button>
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> 📡
</li>
`;
@ -64,7 +67,7 @@ class TfTabConnectionsElement extends LitElement {
render_broadcast(connection) {
return html`
<li>
<input type="button" @click=${() => tfrpc.rpc.connect(connection)} value="Connect"></input>
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(connection)}>Connect</button>
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
${this.render_connection_summary(connection)}
</li>
@ -78,7 +81,7 @@ class TfTabConnectionsElement extends LitElement {
render_connection(connection) {
return html`
<input type="button" @click=${() => tfrpc.rpc.closeConnection(connection.id)} value="Close"></input>
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.closeConnection(connection.id)}>Close</button>
<tf-user id=${connection.id} .users=${this.users}></tf-user>
${connection.tunnel !== undefined ? '🚇' : html`(${connection.host}:${connection.port})`}
<ul>
@ -91,35 +94,35 @@ class TfTabConnectionsElement extends LitElement {
render() {
let self = this;
return html`
<h2>New Connection</h2>
<div style="display: flex; flex-direction: column">
<textarea id="code"></textarea>
<div class="w3-container">
<h2>New Connection</h2>
<textarea class="w3-input w3-dark-grey" id="code"></textarea>
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)}>Connect</button>
<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>
<button class="w3-button w3-dark-grey" @click=${() => self.forget_stored_connection(x)}>Forget</button>
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(x)}>Connect</button>
${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>
</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>
`;
}
}