ship protein feature

src/lib/components/DayEditor/Bucket.svelte

@@ -5,6 +5,7 @@
 	import ItemDrawer from '$lib/views/ItemDrawer/ItemDrawer.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Expandable from '../Expandable.svelte'
+	import { calculateProteinFromItems } from '$lib/protein'
 	const dispatch = createEventDispatcher()
 
 	export let label: string
@@ -35,13 +36,14 @@
 		<span class="title-l">{label}</span>
 		<div class="bucket-info">
 			{#if items.length}
-				<span class="body-m">
-					{items.length} Item{items.length !== 1 ? 's' : ''}
-				</span>
 				<span class="label-l">
 					{kcalDisplay(calculateKcalFromItems(items))}
 					kcal
 				</span>
+				<span class="label-l">
+					{kcalDisplay(calculateProteinFromItems(items))}
+					protein
+				</span>
 			{:else}
 				<ItemDrawer
 					triggerTestId="track-item-{label}-{date}"

src/lib/components/InstanceCreator/index.ts

@@ -1,5 +1,6 @@
 import type { Item, ItemInstance } from '$lib/data/items'
 import { calculateKcalPer100FromItems } from '$lib/kcal'
+import { calculateProteinPer100FromItems } from '$lib/protein'
 import { writable } from 'svelte/store'
 import { v4 as uuid } from 'uuid'
 
@@ -13,6 +14,9 @@ export function transformItemToInstance(item: Item): ItemInstance {
 		brand: item.brand || '',
 		kcalPer100:
 			item.kcalPer100 || calculateKcalPer100FromItems(item.items, item.amount),
+		proteinPer100:
+			item.proteinPer100 ||
+			calculateProteinPer100FromItems(item.items, item.amount),
 		amount: 100,
 		portions: item.portions || [],
 	}

src/lib/components/ItemInstanceEditor.svelte

@@ -6,15 +6,14 @@
 	import IcDelete from '~icons/ic/round-delete-forever'
 	import InstanceForm from './InstanceForm.svelte'
 	import PortionSelector from './PortionSelector.svelte'
+	import { calculateProtein } from '$lib/protein'
 	const dispatch = createEventDispatcher()
 
 	export let item: ItemInstance
 	export let amountInputElement: HTMLInputElement = null
 
 	let editing = false
 
-	$: kcalLabel = kcalDisplay(calculateKcal(item))
-
 	function dispatchUpdate() {
 		dispatch('update')
 	}
@@ -41,7 +40,10 @@
 	</div>
 	<div class="col end">
 		<span class="label-l">
-			{kcalLabel} kcal
+			{kcalDisplay(calculateKcal(item))} kcal
+		</span>
+		<span class="label-l">
+			{kcalDisplay(calculateProtein(item))} protein
 		</span>
 	</div>
 </button>

src/lib/components/KcalLimitBar.svelte

@@ -1,24 +1,17 @@
-<script>
-	import { userSettings } from '$lib/data/user'
+<script lang="ts">
+	export let amount: number
+	export let limit = 9999
 
-	export let kcalInDay
-
-	$: overLimit = kcalInDay > ($userSettings?.kcalLimit || 9999)
+	$: overLimit = amount > limit
 </script>
 
 <div class="bar" class:over-limit={overLimit}>
 	<div
 		class="inner"
-		style={!isNaN(kcalInDay)
+		style={!isNaN(amount)
 			? overLimit
-				? `width: ${Math.min(
-						($userSettings?.kcalLimit / kcalInDay) * 100,
-						100
-				  )}%;`
-				: `width: ${Math.min(
-						(kcalInDay / $userSettings?.kcalLimit) * 100,
-						100
-				  )}%;`
+				? `width: ${Math.min((limit / amount) * 100, 100)}%;`
+				: `width: ${Math.min((amount / limit) * 100, 100)}%;`
 			: ''}
 	/>
 </div>

src/lib/components/WeekSwitcher.svelte

@@ -1,9 +1,8 @@
 <script>
-	import { toISODateString } from '$lib/dateHelpers'
-	import { calculateKcalFromItems } from '$lib/kcal'
-	import { kcalDisplay } from '$lib/kcal'
 	import { curDay, curWeek, curYear, weekData } from '$lib/data/intake'
 	import { userSettings } from '$lib/data/user'
+	import { toISODateString } from '$lib/dateHelpers'
+	import { calculateKcalFromItems, kcalDisplay } from '$lib/kcal'
 	import { addDays, getYear } from 'date-fns'
 	import Switcher from './Switcher.svelte'
 
@@ -22,7 +21,7 @@
 			acc +
 				day.meals.reduce(
 					(acc, meal) => acc + calculateKcalFromItems(meal.intake),
-					0
+					0,
 				) || 0
 		)
 	}, 0)

src/lib/data/items.ts

