forked from cory/tildefriends
Run prettier.
This commit is contained in:
@ -23,10 +23,10 @@ class TfTabConnectionsElement extends LitElement {
|
||||
this.connections = [];
|
||||
this.stored_connections = [];
|
||||
this.users = {};
|
||||
tfrpc.rpc.getAllIdentities().then(function(identities) {
|
||||
tfrpc.rpc.getAllIdentities().then(function (identities) {
|
||||
self.identities = identities || [];
|
||||
});
|
||||
tfrpc.rpc.getStoredConnections().then(function(connections) {
|
||||
tfrpc.rpc.getStoredConnections().then(function (connections) {
|
||||
self.stored_connections = connections || [];
|
||||
});
|
||||
}
|
||||
@ -43,10 +43,12 @@ class TfTabConnectionsElement extends LitElement {
|
||||
|
||||
render_room_peers(connection) {
|
||||
let self = this;
|
||||
let peers = this.broadcasts.filter(x => x.tunnel?.id == connection);
|
||||
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)}`)}`;
|
||||
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)}`)}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,7 +60,12 @@ class TfTabConnectionsElement extends LitElement {
|
||||
let self = this;
|
||||
return html`
|
||||
<li>
|
||||
<button class="w3-button w3-dark-grey" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}>Connect</button>
|
||||
<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>
|
||||
`;
|
||||
@ -67,7 +74,12 @@ class TfTabConnectionsElement extends LitElement {
|
||||
render_broadcast(connection) {
|
||||
return html`
|
||||
<li>
|
||||
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(connection)}>Connect</button>
|
||||
<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>
|
||||
@ -81,11 +93,20 @@ class TfTabConnectionsElement extends LitElement {
|
||||
|
||||
render_connection(connection) {
|
||||
return html`
|
||||
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.closeConnection(connection.id)}>Close</button>
|
||||
<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})`}
|
||||
${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.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>
|
||||
`;
|
||||
@ -97,34 +118,58 @@ class TfTabConnectionsElement extends LitElement {
|
||||
<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>
|
||||
<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))}
|
||||
${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>
|
||||
`)}
|
||||
${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>
|
||||
`)}
|
||||
${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>`)}
|
||||
${this.identities.map(
|
||||
(x) =>
|
||||
html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-tab-connections', TfTabConnectionsElement);
|
||||
customElements.define('tf-tab-connections', TfTabConnectionsElement);
|
||||
|
Reference in New Issue
Block a user