feat: recipe version selector

- fix recipe not show on overview
- fix recipe show late after select country
- disable queue message on no connection ws
- fix infinite topping(s) list if moving between pages

Signed-off-by: pakintada@gmail.com <Pakin>

src/routes/(authed)/departments/+page.svelte

@@ -10,7 +10,7 @@
 	import { addNotification } from '$lib/core/stores/noti';
 	import { browser } from '$app/environment';
 	import { setCookieOnNonBrowser } from '$lib/helpers/cookie';
-	import { referenceFromPage} from '$lib/core/stores/recipeStore';
+	import { referenceFromPage } from '$lib/core/stores/recipeStore';
 
 	let enabledAccessibleCountries: string[] = $state([]);
 
@@ -23,7 +23,8 @@
 		addNotification(`INFO:Selected ${cnt}`);
 		setTimeout(async () => {
 			console.log(get(departmentStore));
-			
+			departmentStore.set(cnt);
+
 			if (refPage === 'sheet') {
 				await goto('/sheet/overview');
 			} else {

src/routes/(authed)/recipe/overview/+page.svelte

@@ -1,25 +1,30 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/button/button.svelte';
+	import Button, { buttonVariants } from '$lib/components/ui/button/button.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
-	import { SearchIcon } from '@lucide/svelte/icons';
+	import { SearchIcon, RefreshCcw } from '@lucide/svelte/icons';
 	import Spinner from '$lib/components/ui/spinner/spinner.svelte';
+	import * as Dialog from '$lib/components/ui/dialog/index';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import * as Select from '$lib/components/ui/select/index';
 
 	import DataTable from './data-table.svelte';
 	import { columns, type RecipeOverview } from './columns';
 	import { onDestroy, onMount } from 'svelte';
 	import {
-		loadRecipe,
+		currentRecipeVersionsSelector,
 		recipeData,
 		recipeFromServerQuery,
 		recipeLoading,
 		recipeOverviewData,
+		recipeStreamMeta,
 		referenceFromPage
 	} from '$lib/core/stores/recipeStore.js';
 	import { sendMessage } from '$lib/core/handlers/ws_messageSender.js';
 	import { auth } from '$lib/core/stores/auth.js';
 	import { get } from 'svelte/store';
-	import { getRecipes } from '$lib/core/client/server.js';
+	import { getRecipes, getRecipeWithVersion } from '$lib/core/client/server.js';
 	import { permission } from '$lib/core/stores/permissions';
+	import type { RecipeVersion } from '$lib/models/recipe_version.model';
 
 	let data: { recipes: RecipeOverview[] } = $state({
 		recipes: []
@@ -27,15 +32,52 @@
 
 	let isRecipeLoading = $state(false);
 
+	let version: string = $state('');
+	let country: string = $state('');
+
+	let value = $state('');
+	let version_list: RecipeVersion[] = $state([]);
+
+	const triggerVersion = $derived(
+		version_list.find((f) => f.actual_version_name === value)?.display_version ?? version
+	);
+
 	let unsubRecipeData = recipeOverviewData.subscribe((rd) => {
 		if (rd) {
 			data.recipes = rd == null ? [] : rd;
+
+			let meta_snap = $state.snapshot(get(recipeStreamMeta));
+			country = meta_snap?.country ?? '...';
+			version = (meta_snap?.version ?? '...').split('_')[0];
 		}
 	});
 
+	let unsubRecipeVersion = currentRecipeVersionsSelector.subscribe((vs) => {
+		if (vs.length > 0) {
+			version_list = vs;
+		}
+	});
+
+	function sendGetRecipeVersions(country: string) {
+		version_list = [];
+		sendMessage({
+			type: 'recipe_versions',
+			payload: {
+				auth: '',
+				partial: false,
+				country: country,
+				version: -1,
+				parameters: ''
+			}
+		});
+	}
+
+	function sendGetRecipeByVersionSelector() {
+		getRecipeWithVersion(value);
+	}
+
 	onMount(async () => {
 		// do load recipe
-		// loadRecipe();
 		referenceFromPage.set('overview');
 
 		await getRecipes();
@@ -43,6 +85,7 @@
 
 	onDestroy(() => {
 		unsubRecipeData();
+		unsubRecipeVersion();
 	});
 
 	$effect(() => {
@@ -57,6 +100,9 @@
 				// setTimeout(() => recipeLoading.set(false), 3000);
 			}
 		}, 30000);
+
+		version_list = get(currentRecipeVersionsSelector);
+
 		return () => {
 			clearInterval(recipeFetchInterval);
 		};
@@ -68,10 +114,64 @@
 	<div class="w-full">
 		<div class="mb-4 flex items-center justify-between">
 			<div>
-				<h1 class="m-8 text-4xl font-bold">Overview</h1>
-				<p class="mx-8 my-0 text-muted-foreground">
-					Display menus from the current selected country
-				</p>
+				<h1 class="m-8 text-4xl font-bold">Overview [ {country} ] version [ {version} ]</h1>
+
+				<div class="flex flex-row">
+					<p class="mx-8 my-0 text-muted-foreground">
+						Display menus from the current selected country
+					</p>
+					<!-- <Button variant="default" onclick={() => sendGetRecipeVersions(country)}>
+						<span class="flex flex-row gap-2"> <RefreshCcw /> Change Version </span>
+					</Button> -->
+
+					<!-- dialog select version -->
+
+					<Dialog.Root>
+						<Dialog.Trigger
+							type="button"
+							class={buttonVariants({ variant: 'outline' })}
+							onclick={() => sendGetRecipeVersions(country)}
+						>
+							<span class="flex flex-row gap-2"> <RefreshCcw /> Change Version </span>
+						</Dialog.Trigger>
+
+						<Dialog.Content class="sm:max-w-[425px]">
+							<Dialog.Header>
+								<Dialog.Title>Select Legacy Versions</Dialog.Title>
+								<Dialog.Description>Viewing the previous version of recipe.</Dialog.Description>
+							</Dialog.Header>
+							<div class="grid gap-4">
+								<!-- <div class="grid gap-3">
+									<Label for="name-1">Version</Label>
+									<Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+								</div> -->
+
+								<Select.Root type="single" name="selectVersion" bind:value>
+									<Select.Trigger class="w-[180px]">
+										{triggerVersion}
+									</Select.Trigger>
+
+									<Select.Content>
+										{#each version_list as version_n (version_n.actual_version_name)}
+											<Select.Item
+												value={version_n.actual_version_name}
+												label={version_n.display_version}
+											>
+												{version_n.display_version}
+											</Select.Item>
+										{/each}
+									</Select.Content>
+								</Select.Root>
+							</div>
+							<Dialog.Footer>
+								<Dialog.Close type="button" class={buttonVariants({ variant: 'outline' })}>
+									Cancel
+								</Dialog.Close>
+								<Button type="submit" onclick={() => sendGetRecipeByVersionSelector()}>Ok</Button>
+							</Dialog.Footer>
+						</Dialog.Content>
+					</Dialog.Root>
+				</div>
 			</div>
 			<div class="mx-8 my-4 flex gap-2">
 				<Button variant="default">+ Create Menu</Button>

src/routes/(authed)/sheet/overview/+page.svelte

@@ -5,7 +5,6 @@
 
 	import { onDestroy, onMount } from 'svelte';
 	import {
-		loadRecipe,
 		recipeData,
 		recipeFromServerQuery,
 		recipeOverviewData,
@@ -21,7 +20,6 @@
 
 	onMount(async () => {
 		// do load recipe
-		// loadRecipe();
 		refDepartment = get(departmentStore);
 		referenceFromPage.set('overview');
 

src/routes/(authed)/tools/brew/+page.svelte

@@ -28,6 +28,7 @@
 	import { deviceCredentialManager } from '$lib/core/adb/deviceCredManager';
 	import { afterNavigate } from '$app/navigation';
 	import { env } from '$env/dynamic/public';
+	import { fade } from 'svelte/transition';
 
 	const sourceDir = '/sdcard/coffeevending';
 
@@ -41,6 +42,9 @@
 
 	let brew_status: string = $state('');
 
+	// refresh command
+	let refresh_counter: number = $state(0);
+
 	async function startFetchRecipeFromMachine() {
 		let instance = adb.getAdbInstance();
 		// recipeFromMachineLoading.set(true);
@@ -49,7 +53,7 @@
 		if (instance) {
 			console.log('instance passed!');
 			let dev_recipe = await adb.pull(`${sourceDir}/cfg/recipe_branch_dev.json`);
-			console.log('dev recipe ok', dev_recipe != undefined);
+			console.log('dev recipe ok', dev_recipe != undefined, dev_recipe);
 			if (dev_recipe) {
 				if (dev_recipe.length == 0) {
 					// case error, do last retry
@@ -69,7 +73,7 @@
 					// from recipe_branch_dev
 					devRecipe = JSON.parse(dev_recipe);
 					// recipeFromMachineLoading.set(false);
-					addNotification('INFO:Fetch recipe success!');
+					// addNotification('INFO:Fetch recipe success!');
 
 					buildOverviewForBrewing();
 				}
@@ -176,6 +180,7 @@
 	}
 
 	afterNavigate(async () => {
+		console.log('after navigate brew');
 		await startFetchRecipeFromMachine();
 	});
 
@@ -314,14 +319,14 @@
 
 			let currentQuery = get(recipeFromMachineQuery);
 			currentQuery = {
-				recipe: recipe01_query,
-				...currentQuery
+				...currentQuery,
+				recipe: recipe01_query
 			};
 
 			let currentMaterialsQuery = materialFromMachine;
 			currentQuery = {
-				material: currentMaterialsQuery,
-				...currentQuery
+				...currentQuery,
+				material: currentMaterialsQuery
 			};
 
 			recipeFromMachineQuery.set(currentQuery);
@@ -404,15 +409,17 @@
 
 		<!-- search bar -->
 
-		<div class="w-full">
-			{#if $recipeFromMachineLoading}
-				<div class="flex items-center justify-center">
-					<p class="mx-4">Please wait</p>
-					<Spinner />
-				</div>
-			{:else}
-				<DataTable data={data.recipes} refPage="brew" {columns} />
-			{/if}
-		</div>
+		{#key refresh_counter}
+			<div class="w-full">
+				{#if $recipeFromMachineLoading}
+					<div class="flex items-center justify-center">
+						<p class="mx-4">Please wait</p>
+						<Spinner />
+					</div>
+				{:else}
+					<DataTable data={data.recipes} refPage="brew" {columns} />
+				{/if}
+			</div>
+		{/key}
 	</div>
 </div>