implement onboarding
This commit is contained in:
marlon-erler
@@ -615,9 +615,7 @@ function DataReceptionModal(
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={
|
||||
fileTransferViewModel.correctTransferData
|
||||
}
|
||||
on:click={fileTransferViewModel.correctTransferData}
|
||||
toggle:disabled={
|
||||
fileTransferViewModel.cannotExitReception
|
||||
}
|
||||
|
||||
+262
-208
@@ -1,222 +1,275 @@
|
||||
import { ViewController } from "../viewController";
|
||||
import * as React from "../../react";
|
||||
import OnboardingViewModel, {
|
||||
OnboardingModals,
|
||||
} from "../../ViewModel/Global/onboardingViewModel";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
import OnboardingViewModel, {OnboardingModals} from "../../ViewModel/Global/onboardingViewModel";
|
||||
import {ViewController} from "../viewController";
|
||||
|
||||
// MAIN
|
||||
export function OnboardingModalWrapper(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
|
||||
return <div>
|
||||
{ConnectionModal(coreViewModel, onboardingViewModel)}
|
||||
{TransferModal(coreViewModel, onboardingViewModel)}
|
||||
{NameModal(coreViewModel, onboardingViewModel)}
|
||||
{TransferDataModal(coreViewModel, onboardingViewModel)}
|
||||
</div>
|
||||
export function OnboardingModalWrapper(
|
||||
coreViewModel: CoreViewModel,
|
||||
onboardingViewModel: OnboardingViewModel,
|
||||
) {
|
||||
return (
|
||||
<div>
|
||||
{ConnectionModal(coreViewModel, onboardingViewModel)}
|
||||
{TransferModal(coreViewModel, onboardingViewModel)}
|
||||
{NameModal(coreViewModel, onboardingViewModel)}
|
||||
{TransferDataModal(coreViewModel, onboardingViewModel)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ConnectionModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
|
||||
function ConnectionModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
onboardingViewModel: OnboardingViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[onboardingViewModel.presentedModal],
|
||||
() =>
|
||||
onboardingViewModel.presentedModal.value ==
|
||||
OnboardingModals.Connection
|
||||
[onboardingViewModel.presentedModal],
|
||||
() =>
|
||||
onboardingViewModel.presentedModal.value ==
|
||||
OnboardingModals.Connection,
|
||||
);
|
||||
|
||||
const connectionViewModel = onboardingViewModel.connectionViewmodel;
|
||||
|
||||
const nextButton = React.createProxyState([connectionViewModel.isConnected], ()=>coreViewModel.translations.onboarding.connectionNextButton(connectionViewModel.isConnected.value));
|
||||
|
||||
return <div
|
||||
class="modal"
|
||||
toggle:open={isPresented}
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{coreViewModel.translations.onboarding.connectionHeadline}</h2>
|
||||
<p class="secondary width-input">{coreViewModel.translations.onboarding.connectionDescription}</p>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">cell_tower</span>
|
||||
<div>
|
||||
<span>
|
||||
{coreViewModel.translations.homePage.serverAddress}
|
||||
</span>
|
||||
<input
|
||||
placeholder={
|
||||
coreViewModel.translations.homePage
|
||||
.serverAddressPlaceholder
|
||||
}
|
||||
bind:value={connectionViewModel.serverAddressInput}
|
||||
on:enter={connectionViewModel.connect}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={connectionViewModel.connect}
|
||||
toggle:disabled={connectionViewModel.cannotConnect}
|
||||
>
|
||||
{coreViewModel.translations.onboarding.connectButton}
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row justify-end">
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={onboardingViewModel.showTransferOption}
|
||||
>
|
||||
<span
|
||||
subscribe:innerText={nextButton}
|
||||
></span>
|
||||
<span class="icon">
|
||||
arrow_forward
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
function TransferModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
|
||||
const isPresented = React.createProxyState(
|
||||
[onboardingViewModel.presentedModal],
|
||||
() =>
|
||||
onboardingViewModel.presentedModal.value ==
|
||||
OnboardingModals.TransferOrNew
|
||||
const nextButton = React.createProxyState(
|
||||
[connectionViewModel.isConnected],
|
||||
() =>
|
||||
coreViewModel.translations.onboarding.connectionNextButton(
|
||||
connectionViewModel.isConnected.value,
|
||||
),
|
||||
);
|
||||
|
||||
return <div
|
||||
class="modal"
|
||||
toggle:open={isPresented}
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{coreViewModel.translations.onboarding.transferOptionsHeadline}</h2>
|
||||
<p class="secondary width-input">{coreViewModel.translations.onboarding.transferOptionsDescription}</p>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.connectionHeadline
|
||||
}
|
||||
</h2>
|
||||
<p class="secondary width-input">
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.connectionDescription
|
||||
}
|
||||
</p>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-column gap">
|
||||
<button
|
||||
class="tile"
|
||||
on:click={onboardingViewModel.showTransferData}
|
||||
toggle:disabled={onboardingViewModel.cannotTransfer}
|
||||
>
|
||||
<div>
|
||||
{coreViewModel.translations.onboarding.transferOptionTransfer}
|
||||
</div>
|
||||
<span class="icon">
|
||||
arrow_forward
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="tile"
|
||||
on:click={onboardingViewModel.setupNew}
|
||||
>
|
||||
<div>
|
||||
{coreViewModel.translations.onboarding.transferOptionNew}
|
||||
</div>
|
||||
<span class="icon">
|
||||
arrow_forward
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={onboardingViewModel.open}
|
||||
>
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">cell_tower</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.homePage
|
||||
.serverAddress
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
placeholder={
|
||||
coreViewModel.translations.homePage
|
||||
.serverAddressPlaceholder
|
||||
}
|
||||
bind:value={
|
||||
connectionViewModel.serverAddressInput
|
||||
}
|
||||
on:enter={connectionViewModel.connect}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={connectionViewModel.connect}
|
||||
toggle:disabled={connectionViewModel.cannotConnect}
|
||||
>
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.connectButton
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row justify-end">
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={onboardingViewModel.showTransferOption}
|
||||
>
|
||||
<span subscribe:innerText={nextButton}></span>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NameModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
|
||||
function TransferModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
onboardingViewModel: OnboardingViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[onboardingViewModel.presentedModal],
|
||||
() =>
|
||||
onboardingViewModel.presentedModal.value ==
|
||||
OnboardingModals.Name
|
||||
[onboardingViewModel.presentedModal],
|
||||
() =>
|
||||
onboardingViewModel.presentedModal.value ==
|
||||
OnboardingModals.TransferOrNew,
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.transferOptionsHeadline
|
||||
}
|
||||
</h2>
|
||||
<p class="secondary width-input">
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.transferOptionsDescription
|
||||
}
|
||||
</p>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-column gap">
|
||||
<button
|
||||
class="tile"
|
||||
on:click={onboardingViewModel.showTransferData}
|
||||
toggle:disabled={onboardingViewModel.cannotTransfer}
|
||||
>
|
||||
<div>
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.transferOptionTransfer
|
||||
}
|
||||
</div>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
<button
|
||||
class="tile"
|
||||
on:click={onboardingViewModel.setupNew}
|
||||
>
|
||||
<div>
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.transferOptionNew
|
||||
}
|
||||
</div>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={onboardingViewModel.open}
|
||||
>
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NameModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
onboardingViewModel: OnboardingViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[onboardingViewModel.presentedModal],
|
||||
() => onboardingViewModel.presentedModal.value == OnboardingModals.Name,
|
||||
);
|
||||
|
||||
const settingsViewModel = onboardingViewModel.settingsViewModel;
|
||||
|
||||
return <div
|
||||
class="modal"
|
||||
toggle:open={isPresented}
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{coreViewModel.translations.onboarding.nameHeadline}</h2>
|
||||
<p class="secondary width-input">{coreViewModel.translations.onboarding.nameDescription}</p>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{coreViewModel.translations.onboarding.nameHeadline}
|
||||
</h2>
|
||||
<p class="secondary width-input">
|
||||
{coreViewModel.translations.onboarding.nameDescription}
|
||||
</p>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">account_circle</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.settings.account
|
||||
.yourNameLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
placeholder={
|
||||
coreViewModel.translations.settings.account
|
||||
.yourNamePlaceholder
|
||||
}
|
||||
bind:value={settingsViewModel.usernameInput}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
</main>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={onboardingViewModel.showTransferOption}
|
||||
>
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={onboardingViewModel.finish}
|
||||
>
|
||||
{coreViewModel.translations.general.setButton}
|
||||
<span class="icon">
|
||||
arrow_forward
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">account_circle</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.settings.account
|
||||
.yourNameLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
placeholder={
|
||||
coreViewModel.translations.settings.account
|
||||
.yourNamePlaceholder
|
||||
}
|
||||
bind:value={settingsViewModel.usernameInput}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
</main>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={onboardingViewModel.showTransferOption}
|
||||
>
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={onboardingViewModel.finish}
|
||||
>
|
||||
{coreViewModel.translations.general.setButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TransferDataModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
|
||||
function TransferDataModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
onboardingViewModel: OnboardingViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[onboardingViewModel.presentedModal],
|
||||
() =>
|
||||
onboardingViewModel.presentedModal.value ==
|
||||
OnboardingModals.Transfer
|
||||
[onboardingViewModel.presentedModal],
|
||||
() =>
|
||||
onboardingViewModel.presentedModal.value ==
|
||||
OnboardingModals.Transfer,
|
||||
);
|
||||
|
||||
const fileTransferViewModel = onboardingViewModel.fileTransferViewModel;
|
||||
|
||||
return <div
|
||||
class="modal"
|
||||
toggle:open={isPresented}
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{coreViewModel.translations.onboarding.transferHeadline}</h2>
|
||||
<p class="secondary width-input">{coreViewModel.translations.onboarding.transferDescription}</p>
|
||||
return (
|
||||
<div class="modal" toggle:open={isPresented}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{coreViewModel.translations.onboarding.transferHeadline}
|
||||
</h2>
|
||||
<p class="secondary width-input">
|
||||
{
|
||||
coreViewModel.translations.onboarding
|
||||
.transferDescription
|
||||
}
|
||||
</p>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-column gap content-margin-bottom">
|
||||
<label class="tile">
|
||||
@@ -262,25 +315,26 @@ function TransferDataModal(coreViewModel: CoreViewModel, onboardingViewModel: On
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={onboardingViewModel.showTransferOption}
|
||||
toggle:disabled={fileTransferViewModel.cannotExitReception}
|
||||
>
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={onboardingViewModel.transferData}
|
||||
>
|
||||
{coreViewModel.translations.onboarding.transferButton}
|
||||
<span class="icon">
|
||||
check
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="standard width-50"
|
||||
on:click={onboardingViewModel.showTransferOption}
|
||||
toggle:disabled={
|
||||
fileTransferViewModel.cannotExitReception
|
||||
}
|
||||
>
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={onboardingViewModel.transferData}
|
||||
>
|
||||
{coreViewModel.translations.onboarding.transferButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user