From aef01cb17bbfc2d20037f2ab21f268c136d80754 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sat, 20 Jul 2024 02:30:45 +0200 Subject: [PATCH] add connection modal --- dist/index.js | 156 +++++++++++++++----------- src/View/Modals/connectionModal.tsx | 21 ++++ src/View/homePage.tsx | 1 + src/ViewModel/connectionViewModel.tsx | 13 ++- src/index.tsx | 6 +- 5 files changed, 129 insertions(+), 68 deletions(-) create mode 100644 src/View/Modals/connectionModal.tsx diff --git a/dist/index.js b/dist/index.js index b26b6428..23d4c5b9 100644 --- a/dist/index.js +++ b/dist/index.js @@ -139,6 +139,82 @@ return element; } + // src/View/translations.ts + var englishTranslations = { + general: { + closeButton: "close" + }, + regional: { + weekdays: { + full: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ], + abbreviated: [ + "Sun", + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat" + ] + } + }, + homePage: { + appName: "Comms", + /// + overviewHeadline: "Overview", + serverAddress: "Server address", + serverAddressPlaceholder: "wss://192.168.0.69:3000", + connectAudioLabel: "connect to server", + disconnectAudioLabel: "disconnect from server", + manageConnectionsAudioLabel: "manage connections", + mailboxHeadline: "Server Mailbox", + mailboxDisabled: "Mailbox disabled. You will miss out on messages sent while you're away", + mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily", + outboxHeadline: "Outbox", + outboxAllItemsSent: "All items sent", + yourNameLabel: "Your name", + yourNamePlaceholder: "Jane Doe", + setNameButton: "Set", + firstDayOfWeekLabel: "First day of week", + scrollToChatButton: "Chats", + /// + backToOverviewAudioLabel: "go back to overview", + chatsHeadline: "Chats", + addChatAudioLabel: "name of new chat", + addChatPlaceholder: "Add chat", + addChatButton: "Add chat" + }, + settings: { + settingsHeadline: "Settings" + /// + } + }; + var allTranslations = { + en: englishTranslations + }; + var language = navigator.language.substring(0, 2); + var translations = allTranslations[language] || allTranslations.en; + + // src/View/Modals/connectionModal.tsx + function ConnectionModal(connectionViewModel2) { + return /* @__PURE__ */ createElement( + "div", + { + class: "modal", + "toggle:open": connectionViewModel2.isShowingConnectionModal + }, + /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null), /* @__PURE__ */ createElement("button", { "on:click": connectionViewModel2.hideConnectionModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))) + ); + } + // node_modules/udn-frontend/index.ts var UDNFrontend = class { ws; @@ -308,6 +384,7 @@ // state serverAddressInput = new State(""); isConnected = new State(false); + isShowingConnectionModal = new State(false); // toggles cannotConnect = createProxyState( [this.serverAddressInput, this.isConnected], @@ -333,6 +410,13 @@ disconnect = () => { this.connectionModel.disconnect(); }; + // view methods + showConnectionModal = () => { + this.isShowingConnectionModal.value = true; + }; + hideConnectionModal = () => { + this.isShowingConnectionModal.value = false; + }; // init constructor() { const connectionModel = new ConnectionModel({ @@ -348,70 +432,6 @@ return /* @__PURE__ */ createElement("option", { value, "toggle:selected": selectedOnCreate }, text); } - // src/View/translations.ts - var englishTranslations = { - general: { - closeButton: "close" - }, - regional: { - weekdays: { - full: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday" - ], - abbreviated: [ - "Sun", - "Mon", - "Tue", - "Wed", - "Thu", - "Fri", - "Sat" - ] - } - }, - homePage: { - appName: "Comms", - /// - overviewHeadline: "Overview", - serverAddress: "Server address", - serverAddressPlaceholder: "wss://192.168.0.69:3000", - connectAudioLabel: "connect to server", - disconnectAudioLabel: "disconnect from server", - manageConnectionsAudioLabel: "manage connections", - mailboxHeadline: "Server Mailbox", - mailboxDisabled: "Mailbox disabled. You will miss out on messages sent while you're away", - mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily", - outboxHeadline: "Outbox", - outboxAllItemsSent: "All items sent", - yourNameLabel: "Your name", - yourNamePlaceholder: "Jane Doe", - setNameButton: "Set", - firstDayOfWeekLabel: "First day of week", - scrollToChatButton: "Chats", - /// - backToOverviewAudioLabel: "go back to overview", - chatsHeadline: "Chats", - addChatAudioLabel: "name of new chat", - addChatPlaceholder: "Add chat", - addChatButton: "Add chat" - }, - settings: { - settingsHeadline: "Settings" - /// - } - }; - var allTranslations = { - en: englishTranslations - }; - var language = navigator.language.substring(0, 2); - var translations = allTranslations[language] || allTranslations.en; - // src/View/homePage.tsx function HomePage(settingsViewModel2, connectionViewModel2) { const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.serverAddress), /* @__PURE__ */ createElement( @@ -434,7 +454,8 @@ "button", { class: "flex justify-center", - "aria-label": translations.homePage.manageConnectionsAudioLabel + "aria-label": translations.homePage.manageConnectionsAudioLabel, + "on:click": connectionViewModel2.showConnectionModal }, /* @__PURE__ */ createElement("span", { class: "icon" }, "build") ), /* @__PURE__ */ createElement( @@ -645,5 +666,8 @@ var storageModel = new StorageModel(); var settingsViewModel = new SettingsViewModel(storageModel); var connectionViewModel = new ConnectionViewModel(); - document.querySelector("main").append(HomePage(settingsViewModel, connectionViewModel)); + document.querySelector("main").append( + HomePage(settingsViewModel, connectionViewModel), + ConnectionModal(connectionViewModel) + ); })(); diff --git a/src/View/Modals/connectionModal.tsx b/src/View/Modals/connectionModal.tsx new file mode 100644 index 00000000..b4f63237 --- /dev/null +++ b/src/View/Modals/connectionModal.tsx @@ -0,0 +1,21 @@ +import * as React from "bloatless-react"; + +import ConnectionViewModel from "../../ViewModel/connectionViewModel"; +import { translations } from "../translations"; + +export function ConnectionModal(connectionViewModel: ConnectionViewModel) { + return ( +
+
+
+ +
+
+ ); +} diff --git a/src/View/homePage.tsx b/src/View/homePage.tsx index 5031f721..5b5cb418 100644 --- a/src/View/homePage.tsx +++ b/src/View/homePage.tsx @@ -40,6 +40,7 @@ export function HomePage( diff --git a/src/ViewModel/connectionViewModel.tsx b/src/ViewModel/connectionViewModel.tsx index 040581a1..ac73c899 100644 --- a/src/ViewModel/connectionViewModel.tsx +++ b/src/ViewModel/connectionViewModel.tsx @@ -10,6 +10,8 @@ export default class ConnectionViewModel { serverAddressInput: React.State = new React.State(""); isConnected: React.State = new React.State(false); + isShowingConnectionModal: React.State = new React.State(false); + // toggles cannotConnect: React.State = React.createProxyState( [this.serverAddressInput, this.isConnected], @@ -26,7 +28,7 @@ export default class ConnectionViewModel { // handlers connectionChangeHandler = (): void => { this.isConnected.value = this.connectionModel.isConnected; - if (this.connectionModel.address) { +if (this.connectionModel.address) { this.serverAddressInput.value = this.connectionModel.address; } }; @@ -42,6 +44,15 @@ export default class ConnectionViewModel { this.connectionModel.disconnect(); }; + // view methods + showConnectionModal = (): void => { + this.isShowingConnectionModal.value = true; + } + + hideConnectionModal = (): void => { + this.isShowingConnectionModal.value = false; + } + // init constructor() { const connectionModel = new ConnectionModel({ diff --git a/src/index.tsx b/src/index.tsx index 274b3db8..b7d4629d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ +import { ConnectionModal } from "./View/Modals/connectionModal"; import ConnectionViewModel from "./ViewModel/connectionViewModel"; import { HomePage } from "./View/homePage"; import SettingsViewModel from "./ViewModel/settingsViewModel"; @@ -13,4 +14,7 @@ const connectionViewModel = new ConnectionViewModel(); // view document .querySelector("main")! - .append(HomePage(settingsViewModel, connectionViewModel)); + .append( + HomePage(settingsViewModel, connectionViewModel), + ConnectionModal(connectionViewModel) + );