init

src/lib/components/recipe-editor-dialog.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { recipeFromMachineQuery } from '$lib/core/stores/recipeStore';
+	import { onMount } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import { get } from 'svelte/store';
+
+	import * as Dialog from '$lib/components/ui/dialog/index';
+	import RecipeDetail from './recipe-details/recipe-detail.svelte';
+	import { MenuStatus, matchMenuStatus } from '$lib/core/types/menuStatus';
+
+	import * as adb from '$lib/core/adb/adb';
+
+	let open = $state(false);
+	const isDesktop = new MediaQuery('(min-width: 768px)');
+
+	let currentData: any = $state();
+
+	let hasAlreadyTestBrewing: boolean = $state(false);
+	let hasPendingChange: boolean = $state(false);
+	let currentMenuStatus: MenuStatus = $state(MenuStatus.drafted);
+
+	const {
+		productCode,
+		refPage
+	}: {
+		productCode: string;
+		refPage: string;
+	} = $props();
+
+	async function onPendingChange(newChange: { target: string; value: any }) {
+		console.log('detect pending change', matchMenuStatus(currentData.MenuStatus));
+		hasPendingChange = true;
+
+		let originalMenuStatus = matchMenuStatus(currentData.MenuStatus);
+
+		// hasAlreadyTestBrewing =
+		// 	originalMenuStatus == MenuStatus.pendingOnline || originalMenuStatus == MenuStatus.ready;
+
+		//
+
+		// if (hasAlreadyTestBrewing) {
+		// 	currentMenuStatus = MenuStatus.pendingOnline;
+		// }
+
+		currentData.MenuStatus = MenuStatus.pendingOnline;
+
+		if (newChange.target === 'recipeList') {
+			// currentData.recipes = newChange.value;
+			//
+			// TODO: build into structure, flatten fields into 1 layer, strip off `id` (row id)
+			console.log(newChange);
+		}
+
+		// await adb.push('/sdcard/coffeevending/.curr.brewing.json', JSON.stringify(currentData));
+		//
+		//
+		//
+		// send data to some channel then if command `brew`, invoke `SetCurrentRecipeToMake`
+		//
+	}
+
+	onMount(() => {
+		//
+		if (refPage === 'brew') {
+			// fetch from store
+			let recipeDevSnapshot = get(recipeFromMachineQuery) ?? {};
+			let recipe01Snap = recipeDevSnapshot['recipe'];
+			if (recipe01Snap) {
+				currentData = recipe01Snap[productCode] ?? {};
+				if (currentData.MenuStatus) {
+					currentMenuStatus = matchMenuStatus(currentData.MenuStatus);
+				}
+			}
+		} else if (refPage === 'overview') {
+		}
+	});
+</script>
+
+{#if isDesktop.current}
+	<Dialog.Root bind:open>
+		<Dialog.Trigger onselect={(e) => e.preventDefault()}>View</Dialog.Trigger>
+		<Dialog.Content class="sm:max-w-3/4">
+			<Dialog.Header>
+				<Dialog.Title>Edit Recipe {productCode}</Dialog.Title>
+				<Dialog.Description
+					>Make changes to selected menu here. Click "save" when done or "test" for testing with
+					connected machine
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<!-- render more -->
+			<RecipeDetail recipeData={currentData} {onPendingChange} />
+		</Dialog.Content>
+	</Dialog.Root>
+{:else}{/if}