add list of files to transfer

src/View/Modals/fileTransferModal.tsx

@@ -0,0 +1,76 @@
+import * as React from "bloatless-react";
+
+import FileTransferViewModel, {
+  FileTransferOption,
+} from "../../ViewModel/Global/fileTransferViewModel";
+
+import StorageModel from "../../Model/Global/storageModel";
+import { translations } from "../translations";
+
+export function FileTransferModal(
+  fileTransferViewModel: FileTransferViewModel
+) {
+  return (
+    <div
+      class="modal"
+      toggle:open={fileTransferViewModel.isShowingTransferModal}
+    >
+      <div>
+        <main>
+          <h2>{translations.fileTransferModal.transferFilesHeadline}</h2>
+          <span class="secondary">
+            {translations.fileTransferModal.selectionDescription}
+          </span>
+
+          <hr></hr>
+
+          <h3>{translations.fileTransferModal.generalHeadline}</h3>
+          <div
+            class="flex-column gap content-margin-bottom"
+            children:append={[
+              fileTransferViewModel.generalFileOptions,
+              FileOption,
+            ]}
+          ></div>
+
+          <h3>{translations.fileTransferModal.chatsHeadline}</h3>
+          <div
+            class="flex-column gap"
+            children:append={[
+              fileTransferViewModel.chatFileOptions,
+              FileOption,
+            ]}
+          ></div>
+        </main>
+        <div class="flex-row width-100">
+          <button
+            class="flex"
+            on:click={fileTransferViewModel.hideTransferModal}
+          >
+            {translations.general.cancelButton}
+          </button>
+          <button
+            class="primary flex"
+            on:click={fileTransferViewModel.hideTransferModal}
+          >
+            {translations.general.continueButton}
+            <span class="icon">arrow_forward</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FileOption(fileOption: FileTransferOption) {
+  return (
+    <button class="tile">
+      <div>
+        <b class="ellipsis">{fileOption.label}</b>
+        <span class="secondary ellipsis">
+          {StorageModel.pathComponentsToString(...fileOption.path)}
+        </span>
+      </div>
+    </button>
+  );
+}

src/View/homePage.tsx

@@ -7,6 +7,7 @@ import { Option, StringToOption } from "./Components/option";
 import ChatListViewModel from "../ViewModel/Chat/chatListViewModel";
 import { ChatViewModelToChatEntry } from "./Components/chatEntry";
 import ConnectionViewModel from "../ViewModel/Global/connectionViewModel";
+import FileTransferViewModel from "../ViewModel/Global/fileTransferViewModel";
 import SettingsViewModel from "../ViewModel/Global/settingsViewModel";
 import StorageViewModel from "../ViewModel/Global/storageViewModel";
 import { translations } from "./translations";
@@ -15,6 +16,7 @@ export function HomePage(
   storageViewModel: StorageViewModel,
   settingsViewModel: SettingsViewModel,
   connectionViewModel: ConnectionViewModel,
+  fileTransferViewModel: FileTransferViewModel,
   chatListViewModel: ChatListViewModel
 ) {
   // sections
@@ -116,6 +118,16 @@ export function HomePage(
 
       <hr></hr>
 
+      <button
+        class="tile flex-no"
+        on:click={fileTransferViewModel.showTransferModal}
+      >
+        <span class="icon">sync_alt</span>
+        <div>
+          <span>{translations.homePage.transferFilesButton}</span>
+        </div>
+      </button>
+
       <button class="tile flex-no" on:click={storageViewModel.showStorageModal}>
         <span class="icon">hard_drive_2</span>
         <div>

src/View/translations.ts

@@ -8,8 +8,10 @@ const englishTranslations = {
     searchButtonAudioLabel: "search",
 
     abortButton: "Abort",
+    cancelButton: "Cancel",
     closeButton: "Close",
 
+    continueButton: "Continue",
     confirmButton: "Confirm",
     saveButton: "Save",
     setButton: "Set",
@@ -54,6 +56,8 @@ const englishTranslations = {
 
     manageStorageButton: "Manage storage",
 
+    transferFilesButton: "Transfer Files",
+
     scrollToChatButton: "Chats",
 
     ///
@@ -74,6 +78,32 @@ const englishTranslations = {
     connectButtonAudioLabel: "connect",
   },
 
+  fileTransferModal: {
+    transferFilesHeadline: "Transfer Files",
+    selectionDescription: "Select the files that you want to transfer.",
+
+    ///
+
+    fromThisDeviceButton: "From this device",
+    toThisDeviceButton: "To this device",
+
+    ///
+
+    generalHeadline: "General",
+    
+    connectionData: "Connection Data",
+    settingsData: "Settings Data",
+
+    ///
+
+    chatsHeadline: "Chats",
+
+    ///
+
+    transferChannelHeadline: "Transfer Chanel",
+    transferKeyHeadline: "Transfer Encryption Key",
+  },
+
   storage: {
     noItemSelected: "No item selected",
     notAFile: "(not a file)",

src/ViewModel/Global/fileTransferViewModel.ts

@@ -0,0 +1,71 @@
+import * as React from "bloatless-react";
+
+import StorageModel, {
+  StorageModelSubPath,
+} from "../../Model/Global/storageModel";
+
+import ChatListModel from "../../Model/Chat/chatListModel";
+import ChatModel from "../../Model/Chat/chatModel";
+import FileTransferModel from "../../Model/Global/fileTransferModel";
+import { translations } from "../../View/translations";
+
+export default class FileTransferViewModel {
+  fileTransferModel: FileTransferModel;
+  chatListModel: ChatListModel;
+
+  // state
+  isShowingTransferModal: React.State<boolean> = new React.State(false);
+
+  generalFileOptions: React.ListState<FileTransferOption> =
+    new React.ListState();
+  chatFileOptions: React.ListState<FileTransferOption> = new React.ListState();
+
+  // methods
+  getOptions = (): void => {
+    this.generalFileOptions.clear();
+    this.chatFileOptions.clear();
+
+    this.generalFileOptions.add(
+      {
+        label: translations.fileTransferModal.connectionData,
+        path: StorageModel.getPath(StorageModelSubPath.ConnectionModel, []),
+      },
+      {
+        label: translations.fileTransferModal.settingsData,
+        path: StorageModel.getPath(StorageModelSubPath.SettingsModel, []),
+      }
+    );
+
+    const chatModels: Set<ChatModel> = this.chatListModel.chatModels;
+    for (const chatModel of chatModels) {
+      this.chatFileOptions.add({
+        label: chatModel.info.primaryChannel,
+        path: chatModel.getBasePath(),
+      });
+    }
+  };
+
+  // view
+  showTransferModal = (): void => {
+    this.isShowingTransferModal.value = true;
+    this.getOptions();
+  };
+
+  hideTransferModal = (): void => {
+    this.isShowingTransferModal.value = false;
+  };
+
+  // init
+  constructor(
+    fileTransferModel: FileTransferModel,
+    chatListModel: ChatListModel
+  ) {
+    this.fileTransferModel = fileTransferModel;
+    this.chatListModel = chatListModel;
+  }
+}
+
+export interface FileTransferOption {
+  label: string;
+  path: string[];
+}

src/index.tsx

@@ -11,7 +11,9 @@ import { ConnectionModal } from "./View/Modals/connectionModal";
 import ConnectionModel from "./Model/Global/connectionModel";
 import ConnectionViewModel from "./ViewModel/Global/connectionViewModel";
 import CoreViewModel from "./ViewModel/Global/coreViewModel";
+import { FileTransferModal } from "./View/Modals/fileTransferModal";
 import FileTransferModel from "./Model/Global/fileTransferModel";
+import FileTransferViewModel from "./ViewModel/Global/fileTransferViewModel";
 import { HomePage } from "./View/homePage";
 import SettingsModel from "./Model/Global/settingsModel";
 import SettingsViewModel from "./ViewModel/Global/settingsViewModel";
@@ -31,8 +33,6 @@ const chatListModel = new ChatListModel(
 );
 const fileTransferModel = new FileTransferModel(storageModel, connectionModel);
 
-console.log(fileTransferModel.generateTransferData());
-
 // upgrade
 new v1Upgrader(settingsModel, connectionModel, chatListModel);
 
@@ -51,6 +51,10 @@ const chatListViewModel = new ChatListViewModel(
   chatListModel,
   settingsViewModel
 );
+const fileTransferViewModel = new FileTransferViewModel(
+  fileTransferModel,
+  chatListModel
+);
 
 // view
 chatListViewModel.selectedChat.subscribe(() => {
@@ -74,9 +78,11 @@ document
       storageViewModel,
       settingsViewModel,
       connectionViewModel,
+      fileTransferViewModel,
       chatListViewModel
     ),
     ChatPageWrapper(chatListViewModel),
     ConnectionModal(connectionViewModel),
+    FileTransferModal(fileTransferViewModel),
     StorageModal(storageViewModel)
   );