add connection modal

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)
+  );
 })();

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 (
+    <div
+      class="modal"
+      toggle:open={connectionViewModel.isShowingConnectionModal}
+    >
+      <div>
+        <main></main>
+        <button on:click={connectionViewModel.hideConnectionModal}>
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/View/homePage.tsx

@@ -40,6 +40,7 @@ export function HomePage(
         <button
           class="flex justify-center"
           aria-label={translations.homePage.manageConnectionsAudioLabel}
+          on:click={connectionViewModel.showConnectionModal}
         >
           <span class="icon">build</span>
         </button>

src/ViewModel/connectionViewModel.tsx

@@ -10,6 +10,8 @@ export default class ConnectionViewModel {
   serverAddressInput: React.State<string> = new React.State("");
   isConnected: React.State<boolean> = new React.State(false);
 
+  isShowingConnectionModal: React.State<boolean> = new React.State(false);
+
   // toggles
   cannotConnect: React.State<boolean> = React.createProxyState(
     [this.serverAddressInput, this.isConnected],
@@ -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({

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)
+  );