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:
		| @@ -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 | ||||
|   | ||||
		Reference in New Issue
	
	Block a user