added implementation frontend by prompt @ 2026-02-14 05:35:18 #CODEX

frontend/src/views/TodayView.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import DayMealCard from '@/components/today/DayMealCard.vue'
+import DayTotalsCard from '@/components/today/DayTotalsCard.vue'
+import { useDiaryStore } from '@/stores/diary'
+import { useMealsStore } from '@/stores/meals'
+import { MEAL_TYPES, MEAL_TYPE_LABELS_SK, type MealType } from '@/types/domain'
+import { todayISO } from '@/utils/date'
+
+const route = useRoute()
+const router = useRouter()
+const diaryStore = useDiaryStore()
+const mealsStore = useMealsStore()
+
+const isWorking = ref(false)
+const selectedDate = ref(todayISO())
+
+const resolveDate = (): string => {
+	const dateFromRoute = typeof route.params.date === 'string' ? route.params.date : ''
+	return dateFromRoute.length > 0 ? dateFromRoute : todayISO()
+}
+
+const reloadDay = async (date: string) => {
+	selectedDate.value = date
+	diaryStore.ensureCurrentDay(date)
+	isWorking.value = true
+	try {
+		if (mealsStore.list.length <= 0) {
+			await mealsStore.loadMeals()
+		}
+		await diaryStore.loadDay(date)
+	} finally {
+		isWorking.value = false
+	}
+}
+
+watch(
+	() => route.params.date,
+	async () => {
+		await reloadDay(resolveDate())
+	},
+)
+
+onMounted(async () => {
+	await reloadDay(resolveDate())
+})
+
+const onDateChange = async () => {
+	await router.replace({ name: 'today', params: { date: selectedDate.value } })
+}
+
+const onSelectMeal = async (mealType: MealType, mealId: number | null) => {
+	if (mealId === null) {
+		await diaryStore.unsetMealForType(selectedDate.value, mealType)
+		return
+	}
+	await diaryStore.setMealForType(selectedDate.value, mealType, mealId)
+}
+
+const dayMeals = computed(() => diaryStore.mealsByType)
+const dayTotals = computed(() => diaryStore.computedTotals)
+</script>
+
+<template>
+	<section class="page">
+		<div class="page-header">
+			<label class="filter-control">
+				<span>Dátum</span>
+				<input v-model="selectedDate" class="input-date" type="date" @change="onDateChange" />
+			</label>
+		</div>
+
+		<div v-if="isWorking || diaryStore.loading" class="card">Načítavam deň...</div>
+
+		<template v-else>
+			<div class="grid-three">
+				<DayMealCard
+					v-for="mealType in MEAL_TYPES"
+					:key="mealType"
+					:meal-type="mealType"
+					:label="MEAL_TYPE_LABELS_SK[mealType]"
+					:meal-options="diaryStore.selectedMealOptions[mealType]"
+					:selected-meal-id="diaryStore.selectedMealId(mealType)"
+					:meal="dayMeals[mealType]"
+					@select-meal="onSelectMeal"
+				/>
+			</div>
+
+			<DayTotalsCard :totals="dayTotals" />
+		</template>
+	</section>
+</template>