cory/tildefriends
4
5
Fork 1
Code Issues 32 Pull Requests 1 Actions 1 Releases 26 Wiki Activity

ssb: Hook up connect error messages more thoroughly.

Browse Source
This commit is contained in:
Cory McWilliams 2024-11-13 18:20:14 -05:00
parent 102e9be3a8
commit 68ff77e172
2 changed files with 69 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&CKsS2aS8+7u9S5jDCiqBLA6xr7xLdMHclMKHjzwxcnM=.sha256" "previous": "&olI6SRBA/dThYusGLGhZ9T2nFKyGB9r+/kb7bJxa4gg=.sha256"
} }

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

@ -12,7 +12,9 @@ class TfTabConnectionsElement extends LitElement {
stored_connections: {type: Array}, stored_connections: {type: Array},
users: {type: Object}, users: {type: Object},
server_identity: {type: String}, server_identity: {type: String},
connect_error: {type: String}, connect_attempt: {type: Object},
connect_message: {type: String},
connect_success: {type: Boolean},
}; };
} }
@ -89,20 +91,36 @@ class TfTabConnectionsElement extends LitElement {
`; `;
} }
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) { render_broadcast(connection) {
let self = this;
return html` return html`
<li class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap"> <li>
<button <div class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap">
class="w3-bar-item w3-button w3-theme-d1" <button
@click=${() => tfrpc.rpc.connect(connection)} class="w3-bar-item w3-button w3-theme-d1"
> @click=${() => self.connect(connection)}
Connect >
</button> Connect
<div class="w3-bar-item"> </button>
${TfTabConnectionsElement.k_broadcast_emojis[connection.origin]} <div class="w3-bar-item">
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> ${TfTabConnectionsElement.k_broadcast_emojis[connection.origin]}
${this.render_connection_summary(connection)} <tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
${this.render_connection_summary(connection)}
</div>
</div> </div>
${this.render_message(connection)}
</li> </li>
`; `;
} }
@ -166,11 +184,23 @@ class TfTabConnectionsElement extends LitElement {
connect(address) { connect(address) {
let self = this; let self = this;
tfrpc.rpc.connect(address).then(function() { self.connect_attempt = address;
self.connect_error = 'connected!'; self.connect_message = undefined;
}).catch(function(error) { self.connect_success = false;
self.connect_error = error; 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() { render() {
@ -185,14 +215,14 @@ class TfTabConnectionsElement extends LitElement {
</button> </button>
<h2>New Connection</h2> <h2>New Connection</h2>
<textarea class="w3-input w3-theme-d1" id="code"></textarea> <textarea class="w3-input w3-theme-d1" id="code"></textarea>
${this.render_message(this.renderRoot.getElementById('code')?.value)}
<button <button
class="w3-button w3-theme-d1" class="w3-button w3-theme-d1"
@click=${() => @click=${() =>
self.connect(self.renderRoot.getElementById('code').value)} self.connect(self.renderRoot.getElementById('code')?.value)}
> >
Connect Connect
</button> </button>
<div ?hidden=${this.connect_error === undefined}>${this.connect_error}</div>
<h2>Broadcasts</h2> <h2>Broadcasts</h2>
<ul class="w3-ul w3-border"> <ul class="w3-ul w3-border">
${this.broadcasts ${this.broadcasts
@ -213,23 +243,26 @@ class TfTabConnectionsElement extends LitElement {
<ul class="w3-ul w3-border"> <ul class="w3-ul w3-border">
${this.stored_connections.map( ${this.stored_connections.map(
(x) => html` (x) => html`
<li class="w3-bar"> <li>
<button <div class="w3-bar">
class="w3-bar-item w3-button w3-theme-d1" <button
@click=${() => self.forget_stored_connection(x)} class="w3-bar-item w3-button w3-theme-d1"
> @click=${() => self.forget_stored_connection(x)}
Forget >
</button> Forget
<button </button>
class="w3-bar-item w3-button w3-theme-d1" <button
@click=${() => tfrpc.rpc.connect(x)} class="w3-bar-item w3-button w3-theme-d1"
> @click=${() => this.connect(x)}
Connect >
</button> Connect
<div class="w3-bar-item"> </button>
<tf-user id=${x.pubkey} .users=${self.users}></tf-user> <div class="w3-bar-item">
<div><small>${x.address}:${x.port}</small></div> <tf-user id=${x.pubkey} .users=${self.users}></tf-user>
<div><small>${x.address}:${x.port}</small></div>
</div>
</div> </div>
${this.render_message(x)}
</li> </li>
` `
)} )}