From 61b15ceceec9c11ad6bc59fcbfe397efc9fe2afb Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sun, 28 Jul 2024 03:46:08 +0200 Subject: [PATCH] finish data transfer --- dist/index.js | 159 ++++++++++++++++-- src/Model/Global/fileTransferModel.ts | 25 ++- src/View/Modals/dataTransferModal.tsx | 127 +++++++++++++- src/View/translations.ts | 14 +- src/View/utility.ts | 4 + src/ViewModel/Global/fileTransferViewModel.ts | 62 ++++++- 6 files changed, 358 insertions(+), 33 deletions(-) diff --git a/dist/index.js b/dist/index.js index 2347b087..4da9a009 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1469,6 +1469,9 @@ function allowDrag(event) { event.dataTransfer?.setData("text", ""); } + function reload() { + window.location.reload(); + } // src/ViewModel/Pages/taskViewModel.ts var TaskViewModel = class { @@ -2607,6 +2610,7 @@ confirmButton: "Confirm", saveButton: "Save", setButton: "Set", + reloadAppButton: "Reload App", fileVersionLabel: "Version", searchLabel: "Search" }, @@ -2638,7 +2642,7 @@ setNameButtonAudioLabel: "set name", firstDayOfWeekLabel: "First day of week", manageStorageButton: "Manage storage", - transferDataButton: "Transfer Data", + transferDataButton: "Data Transfer", scrollToChatButton: "Chats", /// backToOverviewAudioLabel: "go back to overview", @@ -2653,9 +2657,11 @@ connectButtonAudioLabel: "connect" }, dataTransferModal: { - transferDataHeadline: "Transfer Data", + transferDataHeadline: "Data Transfer", selectionDescription: "Select the data that you want to transfer.", dataEntryDescription: "Enter this data on the other device.", + dataEntryInputDescription: "Enter the data displayed on the other device.", + readyToReceiveDescription: "Click 'send' on the other device.", /// fromThisDeviceButton: "From this device", toThisDeviceButton: "To this device", @@ -2669,8 +2675,9 @@ transferKeyHeadline: "Transfer Encryption Key", sendButton: "Send", /// - sendingFiles: "Sending files...", - filesSentCount: (count) => `Files sent: ${count}` + filesSentCount: (count) => `Files sent: ${count}.`, + allFilesSent: "Done.", + filesReceivedCount: (count) => `Files received: ${count}.` }, storage: { noItemSelected: "No item selected", @@ -4454,26 +4461,54 @@ selectedPaths = new ListState(); transferChannel = new State(""); transferKey = new State(""); - filesSentCount = new State(0); + receivingTransferChannel = new State(""); + receivingTransferKey = new State(""); filePathsSent = new ListState(); - didNotFinishSending = new State(true); + filesSentCount = createProxyState( + [this.filePathsSent], + () => this.filePathsSent.value.size + ); filesSentText = createProxyState( [this.filesSentCount], () => translations.dataTransferModal.filesSentCount(this.filesSentCount.value) ); + filePathsReceived = new ListState(); + filesReceivedCount = createProxyState( + [this.filePathsReceived], + () => this.filePathsReceived.value.size + ); + filesReceivedText = createProxyState( + [this.filesReceivedCount], + () => translations.dataTransferModal.filesReceivedCount( + this.filesReceivedCount.value + ) + ); // guards hasNoPathsSelected = createProxyState( [this.selectedPaths], () => this.selectedPaths.value.size == 0 ); + didNotFinishSending = new State(true); + cannotPrepareToReceive = createProxyState( + [this.receivingTransferChannel, this.receivingTransferKey], + () => this.receivingTransferChannel.value == "" || this.receivingTransferKey.value == "" + ); + // handlers + handleReceivedFile = (path) => { + this.filePathsReceived.add(path); + }; // methods getOptions = () => { this.generalFileOptions.clear(); this.chatFileOptions.clear(); + this.selectedPaths.clear(); this.generalFileOptions.add( { label: translations.dataTransferModal.connectionData, - path: StorageModel.getPath("connection" /* ConnectionModel */, []) + path: StorageModel.getPath( + "connection" /* ConnectionModel */, + filePaths.connectionModel.previousAddresses + ) }, { label: translations.dataTransferModal.settingsData, @@ -4508,18 +4543,28 @@ initiateTransfer = () => { this.presentedModal.value = 3 /* TransferDisplay */; this.didNotFinishSending.value = true; - this.filesSentCount.value = 0; this.filePathsSent.clear(); this.fileTransferModel.sendFiles( this.selectedPaths.value.values(), (path) => { console.log(path); this.filePathsSent.add(path); - this.filesSentCount.value++; } ); this.didNotFinishSending.value = false; }; + showTransferDataInputModal = () => { + this.presentedModal.value = 4 /* TransferDataInput */; + }; + prepareReceivingData = () => { + this.presentedModal.value = 5 /* ReceptionDisplay */; + this.filePathsReceived.clear(); + const transferData = { + channel: this.receivingTransferChannel.value, + key: this.receivingTransferKey.value + }; + this.fileTransferModel.prepareToReceive(transferData); + }; hideModal = () => { this.presentedModal.value = void 0; }; @@ -4527,6 +4572,9 @@ constructor(fileTransferModel2, chatListModel2) { this.fileTransferModel = fileTransferModel2; this.chatListModel = chatListModel2; + this.fileTransferModel.fileHandlerManager.addHandler( + this.handleReceivedFile + ); } }; @@ -4537,7 +4585,7 @@ // src/View/Modals/dataTransferModal.tsx function DataTransferModalWrapper(fileTransferViewModel2) { - return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2), TransferDataDisplayModal(fileTransferViewModel2), TransferDisplayModal(fileTransferViewModel2)); + return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2), TransferDataDisplayModal(fileTransferViewModel2), TransferDisplayModal(fileTransferViewModel2), TransferDataInputModal(fileTransferViewModel2), DataReceptionModal(fileTransferViewModel2)); } function DirectionSelectionModal(fileTransferViewModel2) { const isPresented = createProxyState( @@ -4553,7 +4601,16 @@ /* @__PURE__ */ createElement("span", { class: "icon" }, "upload"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.fromThisDeviceButton)), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward") - ), /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "download"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.toThisDeviceButton)), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.hideModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); + ), /* @__PURE__ */ createElement( + "button", + { + class: "tile", + "on:click": fileTransferViewModel2.showTransferDataInputModal + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "download"), + /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.toThisDeviceButton)), + /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward") + ))), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.hideModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); } function FileSelectionModal(fileTransferViewModel2) { const OptionConverter = (fileOption) => { @@ -4648,13 +4705,20 @@ [fileTransferViewModel2.presentedModal], () => fileTransferViewModel2.presentedModal.value == 3 /* TransferDisplay */ ); - return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("p", null, translations.dataTransferModal.sendingFiles), /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement( "p", { class: "secondary", "subscribe:innerText": fileTransferViewModel2.filesSentText } ), /* @__PURE__ */ createElement( + "p", + { + class: "secondary", + "toggle:hidden": fileTransferViewModel2.didNotFinishSending + }, + translations.dataTransferModal.allFilesSent + ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( "div", { class: "tile flex-column align-start", @@ -4673,6 +4737,61 @@ /* @__PURE__ */ createElement("span", { class: "icon" }, "close") ))); } + function TransferDataInputModal(fileTransferViewModel2) { + const isPresented = createProxyState( + [fileTransferViewModel2.presentedModal], + () => fileTransferViewModel2.presentedModal.value == 4 /* TransferDataInput */ + ); + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.dataEntryInputDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.transferChannelHeadline), /* @__PURE__ */ createElement( + "input", + { + "bind:value": fileTransferViewModel2.receivingTransferChannel + } + ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.transferKeyHeadline), /* @__PURE__ */ createElement( + "input", + { + "bind:value": fileTransferViewModel2.receivingTransferKey + } + ))))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement( + "button", + { + class: "flex", + "on:click": fileTransferViewModel2.showDirectionSelectionModal + }, + translations.general.backButton + ), /* @__PURE__ */ createElement( + "button", + { + class: "primary flex", + "on:click": fileTransferViewModel2.prepareReceivingData, + "toggle:disabled": fileTransferViewModel2.cannotPrepareToReceive + }, + translations.general.continueButton, + /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward") + )))); + } + function DataReceptionModal(fileTransferViewModel2) { + const isPresented = createProxyState( + [fileTransferViewModel2.presentedModal], + () => fileTransferViewModel2.presentedModal.value == 5 /* ReceptionDisplay */ + ); + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("p", { class: "secondary" }, translations.dataTransferModal.readyToReceiveDescription), /* @__PURE__ */ createElement( + "p", + { + class: "secondary", + "subscribe:innerText": fileTransferViewModel2.filesReceivedText + } + ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( + "div", + { + class: "tile flex-column align-start", + "children:append": [ + fileTransferViewModel2.filePathsReceived, + StringToTextSpan + ] + } + )), /* @__PURE__ */ createElement("button", { "on:click": reload }, translations.general.reloadAppButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh")))); + } // src/Model/Global/fileTransferModel.ts var FileTransferModel = class { @@ -4680,11 +4799,12 @@ connectionModel; // data transferData; + fileHandlerManager = new HandlerManager(); // general generateTransferData = () => { const transferData = { - channel: generateRandomToken(2), - key: generateRandomToken(3) + channel: generateRandomToken(2).substring(0, 4), + key: generateRandomToken(3).substring(0, 6) }; this.transferData = transferData; return transferData; @@ -4696,7 +4816,9 @@ // handlers handleMessage = (data) => { if (this.transferData == void 0) return; + if (data.messageBody == void 0) return; if (data.messageChannel != this.transferData.channel) return; + this.handleFile(data.messageBody); }; handleFile = async (encryptedFileData) => { if (this.transferData == void 0) return; @@ -4704,6 +4826,7 @@ encryptedFileData, this.transferData.key ); + console.log(decrypted); const parsed = parse(decrypted); const isFileData = checkMatchesObjectStructure( parsed, @@ -4712,6 +4835,10 @@ if (isFileData == false) return; const fileData = parsed; this.storageModel.write(fileData.path, fileData.body); + const pathString = StorageModel.pathComponentsToString( + ...fileData.path + ); + this.fileHandlerManager.trigger(pathString); }; // sending sendFiles = (directoryPaths, callback) => { @@ -4735,8 +4862,8 @@ }; const stringifiedFileData = stringify(fileData); const encryptedFileData = await encryptString( - fileContent, - stringifiedFileData + stringifiedFileData, + this.transferData.key ); this.connectionModel.sendPlainMessage( this.transferData.channel, diff --git a/src/Model/Global/fileTransferModel.ts b/src/Model/Global/fileTransferModel.ts index 77ddfd09..4320e8bb 100644 --- a/src/Model/Global/fileTransferModel.ts +++ b/src/Model/Global/fileTransferModel.ts @@ -1,7 +1,12 @@ // this file is responsible for sending and handling files. +import { + HandlerManager, + generateRandomToken, + parse, + stringify, +} from "../Utility/utility"; import { decryptString, encryptString } from "../Utility/crypto"; -import { generateRandomToken, parse, stringify } from "../Utility/utility"; import ConnectionModel from "./connectionModel"; import { Message } from "udn-frontend"; @@ -14,12 +19,13 @@ export default class FileTransferModel { // data transferData: TransferData | undefined; + fileHandlerManager: HandlerManager = new HandlerManager(); // general generateTransferData = (): TransferData => { const transferData: TransferData = { - channel: generateRandomToken(2), - key: generateRandomToken(3), + channel: generateRandomToken(2).substring(0, 4), + key: generateRandomToken(3).substring(0, 6), }; this.transferData = transferData; return transferData; @@ -33,7 +39,10 @@ export default class FileTransferModel { // handlers handleMessage = (data: Message): void => { if (this.transferData == undefined) return; + if (data.messageBody == undefined) return; if (data.messageChannel != this.transferData.channel) return; + + this.handleFile(data.messageBody); }; handleFile = async (encryptedFileData: string): Promise => { @@ -43,6 +52,7 @@ export default class FileTransferModel { encryptedFileData, this.transferData.key ); + console.log(decrypted); const parsed: any = parse(decrypted); const isFileData: boolean = checkMatchesObjectStructure( @@ -53,6 +63,11 @@ export default class FileTransferModel { const fileData: FileData = parsed; this.storageModel.write(fileData.path, fileData.body); + + const pathString: string = StorageModel.pathComponentsToString( + ...fileData.path + ); + this.fileHandlerManager.trigger(pathString); }; // sending @@ -82,8 +97,8 @@ export default class FileTransferModel { }; const stringifiedFileData: string = stringify(fileData); const encryptedFileData: string = await encryptString( - fileContent, - stringifiedFileData + stringifiedFileData, + this.transferData.key ); this.connectionModel.sendPlainMessage( this.transferData.channel, diff --git a/src/View/Modals/dataTransferModal.tsx b/src/View/Modals/dataTransferModal.tsx index 84fbceb8..70d6ef20 100644 --- a/src/View/Modals/dataTransferModal.tsx +++ b/src/View/Modals/dataTransferModal.tsx @@ -7,6 +7,7 @@ import FileTransferViewModel, { import StorageModel from "../../Model/Global/storageModel"; import { StringToTextSpan } from "../Components/textSpan"; +import { reload } from "../utility"; import { translations } from "../translations"; export function DataTransferModalWrapper( @@ -18,6 +19,8 @@ export function DataTransferModalWrapper( {FileSelectionModal(fileTransferViewModel)} {TransferDataDisplayModal(fileTransferViewModel)} {TransferDisplayModal(fileTransferViewModel)} + {TransferDataInputModal(fileTransferViewModel)} + {DataReceptionModal(fileTransferViewModel)} ); } @@ -47,7 +50,10 @@ function DirectionSelectionModal(fileTransferViewModel: FileTransferViewModel) { arrow_forward - + + + + + ); +} + +function DataReceptionModal(fileTransferViewModel: FileTransferViewModel) { + const isPresented = React.createProxyState( + [fileTransferViewModel.presentedModal], + () => + fileTransferViewModel.presentedModal.value == + FileTransferModal.ReceptionDisplay + ); + + return ( +
+
+
+

