feature: show recipe edit form sheet
- move from edit directly in table to side-sheet instead Signed-off-by: pakintada@gmail.com <Pakin>
This commit is contained in:
pakintada@gmail.com
parent
3f5eb8d07d
commit
e6d1ac9a99
36 changed files with 1307 additions and 71 deletions
|
|
@ -46,21 +46,6 @@
|
|||
let currentStringParams: any = $state({});
|
||||
let currentMaterialInt: number = $state(0);
|
||||
|
||||
// All ui states
|
||||
let showBlenderParam = $state(false);
|
||||
let showMixParam = $state(false);
|
||||
let showSyrupParam = $state(false);
|
||||
let showWaterParam = $state(false);
|
||||
let showPowderParam = $state(false);
|
||||
let showIceParam = $state(false);
|
||||
let showAdjustGrinder = $state(false);
|
||||
let showEspressoParam = $state(false);
|
||||
let showToppingIdx = $state(false);
|
||||
let showEquipmentLayout = $state(false);
|
||||
let showToppingParam = $state(false);
|
||||
let showSubtractPreWater = $state(false);
|
||||
let showCleanOptionParam = $state(false);
|
||||
|
||||
// toppings
|
||||
let currentToppings: any = $state([]);
|
||||
// current topping of this row
|
||||
|
|
@ -169,6 +154,8 @@
|
|||
}
|
||||
|
||||
function getCurrentSelectedToppingList() {
|
||||
// FIXME: show unknown on preview
|
||||
|
||||
let current_selected = selectableToppingInGroup.find(
|
||||
(x) => x.id === currentToppings[getToppingSlot()]['ListGroupID'][0]
|
||||
);
|
||||
|
|
@ -216,10 +203,32 @@
|
|||
}
|
||||
|
||||
function handleEvents(event: { event_type: string; payload: any; index: number | undefined }) {
|
||||
console.log('triggered event', event.event_type, JSON.stringify(event.payload));
|
||||
// console.log('triggered event', event.event_type, JSON.stringify(event.payload));
|
||||
if (event.event_type === 'mat_change') {
|
||||
// update value, do re-render
|
||||
initialize();
|
||||
} else if (event.event_type === 'edit_mat_field') {
|
||||
console.log('request edit mat');
|
||||
// pack all shown data
|
||||
recipeDataEvent.set({
|
||||
event_type: 'edit_mat_field_prep',
|
||||
payload: {
|
||||
mat_id: currentMaterialInt,
|
||||
mat_type: currentMaterialType,
|
||||
mat_name: mat_id,
|
||||
params: currentStringParams,
|
||||
toppings: currentToppings,
|
||||
current_topping_group: currentToppingInRow,
|
||||
current_topping_list: selectableToppingInGroup,
|
||||
has_mix_ord: hasMixOrder,
|
||||
feed,
|
||||
water,
|
||||
powder,
|
||||
syrup,
|
||||
stir_time
|
||||
},
|
||||
index: row_uid
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +239,7 @@
|
|||
onMount(() => {
|
||||
initialize();
|
||||
unsubRecipeDataEvent = recipeDataEvent.subscribe((event) => {
|
||||
if (event && event.index && event.index === row_uid) {
|
||||
if (event !== null && event.index !== undefined && event.index === row_uid) {
|
||||
// has some event
|
||||
handleEvents(event);
|
||||
}
|
||||
|
|
@ -244,27 +253,29 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
{#if currentMaterialType === 'topping'}
|
||||
<!-- do topping layout -->
|
||||
<div>
|
||||
<!-- get name of topping -->
|
||||
<div class="mx-auto my-4 flex flex-row gap-8">
|
||||
<!-- popup selector for topping group -->
|
||||
<Button variant="default">{getCurrentSelectedToppingGroup()}</Button>
|
||||
<!-- popup selector for topping list -->
|
||||
<Button variant="default">{getCurrentSelectedToppingList()}</Button>
|
||||
<div>
|
||||
{#if currentMaterialType === 'topping'}
|
||||
<!-- do topping layout -->
|
||||
<div>
|
||||
<!-- get name of topping -->
|
||||
<div class="mx-auto my-4 flex flex-row gap-8">
|
||||
<p class="text-muted-foreground">
|
||||
<b>
|
||||
{getCurrentSelectedToppingGroup()}
|
||||
</b>, {getCurrentSelectedToppingList()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
<div class="flex w-full flex-row gap-4">
|
||||
<!-- string param -->
|
||||
{#if !hasMixOrder}
|
||||
<!-- check if param is esp-v2-press-value -->
|
||||
{:else}
|
||||
<div>
|
||||
<div class="flex w-full flex-row gap-4">
|
||||
<!-- string param -->
|
||||
{#if !hasMixOrder}
|
||||
<!-- check if param is esp-v2-press-value -->
|
||||
|
||||
{#if currentStringParams['esp-v2-press-value']}
|
||||
<div class="space-y-1">
|
||||
<Label class="font-bold" for={`esp_v2_press_${row_uid}`}>Press</Label>
|
||||
{#if currentStringParams['esp-v2-press-value']}
|
||||
<div class="my-4">
|
||||
<!-- <Label class="font-bold" for={`esp_v2_press_${row_uid}`}>Press</Label>
|
||||
<div class="flex flex-row items-center space-x-2 text-center">
|
||||
<Input
|
||||
class="w-16"
|
||||
|
|
@ -275,13 +286,18 @@
|
|||
triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
|
||||
/>
|
||||
<p>mA</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div> -->
|
||||
|
||||
{#if water.yield > 0}
|
||||
<div class="space-y-1">
|
||||
<Label class="font-bold" for={`water_yield_volume_${row_uid}`}>Hot</Label>
|
||||
<p class="text-muted-foreground">
|
||||
<b> Press </b>
|
||||
{currentStringParams['esp-v2-press-value']} mA
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if water.yield > 0}
|
||||
<div class="my-4">
|
||||
<!-- <Label class="font-bold" for={`water_yield_volume_${row_uid}`}>Hot</Label>
|
||||
<div class="flex flex-row items-center space-x-2 text-center">
|
||||
<Input
|
||||
class="w-16"
|
||||
|
|
@ -292,13 +308,18 @@
|
|||
triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
|
||||
/>
|
||||
<p>ml</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div> -->
|
||||
|
||||
{#if water.cold > 0}
|
||||
<div class="space-y-1">
|
||||
<Label class="font-bold" for={`water_cold_volume_${row_uid}`}>Cold</Label>
|
||||
<p class="text-muted-foreground">
|
||||
<b> Hot </b>
|
||||
{water.yield} ml
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if water.cold > 0}
|
||||
<div class="my-4">
|
||||
<!-- <Label class="font-bold" for={`water_cold_volume_${row_uid}`}>Cold</Label>
|
||||
<div class="flex flex-row items-center space-x-2 text-center">
|
||||
<Input
|
||||
class="w-16"
|
||||
|
|
@ -309,13 +330,17 @@
|
|||
triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
|
||||
/>
|
||||
<p>ml</p>
|
||||
</div> -->
|
||||
<p class="text-muted-foreground">
|
||||
<b> Hot </b>
|
||||
{water.cold} ml
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if currentMaterialType !== 'cup' && currentMaterialType !== 'topping' && stir_time > 0}
|
||||
<div class="space-y-1">
|
||||
<Label class="font-bold" for={`stir_time_${row_uid}`}>{getStirTimeName()}</Label>
|
||||
{#if currentMaterialType !== 'cup' && currentMaterialType !== 'topping' && stir_time > 0}
|
||||
<div class="my-4">
|
||||
<!-- <Label class="font-bold" for={`stir_time_${row_uid}`}>{getStirTimeName()}</Label>
|
||||
<div class="flex flex-row items-center space-x-2 text-center">
|
||||
<Input
|
||||
class="w-16"
|
||||
|
|
@ -326,15 +351,19 @@
|
|||
triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
|
||||
/>
|
||||
<p>sec</p>
|
||||
</div> -->
|
||||
<p class="text-muted-foreground">
|
||||
<b>{getStirTimeName()}</b>
|
||||
{stir_time / 10} sec(s)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- display powder/syrup -->
|
||||
{#if currentMaterialType === 'syrup' || currentMaterialType === 'powder' || currentMaterialType === 'bean'}
|
||||
<div class="space-y-1">
|
||||
<Label class="font-bold" for={`powder_syrup_volume_${row_uid}`}>Volume</Label>
|
||||
<!-- display powder/syrup -->
|
||||
{#if currentMaterialType === 'syrup' || currentMaterialType === 'powder' || currentMaterialType === 'bean'}
|
||||
<div class="my-4">
|
||||
<!-- <Label class="font-bold" for={`powder_syrup_volume_${row_uid}`}>Volume</Label>
|
||||
<div class="flex flex-row items-center space-x-2 text-center">
|
||||
<Input
|
||||
class="w-16"
|
||||
|
|
@ -344,17 +373,23 @@
|
|||
onchangecapture={(v) =>
|
||||
triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
|
||||
/>
|
||||
<p>gram</p>
|
||||
<p>gram</p> -->
|
||||
<p class="text-muted-foreground">
|
||||
<b> Volume </b>
|
||||
{getPowderSyrupValue()} gram
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- feed pattern -->
|
||||
{#if feed.parameter > 0 || feed.pattern > 0}
|
||||
<div class="mx-auto my-4 flex items-center gap-8 text-center">
|
||||
<p class="text-muted-foreground">Style {feed.pattern}</p>
|
||||
<p class="text-muted-foreground">Level {feed.parameter}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- feed pattern -->
|
||||
{#if feed.parameter > 0 || feed.pattern > 0}
|
||||
<div class="mx-auto my-4 flex items-center gap-8 text-center">
|
||||
<Button variant="outline">Style {feed.pattern}</Button>
|
||||
<Button variant="outline">Level {feed.parameter}</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- show sheet -->
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue