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/lib/components/recipe-details/recipe-detail.svelte

@@ -249,7 +249,7 @@
 		<Tabs.Content value="details">
 			<!-- hide by machine state -->
 
-			{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == ''}
+			{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == '' || refPage == 'overview'}
 				<RecipelistTable
 					data={recipeListMatState}
 					{columns}

src/lib/components/recipe-details/recipelist-value-editor.svelte

@@ -293,11 +293,11 @@
 		// console.log('sheet open? ', sheetOpenState);
 
 		let refFrom = get(referenceFromPage);
-		categories = get(
-			refFrom === 'overview' ? toppingGroupFromServerQuery : toppingGroupFromMachineQuery
+		categories = $state.snapshot(
+			get(refFrom === 'overview' ? toppingGroupFromServerQuery : toppingGroupFromMachineQuery)
 		);
-		topping_lists = get(
-			refFrom === 'overview' ? toppingListFromServerQuery : toppingListFromMachineQuery
+		topping_lists = $state.snapshot(
+			get(refFrom === 'overview' ? toppingListFromServerQuery : toppingListFromMachineQuery)
 		);
 
 		// save ref

src/lib/components/recipe-details/recipelist-value.svelte

@@ -208,6 +208,9 @@
 		let current_selected = selectableToppingInGroup.find(
 			(x) => x.id === currentToppings[getToppingSlot()]['ListGroupID'][0]
 		);
+
+		console.log('current selected topping list', row_uid, current_selected);
+
 		if (currentToppings[getToppingSlot()]['ListGroupID'][0] === 0) {
 			return 'Empty';
 		}

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

@@ -130,19 +130,32 @@
 					});
 				} else {
 					// topping part
-					latestRecipeToppingData.set(new_topping_value_for_save);
-					console.log('save change', get(latestRecipeToppingData));
-					currentData['ToppingSet'] = latestRecipeToppingData;
+					// latestRecipeToppingData.set(new_topping_value_for_save);
+					// console.log('save change', get(latestRecipeToppingData));
+					// currentData['ToppingSet'] = latestRecipeToppingData;
 
-					console.log('current data', currentData);
+					// console.log('current data', currentData);
 
 					if (get(referenceFromPage) == 'brew') {
 						// send change to machine
+
+						// apply value
+
+						let recipeDevSnapshot = get(recipeFromMachineQuery) ?? {};
+						let recipe01Snap = recipeDevSnapshot['recipe'];
+						if (recipe01Snap) {
+							recipe01Snap[ready_to_send_brew[0]['productCode']] = ready_to_send_brew[0];
+
+							// save now
+							recipeDevSnapshot['recipe'] = recipe01Snap;
+							recipeFromMachineQuery.set(recipeDevSnapshot);
+						}
+
 						sendToAndroid({
 							type: 'save_recipe_machine',
 							payload: {
 								time: new Date().toLocaleTimeString(),
-								data: currentData
+								data: ready_to_send_brew[0]
 							}
 						});
 					} else if (get(referenceFromPage) == 'overview') {
@@ -294,10 +307,10 @@
 				<Dialog.Title
 					>Edit Recipe {productCode}
 					<Badge class="m-2">
-						{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == ''}
+						{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == '' || refPage == 'overview'}
 							Ready
 						{:else}
-							<Spinner /> Brewing
+							<Spinner /> Working
 						{/if}
 					</Badge>
 				</Dialog.Title>
@@ -317,7 +330,7 @@
 				on:saveRecipe={async () => {
 					save_change = true;
 
-					console.log('save change, check state', callback_revert_value_if_not_save);
+					callback_revert_value_if_not_save(save_change);
 
 					addNotification('INFO:Save recipe');
 				}}

src/lib/core/adb/adb.ts

@@ -224,7 +224,7 @@ async function connectToAndroidServer() {
 			return;
 		}
 
-		await push('/sdcard/coffeevending/enable_adb_block_watch', '1');
+		// await push('/sdcard/coffeevending/enable_adb_block_watch', '1');
 
 		const stream = await inst.transport.connect(env.PUBLIC_BREW_CONN_PORT);
 		const writer = stream.writable.getWriter();

src/lib/core/client/server.ts

@@ -6,6 +6,7 @@ import { extractCookieOnNonBrowser } from '$lib/helpers/cookie';
 import { browser } from '$app/environment';
 import { permission } from '../stores/permissions';
 import { addNotification } from '../stores/noti';
+import { recipeData, recipeOverviewData } from '../stores/recipeStore';
 
 export async function getRecipes() {
 	if (browser && !get(departmentStore)) {
@@ -31,7 +32,10 @@ export async function getRecipes() {
 	// construct path. fetch (GET) {server}/recipe/{countryTarget}/{version}
 	let idToken = await get(auth)?.getIdToken();
 
-	console.log('country target get recipe', country);
+	console.log('country target get recipe', countryTarget);
+
+	recipeData.set([]);
+	recipeOverviewData.set([]);
 
 	sendMessage({
 		type: 'recipe',
@@ -46,3 +50,48 @@ export async function getRecipes() {
 
 	return [];
 }
+
+export async function getRecipeWithVersion(version: string) {
+	if (browser && !get(departmentStore)) {
+		console.log('cannot get dep', get(departmentStore));
+		return [];
+	}
+
+	let countryTarget = get(departmentStore);
+	let country = '';
+
+	let countryPerm = `document.read.${countryTarget}`;
+	let user_perms = get(permission);
+
+	if (!user_perms.includes(countryPerm)) {
+		addNotification('ERR:Invalid permission');
+		return [];
+	}
+
+	// if (!countryTarget && !browser) {
+	// 	countryTarget = extractCookieOnNonBrowser()['department'];
+	// }
+
+	// construct path. fetch (GET) {server}/recipe/{countryTarget}/{version}
+	let idToken = await get(auth)?.getIdToken();
+
+	console.log('country target get recipe', countryTarget);
+
+	recipeData.set([]);
+	recipeOverviewData.set([]);
+
+	// NOTE: although version is provided, actual version field is still need to be latest
+	// Just in case version is not found
+	sendMessage({
+		type: 'recipe',
+		payload: {
+			auth: idToken ?? '',
+			partial: false,
+			country: countryTarget ?? '',
+			version: -1,
+			parameters: 'use_legacy_version=true,version=' + version
+		}
+	});
+
+	return [];
+}

src/lib/core/handlers/adbPayloadHandler.ts

@@ -1,5 +1,6 @@
 import { updateMachineStatus } from '../stores/machineInfoStore';
 import { addNotification } from '../stores/noti';
+import { handleIncomingMessages } from './messageHandler';
 
 type AdbPayload = { type: string; payload: any };
 
@@ -17,6 +18,26 @@ async function handleAdbPayload(raw_payload: string) {
 			case 'response':
 				if (payload.payload instanceof String) {
 					// single message response
+					let raw_payload = payload.payload.toString();
+
+					if (raw_payload.startsWith('save_recipe_machine')) {
+						let res = raw_payload.split('/');
+
+						let pd = res[1] ?? '';
+						let action = res[2] ?? '';
+						let uiAction = res[3] ?? '';
+
+						handleIncomingMessages(
+							JSON.stringify({
+								type: 'ui_action',
+								payload: {
+									action: uiAction,
+									from: 'brew',
+									ref: `${pd}.${action}`
+								}
+							})
+						);
+					}
 				}
 				break;
 			case 'ACK':

src/lib/core/handlers/messageHandler.ts

@@ -1,6 +1,7 @@
 import { get, writable } from 'svelte/store';
 import { addNotification, notiStore } from '../stores/noti';
 import {
+	currentRecipeVersionsSelector,
 	materialFromServerQuery,
 	recipeData,
 	recipeDataError,
@@ -12,6 +13,8 @@ import {
 } from '../stores/recipeStore';
 import { buildOverviewFromServer } from '$lib/data/recipeService';
 import { auth } from '../client/firebase';
+import { type RecipeVersion } from '$lib/models/recipe_version.model';
+import { goto } from '$app/navigation';
 
 export const messages = writable<string[]>([]);
 
@@ -32,18 +35,30 @@ const handlers: Record<string, (payload: any) => void> = {
 		let stream_id = p.stream_id;
 		let total_size = p.total_size;
 		let chunk_size = p.chunk_size;
+		let data_meta = p.metadata;
 
 		if (stream_id) {
 			addNotification('INFO:Start streaming data');
+
+			let meta_list = data_meta?.split(',');
+			let version = meta_list[0]?.split('=')[1] ?? '';
+			let country = meta_list[1]?.split('=')[1] ?? '';
+
 			// recipeLoading.set(true);
 			recipeStreamMeta.set({
 				id: stream_id,
 				total_size: total_size,
 				chunk_size: chunk_size,
-				progress: 0
+				progress: 0,
+				version,
+				country
 			});
 			recipeData.set([]);
 			recipeOverviewData.set([]);
+
+			materialFromServerQuery.set([]);
+			toppingListFromServerQuery.set([]);
+			toppingGroupFromServerQuery.set([]);
 		}
 	},
 	stream_data_error: (p) => {
@@ -56,6 +71,7 @@ const handlers: Record<string, (payload: any) => void> = {
 	},
 	stream_data_chunk: (p) => {
 		let current_meta = get(recipeStreamMeta);
+		// console.log('current meta', current_meta);
 		if (current_meta) {
 			let stream_id = current_meta.id;
 
@@ -92,6 +108,7 @@ const handlers: Record<string, (payload: any) => void> = {
 		// build overview for recipe from server
 		//
 
+		// console.log('ending stream');
 		buildOverviewFromServer();
 	},
 	stream_data_extra: (p) => {
@@ -120,7 +137,7 @@ const handlers: Record<string, (payload: any) => void> = {
 						curr_mat_query.push(m);
 					}
 
-					// console.log('current materials: ', JSON.stringify(curr_mat_query));
+					// // console.log('current materials: ', JSON.stringify(curr_mat_query));
 					materialFromServerQuery.set(curr_mat_query);
 					break;
 				case 'topplist':
@@ -168,6 +185,28 @@ const handlers: Record<string, (payload: any) => void> = {
 			// broadcast to all
 			addNotification(`${noti_level}:${msg}`);
 		}
+	},
+	ui_action: (p) => {
+		if (p.action == 'refreshNow' && p.from == 'brew') {
+			goto('/tools/brew');
+		}
+	},
+	version_selectors: (p) => {
+		if (p.versions.length > 0) {
+			currentRecipeVersionsSelector.set([]);
+			let result: RecipeVersion[] = [];
+
+			for (let vstr of p.versions) {
+				let pure_version = vstr.split('_')[0];
+
+				result.push({
+					display_version: pure_version,
+					actual_version_name: vstr
+				});
+			}
+
+			currentRecipeVersionsSelector.set(result);
+		}
 	}
 };
 

src/lib/core/handlers/ws_messageSender.ts

@@ -41,25 +41,25 @@ export function sendCommandRequest(target: CommandRequest, values: any) {
 	});
 }
 
-export function sendMessage(msg: OutMessage): boolean {
+export function sendMessage(msg: OutMessage, ignore_queue_request: boolean = true): boolean {
 	const socket = get(socketStore);
 	const data = JSON.stringify(msg);
 
 	// console.log('try sending ', data);
 
 	if (!socket || socket.readyState !== WebSocket.OPEN) {
-		console.warn('WebSocket not connected, put to queue');
+		// console.warn('WebSocket not connected, put to queue');
 
-		let currentQueue = get(queue);
-		if (currentQueue.length >= 10) {
-			while (currentQueue.length >= 10) {
-				currentQueue.shift();
-			}
-		}
-		currentQueue.push(data);
-		queue.set(currentQueue);
+		// let currentQueue = get(queue);
+		// if (currentQueue.length >= 10) {
+		// 	while (currentQueue.length >= 10) {
+		// 		currentQueue.shift();
+		// 	}
+		// }
+		// currentQueue.push(data);
+		// queue.set(currentQueue);
 
-		addNotification('WARN:Queuing request');
+		// if (!ignore_queue_request) addNotification('WARN:Queuing request');
 
 		return false;
 	}

src/lib/core/stores/recipeStore.ts

@@ -1,6 +1,7 @@
 import { writable } from 'svelte/store';
 import type { RecipeOverview } from '../../../routes/(authed)/recipe/overview/columns';
 import type { Material } from '$lib/models/material.model';
+import type { RecipeVersion } from '$lib/models/recipe_version.model';
 
 export const recipeData = writable<any>(null);
 export const recipeLoading = writable(false);
@@ -10,8 +11,12 @@ export const recipeStreamMeta = writable<{
 	total_size: number;
 	chunk_size: number;
 	progress: number;
+	version?: string;
+	country?: string;
 } | null>(null);
 
+export const currentRecipeVersionsSelector = writable<RecipeVersion[]>([]);
+
 // from server
 export const recipeOverviewData = writable<RecipeOverview[] | null>(null);
 export const materialData = writable<Material | undefined>();
@@ -45,41 +50,3 @@ export const materialFromMachineQuery = writable<any>({});
 
 export const referenceFromPage = writable<string>('');
 export const currentEditingRecipeProductCode = writable<string>('');
-
-let worker: Worker | null = null;
-let initialized = false;
-
-export function loadRecipe(url: string) {
-	if (initialized) return;
-	initialized = true;
-
-	recipeLoading.set(true);
-
-	worker = new Worker(new URL('../../workers/data.worker.ts', import.meta.url), {
-		type: 'module'
-	});
-
-	worker.onmessage = (e) => {
-		const { type, payload } = e.data;
-		if (type === 'data') {
-			recipeData.set(payload);
-			recipeLoading.set(false);
-		}
-
-		if (type === 'error') {
-			recipeDataError.set(payload);
-			recipeLoading.set(false);
-		}
-	};
-
-	worker.postMessage({ url });
-}
-
-export function getWorker() {
-	if (!worker) {
-		worker = new Worker(new URL('../../workers/data.worker.ts', import.meta.url), {
-			type: 'module'
-		});
-	}
-	return worker;
-}

src/lib/core/stores/websocketStore.ts

@@ -43,15 +43,15 @@ export function connectToWebsocket() {
 				}
 
 				// recover messages on connect, flushing
-				while (get(msgQueue).length) {
-					let queue = get(msgQueue);
-					let current = queue.shift();
-					if (current && socket) {
-						socket.send(current);
-						// set next
-						msgQueue.set(queue);
-					}
-				}
+				// while (get(msgQueue).length) {
+				// 	let queue = get(msgQueue);
+				// 	let current = queue.shift();
+				// 	if (current && socket) {
+				// 		socket.send(current);
+				// 		// set next
+				// 		msgQueue.set(queue);
+				// 	}
+				// }
 
 				// heartbeat 10s
 				setInterval(() => {

src/lib/core/types/outMessage.ts

@@ -4,7 +4,7 @@ export type OutMessage =
 	| { type: 'lock'; payload: { field: string } }
 	| { type: 'general'; payload: string }
 	| {
-			type: 'recipe';
+			type: 'recipe' | 'recipe_versions';
 			payload: {
 				auth: string;
 				partial: boolean;

src/lib/data/recipeService.ts

@@ -110,7 +110,10 @@ function buildOverviewFromServer() {
 
 	let r01_query: any = {};
 
-	if (server_recipe01) {
+	// console.log('server recipe 01: ', server_recipe01);
+
+	if (server_recipe01 != null) {
+		// console.log('building overview from server');
 		recipeOverviewData.set([]);
 		for (let rp of server_recipe01) {
 			result.push({

src/lib/models/recipe_version.model.ts

@@ -0,0 +1,4 @@
+export interface RecipeVersion {
+	display_version: string;
+	actual_version_name: string;
+}