added transalations for UI texts
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch } from 'vue'
|
||||
import { computed, reactive, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Ingredient } from '@/types/domain'
|
||||
|
||||
const props = defineProps<{
|
||||
@ -20,6 +21,12 @@ const emit = defineEmits<{
|
||||
(event: 'cancel'): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const formTitle = computed(() => {
|
||||
return props.initial ? t('ingredients.editTitle') : t('ingredients.newTitle')
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
protein_g_100: 0,
|
||||
@ -57,40 +64,40 @@ const onSubmit = () => {
|
||||
|
||||
<template>
|
||||
<form class="card ingredient-form" @submit.prevent="onSubmit">
|
||||
<h3>{{ props.initial ? 'Upraviť surovinu' : 'Nová surovina' }}</h3>
|
||||
<h3>{{ formTitle }}</h3>
|
||||
<div class="grid-two">
|
||||
<label>
|
||||
<span>Názov</span>
|
||||
<span>{{ t('ingredients.name') }}</span>
|
||||
<input v-model="form.name" class="input-text" type="text" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Protein / 100 g</span>
|
||||
<span>{{ t('ingredients.protein100') }}</span>
|
||||
<input v-model.number="form.protein_g_100" class="input-number" type="number" min="0" step="0.01" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Carbs / 100 g</span>
|
||||
<span>{{ t('ingredients.carbs100') }}</span>
|
||||
<input v-model.number="form.carbs_g_100" class="input-number" type="number" min="0" step="0.01" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Sugar / 100 g</span>
|
||||
<span>{{ t('ingredients.sugar100') }}</span>
|
||||
<input v-model.number="form.sugar_g_100" class="input-number" type="number" min="0" step="0.01" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Fat / 100 g</span>
|
||||
<span>{{ t('ingredients.fat100') }}</span>
|
||||
<input v-model.number="form.fat_g_100" class="input-number" type="number" min="0" step="0.01" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Fiber / 100 g</span>
|
||||
<span>{{ t('ingredients.fiber100') }}</span>
|
||||
<input v-model.number="form.fiber_g_100" class="input-number" type="number" min="0" step="0.01" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Kcal / 100 g (0 = auto)</span>
|
||||
<span>{{ t('ingredients.kcal100Auto') }}</span>
|
||||
<input v-model.number="form.kcal_100" class="input-number" type="number" min="0" step="0.01" required />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit">{{ props.submitLabel ?? 'Uložiť' }}</button>
|
||||
<button class="btn" type="button" @click="emit('cancel')">Zrušiť</button>
|
||||
<button class="btn btn-primary" type="submit">{{ props.submitLabel ?? t('ingredients.submitDefault') }}</button>
|
||||
<button class="btn" type="button" @click="emit('cancel')">{{ t('common.cancel') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Ingredient, MealItem } from '@/types/domain'
|
||||
|
||||
const props = defineProps<{
|
||||
@ -13,6 +14,8 @@ const emit = defineEmits<{
|
||||
(event: 'remove-item', mealItemId: number): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const addIngredientId = ref<number | null>(null)
|
||||
const addGrams = ref<number>(100)
|
||||
|
||||
@ -48,25 +51,25 @@ const addItem = () => {
|
||||
|
||||
<template>
|
||||
<section class="card meal-items-editor">
|
||||
<h3>Položky jedálnička</h3>
|
||||
<h3>{{ t('meals.itemsTitle') }}</h3>
|
||||
|
||||
<div class="meal-items-editor__add-row">
|
||||
<select v-model.number="addIngredientId" class="input-select">
|
||||
<option :value="null">Vyber surovinu</option>
|
||||
<option :value="null">{{ t('meals.selectIngredient') }}</option>
|
||||
<option v-for="ingredient in props.ingredients" :key="ingredient.ingredient_id" :value="ingredient.ingredient_id">
|
||||
{{ ingredient.name }}
|
||||
</option>
|
||||
</select>
|
||||
<input v-model.number="addGrams" type="number" min="1" class="input-number" />
|
||||
<button class="btn btn-primary" type="button" @click="addItem">Pridať</button>
|
||||
<button class="btn btn-primary" type="button" @click="addItem">{{ t('meals.addItem') }}</button>
|
||||
</div>
|
||||
|
||||
<table class="table" v-if="props.items.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Surovina</th>
|
||||
<th>Gramáž</th>
|
||||
<th>Akcia</th>
|
||||
<th>{{ t('ingredients.name') }}</th>
|
||||
<th>{{ t('meals.grams') }}</th>
|
||||
<th>{{ t('common.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -97,12 +100,12 @@ const addItem = () => {
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" type="button" @click="emit('remove-item', item.meal_item_id)">
|
||||
Zmazať
|
||||
{{ t('common.delete') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-else class="empty-state">Tento jedálniček zatiaľ nemá položky.</p>
|
||||
<p v-else class="empty-state">{{ t('meals.noItems') }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { MealType } from '@/types/domain'
|
||||
|
||||
const props = defineProps<{
|
||||
@ -8,20 +9,22 @@ const props = defineProps<{
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: MealType | ''): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label class="filter-control">
|
||||
<span>Typ jedla</span>
|
||||
<span>{{ t('meals.mealTypeFilter') }}</span>
|
||||
<select
|
||||
class="input-select"
|
||||
:value="props.modelValue"
|
||||
@change="emit('update:modelValue', ($event.target as HTMLSelectElement).value as MealType | '')"
|
||||
>
|
||||
<option value="">Všetky</option>
|
||||
<option value="breakfast">Raňajky</option>
|
||||
<option value="lunch">Obed</option>
|
||||
<option value="dinner">Večera</option>
|
||||
<option value="">{{ t('common.all') }}</option>
|
||||
<option value="breakfast">{{ t('mealTypes.breakfast') }}</option>
|
||||
<option value="lunch">{{ t('mealTypes.lunch') }}</option>
|
||||
<option value="dinner">{{ t('mealTypes.dinner') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
@ -1,11 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const tabs = [
|
||||
{ to: { name: 'today' }, label: 'Dnes' },
|
||||
{ to: { name: 'meals' }, label: 'Jedlá' },
|
||||
{ to: { name: 'ingredients' }, label: 'Suroviny' },
|
||||
{ to: { name: 'stats' }, label: 'Stats' },
|
||||
{ to: { name: 'settings' }, label: 'Viac' },
|
||||
]
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ to: { name: 'today' }, label: t('nav.today') },
|
||||
{ to: { name: 'meals' }, label: t('nav.meals') },
|
||||
{ to: { name: 'ingredients' }, label: t('nav.ingredients') },
|
||||
{ to: { name: 'stats' }, label: t('nav.stats') },
|
||||
{ to: { name: 'settings' }, label: t('nav.more') },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
const navItems = [
|
||||
{ to: { name: 'today' }, label: 'Dnes' },
|
||||
{ to: { name: 'meals' }, label: 'Jedálničky' },
|
||||
{ to: { name: 'ingredients' }, label: 'Suroviny' },
|
||||
{ to: { name: 'stats' }, label: 'Štatistiky' },
|
||||
{ to: { name: 'settings' }, label: 'Nastavenia' },
|
||||
]
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const navItems = computed(() => [
|
||||
{ to: { name: 'today' }, label: t('nav.today') },
|
||||
{ to: { name: 'meals' }, label: t('nav.meals') },
|
||||
{ to: { name: 'ingredients' }, label: t('nav.ingredients') },
|
||||
{ to: { name: 'stats' }, label: t('nav.stats') },
|
||||
{ to: { name: 'settings' }, label: t('nav.settings') },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="app-sidebar">
|
||||
<div class="app-sidebar__brand">
|
||||
<img src="/Nutrio.png" alt="Nutrio" class="app-sidebar__logo" />
|
||||
<strong>Nutrio</strong>
|
||||
<img src="/Nutrio.png" :alt="t('app.name')" class="app-sidebar__logo" />
|
||||
<strong>{{ t('app.name') }}</strong>
|
||||
</div>
|
||||
<nav class="app-sidebar__nav">
|
||||
<RouterLink
|
||||
|
||||
@ -1,27 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const title = computed(() => {
|
||||
switch (route.name) {
|
||||
case 'today':
|
||||
return 'Denný prehľad'
|
||||
return t('pageTitles.today')
|
||||
case 'meals':
|
||||
return 'Jedálničky'
|
||||
return t('pageTitles.meals')
|
||||
case 'meal-detail':
|
||||
return 'Detail jedálnička'
|
||||
return t('pageTitles.mealDetail')
|
||||
case 'ingredients':
|
||||
return 'Suroviny'
|
||||
return t('pageTitles.ingredients')
|
||||
case 'stats':
|
||||
return 'Štatistiky'
|
||||
return t('pageTitles.stats')
|
||||
case 'settings':
|
||||
return 'Nastavenia'
|
||||
return t('pageTitles.settings')
|
||||
default:
|
||||
return 'Nutrio'
|
||||
return t('pageTitles.default')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Meal, MealType } from '@/types/domain'
|
||||
|
||||
const props = defineProps<{
|
||||
@ -14,6 +15,8 @@ const emit = defineEmits<{
|
||||
(event: 'select-meal', mealType: MealType, mealId: number | null): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const selectedValue = computed({
|
||||
get: () => (props.selectedMealId === null ? '' : String(props.selectedMealId)),
|
||||
set: (value: string) => {
|
||||
@ -32,16 +35,19 @@ const selectedValue = computed({
|
||||
<h3>{{ label }}</h3>
|
||||
</div>
|
||||
<select v-model="selectedValue" class="input-select">
|
||||
<option value="">Bez jedálnička</option>
|
||||
<option value="">{{ t('today.noMealPlan') }}</option>
|
||||
<option v-for="option in mealOptions" :key="option.value" :value="String(option.value)">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="day-meal-card__summary" v-if="meal?.totals">
|
||||
{{ meal.totals.kcal }} kcal · B {{ meal.totals.protein_g }} g · S {{ meal.totals.carbs_g }} g · T {{ meal.totals.fat_g }} g
|
||||
{{ meal.totals.kcal }} {{ t('common.kcalUnit') }}
|
||||
· {{ t('nutrition.short.protein') }} {{ meal.totals.protein_g }} g
|
||||
· {{ t('nutrition.short.carbs') }} {{ meal.totals.carbs_g }} g
|
||||
· {{ t('nutrition.short.fat') }} {{ meal.totals.fat_g }} g
|
||||
</p>
|
||||
<p class="day-meal-card__summary" v-else>
|
||||
Zatiaľ bez položiek.
|
||||
{{ t('today.noItems') }}
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -1,29 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { NutritionTotals } from '@/types/domain'
|
||||
|
||||
defineProps<{
|
||||
totals: NutritionTotals
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card totals-card">
|
||||
<h3>Súčty dňa</h3>
|
||||
<h3>{{ t('today.dayTotals') }}</h3>
|
||||
<div class="totals-grid">
|
||||
<div>
|
||||
<span>Kcal</span>
|
||||
<span>{{ t('common.kcalUnit') }}</span>
|
||||
<strong>{{ totals.kcal }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Bielkoviny</span>
|
||||
<span>{{ t('nutrition.labels.protein') }}</span>
|
||||
<strong>{{ totals.protein_g }} g</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Sacharidy</span>
|
||||
<span>{{ t('nutrition.labels.carbs') }}</span>
|
||||
<strong>{{ totals.carbs_g }} g</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Tuky</span>
|
||||
<span>{{ t('nutrition.labels.fat') }}</span>
|
||||
<strong>{{ totals.fat_g }} g</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" aria-hidden="true">
|
||||
<p>MealPickerModal placeholder</p>
|
||||
<p>{{ t('today.mealPickerPlaceholder') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user