@@ -153,6 +153,7 @@ export const defaultItem = {
 	label: '',
 	brand: '',
 	kcalPer100: 100, // 0 means no override
+	proteinPer100: 100, // 0 means no override
 	amount: 0, // 0 means no override
 	items: [],
 	portions: [],
@@ -183,6 +184,7 @@ export interface Item {
 	brand?: string
 	label: string
 	kcalPer100: number
+	proteinPer100?: number
 	amount?: number
 	items?: ItemInstance[]
 	portions?: Portion[]
@@ -197,6 +199,7 @@ export interface ItemInstance {
 	label: string
 	brand?: string
 	kcalPer100: number
+	proteinPer100?: number
 	amount: number
 	portions?: Portion[]
 }

src/lib/data/user.ts

@@ -53,4 +53,5 @@ export interface User {
 
 export interface UserSettings {
 	kcalLimit?: number
+	proteinLimit?: number
 }

src/lib/protein.ts

@@ -0,0 +1,18 @@
+import type { ItemInstance } from './data/items'
+import { calculateAmountSum } from './kcal'
+
+export const calculateProtein = (item: ItemInstance) =>
+	(item.proteinPer100 / 100) * item.amount
+
+export const calculateProteinFromItems = (items: ItemInstance[]) => {
+	return items.reduce((acc, item) => acc + calculateProtein(item), 0)
+}
+
+export const calculateProteinPer100FromItems = (
+	items: ItemInstance[],
+	amountSum = 0
+) => {
+	if (!amountSum) amountSum = calculateAmountSum(items)
+	const protein = calculateProteinFromItems(items)
+	return (protein / amountSum) * 100
+}

src/lib/views/CurDayView.svelte

@@ -12,6 +12,7 @@
 	import { userSettings } from '$lib/data/user'
 	import { toISODateString } from '$lib/dateHelpers'
 	import { calculateKcalFromItems, kcalDisplay } from '$lib/kcal'
+	import { calculateProteinFromItems } from '$lib/protein'
 	import { addDays } from 'date-fns'
 
 	let data = null as DayType
@@ -21,7 +22,12 @@
 
 	$: kcalInDay = data?.meals.reduce(
 		(acc, meal) => acc + calculateKcalFromItems(meal.intake),
-		0
+		0,
+	)
+
+	$: proteinInDay = data?.meals.reduce(
+		(acc, meal) => acc + calculateProteinFromItems(meal.intake),
+		0,
 	)
 	$: dateObj = new Date($curDay)
 
@@ -52,12 +58,21 @@
 	>
 		{kcalDisplay(kcalInDay)} kcal
 	</span>
+	<span
+		class="label-l"
+		class:over-limit={proteinInDay > ($userSettings?.proteinLimit || 9999)}
+		class:stale
+	>
+		{kcalDisplay(proteinInDay)} protein
+	</span>
 </Switcher>
 
 {#await dayData.load()}
 	<KcalLimitBarSkeleton />
+	<KcalLimitBarSkeleton />
 {:then _}
-	<KcalLimitBar {kcalInDay} />
+	<KcalLimitBar amount={kcalInDay} limit={$userSettings?.kcalLimit} />
+	<KcalLimitBar amount={proteinInDay} limit={$userSettings?.proteinLimit} />
 {/await}
 
 <DayEditor bind:data date={$curDay} />

src/lib/views/ItemDrawer/EditItem.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
+	import Input from '$lib/Input.svelte'
 	import BarCodeScanDialog from '$lib/components/BarCodeScanDialog.svelte'
 	import ItemInstance from '$lib/components/ItemInstanceEditor.svelte'
 	import TrackNow from '$lib/components/TrackNow.svelte'
 	import {
 		createItemStore,
 		defaultPortion,
 		deleteItem,
-		items,
 		type Item,
 		type ItemInstance as ItemInstanceType,
 	} from '$lib/data/items'
+	import {
+		addQuickSnack,
+		quickSnacks,
+		removeQuickSnack,
+	} from '$lib/data/quickSnacks'
 	import { toISODateString } from '$lib/dateHelpers'
-	import Input from '$lib/Input.svelte'
 	import {
 		calculateAmountSum,
 		calculateKcalPer100FromItems,
@@ -29,15 +33,11 @@
 	import IcAdd from '~icons/ic/round-plus'
 	import IcRoundShare from '~icons/ic/round-share'
 	import IcRoundToday from '~icons/ic/round-today'
-	import ItemDrawer from './ItemDrawer.svelte'
-	import PortionCreator from './PortionCreator.svelte'
 	import MaterialSymbolsOfflineBolt from '~icons/material-symbols/offline-bolt'
 	import MaterialSymbolsOfflineBoltOutline from '~icons/material-symbols/offline-bolt-outline'
-	import {
-		addQuickSnack,
-		quickSnacks,
-		removeQuickSnack,
-	} from '$lib/data/quickSnacks'
+	import ItemDrawer from './ItemDrawer.svelte'
+	import PortionCreator from './PortionCreator.svelte'
+	import { calculateProteinPer100FromItems } from '$lib/protein'
 
 	const dispatch = createEventDispatcher()
 
@@ -95,6 +95,9 @@
 	<Input type="calc" bind:value={$dataStore.kcalPer100}>
 		kcal per 100 g || ml
 	</Input>
+	<Input type="calc" bind:value={$dataStore.proteinPer100}>
+		protein per 100 g || ml
+	</Input>
 {:else}
 	<Input
 		type="calc"
@@ -105,6 +108,15 @@
 	>
 		kcal per 100 g || ml
 	</Input>
+	<Input
+		type="calc"
+		disabled
+		value={kcalDisplay(
+			calculateProteinPer100FromItems($dataStore.items, $dataStore.amount),
+		)}
+	>
+		protein per 100 g || ml
+	</Input>
 {/if}
 <Input type="number" bind:value={$dataStore.ean}>
 	EAN (Barcode)

src/lib/views/ItemDrawer/ItemDrawer.svelte

@@ -19,15 +19,13 @@
 	export let isOpen = false
 	export let editItem: Item = null
 	export let triggerTestId = ''
-	let showQuickSnacks = false
 </script>
 
 <Dialog
 	let:toggle
 	bind:isOpen
 	on:dismiss={() => {
 		editItem = null
-		showQuickSnacks = false
 	}}
 	triggerProps={{
 		'class': `margin-left-auto ${selector ? 'btn text' : ''}`,

src/lib/views/UnifiedView.svelte

@@ -59,7 +59,7 @@
 					{kcalDisplay(kcalInDay)} kcal
 				</span>
 			</div>
-			<KcalLimitBar {kcalInDay} />
+			<KcalLimitBar amount={kcalInDay} />
 			<DayEditor bind:data {date} />
 		</div>
 	{:else}

src/routes/+error.svelte

@@ -16,14 +16,14 @@
 	<p>Maybe try reloading or logging in.</p>
 
 	<nav class="fab-bar">
-		<a data-sveltekit-prefetch href="/auth">
+		<a href="/auth">
 			<IconLogin /> Login
 		</a>
 	</nav>
 {:else}
 	<p>Maybe try reloading or going home.</p>
 	<nav class="fab-bar">
-		<a data-sveltekit-prefetch href="/">
+		<a href="/">
 			<IcHome />
 		</a>
 	</nav>

src/routes/+layout.svelte

@@ -59,7 +59,7 @@
 			<IcRoundCloudOff color="var(--md-error)" />
 		{/if}
 		{#if $user}
-			<a data-sveltekit-prefetch class="btn text" href="/profile">
+			<a class="btn text" href="/profile">
 				{#if $user.photoURL && !imgError}
 					<img
 						src={$user.photoURL}

src/routes/+page.svelte

@@ -4,7 +4,7 @@
 	import { page } from '$app/stores'
 	import { decodeUriComponentToObj } from '$lib/base64'
 	import InstanceCreator from '$lib/components/InstanceCreator/InstanceCreator.svelte'
-	import { curDay, dateIsToday, weekData } from '$lib/data/intake'
+	import { curDay, dateIsToday } from '$lib/data/intake'
 	import { saveExternalItem, type Item } from '$lib/data/items'
 	import { toISODateString } from '$lib/dateHelpers'
 	import CurDayView from '$lib/views/CurDayView.svelte'

src/routes/Credits.svelte

@@ -20,7 +20,7 @@
 	<hr />
 	<h3 class="headline-5">Made possible thanks to:</h3>
 	<ul>
-		{#each deps as dep, i}
+		{#each deps as dep}
 			{@const link = dep.link.replace('git://', 'https://').replace('git+', '')}
 			<li>
 				<a target="_blank" rel="noreferrer" href={link}>{dep.name}</a>

src/routes/profile/+page.svelte

@@ -35,18 +35,22 @@
 			</ul>
 			<hr />
 			{#await userSettings.load()}
-				<Input type="calc" disabled>Kcal Day Limit / Warning</Input>
+				<Input type="calc" disabled>Kcal Goal</Input>
+				<Input type="calc" disabled>Protein Goal</Input>
 			{:then}
 				<Input type="calc" bind:value={$userSettings.kcalLimit}>
-					Kcal Day Limit / Warning
+					Kcal Goal
+				</Input>
+				<Input type="calc" bind:value={$userSettings.proteinLimit}>
+					Protein Goal
 				</Input>
 			{/await}
 			<a
 				href="https://www.tk.de/service/app/2004134/kalorienrechner/einstieg.app?tkcm=ab"
 				target="_blank"
 				rel="noreferrer"
 			>
-				Kalo­ri­en­be­darfs­rechner von TK
+				Kalorienbedarfsrechner von TK
 			</a>
 		</div>
 		<button class="btn tonal" on:click={logout}>
@@ -57,7 +61,7 @@
 
 {#if $user}
 	<nav class="fab-bar">
-		<a data-sveltekit-prefetch href="/">
+		<a href="/">
 			<IcHome /> Go Home
 		</a>
 	</nav>