feat: add ui block while brewing

- fix case value show invalid after come back from brewing finish (topping not save)
- add update machine status

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

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

@@ -4,6 +4,9 @@
 	import Label from '$lib/components/ui/label/label.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
+	import Spinner from '$lib/components/ui/spinner/spinner.svelte';
+	import { Badge } from '$lib/components/ui/badge/index';
+	import * as Item from '$lib/components/ui/item/index';
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import RecipelistTable from './recipelist-table.svelte';
 
@@ -17,7 +20,7 @@
 		materialFromServerQuery
 	} from '$lib/core/stores/recipeStore';
 	import { generateIcing } from '$lib/helpers/icingGen';
-	import { machineInfoStore } from '$lib/core/stores/machineInfoStore';
+	import { getMachineStatus, machineInfoStore } from '$lib/core/stores/machineInfoStore';
 	import MachineInfo from '../machine-info.svelte';
 	import { v4 as uuidv4 } from 'uuid';
 	import { addNotification } from '$lib/core/stores/noti';
@@ -212,13 +215,13 @@
 			</Tabs.List>
 			{#if refPage === 'brew'}
 				<div>
-					<Button type="button" variant="default" onclick={() => resetAllPendingCmds()}
-						>Force Reset Brewing</Button
-					>
 					<Button type="button" variant="default" onclick={() => saveRecipe()}>Save</Button>
-					<Button type="button" variant="default" onclick={async () => sendTriggerBrewNow()}
-						>Test Brew</Button
-					>
+
+					{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == ''}
+						<Button type="button" variant="default" onclick={async () => sendTriggerBrewNow()}
+							>Test Brew</Button
+						>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -244,12 +247,26 @@
 		</Tabs.Content>
 
 		<Tabs.Content value="details">
-			<RecipelistTable
-				data={recipeListMatState}
-				{columns}
-				onStateChange={checkChanges}
-				{productCode}
-			/>
+			<!-- hide by machine state -->
+
+			{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == ''}
+				<RecipelistTable
+					data={recipeListMatState}
+					{columns}
+					onStateChange={checkChanges}
+					{productCode}
+				/>
+			{:else}
+				<Card.Root>
+					<Card.Content>
+						<div class="grid h-[60vh] w-full place-items-center rounded-md border">
+							<div class="m-4 flex flex-row gap-2">
+								<Spinner />Machine is working. Please wait for a moment.
+							</div>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
 		</Tabs.Content>
 	</Tabs.Root>
 </div>