VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add selection of files to be exported

Browse Source
This commit is contained in:
marlon-erler
2026-08-30 00:03:16 +02:00
parent 7aee3742ba
commit 42110585f6
4 changed files with 751 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.js
Vendored
+74 -26
View File
@@ -373,6 +373,7 @@
exportHeadline: "Export Data",
importHeadline: "Import Data",
selectionDescription: "Select the data that you want to transfer.",
exportSelectionDescription: "Select the data that you want to export.",
dataEntryDescription: "Enter this data on the other device.",
dataEntryInputDescription: "Enter the data displayed on the other device.",
notConnectedError: "You are not connected to any server.",
@@ -1843,11 +1844,14 @@
this.showTransferDataInputModal = () => {
this.presentedModal.value = 4 /* TransferDataInput */;
};
this.showExportSelectionModal = () => {
this.presentedModal.value = 6 /* ExportFileSelection */;
};
this.showExportModal = () => {
this.presentedModal.value = 6 /* ExportModal */;
this.presentedModal.value = 7 /* Export */;
};
this.showImportModal = () => {
this.presentedModal.value = 7 /* ImportModal */;
this.presentedModal.value = 8 /* Import */;
};
this.prepareReceivingData = () => {
if (this.cannotPrepareToReceive.value == true) return;
@@ -6691,7 +6695,26 @@
coreViewModel2,
connectionViewModel2,
fileTransferViewModel2
), FileSelectionModal(coreViewModel2, fileTransferViewModel2), TransferDataDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDataInputModal(coreViewModel2, fileTransferViewModel2), DataReceptionModal(coreViewModel2, fileTransferViewModel2), ExportModal(coreViewModel2, fileTransferViewModel2), ImportModal(coreViewModel2, fileTransferViewModel2));
), FileSelectionModal(coreViewModel2, fileTransferViewModel2), TransferDataDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDataInputModal(coreViewModel2, fileTransferViewModel2), DataReceptionModal(coreViewModel2, fileTransferViewModel2), ExportFileSelectionModal(coreViewModel2, fileTransferViewModel2), ExportModal(coreViewModel2, fileTransferViewModel2), ImportModal(coreViewModel2, fileTransferViewModel2));
}
function OptionEntry(fileOption, fileTransferViewModel2) {
const isSelected = new State(false);
if (fileTransferViewModel2.selectedPaths.value.has(fileOption.path)) {
isSelected.value = true;
}
isSelected.subscribeSilent((isSelected2) => {
if (isSelected2 == true) {
fileTransferViewModel2.selectedPaths.add(fileOption.path);
} else {
fileTransferViewModel2.selectedPaths.remove(fileOption.path);
}
});
function toggle() {
isSelected.value = !isSelected.value;
}
return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(
...fileOption.path
))));
}
function DirectionSelectionModal(coreViewModel2, connectionViewModel2, fileTransferViewModel2) {
const isPresented = createProxyState(
@@ -6740,7 +6763,7 @@
"button",
{
class: "tile",
"on:click": fileTransferViewModel2.showExportModal
"on:click": fileTransferViewModel2.showExportSelectionModal
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "file_save"),
/* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, coreViewModel2.translations.dataTransferModal.exportButton)),
@@ -6762,25 +6785,6 @@
const OptionConverter = (fileOption) => {
return OptionEntry(fileOption, fileTransferViewModel2);
};
function OptionEntry(fileOption, fileTransferViewModel3) {
const isSelected = new State(false);
if (fileTransferViewModel3.selectedPaths.value.has(fileOption.path)) {
isSelected.value = true;
}
isSelected.subscribeSilent((isSelected2) => {
if (isSelected2 == true) {
fileTransferViewModel3.selectedPaths.add(fileOption.path);
} else {
fileTransferViewModel3.selectedPaths.remove(fileOption.path);
}
});
function toggle() {
isSelected.value = !isSelected.value;
}
return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(
...fileOption.path
))));
}
const isPresented = createProxyState(
[fileTransferViewModel2.presentedModal],
() => fileTransferViewModel2.presentedModal.value == 1 /* FileSelection */
@@ -6948,10 +6952,54 @@
}
)), /* @__PURE__ */ createElement("button", { "on:click": ViewController.reload }, coreViewModel2.translations.general.reloadAppButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh"))));
}
function ExportFileSelectionModal(coreViewModel2, fileTransferViewModel2) {
const OptionConverter = (fileOption) => {
return OptionEntry(fileOption, fileTransferViewModel2);
};
const isPresented = createProxyState(
[fileTransferViewModel2.presentedModal],
() => fileTransferViewModel2.presentedModal.value == 6 /* ExportFileSelection */
);
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportSelectionDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.generalHeadline), /* @__PURE__ */ createElement(
"div",
{
class: "flex-column gap content-margin-bottom",
"children:append": [
fileTransferViewModel2.generalFileOptions,
OptionConverter
]
}
), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.chatsHeadline), /* @__PURE__ */ createElement(
"div",
{
class: "flex-column gap",
"children:append": [
fileTransferViewModel2.chatFileOptions,
OptionConverter
]
}
)), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
"button",
{
class: "flex",
"on:click": fileTransferViewModel2.showDirectionSelectionModal
},
coreViewModel2.translations.general.backButton
), /* @__PURE__ */ createElement(
"button",
{
class: "primary flex",
"on:click": fileTransferViewModel2.showExportModal,
"toggle:disabled": fileTransferViewModel2.hasNoPathsSelected
},
coreViewModel2.translations.general.continueButton,
/* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
))));
}
function ExportModal(coreViewModel2, fileTransferViewModel2) {
const isPresented = createProxyState(
[fileTransferViewModel2.presentedModal],
() => fileTransferViewModel2.presentedModal.value == 6 /* ExportModal */
() => fileTransferViewModel2.presentedModal.value == 7 /* Export */
);
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportKey), /* @__PURE__ */ createElement(
"input",
@@ -6969,7 +7017,7 @@
"button",
{
class: "flex",
"on:click": fileTransferViewModel2.showDirectionSelectionModal
"on:click": fileTransferViewModel2.showExportSelectionModal
},
coreViewModel2.translations.general.backButton
), /* @__PURE__ */ createElement(
@@ -6986,7 +7034,7 @@
function ImportModal(coreViewModel2, fileTransferViewModel2) {
const isPresented = createProxyState(
[fileTransferViewModel2.presentedModal],
() => fileTransferViewModel2.presentedModal.value == 7 /* ImportModal */
() => fileTransferViewModel2.presentedModal.value == 8 /* Import */
);
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.importHeadline), /* @__PURE__ */ createElement(
"p",
src/View/Modals/dataTransferModal.tsx
+135 -42
View File
@@ -9,6 +9,7 @@ import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";
import StorageModel from "../../Model/Global/storageModel";
// MAIN
export function DataTransferModalWrapper(
coreViewModel: CoreViewModel,
connectionViewModel: ConnectionViewModel,
@@ -26,12 +27,48 @@ export function DataTransferModalWrapper(
{TransferDisplayModal(coreViewModel, fileTransferViewModel)}
{TransferDataInputModal(coreViewModel, fileTransferViewModel)}
{DataReceptionModal(coreViewModel, fileTransferViewModel)}
{ExportFileSelectionModal(coreViewModel, fileTransferViewModel)}
{ExportModal(coreViewModel, fileTransferViewModel)}
{ImportModal(coreViewModel, fileTransferViewModel)}
</div>
</div>
);
}
// COMPONENTS
function OptionEntry(
fileOption: FileTransferOption,
fileTransferViewModel: FileTransferViewModel,
) {
const isSelected = new React.State(false);
if (fileTransferViewModel.selectedPaths.value.has(fileOption.path)) {
isSelected.value = true;
}
isSelected.subscribeSilent((isSelected) => {
if (isSelected == true) {
fileTransferViewModel.selectedPaths.add(fileOption.path);
} else {
fileTransferViewModel.selectedPaths.remove(fileOption.path);
}
});
function toggle() {
isSelected.value = !isSelected.value;
}
return (
<button class="tile" toggle:selected={isSelected} on:click={toggle}>
<div>
<b class="ellipsis">{fileOption.label}</b>
<span class="secondary ellipsis">
{StorageModel.pathComponentsToString(
...fileOption.path,
)}
</span>
</div>
</button>
);
}
// MODALS
function DirectionSelectionModal(
coreViewModel: CoreViewModel,
connectionViewModel: ConnectionViewModel,
@@ -115,7 +152,7 @@ function DirectionSelectionModal(
<button
class="tile"
on:click={fileTransferViewModel.showExportModal}
on:click={fileTransferViewModel.showExportSelectionModal}
>
<span class="icon">file_save</span>
<div>
@@ -158,46 +195,12 @@ function FileSelectionModal(
coreViewModel: CoreViewModel,
fileTransferViewModel: FileTransferViewModel,
) {
// option
const OptionConverter: React.StateItemConverter<FileTransferOption> = (
fileOption: FileTransferOption,
) => {
return OptionEntry(fileOption, fileTransferViewModel);
};
function OptionEntry(
fileOption: FileTransferOption,
fileTransferViewModel: FileTransferViewModel,
) {
const isSelected = new React.State(false);
if (fileTransferViewModel.selectedPaths.value.has(fileOption.path)) {
isSelected.value = true;
}
isSelected.subscribeSilent((isSelected) => {
if (isSelected == true) {
fileTransferViewModel.selectedPaths.add(fileOption.path);
} else {
fileTransferViewModel.selectedPaths.remove(fileOption.path);
}
});
function toggle() {
isSelected.value = !isSelected.value;
}
return (
<button class="tile" toggle:selected={isSelected} on:click={toggle}>
<div>
<b class="ellipsis">{fileOption.label}</b>
<span class="secondary ellipsis">
{StorageModel.pathComponentsToString(
...fileOption.path,
)}
</span>
</div>
</button>
);
}
// state
const isPresented = React.createProxyState(
[fileTransferViewModel.presentedModal],
@@ -275,7 +278,7 @@ function FileSelectionModal(
</div>
</div>
</div>
);
);
}
function TransferDataDisplayModal(
@@ -437,7 +440,7 @@ function TransferDisplayModal(
</div>
</div>
</div>
);
);
}
function TransferDataInputModal(
@@ -584,7 +587,97 @@ function DataReceptionModal(
</button>
</div>
</div>
);
}
function ExportFileSelectionModal(
coreViewModel: CoreViewModel,
fileTransferViewModel: FileTransferViewModel,
) {
const OptionConverter: React.StateItemConverter<FileTransferOption> = (
fileOption: FileTransferOption,
) => {
return OptionEntry(fileOption, fileTransferViewModel);
};
// state
const isPresented = React.createProxyState(
[fileTransferViewModel.presentedModal],
() =>
fileTransferViewModel.presentedModal.value ==
FileTransferModals.ExportFileSelection,
);
return (
<div class="modal" toggle:open={isPresented}>
<div>
<main>
<h2>
{
coreViewModel.translations.dataTransferModal
.exportHeadline
}
</h2>
<span class="secondary">
{
coreViewModel.translations.dataTransferModal
.exportSelectionDescription
}
</span>
<hr></hr>
<h3>
{
coreViewModel.translations.dataTransferModal
.generalHeadline
}
</h3>
<div
class="flex-column gap content-margin-bottom"
children:append={[
fileTransferViewModel.generalFileOptions,
OptionConverter,
]}
></div>
<h3>
{
coreViewModel.translations.dataTransferModal
.chatsHeadline
}
</h3>
<div
class="flex-column gap"
children:append={[
fileTransferViewModel.chatFileOptions,
OptionConverter,
]}
></div>
</main>
<div class="flex-row width-100">
<button
class="flex"
on:click={
fileTransferViewModel.showDirectionSelectionModal
}
>
{coreViewModel.translations.general.backButton}
</button>
<button
class="primary flex"
on:click={fileTransferViewModel.showExportModal}
toggle:disabled={
fileTransferViewModel.hasNoPathsSelected
}
>
{coreViewModel.translations.general.continueButton}
<span class="icon">arrow_forward</span>
</button>
</div>
</div>
</div>
);
}
function ExportModal(
@@ -595,7 +688,7 @@ function ExportModal(
[fileTransferViewModel.presentedModal],
() =>
fileTransferViewModel.presentedModal.value ==
FileTransferModals.ExportModal,
FileTransferModals.Export,
);
return (
@@ -650,7 +743,7 @@ function ExportModal(
<button
class="flex"
on:click={
fileTransferViewModel.showDirectionSelectionModal
fileTransferViewModel.showExportSelectionModal
}
>
{coreViewModel.translations.general.backButton}
@@ -679,7 +772,7 @@ function ImportModal(
[fileTransferViewModel.presentedModal],
() =>
fileTransferViewModel.presentedModal.value ==
FileTransferModals.ImportModal,
FileTransferModals.Import,
);
return (
@@ -716,5 +809,5 @@ function ImportModal(
</button>
</div>
</div>
);
);
}
src/View/translations.ts
+1
View File
@@ -109,6 +109,7 @@ const englishTranslations = {
exportHeadline: "Export Data",
importHeadline: "Import Data",
selectionDescription: "Select the data that you want to transfer.",
exportSelectionDescription: "Select the data that you want to export.",
dataEntryDescription: "Enter this data on the other device.",
dataEntryInputDescription:
"Enter the data displayed on the other device.",
src/ViewModel/Global/fileTransferViewModel.ts
+9 -4
View File
@@ -157,12 +157,16 @@ export default class FileTransferViewModel extends Context {
this.presentedModal.value = FileTransferModals.TransferDataInput;
};
showExportSelectionModal = (): void => {
this.presentedModal.value = FileTransferModals.ExportFileSelection;
};
showExportModal = (): void => {
this.presentedModal.value = FileTransferModals.ExportModal;
this.presentedModal.value = FileTransferModals.Export;
};
showImportModal = (): void => {
this.presentedModal.value = FileTransferModals.ImportModal;
this.presentedModal.value = FileTransferModals.Import;
};
prepareReceivingData = (): void => {
@@ -223,6 +227,7 @@ export enum FileTransferModals {
ReceptionDisplay,
// export
ExportModal,
ImportModal,
ExportFileSelection,
Export,
Import,
}