Make per100 editable and auto inferable

src/lib/components/EmptyFoodComp.svelte

@@ -12,8 +12,14 @@
 	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) }) {
+		if (!per100Edited && event.currentTarget === per100Element)
+			per100Edited = true
+
 		if (event.key == 'Enter') {
 			item.food = name.trim()
 			item.amount = parseInt(amount.trim())
@@ -22,6 +28,8 @@
 			name = ''
 			amount = ''
 			description = ''
+			per100 = ''
+			per100Edited = false
 
 			if (dbFood.length == 0) {
 				toast.error('Creating food returned 0 rows')
@@ -37,6 +45,15 @@
 				return food
 			})
 		}
+
+		if (!per100Edited)
+			FoodService.GetLatestPer100(name.trim()).then((res) => {
+				if (res[1])
+					// toast.error(res[1])
+					return
+
+				per100 = res[0].toString()
+			})
 	}
 </script>
 
@@ -46,6 +63,8 @@
 		    scope="row">
 		</th>
 		<td bind:innerText={name}
+		    class:border-[3px]={!name}
+		    class:border-red-600={!name}
 		    class="px-6 py-4"
 		    contenteditable="true"
 		    on:keyup={update}>
@@ -56,11 +75,19 @@
 		    on:keyup={update}>
 		</td>
 		<td bind:innerText={amount}
+		    class:border-[3px]={!amount}
+		    class:border-red-600={!amount}
 		    class="px-6 py-4"
 		    contenteditable="true"
 		    on:keyup={update}>
 		</td>
-		<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
+		<td bind:this={per100Element}
+		    bind:innerText={per100}
+		    class="px-6 py-4 bg-gray-50 dark:bg-gray-800"
+		    class:border-[3px]={!per100}
+		    class:border-orange-600={!per100}
+		    contenteditable="true"
+		    on:keyup={update}>
 		</td>
 		<td class="px-6 py-4">
 		</td>

src/lib/database/food.ts

@@ -47,6 +47,21 @@ order by date DESC;
 
 		return [row, null]
 	},
+	async GetLatestPer100(food: string): Promise<[number, Err]> {
+		if (!food) return [-1, 'food is required']
+		const rows: { per100: number }[] = await db.select<{ per100: number }[]>(`
+select per100
+from food
+where food = $1
+	and per100 is not null
+order by date desc
+limit 1
+		`, [food])
+		if (!rows) return [-1, 'no data found']
+		if (rows.length == 0) return [-1, 'no data found']
+		// @ts-ignore
+		return [rows[0].per100, null]
+	},
 	async GetDaily(): Promise<[AggregatedFood[], Err]> {
 		const rows = await db.select<AggregatedFood[]>(`select ${aggColumns.join(', ')} from daily limit 100`)
 		return [rows, null]