{translations.dataTransferModal.transferDataHeadline}

+ +

+ {translations.dataTransferModal.readyToReceiveDescription} +

+ +

+ +
+ +
+
+ +
+
+ ); +} diff --git a/src/View/translations.ts b/src/View/translations.ts index 00356fec..d9e61abf 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -17,6 +17,8 @@ const englishTranslations = { saveButton: "Save", setButton: "Set", + reloadAppButton: "Reload App", + fileVersionLabel: "Version", searchLabel: "Search", }, @@ -57,7 +59,7 @@ const englishTranslations = { manageStorageButton: "Manage storage", - transferDataButton: "Transfer Data", + transferDataButton: "Data Transfer", scrollToChatButton: "Chats", @@ -80,9 +82,11 @@ const englishTranslations = { }, dataTransferModal: { - transferDataHeadline: "Transfer Data", + transferDataHeadline: "Data Transfer", selectionDescription: "Select the data that you want to transfer.", dataEntryDescription: "Enter this data on the other device.", + dataEntryInputDescription: "Enter the data displayed on the other device.", + readyToReceiveDescription: "Click 'send' on the other device.", /// @@ -107,8 +111,10 @@ const englishTranslations = { /// - sendingFiles: "Sending files...", - filesSentCount: (count: number) => `Files sent: ${count}` + filesSentCount: (count: number) => `Files sent: ${count}.`, + allFilesSent: "Done.", + + filesReceivedCount: (count: number) => `Files received: ${count}.`, }, storage: { diff --git a/src/View/utility.ts b/src/View/utility.ts index 5dad3b0e..f7ba929e 100644 --- a/src/View/utility.ts +++ b/src/View/utility.ts @@ -4,4 +4,8 @@ export function allowDrop(event: DragEvent) { export function allowDrag(event: DragEvent) { event.dataTransfer?.setData("text", "") +} + +export function reload() { + window.location.reload(); } \ No newline at end of file diff --git a/src/ViewModel/Global/fileTransferViewModel.ts b/src/ViewModel/Global/fileTransferViewModel.ts index 15a5d43d..14cec045 100644 --- a/src/ViewModel/Global/fileTransferViewModel.ts +++ b/src/ViewModel/Global/fileTransferViewModel.ts @@ -5,6 +5,7 @@ import FileTransferModel, { } from "../../Model/Global/fileTransferModel"; import StorageModel, { StorageModelSubPath, + filePaths, } from "../../Model/Global/storageModel"; import ChatListModel from "../../Model/Chat/chatListModel"; @@ -27,30 +28,64 @@ export default class FileTransferViewModel { transferChannel: React.State = new React.State(""); transferKey: React.State = new React.State(""); - filesSentCount: React.State = new React.State(0); + receivingTransferChannel: React.State = new React.State(""); + receivingTransferKey: React.State = new React.State(""); + filePathsSent: React.ListState = new React.ListState(); - didNotFinishSending: React.State = new React.State(true); + filesSentCount: React.State = React.createProxyState( + [this.filePathsSent], + () => this.filePathsSent.value.size + ); filesSentText: React.State = React.createProxyState( [this.filesSentCount], () => translations.dataTransferModal.filesSentCount(this.filesSentCount.value) ); + filePathsReceived: React.ListState = new React.ListState(); + filesReceivedCount: React.State = React.createProxyState( + [this.filePathsReceived], + () => this.filePathsReceived.value.size + ); + filesReceivedText: React.State = React.createProxyState( + [this.filesReceivedCount], + () => + translations.dataTransferModal.filesReceivedCount( + this.filesReceivedCount.value + ) + ); + // guards hasNoPathsSelected: React.State = React.createProxyState( [this.selectedPaths], () => this.selectedPaths.value.size == 0 ); + didNotFinishSending: React.State = new React.State(true); + cannotPrepareToReceive: React.State = React.createProxyState( + [this.receivingTransferChannel, this.receivingTransferKey], + () => + this.receivingTransferChannel.value == "" || + this.receivingTransferKey.value == "" + ); + + // handlers + handleReceivedFile = (path: string): void => { + this.filePathsReceived.add(path); + }; // methods getOptions = (): void => { this.generalFileOptions.clear(); this.chatFileOptions.clear(); + this.selectedPaths.clear(); this.generalFileOptions.add( { label: translations.dataTransferModal.connectionData, - path: StorageModel.getPath(StorageModelSubPath.ConnectionModel, []), + path: StorageModel.getPath( + StorageModelSubPath.ConnectionModel, + filePaths.connectionModel.previousAddresses + ), }, { label: translations.dataTransferModal.settingsData, @@ -92,7 +127,6 @@ export default class FileTransferViewModel { initiateTransfer = (): void => { this.presentedModal.value = FileTransferModal.TransferDisplay; this.didNotFinishSending.value = true; - this.filesSentCount.value = 0; this.filePathsSent.clear(); this.fileTransferModel.sendFiles( @@ -100,13 +134,27 @@ export default class FileTransferViewModel { (path: string) => { console.log(path); this.filePathsSent.add(path); - this.filesSentCount.value++; } ); this.didNotFinishSending.value = false; }; + showTransferDataInputModal = (): void => { + this.presentedModal.value = FileTransferModal.TransferDataInput; + }; + + prepareReceivingData = (): void => { + this.presentedModal.value = FileTransferModal.ReceptionDisplay; + this.filePathsReceived.clear(); + + const transferData: TransferData = { + channel: this.receivingTransferChannel.value, + key: this.receivingTransferKey.value, + }; + this.fileTransferModel.prepareToReceive(transferData); + }; + hideModal = (): void => { this.presentedModal.value = undefined; }; @@ -118,6 +166,10 @@ export default class FileTransferViewModel { ) { this.fileTransferModel = fileTransferModel; this.chatListModel = chatListModel; + + this.fileTransferModel.fileHandlerManager.addHandler( + this.handleReceivedFile + ); } }