ssb: Make the connections tab a bit less scary.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 30m46s
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 30m46s
This commit is contained in:
parent
8b47938238
commit
f500e14aa3
@ -1,5 +1,5 @@
|
||||
{
|
||||
"type": "tildefriends-app",
|
||||
"emoji": "🦀",
|
||||
"previous": "&jAAzd36Nmpw0sRA1Dx9wLiIwGX+q//+S/Han+RLlEOw=.sha256"
|
||||
"previous": "&Qae0CxJGEH7OspuapuXX/GurmV+VBtQiMhHRmCBKCwU=.sha256"
|
||||
}
|
||||
|
@ -206,6 +206,23 @@ class TfTabConnectionsElement extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
toggle_accordian(id) {
|
||||
let element = this.renderRoot.getElementById(id);
|
||||
element.classList.toggle('w3-hide');
|
||||
}
|
||||
|
||||
valid_connections() {
|
||||
return this.connections.filter((x) => x.tunnel === undefined);
|
||||
}
|
||||
|
||||
valid_broadcasts() {
|
||||
return this.broadcasts
|
||||
.filter((x) => x.address)
|
||||
.filter(
|
||||
(x) => this.connections.map((c) => c.id).indexOf(x.pubkey) == -1
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let self = this;
|
||||
return html`
|
||||
@ -220,27 +237,21 @@ class TfTabConnectionsElement extends LitElement {
|
||||
>
|
||||
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)
|
||||
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('connections')}>Connections (${this.valid_connections().length})</h2>
|
||||
<ul class="w3-ul w3-border" id="connections">
|
||||
${this.valid_connections()
|
||||
.map(
|
||||
(x) => html`
|
||||
<li class="w3-bar">${this.render_connection(x)}</li>
|
||||
`
|
||||
)}
|
||||
</ul>
|
||||
<h2>Stored Connections</h2>
|
||||
<ul class="w3-ul w3-border">
|
||||
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('broadcasts')}>Broadcasts (${this.valid_broadcasts().length})</h2>
|
||||
<ul class="w3-ul w3-border w3-hide" id="broadcasts">
|
||||
${this.valid_broadcasts().map((x) => self.render_broadcast(x))}
|
||||
</ul>
|
||||
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('stored_connections')}>Stored Connections (${this.stored_connections.length})</h2>
|
||||
<ul class="w3-ul w3-border w3-hide" id="stored_connections">
|
||||
${this.stored_connections.map(
|
||||
(x) => html`
|
||||
<li>
|
||||
@ -267,8 +278,8 @@ class TfTabConnectionsElement extends LitElement {
|
||||
`
|
||||
)}
|
||||
</ul>
|
||||
<h2>Local Accounts</h2>
|
||||
<div class="w3-container">
|
||||
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('local_accounts')}>Local Accounts (${this.identities.length})</h2>
|
||||
<div class="w3-container w3-hide" id="local_accounts">
|
||||
${this.identities.map(
|
||||
(x) =>
|
||||
html`<div
|
||||
|
Loading…
x
Reference in New Issue
Block a user