reorganize

src/ViewModel/Global/connectionViewModel.ts

@@ -0,0 +1,86 @@
+import * as React from "bloatless-react";
+
+import ConnectionModel from "../../Model/Global/connectionModel";
+
+export default class ConnectionViewModel {
+  connectionModel: ConnectionModel;
+
+  // state
+  serverAddressInput: React.State<string> = new React.State("");
+  isConnected: React.State<boolean> = new React.State(false);
+
+  isShowingConnectionModal: React.State<boolean> = new React.State(false);
+
+  previousAddresses: React.ListState<string> = new React.ListState();
+
+  // guards
+  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
+  );
+  hasNoPreviousConnections: React.State<boolean> = React.createProxyState(
+    [this.previousAddresses],
+    () => this.previousAddresses.value.size == 0
+  );
+
+  // handlers
+  connectionChangeHandler = (): void => {
+    this.isConnected.value = this.connectionModel.isConnected;
+
+    if (this.connectionModel.isConnected == false) return;
+    if (this.connectionModel.address == undefined) return;
+
+    this.serverAddressInput.value = this.connectionModel.address;
+
+    if (!this.previousAddresses.value.has(this.connectionModel.address)) {
+      this.previousAddresses.add(this.connectionModel.address);
+    }
+  };
+
+  // methods
+  connect = (): void => {
+    this.connectToAddress(this.serverAddressInput.value);
+  };
+
+  connectToAddress = (address: string): void => {
+    this.connectionModel.connect(address);
+  };
+
+  disconnect = (): void => {
+    this.connectionModel.disconnect();
+  };
+
+  removePreviousAddress = (address: string): void => {
+    this.connectionModel.removeAddress(address);
+    this.updatePreviousAddresses();
+  };
+
+  // view methods
+  showConnectionModal = (): void => {
+    this.isShowingConnectionModal.value = true;
+  };
+
+  hideConnectionModal = (): void => {
+    this.isShowingConnectionModal.value = false;
+  };
+
+  updatePreviousAddresses = (): void => {
+    this.previousAddresses.clear();
+    this.previousAddresses.add(...this.connectionModel.addresses);
+  };
+
+  // init
+  constructor(connectionModel: ConnectionModel) {
+    this.connectionModel = connectionModel;
+    this.updatePreviousAddresses();
+
+    connectionModel.setConnectionChangeHandler(this.connectionChangeHandler);
+  }
+}

src/ViewModel/Global/settingsViewModel.ts

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

src/ViewModel/Global/storageViewModel.ts

@@ -0,0 +1,62 @@
+import * as React from "bloatless-react";
+
+import StorageModel, { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
+
+import { translations } from "../../View/translations";
+
+export default class StorageViewModel {
+  storageModel: StorageModel;
+
+  // state
+  isShowingStorageModal: React.State<boolean> = new React.State(false);
+  selectedPath: React.State<string> = new React.State(PATH_COMPONENT_SEPARATOR);
+  didMakeChanges: React.State<boolean> = new React.State(false);
+
+  selectedFileName: React.State<string>;
+  selectedFileContent: React.State<string>;
+
+  lastDeletedItemPath: React.State<string> = new React.State("");
+
+  // methods
+  getSelectedItemContent = (): string => {
+    const path = StorageModel.stringToPathComponents(this.selectedPath.value);
+    const content = this.storageModel.read(path);
+    return (
+      (content ?? translations.storage.notAFile) ||
+      translations.storage.contentEmpty
+    );
+  };
+
+  deleteSelectedItem = (): void => {
+    const path = StorageModel.stringToPathComponents(this.selectedPath.value);
+    this.lastDeletedItemPath.value = this.selectedPath.value;
+    
+    this.storageModel.removeRecursively(path);
+    this.didMakeChanges.value = true;
+  };
+
+  // view methods
+  showStorageModal = (): void => {
+    this.isShowingStorageModal.value = true;
+  };
+
+  hideStorageModal = (): void => {
+    if (this.didMakeChanges.value == true) {
+      window.location.reload();
+      return;
+    }
+    this.isShowingStorageModal.value = false;
+  };
+
+  // init
+  constructor(storageModel: StorageModel) {
+    this.storageModel = storageModel;
+
+    this.selectedFileName = React.createProxyState([this.selectedPath], () =>
+      StorageModel.getFileNameFromString(this.selectedPath.value)
+    );
+    this.selectedFileContent = React.createProxyState([this.selectedPath], () =>
+      this.getSelectedItemContent()
+    );
+  }
+}