From 13e1e75e48c448833bfe31a29960ef9ed362db79 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Tue, 9 Jul 2024 02:43:21 +0200 Subject: [PATCH] update UI --- static/bun.lockb | Bin 11434 -> 11434 bytes static/dist/index.js | 49 ++++++++++++++++++++++-------------- static/src/model.tsx | 23 ++++++++++------- static/src/translations.tsx | 6 ++--- 4 files changed, 47 insertions(+), 31 deletions(-) diff --git a/static/bun.lockb b/static/bun.lockb index a31775bf065e47194cf1901b400b01ee2fa2b4b9..a53018eefb31eb0f3cb08265e68e9c180623300b 100755 GIT binary patch delta 14 VcmZ1#xhislwLGKQW*hlDUH~eU1knHh delta 14 VcmZ1#xhislwLGKAW*hlDUH~eI1kV5f diff --git a/static/dist/index.js b/static/dist/index.js index aab53ad..cebbe92 100644 --- a/static/dist/index.js +++ b/static/dist/index.js @@ -238,11 +238,11 @@ }; messageHandler = (data) => { }; - mailboxHandler = (mailboxId) => { + mailboxHandler = (mailboxId2) => { }; - mailboxConnectionHandler = (mailboxId) => { + mailboxConnectionHandler = (mailboxId2) => { }; - mailboxDeleteHandler = (mailboxId) => { + mailboxDeleteHandler = (mailboxId2) => { }; // INIT set onconnect(handler) { @@ -326,15 +326,15 @@ }; return this.send(messageObject); } - connectMailbox(mailboxId) { + connectMailbox(mailboxId2) { const messageObject = { - requestedMailbox: mailboxId + requestedMailbox: mailboxId2 }; return this.send(messageObject); } - deleteMailbox(mailboxId) { + deleteMailbox(mailboxId2) { const messageObject = { - deletingMailbox: mailboxId + deletingMailbox: mailboxId2 }; return this.send(messageObject); } @@ -345,7 +345,7 @@ mailbox: "Mailbox", requestMailbox: "Request", deleteMailbox: "Delete", - mailboxConnected: "Mailbox connected", + mailboxConnected: "Mailbox active", channel: "Channel", channel_placeholder: "my-channel", disconnected: "Server disconnected", @@ -371,7 +371,7 @@ mailbox: "Buz\xF3n", requestMailbox: "Solicitar", deleteMailbox: "Eliminar", - mailboxConnected: "Buz\xF3n conectado", + mailboxConnected: "Buz\xF3n activado", channel: "Canal", channel_placeholder: "mi-canal", disconnected: "Sin coneci\xF3n", @@ -395,7 +395,7 @@ mailbox: "Briefkasten", requestMailbox: "Beantragen", deleteMailbox: "L\xF6schen", - mailboxConnected: "Briefkasten verbunden", + mailboxConnected: "Briefkasten aktiv", channel: "Kanal", channel_placeholder: "mein-kanal", disconnected: "Verbindung getrennt", @@ -428,7 +428,7 @@ id = UUID(); }; var isDisconnected = new State(true); - var storedMailboxId = restoreState("mailbox-id", ""); + var mailboxId = restoreState("mailbox-id", ""); var isMailboxDisonnected = new State(true); var messages = new ListState(); var lastReceivedMessage = new State( @@ -458,8 +458,8 @@ UDN.onconnect = () => { isDisconnected.value = false; updateStats(); - if (storedMailboxId.value != "") { - UDN.connectMailbox(storedMailboxId.value); + if (mailboxId.value != "") { + UDN.connectMailbox(mailboxId.value); } }; UDN.onmessage = (data) => { @@ -470,15 +470,17 @@ if (messageBody) messages.add(messageObject); } }; - UDN.onmailbox = (id) => { + UDN.onmailboxcreate = (id) => { console.log(id); - storedMailboxId.value = id; + mailboxId.value = id; UDN.connectMailbox(id); }; - UDN.onmailboxconnect = (id) => { - console.log(id); + UDN.onmailboxconnect = () => { isMailboxDisonnected.value = false; }; + UDN.onmailboxdelete = () => { + isMailboxDisonnected.value = true; + }; UDN.ondisconnect = () => { isDisconnected.value = true; isMailboxDisonnected.value = true; @@ -506,7 +508,7 @@ } function deleteMailbox() { console.log("test"); - UDN.deleteMailbox(storedMailboxId.value); + UDN.deleteMailbox(mailboxId.value); } // src/infoScreen.tsx @@ -602,6 +604,15 @@ ); document.querySelector("main").append(InfoScreen(), MainScreen(), MessageScreen()); document.body.append( - /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isDisconnected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("div", { class: "flex-column align-center justify-center width-100 height-100", style: "gap: 1rem" }, /* @__PURE__ */ createElement("span", { class: "icon error", style: "font-size: 3rem" }, "signal_disconnected"), /* @__PURE__ */ createElement("h1", { class: "error" }, translations.disconnected), /* @__PURE__ */ createElement("p", { class: "secondary" }, translations.reconnecting))))) + /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isDisconnected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement( + "div", + { + class: "flex-column align-center justify-center width-100 height-100", + style: "gap: 1rem" + }, + /* @__PURE__ */ createElement("span", { class: "icon error", style: "font-size: 3rem" }, "signal_disconnected"), + /* @__PURE__ */ createElement("h1", { class: "error" }, translations.disconnected), + /* @__PURE__ */ createElement("p", { class: "secondary" }, translations.reconnecting) + )))) ); })(); diff --git a/static/src/model.tsx b/static/src/model.tsx index af19a4e..c653ba5 100644 --- a/static/src/model.tsx +++ b/static/src/model.tsx @@ -12,7 +12,9 @@ export class Message implements React.Identifiable { // STATE // connection export const isDisconnected = new React.State(true); -export const storedMailboxId = React.restoreState("mailbox-id", ""); + +// mailbox +export const mailboxId = React.restoreState("mailbox-id", ""); export const isMailboxDisonnected = new React.State(true); // messages @@ -42,7 +44,7 @@ export async function updateStats() { statHTMLString.value = html; } -// elements +// channels export const subscriptionChannel = new React.State(""); export const newMessageChannel = new React.State(""); @@ -60,8 +62,8 @@ UDN.onconnect = () => { isDisconnected.value = false; updateStats(); - if (storedMailboxId.value != "") { - UDN.connectMailbox(storedMailboxId.value); + if (mailboxId.value != "") { + UDN.connectMailbox(mailboxId.value); } }; @@ -75,17 +77,20 @@ UDN.onmessage = (data) => { } }; -UDN.onmailbox = (id) => { +UDN.onmailboxcreate = (id) => { console.log(id); - storedMailboxId.value = id; + mailboxId.value = id; UDN.connectMailbox(id); }; -UDN.onmailboxconnect = (id) => { - console.log(id); +UDN.onmailboxconnect = () => { isMailboxDisonnected.value = false; }; +UDN.onmailboxdelete = () => { + isMailboxDisonnected.value = true; +} + UDN.ondisconnect = () => { isDisconnected.value = true; isMailboxDisonnected.value = true; @@ -120,5 +125,5 @@ export function requestMailbox() { export function deleteMailbox() { console.log("test"); - UDN.deleteMailbox(storedMailboxId.value); + UDN.deleteMailbox(mailboxId.value); } diff --git a/static/src/translations.tsx b/static/src/translations.tsx index ef1e067..f1aaccb 100644 --- a/static/src/translations.tsx +++ b/static/src/translations.tsx @@ -3,7 +3,7 @@ const staticTextEnglish = { mailbox: "Mailbox", requestMailbox: "Request", deleteMailbox: "Delete", - mailboxConnected: "Mailbox connected", + mailboxConnected: "Mailbox active", channel: "Channel", channel_placeholder: "my-channel", disconnected: "Server disconnected", @@ -30,7 +30,7 @@ const allTranslations: { [key: string]: typeof staticTextEnglish } = { mailbox: "Buzón", requestMailbox: "Solicitar", deleteMailbox: "Eliminar", - mailboxConnected: "Buzón conectado", + mailboxConnected: "Buzón activado", channel: "Canal", channel_placeholder: "mi-canal", disconnected: "Sin coneción", @@ -54,7 +54,7 @@ const allTranslations: { [key: string]: typeof staticTextEnglish } = { mailbox: "Briefkasten", requestMailbox: "Beantragen", deleteMailbox: "Löschen", - mailboxConnected: "Briefkasten verbunden", + mailboxConnected: "Briefkasten aktiv", channel: "Kanal", channel_placeholder: "mein-kanal", disconnected: "Verbindung getrennt",