Implement creating food
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
<script lang="ts">
|
||||
import Header from "$lib/components/Header.svelte";
|
||||
import Router from "$lib/router/Router.svelte";
|
||||
import { Toaster } from 'svelte-sonner'
|
||||
</script>
|
||||
|
||||
<Toaster />
|
||||
<template>
|
||||
<Header />
|
||||
<main class="flex-1">
|
||||
|
||||
@@ -1,8 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { foodStore } from "$lib/store/FoodStore";
|
||||
import FoodTable from "./Food/FoodTable.svelte";
|
||||
|
||||
// Fuck this hacky shit
|
||||
// Svelte won't re-render FoodTable when using the store directly
|
||||
// It won't do it when using a variable and subscribing to the store
|
||||
// It won't do it when reassigning the store
|
||||
// Not when pushing unshifting the store
|
||||
// This is the only thing that works
|
||||
// Hacky ass shit
|
||||
let forceUpdate = false;
|
||||
foodStore.subscribe(() => {
|
||||
forceUpdate = !forceUpdate;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FoodTable items={$foodStore} />
|
||||
</template>
|
||||
{#if forceUpdate}
|
||||
<FoodTable items={$foodStore} />
|
||||
{:else}
|
||||
<FoodTable items={$foodStore} />
|
||||
{/if}
|
||||
</template>
|
||||
|
||||
@@ -1,95 +1,110 @@
|
||||
<!-- <script lang="ts">
|
||||
import { type Food, FoodService } from '$lib/database/food'
|
||||
import { toast } from 'svelte-sonner'
|
||||
import type { Err } from '$lib/types'
|
||||
import { foodStore } from '$lib/store/energy/foodStore'
|
||||
import { RefreshStores } from '$lib/utils'
|
||||
<script lang="ts">
|
||||
import { toast } from "svelte-sonner";
|
||||
import { main } from "$wails/models";
|
||||
import { CreateFood, GetLastPer100 } from "$wails/main/App";
|
||||
import { foodStore } from "$lib/store/FoodStore";
|
||||
|
||||
let item: Food = {
|
||||
food: '',
|
||||
let item: main.Food = {
|
||||
food: "",
|
||||
amount: 0,
|
||||
description: ''
|
||||
}
|
||||
let name: string = ''
|
||||
let amount: string = ''
|
||||
let description: string = ''
|
||||
let per100: string = ''
|
||||
let per100Edited: boolean = false
|
||||
let per100Element: HTMLTableCellElement
|
||||
description: "",
|
||||
rowid: 0,
|
||||
date: "",
|
||||
per100: 0,
|
||||
energy: 0,
|
||||
};
|
||||
let name: string = "";
|
||||
let amount: string = "";
|
||||
let description: string = "";
|
||||
let per100: string = "";
|
||||
let per100Edited: boolean = false;
|
||||
let per100Element: HTMLTableCellElement;
|
||||
|
||||
async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
|
||||
name = name.trim()
|
||||
amount = amount.trim()
|
||||
description = description.trim()
|
||||
per100 = per100.trim()
|
||||
async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
|
||||
name = name.trim();
|
||||
amount = amount.trim();
|
||||
description = description.trim();
|
||||
per100 = per100.trim();
|
||||
|
||||
if (!per100Edited && event.currentTarget === per100Element)
|
||||
per100Edited = true
|
||||
if (!per100Edited && event.currentTarget === per100Element) per100Edited = true;
|
||||
|
||||
if (event.key == 'Enter') {
|
||||
event.preventDefault()
|
||||
item.food = name
|
||||
item.description = description
|
||||
item.amount = parseInt(amount)
|
||||
item.per100 = parseInt(per100)
|
||||
if (event.key == "Enter") {
|
||||
event.preventDefault();
|
||||
item.food = name;
|
||||
item.description = description;
|
||||
item.amount = parseInt(amount);
|
||||
item.per100 = parseInt(per100);
|
||||
|
||||
const [dbFood, err]: [Food, Err] = await FoodService.Create(item)
|
||||
name = ''
|
||||
amount = ''
|
||||
const res = await CreateFood(item);
|
||||
name = "";
|
||||
amount = "";
|
||||
// description = ''
|
||||
per100 = ''
|
||||
per100Edited = false
|
||||
per100 = "";
|
||||
per100Edited = false;
|
||||
|
||||
if (err) {
|
||||
toast.error(err)
|
||||
return
|
||||
if (!res.success) {
|
||||
toast.error(`failed to create item with error ${res.error}`);
|
||||
return;
|
||||
}
|
||||
RefreshStores()
|
||||
|
||||
foodStore.update((value) => {
|
||||
const updatedValue = [res.data, ...value];
|
||||
console.log("Updated items:", updatedValue.length);
|
||||
return updatedValue;
|
||||
});
|
||||
}
|
||||
|
||||
if (!per100Edited)
|
||||
FoodService.GetLatestPer100(name.trim()).then((res) => {
|
||||
if (res[1])
|
||||
// toast.error(res[1])
|
||||
return
|
||||
|
||||
per100 = res[0].toString()
|
||||
})
|
||||
GetLastPer100(name.trim()).then((res) => {
|
||||
if (res.success) {
|
||||
per100 = res.data.toString();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold">
|
||||
<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
|
||||
scope="row">
|
||||
<th
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
|
||||
scope="row"
|
||||
>
|
||||
</th>
|
||||
<td bind:innerText={name}
|
||||
class:border-[3px]={!name}
|
||||
class:border-red-600={!name}
|
||||
class="px-6 py-4 overflow-hidden"
|
||||
contenteditable="true"
|
||||
autofocus
|
||||
on:keydown={update}>
|
||||
<td
|
||||
bind:innerText={name}
|
||||
class:border-[3px]={!name}
|
||||
class:border-red-600={!name}
|
||||
class="px-6 py-4 overflow-hidden"
|
||||
contenteditable="true"
|
||||
autofocus
|
||||
on:keydown={update}
|
||||
>
|
||||
</td>
|
||||
<td bind:innerText={description}
|
||||
class="px-6 py-4 bg-gray-50 dark:bg-gray-800 overflow-hidden"
|
||||
contenteditable="true"
|
||||
on:keydown={update}>
|
||||
<td
|
||||
bind:innerText={description}
|
||||
class="px-6 py-4 bg-gray-50 dark:bg-gray-800 overflow-hidden"
|
||||
contenteditable="true"
|
||||
on:keydown={update}
|
||||
>
|
||||
</td>
|
||||
<td bind:innerText={amount}
|
||||
class:border-[3px]={!amount}
|
||||
class:border-red-600={!amount}
|
||||
class="px-6 py-4 overflow-hidden"
|
||||
contenteditable="true"
|
||||
on:keydown={update}>
|
||||
<td
|
||||
bind:innerText={amount}
|
||||
class:border-[3px]={!amount}
|
||||
class:border-red-600={!amount}
|
||||
class="px-6 py-4 overflow-hidden"
|
||||
contenteditable="true"
|
||||
on:keydown={update}
|
||||
>
|
||||
</td>
|
||||
<td bind:this={per100Element}
|
||||
bind:innerText={per100}
|
||||
class="px-6 py-4 bg-gray-50 dark:bg-gray-800 overflow-hidden"
|
||||
class:border-[3px]={!per100}
|
||||
class:border-orange-600={!per100}
|
||||
contenteditable="true"
|
||||
on:keydown={update}>
|
||||
<td
|
||||
bind:this={per100Element}
|
||||
bind:innerText={per100}
|
||||
class="px-6 py-4 bg-gray-50 dark:bg-gray-800 overflow-hidden"
|
||||
class:border-[3px]={!per100}
|
||||
class:border-orange-600={!per100}
|
||||
contenteditable="true"
|
||||
on:keydown={update}
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</template> -->
|
||||
</template>
|
||||
|
||||
@@ -8,10 +8,12 @@
|
||||
|
||||
let minCal = 1e5;
|
||||
let maxCal = 0;
|
||||
for (let item of items) {
|
||||
if (!item.energy) continue;
|
||||
if (item.energy > maxCal) maxCal = item.energy;
|
||||
if (item.energy < minCal) minCal = item.energy;
|
||||
$: {
|
||||
for (let item of items) {
|
||||
if (!item.energy) continue;
|
||||
if (item.energy > maxCal) maxCal = item.energy;
|
||||
if (item.energy < minCal) minCal = item.energy;
|
||||
}
|
||||
}
|
||||
|
||||
const start = "#99ff99";
|
||||
@@ -72,7 +74,12 @@
|
||||
<tbody>
|
||||
<EmptyFoodComp />
|
||||
{#each items as f}
|
||||
<FoodComp item="{f}" energyColor="{lerp(f)}" nameColor="{getNameColor(f)}" dateColor="{getDateColor(f)}" />
|
||||
<FoodComp
|
||||
item={f}
|
||||
energyColor={lerp(f)}
|
||||
nameColor={getNameColor(f)}
|
||||
dateColor={getDateColor(f)}
|
||||
/>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user