add list of files to transfer

dist/index.js

@@ -2600,7 +2600,9 @@
       deleteItemButtonAudioLabel: "delete item",
       searchButtonAudioLabel: "search",
       abortButton: "Abort",
+      cancelButton: "Cancel",
       closeButton: "Close",
+      continueButton: "Continue",
       confirmButton: "Confirm",
       saveButton: "Save",
       setButton: "Set",
@@ -2635,6 +2637,7 @@
       setNameButtonAudioLabel: "set name",
       firstDayOfWeekLabel: "First day of week",
       manageStorageButton: "Manage storage",
+      transferFilesButton: "Transfer Files",
       scrollToChatButton: "Chats",
       ///
       backToOverviewAudioLabel: "go back to overview",
@@ -2648,6 +2651,22 @@
       ///
       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)",
@@ -4268,13 +4287,16 @@
     };
     tryToSendMessage = (chatMessage) => {
       const stringifiedBody = stringify(chatMessage);
-      const isSent = this.udn.sendMessage(
+      const isSent = this.sendPlainMessage(
         chatMessage.channel,
         stringifiedBody
       );
       if (isSent) this.messageSentHandlerManager.trigger(chatMessage);
       return isSent;
     };
+    sendPlainMessage = (channel, body) => {
+      return this.udn.sendMessage(channel, body);
+    };
     // storage
     getPreviousAddressPath = () => {
       return StorageModel.getPath(
@@ -4416,21 +4438,168 @@
     taskStatusSuggestions = new ListState();
   };
 
+  // src/View/Modals/fileTransferModal.tsx
+  function FileTransferModal(fileTransferViewModel2) {
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "modal",
+        "toggle:open": fileTransferViewModel2.isShowingTransferModal
+      },
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.fileTransferModal.transferFilesHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.fileTransferModal.selectionDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, translations.fileTransferModal.generalHeadline), /* @__PURE__ */ createElement(
+        "div",
+        {
+          class: "flex-column gap content-margin-bottom",
+          "children:append": [
+            fileTransferViewModel2.generalFileOptions,
+            FileOption
+          ]
+        }
+      ), /* @__PURE__ */ createElement("h3", null, translations.fileTransferModal.chatsHeadline), /* @__PURE__ */ createElement(
+        "div",
+        {
+          class: "flex-column gap",
+          "children:append": [
+            fileTransferViewModel2.chatFileOptions,
+            FileOption
+          ]
+        }
+      )), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+        "button",
+        {
+          class: "flex",
+          "on:click": fileTransferViewModel2.hideTransferModal
+        },
+        translations.general.cancelButton
+      ), /* @__PURE__ */ createElement(
+        "button",
+        {
+          class: "primary flex",
+          "on:click": fileTransferViewModel2.hideTransferModal
+        },
+        translations.general.continueButton,
+        /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+      )))
+    );
+  }
+  function FileOption(fileOption) {
+    return /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(...fileOption.path))));
+  }
+
   // src/Model/Global/fileTransferModel.ts
   var FileTransferModel = class {
     storageModel;
     connectionModel;
-    // methods
+    // data
+    transferData;
+    // general
     generateTransferData = () => {
       return {
         channel: generateRandomToken(2),
         key: generateRandomToken(3)
       };
     };
+    prepareToReceive = (transferData) => {
+      this.connectionModel.addChannel(transferData.channel);
+      this.transferData = transferData;
+    };
+    // handlers
+    handleMessage = (data) => {
+      if (this.transferData == void 0) return;
+      if (data.messageChannel != this.transferData.channel) return;
+    };
+    handleFile = async (encryptedFileData) => {
+      if (this.transferData == void 0) return;
+      const decrypted = await decryptString(
+        encryptedFileData,
+        this.transferData.key
+      );
+      const parsed = parse(decrypted);
+      const isFileData = checkMatchesObjectStructure(parsed, FileDataReference);
+      if (isFileData == false) return;
+      const fileData = parsed;
+      this.storageModel.write(fileData.path, fileData.body);
+    };
+    // sending
+    sendFiles = (...directoryPaths) => {
+      for (const directoryPath of directoryPaths) {
+        this.storageModel.recurse(directoryPath, (filePath) => {
+          this.sendFile(filePath);
+        });
+      }
+    };
+    sendFile = async (filePath) => {
+      if (this.transferData == void 0) return;
+      const fileContent = this.storageModel.read(filePath);
+      if (fileContent == null) return;
+      const fileData = {
+        path: filePath,
+        body: fileContent
+      };
+      const stringifiedFileData = stringify(fileData);
+      const encryptedFileData = await encryptString(
+        fileContent,
+        stringifiedFileData
+      );
+      this.connectionModel.sendPlainMessage(
+        this.transferData.channel,
+        encryptedFileData
+      );
+    };
     // init
     constructor(storageModel2, connectionModel2) {
       this.storageModel = storageModel2;
       this.connectionModel = connectionModel2;
+      this.connectionModel.messageHandlerManager.addHandler(this.handleMessage);
+    }
+  };
+  var FileDataReference = {
+    path: [""],
+    body: ""
+  };
+
+  // src/ViewModel/Global/fileTransferViewModel.ts
+  var FileTransferViewModel = class {
+    fileTransferModel;
+    chatListModel;
+    // state
+    isShowingTransferModal = new State(false);
+    generalFileOptions = new ListState();
+    chatFileOptions = new ListState();
+    // methods
+    getOptions = () => {
+      this.generalFileOptions.clear();
+      this.chatFileOptions.clear();
+      this.generalFileOptions.add(
+        {
+          label: translations.fileTransferModal.connectionData,
+          path: StorageModel.getPath("connection" /* ConnectionModel */, [])
+        },
+        {
+          label: translations.fileTransferModal.settingsData,
+          path: StorageModel.getPath("settings" /* SettingsModel */, [])
+        }
+      );
+      const chatModels = this.chatListModel.chatModels;
+      for (const chatModel of chatModels) {
+        this.chatFileOptions.add({
+          label: chatModel.info.primaryChannel,
+          path: chatModel.getBasePath()
+        });
+      }
+    };
+    // view
+    showTransferModal = () => {
+      this.isShowingTransferModal.value = true;
+      this.getOptions();
+    };
+    hideTransferModal = () => {
+      this.isShowingTransferModal.value = false;
+    };
+    // init
+    constructor(fileTransferModel2, chatListModel2) {
+      this.fileTransferModel = fileTransferModel2;
+      this.chatListModel = chatListModel2;
     }
   };
 
@@ -4469,7 +4638,7 @@
   };
 
   // src/View/homePage.tsx
-  function HomePage(storageViewModel2, settingsViewModel2, connectionViewModel2, chatListViewModel2) {
+  function HomePage(storageViewModel2, settingsViewModel2, connectionViewModel2, fileTransferViewModel2, chatListViewModel2) {
     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(
       "input",
       {
@@ -4538,7 +4707,15 @@
         i.toString(),
         i.toString() == settingsViewModel2.firstDayOfWeekInput.value
       )
-    )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "tile flex-no", "on:click": storageViewModel2.showStorageModal }, /* @__PURE__ */ createElement("span", { class: "icon" }, "hard_drive_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.manageStorageButton))), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
+    )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "tile flex-no",
+        "on:click": fileTransferViewModel2.showTransferModal
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "sync_alt"),
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.transferFilesButton))
+    ), /* @__PURE__ */ createElement("button", { class: "tile flex-no", "on:click": storageViewModel2.showStorageModal }, /* @__PURE__ */ createElement("span", { class: "icon" }, "hard_drive_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.manageStorageButton))), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
     const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
       {
@@ -4999,7 +5176,6 @@
     connectionModel
   );
   var fileTransferModel = new FileTransferModel(storageModel, connectionModel);
-  console.log(fileTransferModel.generateTransferData());
   new v1Upgrader(settingsModel, connectionModel, chatListModel);
   var coreVieWModel = new CoreViewModel();
   var storageViewModel = new StorageViewModel(coreVieWModel, storageModel);
@@ -5014,6 +5190,10 @@
     chatListModel,
     settingsViewModel
   );
+  var fileTransferViewModel = new FileTransferViewModel(
+    fileTransferModel,
+    chatListModel
+  );
   chatListViewModel.selectedChat.subscribe(() => {
     document.body.toggleAttribute(
       "showing-chat",
@@ -5028,10 +5208,12 @@
       storageViewModel,
       settingsViewModel,
       connectionViewModel,
+      fileTransferViewModel,
       chatListViewModel
     ),
     ChatPageWrapper(chatListViewModel),
     ConnectionModal(connectionViewModel),
+    FileTransferModal(fileTransferViewModel),
     StorageModal(storageViewModel)
   );
 })();

dist/styles.css

@@ -591,6 +591,10 @@ hr {
   margin-bottom: var(--content-margin);
 }
 
+.content-margin-bottom {
+  margin-bottom: var(--content-margin) !important;
+}
+
 label:not(.tile) {
   margin-bottom: var(--label-margin-bottom);
 }

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