Continue wizard if platform is already added

This commit is contained in:
ernstmul
2025-02-12 15:25:22 +01:00
parent 35f46ba765
commit 46c263cac5
9 changed files with 102 additions and 40 deletions
+1 -1
View File
@@ -108,7 +108,7 @@
<img src={logo.src} alt={logo.alt} />
</a>
<Breadcrumbs {organizations} />
{#if selectedProject.pingCount === 0}
{#if selectedProject && selectedProject.pingCount === 0}
<div class="only-desktop">
<Button.Anchor
href={`${base}/project-${selectedProject.$id}/get-started`}
+27
View File
@@ -1,3 +1,30 @@
export function isMac(): boolean {
return window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
}
export const getPlatformInfo = (platform: string) => {
let name: string, icon: string;
if (platform.includes('flutter')) {
name = 'Flutter';
icon = 'flutter';
} else if (platform.includes('react-native')) {
name = 'React Native';
icon = 'react-native';
} else if (platform.includes('apple')) {
name = 'Apple';
icon = 'apple';
} else if (platform.includes('android')) {
name = 'Android';
icon = 'android';
} else if (platform.includes('unity')) {
name = 'Unity';
icon = 'unity';
} else if (platform.includes('web')) {
name = 'Web';
icon = 'code';
} else {
name = 'Unknown';
icon = 'unknown';
}
return { name, icon };
};
+6 -2
View File
@@ -13,6 +13,7 @@ export type WizardStore = {
nextDisabled: boolean;
step: number;
interceptorNotificationEnabled: boolean;
props: Record<string, unknown>;
};
function createWizardStore() {
@@ -25,7 +26,8 @@ function createWizardStore() {
media: null,
nextDisabled: false,
step: 1,
finalAction: null
finalAction: null,
props: {}
});
return {
@@ -34,7 +36,8 @@ function createWizardStore() {
start: (
component: typeof SvelteComponent<unknown>,
media: string = null,
step: number = 1
step: number = 1,
props: Record<string, unknown> = {}
) =>
update((n) => {
n.show = true;
@@ -46,6 +49,7 @@ function createWizardStore() {
n.cover = null;
n.nextDisabled = false;
n.finalAction = null;
n.props = props;
trackEvent('wizard_start');
return n;
}),
+1 -1
View File
@@ -352,7 +352,7 @@
</Shell>
{#if $wizard.show && $wizard.component}
<svelte:component this={$wizard.component} />
<svelte:component this={$wizard.component} {...$wizard.props} />
{:else if $wizard.cover}
<svelte:component this={$wizard.cover} />
{/if}
@@ -35,36 +35,13 @@
import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
import { Icon } from '@appwrite.io/pink-svelte';
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
import { getPlatformInfo } from '$lib/helpers/platform';
export let data;
let addOrganization = false;
let showCreate = false;
const getPlatformInfo = (platform: string) => {
let name: string, icon: string;
if (platform.includes('flutter')) {
name = 'Flutter';
icon = 'flutter';
} else if (platform.includes('apple')) {
name = 'Apple';
icon = 'apple';
} else if (platform.includes('android')) {
name = 'Android';
icon = 'android';
} else if (platform.includes('unity')) {
name = 'Unity';
icon = 'unity';
} else if (platform.includes('web')) {
name = 'Web';
icon = 'code';
} else {
name = 'Unknown';
icon = 'unknown';
}
return { name, icon };
};
function allServiceDisabled(project: Models.Project): boolean {
let disabled = true;
services.load(project);
@@ -9,4 +9,7 @@
<title>Console - Appwrite</title>
</svelte:head>
<Onboard {projectId} hasPlatforms={$page.data.project.platforms.length > 0} />
<Onboard
{projectId}
platforms={$page.data.project.platforms}
pingCount={$page.data.project.pingCount} />
@@ -1,10 +1,9 @@
<script lang="ts">
import { Step, Link, Icon, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
import { addPlatform } from './platforms/+page.svelte';
import { addPlatform, continuePlatform } from './platforms/+page.svelte';
import { app } from '$lib/stores/app';
import {
IconArrowRight,
IconDeno,
IconNodeJs,
IconPhp,
IconPython
@@ -26,19 +25,39 @@
import { wizard } from '$lib/stores/wizard';
import { isSmallViewport } from '$lib/stores/viewport';
import { AvatarGroup } from '$lib/components';
import type { Models } from '@appwrite.io/console';
import { onMount } from 'svelte';
import { getPlatformInfo } from '$lib/helpers/platform';
function createKey() {
wizard.start(Wizard);
}
export let projectId: string;
export let hasPlatforms: boolean;
export let platforms: Models.Platform[] = [];
export let pingCount = 0;
function openPlatformWizard(type: number, platform?: Models.Platform) {
console.log('type', type);
console.log('platform', platform);
if (platform) {
continuePlatform(type, platform.name, platform.key, platform.type);
} else {
addPlatform(type);
}
}
let platformMap = new Map();
platforms.forEach((platform) => {
const platformInfo = getPlatformInfo(platform.type);
platformMap.set(platformInfo.name, platform);
});
</script>
<div style:container-type="inline-size">
<div class="console-container">
<div class="dashboard-content">
{#if !hasPlatforms}
{#if platforms.length === 0 || pingCount === 0}
<Step.List>
<Step.Item state="previous"
><div>
@@ -66,7 +85,11 @@
<Layout.Stack
gap="l"
direction={$isSmallViewport ? 'column' : 'row'}>
<Card.Button on:click={() => addPlatform(0)} padding="s"
<Card.Button
on:click={() => {
openPlatformWizard(0, platformMap.get('Web'));
}}
padding="s"
><Layout.Stack gap="xl"
><div class="card-top-image web-image-light"></div>
<div class="card-top-image web-image-dark"></div>
@@ -82,7 +105,7 @@
</Layout.Stack></Card.Button>
<Card.Button
on:click={() => {
addPlatform(1);
openPlatformWizard(4, platformMap.get('React Native'));
}}
padding="s"
><Layout.Stack gap="xl"
@@ -105,7 +128,11 @@
<Layout.Stack
gap="l"
direction={$isSmallViewport ? 'column' : 'row'}>
<Card.Button on:click={() => addPlatform(3)} padding="s">
<Card.Button
on:click={() => {
openPlatformWizard(3, platformMap.get('Apple'));
}}
padding="s">
<Layout.Stack gap="xxl">
<img
class="platform-image"
@@ -123,7 +150,11 @@
</div></Layout.Stack>
</Layout.Stack>
</Card.Button>
<Card.Button on:click={() => addPlatform(2)} padding="s">
<Card.Button
on:click={() => {
openPlatformWizard(2, platformMap.get('Android'));
}}
padding="s">
<Layout.Stack gap="xxl">
<img
class="platform-image"
@@ -142,7 +173,11 @@
</div></Layout.Stack>
</Layout.Stack>
</Card.Button>
<Card.Button on:click={() => addPlatform(1)} padding="s">
<Card.Button
on:click={() => {
openPlatformWizard(1, platformMap.get('Flutter'));
}}
padding="s">
<Layout.Stack gap="xxl">
<img
class="platform-image"
@@ -6,7 +6,7 @@
import CreateApple from './createApple.svelte';
import CreateFlutter from './createFlutter.svelte';
import CreateReactNative from './createReactNative.svelte';
import { versions } from './wizard/store';
import { createPlatform, versions } from './wizard/store';
export enum Platform {
Web,
@@ -18,9 +18,25 @@
export async function addPlatform(type: Platform) {
await versions.load();
createPlatform.reset();
wizard.start(platforms[type]);
}
export async function continuePlatform(
platform: Platform,
name: string,
key: string,
type: string
) {
await versions.load();
createPlatform.set({
name: name,
key: key,
type: type
});
wizard.start(platforms[platform], null, 1, { isPlatformCreated: true });
}
const platforms = {
[Platform.Flutter]: CreateFlutter,
[Platform.Android]: CreateAndroid,
@@ -29,7 +29,7 @@
import { LabelCard } from '$lib/components';
let showExitModal = false;
let isPlatformCreated = false;
export let isPlatformCreated = false;
let isCreatingPlatform = false;
let connectionSuccessful = false;
const projectId = $page.params.project;