implement auto reconnect
This commit is contained in:
marlon-erler
@@ -6,42 +6,47 @@ import { DangerousActionButton } from "../Components/dangerousActionButton";
|
||||
import { translations } from "../translations";
|
||||
|
||||
export function BoardSettingsModal(boardViewModel: BoardViewModel) {
|
||||
return (
|
||||
<div class="modal" toggle:open={boardViewModel.isPresentingSettingsModal}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.chatPage.task.boardSettingsHeadline}</h2>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">label</span>
|
||||
return (
|
||||
<div
|
||||
class="modal"
|
||||
toggle:open={boardViewModel.isPresentingSettingsModal}
|
||||
>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.boardNameInputLabel}</span>
|
||||
<input
|
||||
on:enter={boardViewModel.saveSettings}
|
||||
bind:value={boardViewModel.name}
|
||||
></input>
|
||||
<main>
|
||||
<h2>{translations.chatPage.task.boardSettingsHeadline}</h2>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">label</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.boardNameInputLabel}
|
||||
</span>
|
||||
<input
|
||||
on:enter={boardViewModel.saveSettings}
|
||||
bind:value={boardViewModel.name}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
{ColorPicker(boardViewModel.color)}
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
translations.chatPage.task.deleteBoardButton,
|
||||
"delete_forever",
|
||||
boardViewModel.deleteBoard,
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={boardViewModel.hideSettings}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
{ColorPicker(boardViewModel.color)}
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
translations.chatPage.task.deleteBoardButton,
|
||||
"delete_forever",
|
||||
boardViewModel.deleteBoard
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={boardViewModel.hideSettings}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,73 +4,95 @@ import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
|
||||
import { translations } from "../translations";
|
||||
|
||||
export function ChatMessageInfoModal(
|
||||
chatMessageViewModel: ChatMessageViewModel
|
||||
chatMessageViewModel: ChatMessageViewModel,
|
||||
) {
|
||||
return (
|
||||
<div class="modal" toggle:open={chatMessageViewModel.isPresentingInfoModal}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.chatPage.message.messageInfoHeadline}</h2>
|
||||
return (
|
||||
<div
|
||||
class="modal"
|
||||
toggle:open={chatMessageViewModel.isPresentingInfoModal}
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.chatPage.message.messageInfoHeadline}</h2>
|
||||
|
||||
<div class="flex-column gap">
|
||||
<div class="tile">
|
||||
<span class="icon">account_circle</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.message.sentBy}</span>
|
||||
<b class="break-word">{chatMessageViewModel.sender}</b>
|
||||
</div>
|
||||
<div class="flex-column gap">
|
||||
<div class="tile">
|
||||
<span class="icon">account_circle</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.message.sentBy}
|
||||
</span>
|
||||
<b class="break-word">
|
||||
{chatMessageViewModel.sender}
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">schedule</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.message.timeSent}
|
||||
</span>
|
||||
<b class="break-word">
|
||||
{chatMessageViewModel.dateSent}
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">forum</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.message.channel}
|
||||
</span>
|
||||
<b class="break-word">
|
||||
{chatMessageViewModel.channel}
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">description</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
translations.chatPage.message
|
||||
.messageContent
|
||||
}
|
||||
</span>
|
||||
<b
|
||||
class="break-word"
|
||||
subscribe:innerText={
|
||||
chatMessageViewModel.body
|
||||
}
|
||||
></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-column gap">
|
||||
<button on:click={chatMessageViewModel.copyMessage}>
|
||||
{translations.chatPage.message.copyMessageButton}
|
||||
<span class="icon">content_copy</span>
|
||||
</button>
|
||||
<button on:click={chatMessageViewModel.resendMessage}>
|
||||
{translations.chatPage.message.resendMessageButton}
|
||||
<span class="icon">redo</span>
|
||||
</button>
|
||||
<button on:click={chatMessageViewModel.decryptMessage}>
|
||||
{translations.chatPage.message.decryptMessageButton}
|
||||
<span class="icon">key</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={chatMessageViewModel.hideInfoModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">schedule</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.message.timeSent}</span>
|
||||
<b class="break-word">{chatMessageViewModel.dateSent}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">forum</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.message.channel}</span>
|
||||
<b class="break-word">{chatMessageViewModel.channel}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">description</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.message.messageContent}</span>
|
||||
<b
|
||||
class="break-word"
|
||||
subscribe:innerText={chatMessageViewModel.body}
|
||||
></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-column gap">
|
||||
<button on:click={chatMessageViewModel.copyMessage}>
|
||||
{translations.chatPage.message.copyMessageButton}
|
||||
<span class="icon">content_copy</span>
|
||||
</button>
|
||||
<button on:click={chatMessageViewModel.resendMessage}>
|
||||
{translations.chatPage.message.resendMessageButton}
|
||||
<span class="icon">redo</span>
|
||||
</button>
|
||||
<button on:click={chatMessageViewModel.decryptMessage}>
|
||||
{translations.chatPage.message.decryptMessageButton}
|
||||
<span class="icon">key</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={chatMessageViewModel.hideInfoModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,58 +5,62 @@ import { DeletableListItem } from "../Components/deletableListItem";
|
||||
import { translations } from "../translations";
|
||||
|
||||
export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
|
||||
const previousAddressConverter: React.StateItemConverter<string> = (
|
||||
address: string
|
||||
) => {
|
||||
function connnect() {
|
||||
connectionViewModel.connectToAddress(address);
|
||||
}
|
||||
const previousAddressConverter: React.StateItemConverter<string> = (
|
||||
address: string,
|
||||
) => {
|
||||
function connnect() {
|
||||
connectionViewModel.connectToAddress(address);
|
||||
}
|
||||
|
||||
const cannotConnect = React.createProxyState(
|
||||
[connectionViewModel.isConnected],
|
||||
() =>
|
||||
connectionViewModel.isConnected.value == true &&
|
||||
connectionViewModel.connectionModel.address == address
|
||||
const cannotConnect = React.createProxyState(
|
||||
[connectionViewModel.isConnected],
|
||||
() =>
|
||||
connectionViewModel.isConnected.value == true &&
|
||||
connectionViewModel.connectionModel.address == address,
|
||||
);
|
||||
|
||||
return DeletableListItem(
|
||||
address,
|
||||
<button
|
||||
class="primary"
|
||||
on:click={connnect}
|
||||
toggle:disabled={cannotConnect}
|
||||
aria-label={
|
||||
translations.connectionModal.connectButtonAudioLabel
|
||||
}
|
||||
>
|
||||
<span class="icon">link</span>
|
||||
</button>,
|
||||
() => {
|
||||
connectionViewModel.removePreviousAddress(address);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class="modal"
|
||||
toggle:open={connectionViewModel.isShowingConnectionModal}
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.connectionModal.connectionModalHeadline}
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="flex-column gap"
|
||||
children:append={[
|
||||
connectionViewModel.previousAddresses,
|
||||
previousAddressConverter,
|
||||
]}
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={connectionViewModel.hideConnectionModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return DeletableListItem(
|
||||
address,
|
||||
<button
|
||||
class="primary"
|
||||
on:click={connnect}
|
||||
toggle:disabled={cannotConnect}
|
||||
aria-label={translations.connectionModal.connectButtonAudioLabel}
|
||||
>
|
||||
<span class="icon">link</span>
|
||||
</button>,
|
||||
() => {
|
||||
connectionViewModel.removePreviousAddress(address);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class="modal"
|
||||
toggle:open={connectionViewModel.isShowingConnectionModal}
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.connectionModal.connectionModalHeadline}</h2>
|
||||
|
||||
<div
|
||||
class="flex-column gap"
|
||||
children:append={[
|
||||
connectionViewModel.previousAddresses,
|
||||
previousAddressConverter,
|
||||
]}
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={connectionViewModel.hideConnectionModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import FileTransferViewModel, {
|
||||
FileTransferModal,
|
||||
FileTransferOption,
|
||||
FileTransferModal,
|
||||
FileTransferOption,
|
||||
} from "../../ViewModel/Global/fileTransferViewModel";
|
||||
|
||||
import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";
|
||||
@@ -12,406 +12,484 @@ import { reload } from "../utility";
|
||||
import { translations } from "../translations";
|
||||
|
||||
export function DataTransferModalWrapper(
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
return (
|
||||
<div>
|
||||
{DirectionSelectionModal(connectionViewModel, fileTransferViewModel)}
|
||||
{FileSelectionModal(fileTransferViewModel)}
|
||||
{TransferDataDisplayModal(fileTransferViewModel)}
|
||||
{TransferDisplayModal(fileTransferViewModel)}
|
||||
{TransferDataInputModal(fileTransferViewModel)}
|
||||
{DataReceptionModal(fileTransferViewModel)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{DirectionSelectionModal(
|
||||
connectionViewModel,
|
||||
fileTransferViewModel,
|
||||
)}
|
||||
{FileSelectionModal(fileTransferViewModel)}
|
||||
{TransferDataDisplayModal(fileTransferViewModel)}
|
||||
{TransferDisplayModal(fileTransferViewModel)}
|
||||
{TransferDataInputModal(fileTransferViewModel)}
|
||||
{DataReceptionModal(fileTransferViewModel)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DirectionSelectionModal(
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.DirectionSelection
|
||||
);
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.DirectionSelection,
|
||||
);
|
||||
|
||||
const isDisconnected = React.createProxyState(
|
||||
[connectionViewModel.isConnected],
|
||||
() => connectionViewModel.isConnected.value == false
|
||||
);
|
||||
const isDisconnected = React.createProxyState(
|
||||
[connectionViewModel.isConnected],
|
||||
() => connectionViewModel.isConnected.value == false,
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.dataTransferModal.transferDataHeadline}</h2>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
</h2>
|
||||
|
||||
<p class="error" toggle:hidden={connectionViewModel.isConnected}>
|
||||
{translations.dataTransferModal.notConnectedError}
|
||||
</p>
|
||||
<p
|
||||
class="error"
|
||||
toggle:hidden={connectionViewModel.isConnected}
|
||||
>
|
||||
{translations.dataTransferModal.notConnectedError}
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="flex-column gap content-margin-bottom"
|
||||
toggle:hidden={isDisconnected}
|
||||
>
|
||||
<button
|
||||
class="tile"
|
||||
on:click={fileTransferViewModel.showFileSelectionModal}
|
||||
>
|
||||
<span class="icon">upload</span>
|
||||
<div>
|
||||
<b>{translations.dataTransferModal.fromThisDeviceButton}</b>
|
||||
</div>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
<button
|
||||
class="tile"
|
||||
on:click={fileTransferViewModel.showTransferDataInputModal}
|
||||
>
|
||||
<span class="icon">download</span>
|
||||
<div>
|
||||
<b>{translations.dataTransferModal.toThisDeviceButton}</b>
|
||||
</div>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={fileTransferViewModel.hideModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div
|
||||
class="flex-column gap content-margin-bottom"
|
||||
toggle:hidden={isDisconnected}
|
||||
>
|
||||
<button
|
||||
class="tile"
|
||||
on:click={
|
||||
fileTransferViewModel.showFileSelectionModal
|
||||
}
|
||||
>
|
||||
<span class="icon">upload</span>
|
||||
<div>
|
||||
<b>
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.fromThisDeviceButton
|
||||
}
|
||||
</b>
|
||||
</div>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
<button
|
||||
class="tile"
|
||||
on:click={
|
||||
fileTransferViewModel.showTransferDataInputModal
|
||||
}
|
||||
>
|
||||
<span class="icon">download</span>
|
||||
<div>
|
||||
<b>
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.toThisDeviceButton
|
||||
}
|
||||
</b>
|
||||
</div>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={fileTransferViewModel.hideModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
// option
|
||||
const OptionConverter: React.StateItemConverter<FileTransferOption> = (
|
||||
fileOption: FileTransferOption
|
||||
) => {
|
||||
return OptionEntry(fileOption, 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;
|
||||
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],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.FileSelection,
|
||||
);
|
||||
|
||||
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 class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
</h2>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.selectionDescription}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<h3>{translations.dataTransferModal.generalHeadline}</h3>
|
||||
<div
|
||||
class="flex-column gap content-margin-bottom"
|
||||
children:append={[
|
||||
fileTransferViewModel.generalFileOptions,
|
||||
OptionConverter,
|
||||
]}
|
||||
></div>
|
||||
|
||||
<h3>{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
|
||||
}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
on:click={fileTransferViewModel.showTransferDataModal}
|
||||
toggle:disabled={
|
||||
fileTransferViewModel.hasNoPathsSelected
|
||||
}
|
||||
>
|
||||
{translations.general.continueButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// state
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.FileSelection
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.dataTransferModal.transferDataHeadline}</h2>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.selectionDescription}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<h3>{translations.dataTransferModal.generalHeadline}</h3>
|
||||
<div
|
||||
class="flex-column gap content-margin-bottom"
|
||||
children:append={[
|
||||
fileTransferViewModel.generalFileOptions,
|
||||
OptionConverter,
|
||||
]}
|
||||
></div>
|
||||
|
||||
<h3>{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}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
on:click={fileTransferViewModel.showTransferDataModal}
|
||||
toggle:disabled={fileTransferViewModel.hasNoPathsSelected}
|
||||
>
|
||||
{translations.general.continueButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TransferDataDisplayModal(
|
||||
fileTransferViewModel: FileTransferViewModel
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.TransferDataDisplay
|
||||
);
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.TransferDataDisplay,
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.dataTransferModal.transferDataHeadline}</h2>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
</h2>
|
||||
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.dataEntryDescription}
|
||||
</span>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.dataEntryDescription}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-column gap content-margin-bottom">
|
||||
<div class="tile">
|
||||
<span class="icon">forum</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.transferChannelHeadline}
|
||||
</span>
|
||||
<b
|
||||
subscribe:innerText={fileTransferViewModel.transferChannel}
|
||||
></b>
|
||||
</div>
|
||||
<div class="flex-column gap content-margin-bottom">
|
||||
<div class="tile">
|
||||
<span class="icon">forum</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.transferChannelHeadline
|
||||
}
|
||||
</span>
|
||||
<b
|
||||
subscribe:innerText={
|
||||
fileTransferViewModel.transferChannel
|
||||
}
|
||||
></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<span class="icon">key</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.transferKeyHeadline
|
||||
}
|
||||
</span>
|
||||
<b
|
||||
subscribe:innerText={
|
||||
fileTransferViewModel.transferKey
|
||||
}
|
||||
></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.showFileSelectionModal}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
on:click={fileTransferViewModel.initiateTransfer}
|
||||
>
|
||||
{translations.dataTransferModal.sendButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<span class="icon">key</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.transferKeyHeadline}
|
||||
</span>
|
||||
<b subscribe:innerText={fileTransferViewModel.transferKey}></b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.showFileSelectionModal}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
on:click={fileTransferViewModel.initiateTransfer}
|
||||
>
|
||||
{translations.dataTransferModal.sendButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.TransferDisplay
|
||||
);
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.TransferDisplay,
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.dataTransferModal.transferDataHeadline}</h2>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
</h2>
|
||||
|
||||
<p
|
||||
class="secondary"
|
||||
subscribe:innerText={fileTransferViewModel.filesSentText}
|
||||
></p>
|
||||
<p
|
||||
class="secondary"
|
||||
subscribe:innerText={
|
||||
fileTransferViewModel.filesSentText
|
||||
}
|
||||
></p>
|
||||
|
||||
<p
|
||||
class="secondary"
|
||||
toggle:hidden={fileTransferViewModel.didNotFinishSending}
|
||||
>
|
||||
{translations.dataTransferModal.allFilesSent}
|
||||
</p>
|
||||
<p
|
||||
class="secondary"
|
||||
toggle:hidden={
|
||||
fileTransferViewModel.didNotFinishSending
|
||||
}
|
||||
>
|
||||
{translations.dataTransferModal.allFilesSent}
|
||||
</p>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<div
|
||||
class="tile flex-column align-start"
|
||||
children:append={[
|
||||
fileTransferViewModel.filePathsSent,
|
||||
StringToTextSpan,
|
||||
]}
|
||||
></div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.initiateTransfer}
|
||||
>
|
||||
{translations.dataTransferModal.sendAgainButton}
|
||||
<span class="icon">restart_alt</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.hideModal}
|
||||
toggle:disabled={fileTransferViewModel.didNotFinishSending}
|
||||
>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
<div
|
||||
class="tile flex-column align-start"
|
||||
children:append={[
|
||||
fileTransferViewModel.filePathsSent,
|
||||
StringToTextSpan,
|
||||
]}
|
||||
></div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.initiateTransfer}
|
||||
>
|
||||
{translations.dataTransferModal.sendAgainButton}
|
||||
<span class="icon">restart_alt</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.hideModal}
|
||||
toggle:disabled={
|
||||
fileTransferViewModel.didNotFinishSending
|
||||
}
|
||||
>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.TransferDataInput
|
||||
);
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.TransferDataInput,
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.dataTransferModal.transferDataHeadline}</h2>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
</h2>
|
||||
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.dataEntryInputDescription}
|
||||
</span>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.dataEntryInputDescription
|
||||
}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-column gap content-margin-bottom">
|
||||
<label class="tile">
|
||||
<span class="icon">forum</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.transferChannelHeadline}
|
||||
</span>
|
||||
<input
|
||||
bind:value={fileTransferViewModel.receivingTransferChannel}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<label class="tile">
|
||||
<span class="icon">key</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.transferKeyHeadline}
|
||||
</span>
|
||||
<input
|
||||
bind:value={fileTransferViewModel.receivingTransferKey}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.showDirectionSelectionModal}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
on:click={fileTransferViewModel.prepareReceivingData}
|
||||
toggle:disabled={fileTransferViewModel.cannotPrepareToReceive}
|
||||
>
|
||||
{translations.general.continueButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
<div class="flex-column gap content-margin-bottom">
|
||||
<label class="tile">
|
||||
<span class="icon">forum</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.transferChannelHeadline
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={
|
||||
fileTransferViewModel.receivingTransferChannel
|
||||
}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<label class="tile">
|
||||
<span class="icon">key</span>
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.transferKeyHeadline
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={
|
||||
fileTransferViewModel.receivingTransferKey
|
||||
}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={
|
||||
fileTransferViewModel.showDirectionSelectionModal
|
||||
}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
on:click={fileTransferViewModel.prepareReceivingData}
|
||||
toggle:disabled={
|
||||
fileTransferViewModel.cannotPrepareToReceive
|
||||
}
|
||||
>
|
||||
{translations.general.continueButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
function DataReceptionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.ReceptionDisplay
|
||||
);
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
fileTransferViewModel.presentedModal.value ==
|
||||
FileTransferModal.ReceptionDisplay,
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.dataTransferModal.transferDataHeadline}</h2>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
</h2>
|
||||
|
||||
<p class="secondary">
|
||||
{translations.dataTransferModal.readyToReceiveDescription}
|
||||
</p>
|
||||
<p class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
.readyToReceiveDescription
|
||||
}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="secondary"
|
||||
subscribe:innerText={fileTransferViewModel.filesReceivedText}
|
||||
></p>
|
||||
<p
|
||||
class="secondary"
|
||||
subscribe:innerText={
|
||||
fileTransferViewModel.filesReceivedText
|
||||
}
|
||||
></p>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<div
|
||||
class="tile flex-column align-start"
|
||||
children:append={[
|
||||
fileTransferViewModel.filePathsReceived,
|
||||
StringToTextSpan,
|
||||
]}
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={reload}>
|
||||
{translations.general.reloadAppButton}
|
||||
<span class="icon">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div
|
||||
class="tile flex-column align-start"
|
||||
children:append={[
|
||||
fileTransferViewModel.filePathsReceived,
|
||||
StringToTextSpan,
|
||||
]}
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={reload}>
|
||||
{translations.general.reloadAppButton}
|
||||
<span class="icon">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,57 +6,65 @@ import { translations } from "../translations";
|
||||
import { v4 } from "uuid";
|
||||
|
||||
export function SearchModal<T>(
|
||||
searchViewModel: SearchViewModel<T>,
|
||||
headline: string,
|
||||
converter: React.StateItemConverter<T>,
|
||||
isOpen: React.State<boolean>
|
||||
searchViewModel: SearchViewModel<T>,
|
||||
headline: string,
|
||||
converter: React.StateItemConverter<T>,
|
||||
isOpen: React.State<boolean>,
|
||||
) {
|
||||
function close() {
|
||||
isOpen.value = false;
|
||||
}
|
||||
function close() {
|
||||
isOpen.value = false;
|
||||
}
|
||||
|
||||
const suggestionId = v4();
|
||||
const suggestionId = v4();
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isOpen}>
|
||||
<div style="max-width: 64rem">
|
||||
<main>
|
||||
<h2>{headline}</h2>
|
||||
<div class="flex-row width-input">
|
||||
<input
|
||||
placeholder={translations.general.searchLabel}
|
||||
bind:value={searchViewModel.searchInput}
|
||||
on:enter={searchViewModel.applySearch}
|
||||
list={suggestionId}
|
||||
></input>
|
||||
<datalist
|
||||
hidden
|
||||
id={suggestionId}
|
||||
children:append={[searchViewModel.suggestions, StringToOption]}
|
||||
></datalist>
|
||||
<button
|
||||
class="primary"
|
||||
aria-label={translations.general.searchButtonAudioLabel}
|
||||
on:click={searchViewModel.applySearch}
|
||||
toggle:disabled={searchViewModel.cannotApplySearch}
|
||||
>
|
||||
<span class="icon">search</span>
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<div class="modal" toggle:open={isOpen}>
|
||||
<div style="max-width: 64rem">
|
||||
<main>
|
||||
<h2>{headline}</h2>
|
||||
<div class="flex-row width-input">
|
||||
<input
|
||||
placeholder={translations.general.searchLabel}
|
||||
bind:value={searchViewModel.searchInput}
|
||||
on:enter={searchViewModel.applySearch}
|
||||
list={suggestionId}
|
||||
></input>
|
||||
<datalist
|
||||
hidden
|
||||
id={suggestionId}
|
||||
children:append={[
|
||||
searchViewModel.suggestions,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
<button
|
||||
class="primary"
|
||||
aria-label={
|
||||
translations.general.searchButtonAudioLabel
|
||||
}
|
||||
on:click={searchViewModel.applySearch}
|
||||
toggle:disabled={searchViewModel.cannotApplySearch}
|
||||
>
|
||||
<span class="icon">search</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<div
|
||||
class="grid gap"
|
||||
style="grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))"
|
||||
children:append={[searchViewModel.matchingObjects, converter]}
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={close}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div
|
||||
class="grid gap"
|
||||
style="grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))"
|
||||
children:append={[
|
||||
searchViewModel.matchingObjects,
|
||||
converter,
|
||||
]}
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={close}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,15 +5,15 @@ import StorageViewModel from "../../ViewModel/Global/storageViewModel";
|
||||
import { translations } from "../translations";
|
||||
|
||||
export function StorageModal(storageViewModel: StorageViewModel) {
|
||||
return (
|
||||
<div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
|
||||
<div style="max-width: 64rem">
|
||||
<main class="padding-0">{FileBrowser(storageViewModel)}</main>
|
||||
<button on:click={storageViewModel.hideStorageModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
|
||||
<div style="max-width: 64rem">
|
||||
<main class="padding-0">{FileBrowser(storageViewModel)}</main>
|
||||
<button on:click={storageViewModel.hideStorageModal}>
|
||||
{translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
Entry,
|
||||
EntryToOption,
|
||||
Option,
|
||||
StringToOption,
|
||||
VersionIdToOption,
|
||||
Entry,
|
||||
EntryToOption,
|
||||
Option,
|
||||
StringToOption,
|
||||
VersionIdToOption,
|
||||
} from "../Components/option";
|
||||
|
||||
import { DangerousActionButton } from "../Components/dangerousActionButton";
|
||||
@@ -14,156 +14,194 @@ import { translations } from "../translations";
|
||||
import { v4 } from "uuid";
|
||||
|
||||
export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
const categorySuggestionId = v4();
|
||||
const statusSuggestionId = v4();
|
||||
const categorySuggestionId = v4();
|
||||
const statusSuggestionId = v4();
|
||||
|
||||
const BoardOptionConverter: React.StateItemConverter<Entry> = (
|
||||
entry: Entry
|
||||
) => {
|
||||
const isSelected = entry[0] == taskViewModel.task.boardId;
|
||||
return Option(entry[1], entry[0], isSelected);
|
||||
};
|
||||
const BoardOptionConverter: React.StateItemConverter<Entry> = (
|
||||
entry: Entry,
|
||||
) => {
|
||||
const isSelected = entry[0] == taskViewModel.task.boardId;
|
||||
return Option(entry[1], entry[0], isSelected);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="modal" open>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.chatPage.task.taskSettingsHeadline}</h2>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">history</span>
|
||||
return (
|
||||
<div class="modal" open>
|
||||
<div>
|
||||
<span>{translations.general.fileVersionLabel}</span>
|
||||
<select
|
||||
bind:value={taskViewModel.selectedVersionId}
|
||||
children:append={[taskViewModel.versionIds, VersionIdToOption]}
|
||||
></select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
<main>
|
||||
<h2>{translations.chatPage.task.taskSettingsHeadline}</h2>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">history</span>
|
||||
<div>
|
||||
<span>{translations.general.fileVersionLabel}</span>
|
||||
<select
|
||||
bind:value={taskViewModel.selectedVersionId}
|
||||
children:append={[
|
||||
taskViewModel.versionIds,
|
||||
VersionIdToOption,
|
||||
]}
|
||||
></select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">label</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskNameLabel}
|
||||
</span>
|
||||
<input bind:value={taskViewModel.name}></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskBoardLabel}
|
||||
</span>
|
||||
<select
|
||||
bind:value={taskViewModel.boardId}
|
||||
children:append={[
|
||||
taskViewModel.chatViewModel
|
||||
.taskBoardSuggestions,
|
||||
BoardOptionConverter,
|
||||
]}
|
||||
></select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">description</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
translations.chatPage.task
|
||||
.taskDescriptionLabel
|
||||
}
|
||||
</span>
|
||||
<textarea
|
||||
rows="10"
|
||||
bind:value={taskViewModel.description}
|
||||
></textarea>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskCategoryLabel}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.category}
|
||||
list={categorySuggestionId}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<datalist
|
||||
hidden
|
||||
id={categorySuggestionId}
|
||||
children:append={[
|
||||
taskViewModel.coreViewModel.taskCategorySuggestions,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">clock_loader_40</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskStatusLabel}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.status}
|
||||
list={statusSuggestionId}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<datalist
|
||||
hidden
|
||||
id={statusSuggestionId}
|
||||
children:append={[
|
||||
taskViewModel.coreViewModel.taskStatusSuggestions,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">priority_high</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskPriorityLabel}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={taskViewModel.priority}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskDateLabel}
|
||||
</span>
|
||||
<input
|
||||
type="date"
|
||||
bind:value={taskViewModel.date}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">schedule</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskTimeLabel}
|
||||
</span>
|
||||
<input
|
||||
type="time"
|
||||
bind:value={taskViewModel.time}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
translations.chatPage.task.deleteTaskButton,
|
||||
"delete_forever",
|
||||
taskViewModel.deleteTask,
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={taskViewModel.closeAndDiscard}
|
||||
>
|
||||
{translations.general.closeButton}
|
||||
</button>
|
||||
<button
|
||||
class="flex primary"
|
||||
on:click={taskViewModel.closeAndSave}
|
||||
>
|
||||
{translations.general.saveButton}
|
||||
<span class="icon">save</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">label</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskNameLabel}</span>
|
||||
<input bind:value={taskViewModel.name}></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskBoardLabel}</span>
|
||||
<select
|
||||
bind:value={taskViewModel.boardId}
|
||||
children:append={[
|
||||
taskViewModel.chatViewModel.taskBoardSuggestions,
|
||||
BoardOptionConverter,
|
||||
]}
|
||||
></select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">description</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskDescriptionLabel}</span>
|
||||
<textarea
|
||||
rows="10"
|
||||
bind:value={taskViewModel.description}
|
||||
></textarea>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskCategoryLabel}</span>
|
||||
<input
|
||||
bind:value={taskViewModel.category}
|
||||
list={categorySuggestionId}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<datalist
|
||||
hidden
|
||||
id={categorySuggestionId}
|
||||
children:append={[
|
||||
taskViewModel.coreViewModel.taskCategorySuggestions,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">clock_loader_40</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskStatusLabel}</span>
|
||||
<input
|
||||
bind:value={taskViewModel.status}
|
||||
list={statusSuggestionId}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<datalist
|
||||
hidden
|
||||
id={statusSuggestionId}
|
||||
children:append={[
|
||||
taskViewModel.coreViewModel.taskStatusSuggestions,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">priority_high</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskPriorityLabel}</span>
|
||||
<input type="number" bind:value={taskViewModel.priority}></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskDateLabel}</span>
|
||||
<input type="date" bind:value={taskViewModel.date}></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">schedule</span>
|
||||
<div>
|
||||
<span>{translations.chatPage.task.taskTimeLabel}</span>
|
||||
<input type="time" bind:value={taskViewModel.time}></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
translations.chatPage.task.deleteTaskButton,
|
||||
"delete_forever",
|
||||
taskViewModel.deleteTask
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button class="flex" on:click={taskViewModel.closeAndDiscard}>
|
||||
{translations.general.closeButton}
|
||||
</button>
|
||||
<button class="flex primary" on:click={taskViewModel.closeAndSave}>
|
||||
{translations.general.saveButton}
|
||||
<span class="icon">save</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user