add connectionViewModel

src/Model/connectionModel.ts

@@ -27,7 +27,7 @@ export default class ConnectionModel {
     this.udn.disconnect();
   };
 
-  handleConnectionChange = () => {
+  handleConnectionChange = (): void => {
     console.log("connection status:", this.isConnected, this.address);
   };
 

src/View/homePage.tsx

@@ -2,11 +2,15 @@ import "./homePage.css";
 
 import * as React from "bloatless-react";
 
+import ConnectionViewModel from "../ViewModel/connectionViewModel";
 import { Option } from "./Components/option";
 import SettingsViewModel from "../ViewModel/settingsViewModel";
 import { translations } from "./translations";
 
-export function HomePage(settingsViewModel: SettingsViewModel) {
+export function HomePage(
+  settingsViewModel: SettingsViewModel,
+  connectionViewModel: ConnectionViewModel
+) {
   // sections
   const overviewSection = (
     <div id="overview-section">
@@ -16,7 +20,10 @@ export function HomePage(settingsViewModel: SettingsViewModel) {
         <span class="icon">cell_tower</span>
         <div>
           <span>{translations.homePage.serverAddress}</span>
-          <input></input>
+          <input
+            bind:value={connectionViewModel.serverAddressInput}
+            on:enter={connectionViewModel.connect}
+          ></input>
         </div>
       </label>
 
@@ -24,6 +31,8 @@ export function HomePage(settingsViewModel: SettingsViewModel) {
         <button
           class="danger flex justify-center"
           aria-label={translations.homePage.disconnectAudioLabel}
+          on:click={connectionViewModel.disconnect}
+          toggle:disabled={connectionViewModel.cannotDisonnect}
         >
           <span class="icon">link_off</span>
         </button>
@@ -36,6 +45,8 @@ export function HomePage(settingsViewModel: SettingsViewModel) {
         <button
           class="primary flex justify-center"
           aria-label={translations.homePage.connectAudioLabel}
+          on:click={connectionViewModel.connect}
+          toggle:disabled={connectionViewModel.cannotConnect}
         >
           <span class="icon">link</span>
         </button>

src/ViewModel/connectionViewModel.tsx

@@ -0,0 +1,53 @@
+import * as React from "bloatless-react";
+
+import ConnectionModel from "../Model/connectionModel";
+import { Message } from "udn-frontend";
+
+export default class ConnectionViewModel {
+  connectionModel: ConnectionModel;
+
+  // state
+  serverAddressInput: React.State<string> = new React.State("");
+  isConnected: React.State<boolean> = new React.State(false);
+
+  // toggles
+  cannotConnect: React.State<boolean> = React.createProxyState(
+    [this.serverAddressInput, this.isConnected],
+    () =>
+      (this.isConnected.value == true &&
+        this.serverAddressInput.value == this.connectionModel.address) ||
+      this.serverAddressInput.value == ""
+  );
+  cannotDisonnect: React.State<boolean> = React.createProxyState(
+    [this.isConnected],
+    () => this.isConnected.value == false
+  );
+
+  // handlers
+  connectionChangeHandler = (): void => {
+    this.isConnected.value = this.connectionModel.isConnected;
+    if (this.connectionModel.address) {
+      this.serverAddressInput.value = this.connectionModel.address;
+    }
+  };
+
+  messageHandler = (data: Message): void => {};
+
+  // methods
+  connect = (): void => {
+    this.connectionModel.connect(this.serverAddressInput.value);
+  };
+
+  disconnect = (): void => {
+    this.connectionModel.disconnect();
+  };
+
+  // init
+  constructor() {
+    const connectionModel = new ConnectionModel({
+      connectionChangeHandler: this.connectionChangeHandler,
+      messageHandler: this.messageHandler,
+    });
+    this.connectionModel = connectionModel;
+  }
+}

src/ViewModel/settingsViewModel.ts

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
 import SettingsModel from "../Model/settingsModel";
+import StorageModel from "../Model/storageModel";
 
 export default class SettingsViewModel {
   settingsModel: SettingsModel;
@@ -10,7 +11,7 @@ export default class SettingsViewModel {
   firstDayOfWeekInput: React.State<number> = new React.State(0);
 
   // toggles
-  cannotSetName = React.createProxyState(
+  cannotSetName: React.State<boolean> = React.createProxyState(
     [this.nameInput],
     () =>
       this.nameInput.value == "" ||
@@ -28,7 +29,8 @@ export default class SettingsViewModel {
   };
 
   // init
-  constructor(settingsModel: SettingsModel) {
+  constructor(storageModel: StorageModel) {
+    const settingsModel = new SettingsModel(storageModel);
     this.settingsModel = settingsModel;
 
     this.nameInput.value = settingsModel.username;

src/index.tsx

@@ -1,20 +1,16 @@
-import ConnectionModel from "./Model/connectionModel";
+import ConnectionViewModel from "./ViewModel/connectionViewModel";
 import { HomePage } from "./View/homePage";
-import { MainPage } from "./View/mainPage";
-import SettingsModel from "./Model/settingsModel";
 import SettingsViewModel from "./ViewModel/settingsViewModel";
 import StorageModel from "./Model/storageModel";
 
 // models
 const storageModel = new StorageModel();
-const settingsModel = new SettingsModel(storageModel);
-const connectionModel = new ConnectionModel({
-  connectionChangeHandler() {},
-  messageHandler(data) {},
-});
 
 // viewModels
-const settingsViewModel = new SettingsViewModel(settingsModel);
+const settingsViewModel = new SettingsViewModel(storageModel);
+const connectionViewModel = new ConnectionViewModel();
 
 // view
-document.querySelector("main")!.append(HomePage(settingsViewModel));
+document
+  .querySelector("main")!
+  .append(HomePage(settingsViewModel, connectionViewModel));