init

src/lib/components/recipe-details/recipe-detail.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs/index';
+	import * as Card from '$lib/components/ui/card/index';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import Input from '$lib/components/ui/input/input.svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import RecipelistTable from './recipelist-table.svelte';
+
+	import { columns, type RecipelistMaterial } from './columns';
+	import { get, readable, writable } from 'svelte/store';
+	import { materialFromMachineQuery } from '$lib/core/stores/recipeStore';
+	import { generateIcing } from '$lib/helpers/icingGen';
+	import { machineInfoStore } from '$lib/core/stores/machineInfoStore';
+	import MachineInfo from '../machine-info.svelte';
+	import { v4 as uuidv4 } from 'uuid';
+
+	//
+	let { recipeData, onPendingChange }: { recipeData: any; onPendingChange: any } = $props();
+
+	let menuName: string = $state('');
+
+	let materialSnapshot: any = $state();
+	let machineInfoSnapshot: any = $state();
+
+	let recipeListMatState: RecipelistMaterial[] = $state([]);
+	let recipeListOriginal: RecipelistMaterial[] = $state([]);
+
+	function remappingToColumn(data: any[]): RecipelistMaterial[] {
+		let ret: RecipelistMaterial[] = [];
+		// expect recipelist
+		if (materialSnapshot) {
+			let d_cnt = 0;
+			for (let rpl of data) {
+				let mat = materialSnapshot.filter(
+					(x: any) => x['id'].toString() === rpl['materialPathId'].toString()
+				)[0];
+
+				// console.log('mat filter get', Object(mat), Object.keys(mat));
+
+				let name = mat ? mat['materialOtherName'] : rpl['materialPathId'];
+
+				if (rpl['materialPathId'] === 0) {
+					name = '-';
+				}
+
+				// let gen_id = generateRowId();
+
+				// console.log(`generated for ${rpl['materialPathId']} = ${gen_id}`);
+
+				ret.push({
+					id: d_cnt,
+					material_id: `${name} (${rpl['materialPathId']})`,
+					is_use: rpl['isUse'],
+					values: {
+						string_param: rpl['StringParam'],
+						mix_order: rpl['MixOrder'],
+						feed: {
+							pattern: rpl['feedPattern'],
+							parameter: rpl['feedParameter']
+						},
+						powder: {
+							gram: rpl['powderGram'],
+							time: rpl['powderTime']
+						},
+						syrup: {
+							gram: rpl['syrupGram'],
+							time: rpl['syrupTime']
+						},
+						water: {
+							cold: rpl['waterCold'],
+							yield: rpl['waterYield']
+						}
+					}
+				});
+				d_cnt++;
+			}
+		}
+
+		return ret;
+	}
+
+	async function checkChanges(original: any) {
+		console.log('old', original, 'updated', recipeListMatState);
+		if (recipeListOriginal.length == 0) {
+			recipeListOriginal = original;
+		}
+
+		if (original !== recipeListMatState) {
+			await onPendingChange({
+				target: 'recipeList',
+				value: original
+			});
+		}
+	}
+
+	onMount(() => {
+		machineInfoSnapshot = get(machineInfoStore);
+
+		if (recipeData) {
+			menuName =
+				recipeData['name'] ?? (recipeData['otherName'] ? recipeData['otherName'] : 'Not set');
+			materialSnapshot = get(materialFromMachineQuery);
+
+			recipeListMatState = remappingToColumn(recipeData['recipes']);
+			// save old value\
+		}
+	});
+</script>
+
+<!-- show info -->
+<!-- latest edit date -->
+<!-- Menu Status -->
+
+<div class="-mb-4 flex w-full flex-col gap-6">
+	<Tabs.Root value="info">
+		<Tabs.List>
+			<Tabs.Trigger value="info">Info</Tabs.Trigger>
+			<Tabs.Trigger value="details">Details</Tabs.Trigger>
+		</Tabs.List>
+
+		<Tabs.Content value="info">
+			<Card.Root>
+				<Card.Header>
+					<Card.Title>Info</Card.Title>
+					<Card.Description>Info about this menu</Card.Description>
+				</Card.Header>
+
+				<Card.Content class="grid gap-6">
+					<div class="grid grid-flow-row gap-3">
+						<Label for="tabs-menu-name">Name</Label>
+						<Input id="tabs-menu-name" value={recipeData['name'] ?? ''} />
+						<Label for="tabs-menu-other-name">Other Name</Label>
+						<Input id="tabs-menu-other-name" value={recipeData['otherName'] ?? ''} />
+					</div>
+
+					<div class="grid gap-3"></div>
+				</Card.Content>
+			</Card.Root>
+		</Tabs.Content>
+
+		<Tabs.Content value="details">
+			<RecipelistTable data={recipeListMatState} {columns} onStateChange={checkChanges} />
+		</Tabs.Content>
+	</Tabs.Root>
+</div>