VDMDI/UDN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update UI

Browse Source
This commit is contained in:
marlon-erler
2024-07-09 02:43:21 +02:00
parent 0a5f471303
commit 13e1e75e48
4 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/bun.lockb
BIN
View File
Binary file not shown.
static/dist/index.js
Vendored
+30 -19
View File
@@ -238,11 +238,11 @@
}; };
messageHandler = (data) => { messageHandler = (data) => {
}; };
mailboxHandler = (mailboxId) => { mailboxHandler = (mailboxId2) => {
}; };
mailboxConnectionHandler = (mailboxId) => { mailboxConnectionHandler = (mailboxId2) => {
}; };
mailboxDeleteHandler = (mailboxId) => { mailboxDeleteHandler = (mailboxId2) => {
}; };
// INIT // INIT
set onconnect(handler) { set onconnect(handler) {
@@ -326,15 +326,15 @@
}; };
return this.send(messageObject); return this.send(messageObject);
} }
connectMailbox(mailboxId) { connectMailbox(mailboxId2) {
const messageObject = { const messageObject = {
requestedMailbox: mailboxId requestedMailbox: mailboxId2
}; };
return this.send(messageObject); return this.send(messageObject);
} }
deleteMailbox(mailboxId) { deleteMailbox(mailboxId2) {
const messageObject = { const messageObject = {
deletingMailbox: mailboxId deletingMailbox: mailboxId2
}; };
return this.send(messageObject); return this.send(messageObject);
} }
@@ -345,7 +345,7 @@
mailbox: "Mailbox", mailbox: "Mailbox",
requestMailbox: "Request", requestMailbox: "Request",
deleteMailbox: "Delete", deleteMailbox: "Delete",
mailboxConnected: "Mailbox connected", mailboxConnected: "Mailbox active",
channel: "Channel", channel: "Channel",
channel_placeholder: "my-channel", channel_placeholder: "my-channel",
disconnected: "Server disconnected", disconnected: "Server disconnected",
@@ -371,7 +371,7 @@
mailbox: "Buz\xF3n", mailbox: "Buz\xF3n",
requestMailbox: "Solicitar", requestMailbox: "Solicitar",
deleteMailbox: "Eliminar", deleteMailbox: "Eliminar",
mailboxConnected: "Buz\xF3n conectado", mailboxConnected: "Buz\xF3n activado",
channel: "Canal", channel: "Canal",
channel_placeholder: "mi-canal", channel_placeholder: "mi-canal",
disconnected: "Sin coneci\xF3n", disconnected: "Sin coneci\xF3n",
@@ -395,7 +395,7 @@
mailbox: "Briefkasten", mailbox: "Briefkasten",
requestMailbox: "Beantragen", requestMailbox: "Beantragen",
deleteMailbox: "L\xF6schen", deleteMailbox: "L\xF6schen",
mailboxConnected: "Briefkasten verbunden", mailboxConnected: "Briefkasten aktiv",
channel: "Kanal", channel: "Kanal",
channel_placeholder: "mein-kanal", channel_placeholder: "mein-kanal",
disconnected: "Verbindung getrennt", disconnected: "Verbindung getrennt",
@@ -428,7 +428,7 @@
id = UUID(); id = UUID();
}; };
var isDisconnected = new State(true); var isDisconnected = new State(true);
var storedMailboxId = restoreState("mailbox-id", ""); var mailboxId = restoreState("mailbox-id", "");
var isMailboxDisonnected = new State(true); var isMailboxDisonnected = new State(true);
var messages = new ListState(); var messages = new ListState();
var lastReceivedMessage = new State( var lastReceivedMessage = new State(
@@ -458,8 +458,8 @@
UDN.onconnect = () => { UDN.onconnect = () => {
isDisconnected.value = false; isDisconnected.value = false;
updateStats(); updateStats();
if (storedMailboxId.value != "") { if (mailboxId.value != "") {
UDN.connectMailbox(storedMailboxId.value); UDN.connectMailbox(mailboxId.value);
} }
}; };
UDN.onmessage = (data) => { UDN.onmessage = (data) => {
@@ -470,15 +470,17 @@
if (messageBody) messages.add(messageObject); if (messageBody) messages.add(messageObject);
} }
}; };
UDN.onmailbox = (id) => { UDN.onmailboxcreate = (id) => {
console.log(id); console.log(id);
storedMailboxId.value = id; mailboxId.value = id;
UDN.connectMailbox(id); UDN.connectMailbox(id);
}; };
UDN.onmailboxconnect = (id) => { UDN.onmailboxconnect = () => {
console.log(id);
isMailboxDisonnected.value = false; isMailboxDisonnected.value = false;
}; };
UDN.onmailboxdelete = () => {
isMailboxDisonnected.value = true;
};
UDN.ondisconnect = () => { UDN.ondisconnect = () => {
isDisconnected.value = true; isDisconnected.value = true;
isMailboxDisonnected.value = true; isMailboxDisonnected.value = true;
@@ -506,7 +508,7 @@
} }
function deleteMailbox() { function deleteMailbox() {
console.log("test"); console.log("test");
UDN.deleteMailbox(storedMailboxId.value); UDN.deleteMailbox(mailboxId.value);
} }
// src/infoScreen.tsx // src/infoScreen.tsx
@@ -602,6 +604,15 @@
); );
document.querySelector("main").append(InfoScreen(), MainScreen(), MessageScreen()); document.querySelector("main").append(InfoScreen(), MainScreen(), MessageScreen());
document.body.append( 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)
))))
); );
})(); })();
static/src/model.tsx
+14 -9
View File
@@ -12,7 +12,9 @@ export class Message implements React.Identifiable {
// STATE // STATE
// connection // connection
export const isDisconnected = new React.State(true); 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); export const isMailboxDisonnected = new React.State(true);
// messages // messages
@@ -42,7 +44,7 @@ export async function updateStats() {
statHTMLString.value = html; statHTMLString.value = html;
} }
// elements // channels
export const subscriptionChannel = new React.State(""); export const subscriptionChannel = new React.State("");
export const newMessageChannel = new React.State(""); export const newMessageChannel = new React.State("");
@@ -60,8 +62,8 @@ UDN.onconnect = () => {
isDisconnected.value = false; isDisconnected.value = false;
updateStats(); updateStats();
if (storedMailboxId.value != "") { if (mailboxId.value != "") {
UDN.connectMailbox(storedMailboxId.value); UDN.connectMailbox(mailboxId.value);
} }
}; };
@@ -75,17 +77,20 @@ UDN.onmessage = (data) => {
} }
}; };
UDN.onmailbox = (id) => { UDN.onmailboxcreate = (id) => {
console.log(id); console.log(id);
storedMailboxId.value = id; mailboxId.value = id;
UDN.connectMailbox(id); UDN.connectMailbox(id);
}; };
UDN.onmailboxconnect = (id) => { UDN.onmailboxconnect = () => {
console.log(id);
isMailboxDisonnected.value = false; isMailboxDisonnected.value = false;
}; };
UDN.onmailboxdelete = () => {
isMailboxDisonnected.value = true;
}
UDN.ondisconnect = () => { UDN.ondisconnect = () => {
isDisconnected.value = true; isDisconnected.value = true;
isMailboxDisonnected.value = true; isMailboxDisonnected.value = true;
@@ -120,5 +125,5 @@ export function requestMailbox() {
export function deleteMailbox() { export function deleteMailbox() {
console.log("test"); console.log("test");
UDN.deleteMailbox(storedMailboxId.value); UDN.deleteMailbox(mailboxId.value);
} }
static/src/translations.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ const staticTextEnglish = {
mailbox: "Mailbox", mailbox: "Mailbox",
requestMailbox: "Request", requestMailbox: "Request",
deleteMailbox: "Delete", deleteMailbox: "Delete",
mailboxConnected: "Mailbox connected", mailboxConnected: "Mailbox active",
channel: "Channel", channel: "Channel",
channel_placeholder: "my-channel", channel_placeholder: "my-channel",
disconnected: "Server disconnected", disconnected: "Server disconnected",
@@ -30,7 +30,7 @@ const allTranslations: { [key: string]: typeof staticTextEnglish } = {
mailbox: "Buzón", mailbox: "Buzón",
requestMailbox: "Solicitar", requestMailbox: "Solicitar",
deleteMailbox: "Eliminar", deleteMailbox: "Eliminar",
mailboxConnected: "Buzón conectado", mailboxConnected: "Buzón activado",
channel: "Canal", channel: "Canal",
channel_placeholder: "mi-canal", channel_placeholder: "mi-canal",
disconnected: "Sin coneción", disconnected: "Sin coneción",
@@ -54,7 +54,7 @@ const allTranslations: { [key: string]: typeof staticTextEnglish } = {
mailbox: "Briefkasten", mailbox: "Briefkasten",
requestMailbox: "Beantragen", requestMailbox: "Beantragen",
deleteMailbox: "Löschen", deleteMailbox: "Löschen",
mailboxConnected: "Briefkasten verbunden", mailboxConnected: "Briefkasten aktiv",
channel: "Kanal", channel: "Kanal",
channel_placeholder: "mein-kanal", channel_placeholder: "mein-kanal",
disconnected: "Verbindung getrennt", disconnected: "Verbindung getrennt",