add settingsViewModel, implement name and first weekday

src/Model/settingsModel.ts

@@ -25,13 +25,13 @@ export default class SettingsModel {
   restoreUsername(): void {
     const path = storageKeys.username;
     const content = this.storageModel.restore(path);
-    this.username == content ?? "";
+    this.username = content ?? "";
   }
 
   restoreFirstDayofWeek(): void {
     const path = storageKeys.firstDayOfWeek;
     const content = this.storageModel.restoreStringifiable(path);
-    this.firstDayOfWeek == content ?? 0;
+    this.firstDayOfWeek = content ?? 0;
   }
 
   // init

src/View/Components/option.tsx

@@ -0,0 +1,9 @@
+import * as React from "bloatless-react";
+
+export function Option(text: string, value: string, selectedOnCreate: boolean) {
+  return (
+    <option value={value} toggle:selected={selectedOnCreate}>
+      {text}
+    </option>
+  );
+}

src/View/homePage.tsx

@@ -2,9 +2,11 @@ import "./homePage.css";
 
 import * as React from "bloatless-react";
 
+import { Option } from "./Components/option";
+import SettingsViewModel from "../ViewModel/settingsViewModel";
 import { translations } from "./translations";
 
-export function HomePage() {
+export function HomePage(settingsViewModel: SettingsViewModel) {
   // sections
   const overviewSection = (
     <div id="overview-section">
@@ -45,9 +47,7 @@ export function HomePage() {
         <span class="icon">inbox</span>
         <div>
           <b>{translations.homePage.mailboxHeadline}</b>
-          <span class="error">
-            {translations.homePage.mailboxDisabled}
-          </span>
+          <span class="error">{translations.homePage.mailboxDisabled}</span>
         </div>
       </div>
 
@@ -67,11 +67,18 @@ export function HomePage() {
         <span class="icon">account_circle</span>
         <div>
           <span>{translations.homePage.yourNameLabel}</span>
-          <input></input>
+          <input
+            bind:value={settingsViewModel.nameInput}
+            on:enter={settingsViewModel.setName}
+          ></input>
         </div>
       </label>
       <div class="flex-row justify-end">
-        <button class="width-50">
+        <button
+          class="width-50"
+          on:click={settingsViewModel.setName}
+          toggle:disabled={settingsViewModel.cannotSetName}
+        >
           {translations.homePage.setNameButton}
           <span class="icon">check</span>
         </button>
@@ -83,7 +90,16 @@ export function HomePage() {
         <span class="icon">calendar_month</span>
         <div>
           <span>{translations.homePage.firstDayOfWeekLabel}</span>
-          <select></select>
+          <select bind:value={settingsViewModel.firstDayOfWeekInput}>
+            {...translations.regional.weekdays.full.map((weekdayName, i) =>
+              Option(
+                weekdayName,
+                i.toString(),
+                i == settingsViewModel.firstDayOfWeekInput.value
+              )
+            )}
+          </select>
+          <span class="icon">arrow_drop_down</span>
         </div>
       </label>
 

src/ViewModel/settingsViewModel.ts

@@ -0,0 +1,40 @@
+import * as React from "bloatless-react";
+
+import SettingsModel from "../Model/settingsModel";
+
+export default class SettingsViewModel {
+  settingsModel: SettingsModel;
+
+  // state
+  nameInput: React.State<string> = new React.State("");
+  firstDayOfWeekInput: React.State<number> = new React.State(0);
+
+  // toggles
+  cannotSetName = React.createProxyState(
+    [this.nameInput],
+    () =>
+      this.nameInput.value == "" ||
+      this.nameInput.value == this.settingsModel.username
+  );
+
+  // set
+  setName = (): void => {
+    this.settingsModel.setName(this.nameInput.value);
+    this.nameInput.callSubscriptions();
+  };
+
+  setFirstDayofWeek = (): void => {
+    this.settingsModel.setFirstDayOfWeek(this.firstDayOfWeekInput.value);
+  };
+
+  // init
+  constructor(settingsModel: SettingsModel) {
+    this.settingsModel = settingsModel;
+
+    this.nameInput.value = settingsModel.username;
+    this.firstDayOfWeekInput.value = settingsModel.firstDayOfWeek;
+
+    // subscriptions
+    this.firstDayOfWeekInput.subscribe(this.setFirstDayofWeek);
+  }
+}

src/index.tsx

@@ -1,16 +1,20 @@
 import ConnectionModel from "./Model/connectionModel";
 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);
+
 // view
-document
-  .querySelector("main")!
-  .append(HomePage());
+document.querySelector("main")!.append(HomePage(settingsViewModel));