Implementazione completa dell'app BitePlan
- App.vue: root con navigazione tra le tre pagine - BottomNav.vue: barra navigazione inferiore (Pasti, Converti, Spesa) - MealPlanner.vue + MealCard.vue: pianificatore settimanale con lista voci per pasto - Converter.vue: convertitore crudo/cotto con ricerca testuale - ShoppingList.vue + CheckboxItem.vue: lista spesa con checkbox - utils/storage.js: wrapper LocalStorage (save/load) - utils/conversion.js: rawToCooked e cookedToRaw - data/conversions.json: 14 alimenti con coefficienti di resa Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
26
src/App.vue
Normal file
26
src/App.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div id="app-root">
|
||||
<MealPlanner v-if="page === 'meal'" />
|
||||
<Converter v-else-if="page === 'convert'" />
|
||||
<ShoppingList v-else-if="page === 'shop'" />
|
||||
<BottomNav v-model="page" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import BottomNav from './components/BottomNav.vue'
|
||||
import MealPlanner from './pages/MealPlanner.vue'
|
||||
import Converter from './pages/Converter.vue'
|
||||
import ShoppingList from './pages/ShoppingList.vue'
|
||||
|
||||
const page = ref('meal')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#app-root {
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
67
src/components/BottomNav.vue
Normal file
67
src/components/BottomNav.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<nav class="bottom-nav">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
:class="['nav-btn', { active: modelValue === tab.id }]"
|
||||
@click="$emit('update:modelValue', tab.id)"
|
||||
>
|
||||
<span class="nav-icon">{{ tab.icon }}</span>
|
||||
<span class="nav-label">{{ tab.label }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({ modelValue: String })
|
||||
defineEmits(['update:modelValue'])
|
||||
|
||||
const tabs = [
|
||||
{ id: 'meal', icon: '📅', label: 'Pasti' },
|
||||
{ id: 'convert', icon: '⚖️', label: 'Converti' },
|
||||
{ id: 'shop', icon: '🛒', label: 'Spesa' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
height: var(--nav-height);
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
color: var(--color-muted);
|
||||
min-height: unset;
|
||||
padding: 0;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
</style>
|
||||
58
src/components/CheckboxItem.vue
Normal file
58
src/components/CheckboxItem.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<li class="checkbox-item" :class="{ checked: item.checked }">
|
||||
<label class="item-label">
|
||||
<input type="checkbox" :checked="item.checked" @change="$emit('toggle')" />
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
</label>
|
||||
<button class="btn-remove" @click="$emit('remove')">✕</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({ item: Object })
|
||||
defineEmits(['toggle', 'remove'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.item-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.checked .item-name {
|
||||
text-decoration: line-through;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background: none;
|
||||
color: var(--color-muted);
|
||||
min-height: unset;
|
||||
padding: 0 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
126
src/components/MealCard.vue
Normal file
126
src/components/MealCard.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="meal-card">
|
||||
<h2 class="day-name">{{ dayName }}</h2>
|
||||
|
||||
<div v-for="slot in slots" :key="slot.id" class="meal-slot">
|
||||
<h3 class="slot-label">{{ slot.label }}</h3>
|
||||
|
||||
<ul v-if="meals[slot.id].length" class="item-list">
|
||||
<li v-for="(item, idx) in meals[slot.id]" :key="idx" class="item-row">
|
||||
<span class="item-text">{{ item }}</span>
|
||||
<button class="btn-remove" @click="$emit('remove', slot.id, idx)">✕</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="input-row">
|
||||
<input
|
||||
v-model="inputs[slot.id]"
|
||||
type="text"
|
||||
:placeholder="`Aggiungi a ${slot.label.toLowerCase()}...`"
|
||||
@keyup.enter="submit(slot.id)"
|
||||
/>
|
||||
<button class="btn-add" @click="submit(slot.id)">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
dayName: String,
|
||||
meals: Object,
|
||||
})
|
||||
const emit = defineEmits(['add', 'remove'])
|
||||
|
||||
const slots = [
|
||||
{ id: 'colazione', label: 'Colazione' },
|
||||
{ id: 'pranzo', label: 'Pranzo' },
|
||||
{ id: 'cena', label: 'Cena' },
|
||||
]
|
||||
|
||||
const inputs = reactive({ colazione: '', pranzo: '', cena: '' })
|
||||
|
||||
function submit(slotId) {
|
||||
const t = inputs[slotId].trim()
|
||||
if (!t) return
|
||||
emit('add', slotId, t)
|
||||
inputs[slotId] = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.meal-card {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-primary);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.meal-slot {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.meal-slot:last-child { margin-bottom: 0; }
|
||||
|
||||
.slot-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
list-style: none;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-bg);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.item-text { font-size: 0.9rem; }
|
||||
|
||||
.btn-remove {
|
||||
background: none;
|
||||
color: var(--color-muted);
|
||||
min-height: unset;
|
||||
padding: 0 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: var(--color-primary-light);
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
min-width: 40px;
|
||||
flex-shrink: 0;
|
||||
min-height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
16
src/data/conversions.json
Normal file
16
src/data/conversions.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"pollo": { "forno": { "yield": 0.75 }, "padella": { "yield": 0.70 } },
|
||||
"manzo": { "forno": { "yield": 0.70 }, "padella": { "yield": 0.72 } },
|
||||
"maiale": { "forno": { "yield": 0.68 }, "padella": { "yield": 0.70 } },
|
||||
"salmone": { "forno": { "yield": 0.80 }, "padella": { "yield": 0.78 } },
|
||||
"tonno": { "forno": { "yield": 0.75 } },
|
||||
"uova": { "bollite": { "yield": 0.88 } },
|
||||
"riso": { "bollito": { "yield": 2.50 } },
|
||||
"pasta": { "bollita": { "yield": 2.20 } },
|
||||
"lenticchie": { "bollite": { "yield": 2.30 } },
|
||||
"zucchine": { "padella": { "yield": 0.80 }, "bollite": { "yield": 0.85 } },
|
||||
"carote": { "bollite": { "yield": 0.90 }, "forno": { "yield": 0.85 } },
|
||||
"patate": { "forno": { "yield": 0.75 }, "bollite": { "yield": 0.90 } },
|
||||
"spinaci": { "padella": { "yield": 0.35 }, "bolliti": { "yield": 0.30 } },
|
||||
"broccoli": { "bolliti": { "yield": 0.85 }, "forno": { "yield": 0.80 } }
|
||||
}
|
||||
169
src/pages/Converter.vue
Normal file
169
src/pages/Converter.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1 class="page-title">Conversione crudo / cotto</h1>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="query"
|
||||
type="text"
|
||||
placeholder="Cerca alimento (es. pollo)"
|
||||
@input="onSearch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul v-if="results.length && !selected" class="results-list">
|
||||
<li
|
||||
v-for="r in results"
|
||||
:key="r.key"
|
||||
class="result-item"
|
||||
@click="selectItem(r)"
|
||||
>
|
||||
{{ r.food }} — {{ r.method }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="selected" class="converter-panel">
|
||||
<div class="selected-label">
|
||||
{{ selected.food }} — {{ selected.method }}
|
||||
<button class="btn-link" @click="reset">cambia</button>
|
||||
</div>
|
||||
|
||||
<div class="direction-toggle">
|
||||
<button :class="['toggle-btn', { active: direction === 'rawToCooked' }]" @click="direction = 'rawToCooked'">crudo → cotto</button>
|
||||
<button :class="['toggle-btn', { active: direction === 'cookedToRaw' }]" @click="direction = 'cookedToRaw'">cotto → crudo</button>
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<input v-model.number="grams" type="number" min="0" placeholder="grammi" />
|
||||
<span class="unit">g</span>
|
||||
</div>
|
||||
|
||||
<div v-if="result !== null" class="result-box">
|
||||
<span class="result-value">{{ result }}</span>
|
||||
<span class="result-unit">g</span>
|
||||
<span class="result-label">{{ direction === 'rawToCooked' ? 'cotti' : 'crudi' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import db from '../data/conversions.json'
|
||||
import { rawToCooked, cookedToRaw } from '../utils/conversion.js'
|
||||
|
||||
const query = ref('')
|
||||
const results = ref([])
|
||||
const selected = ref(null)
|
||||
const direction = ref('rawToCooked')
|
||||
const grams = ref(null)
|
||||
|
||||
const result = computed(() => {
|
||||
if (!selected.value || !grams.value || grams.value <= 0) return null
|
||||
const { food, method } = selected.value
|
||||
const val = direction.value === 'rawToCooked'
|
||||
? rawToCooked(food, method, grams.value, db)
|
||||
: cookedToRaw(food, method, grams.value, db)
|
||||
return Math.round(val * 10) / 10
|
||||
})
|
||||
|
||||
function onSearch() {
|
||||
const q = query.value.toLowerCase().trim()
|
||||
if (!q) { results.value = []; return }
|
||||
const matches = []
|
||||
for (const food of Object.keys(db)) {
|
||||
if (food.includes(q)) {
|
||||
for (const method of Object.keys(db[food])) {
|
||||
matches.push({ key: `${food}-${method}`, food, method })
|
||||
}
|
||||
}
|
||||
}
|
||||
results.value = matches
|
||||
}
|
||||
|
||||
function selectItem(r) {
|
||||
selected.value = r
|
||||
query.value = `${r.food} — ${r.method}`
|
||||
results.value = []
|
||||
grams.value = null
|
||||
}
|
||||
|
||||
function reset() {
|
||||
selected.value = null
|
||||
query.value = ''
|
||||
results.value = []
|
||||
grams.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-box { margin-bottom: 12px; }
|
||||
|
||||
.results-list {
|
||||
list-style: none;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.result-item:last-child { border-bottom: none; }
|
||||
.result-item:active { background: var(--color-bg); }
|
||||
|
||||
.converter-panel { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.selected-label {
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
background: none;
|
||||
color: var(--color-primary);
|
||||
min-height: unset;
|
||||
padding: 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.direction-toggle { display: flex; gap: 8px; }
|
||||
|
||||
.toggle-btn {
|
||||
flex: 1;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.input-row { display: flex; align-items: center; gap: 8px; }
|
||||
.unit { font-size: 1rem; color: var(--color-muted); }
|
||||
|
||||
.result-box {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-value { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); }
|
||||
.result-unit { font-size: 1.2rem; color: var(--color-muted); margin: 0 4px; }
|
||||
.result-label { font-size: 1rem; color: var(--color-muted); }
|
||||
</style>
|
||||
45
src/pages/MealPlanner.vue
Normal file
45
src/pages/MealPlanner.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1 class="page-title">Pasti della settimana</h1>
|
||||
<MealCard
|
||||
v-for="day in days"
|
||||
:key="day.id"
|
||||
:day-name="day.label"
|
||||
:meals="meals[day.id]"
|
||||
@add="(slot, text) => addItem(day.id, slot, text)"
|
||||
@remove="(slot, idx) => removeItem(day.id, slot, idx)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue'
|
||||
import MealCard from '../components/MealCard.vue'
|
||||
import { save, load } from '../utils/storage.js'
|
||||
|
||||
const days = [
|
||||
{ id: 'lunedi', label: 'Lunedì' },
|
||||
{ id: 'martedi', label: 'Martedì' },
|
||||
{ id: 'mercoledi', label: 'Mercoledì' },
|
||||
{ id: 'giovedi', label: 'Giovedì' },
|
||||
{ id: 'venerdi', label: 'Venerdì' },
|
||||
{ id: 'sabato', label: 'Sabato' },
|
||||
{ id: 'domenica', label: 'Domenica' },
|
||||
]
|
||||
|
||||
const defaultMeals = () =>
|
||||
Object.fromEntries(days.map(d => [d.id, { colazione: [], pranzo: [], cena: [] }]))
|
||||
|
||||
const meals = reactive(load('meals', defaultMeals()))
|
||||
|
||||
watch(meals, () => save('meals', meals), { deep: true })
|
||||
|
||||
function addItem(day, slot, text) {
|
||||
const t = text.trim()
|
||||
if (t) meals[day][slot].push(t)
|
||||
}
|
||||
|
||||
function removeItem(day, slot, idx) {
|
||||
meals[day][slot].splice(idx, 1)
|
||||
}
|
||||
</script>
|
||||
96
src/pages/ShoppingList.vue
Normal file
96
src/pages/ShoppingList.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1 class="page-title">Lista della spesa</h1>
|
||||
|
||||
<div class="add-row">
|
||||
<input
|
||||
v-model="newItem"
|
||||
type="text"
|
||||
placeholder="Aggiungi elemento..."
|
||||
@keyup.enter="add"
|
||||
/>
|
||||
<button class="btn-add" @click="add">+</button>
|
||||
</div>
|
||||
|
||||
<ul v-if="items.length" class="shop-list">
|
||||
<CheckboxItem
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@toggle="toggle(item.id)"
|
||||
@remove="remove(item.id)"
|
||||
/>
|
||||
</ul>
|
||||
|
||||
<p v-else class="empty-msg">Nessun elemento nella lista.</p>
|
||||
|
||||
<button v-if="items.length" class="btn-clear" @click="clearAll">Svuota lista</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import CheckboxItem from '../components/CheckboxItem.vue'
|
||||
import { save, load } from '../utils/storage.js'
|
||||
|
||||
const items = ref(load('shopping', []))
|
||||
const newItem = ref('')
|
||||
|
||||
watch(items, () => save('shopping', items.value), { deep: true })
|
||||
|
||||
function add() {
|
||||
const t = newItem.value.trim()
|
||||
if (!t) return
|
||||
items.value.push({ id: Date.now(), name: t, checked: false })
|
||||
newItem.value = ''
|
||||
}
|
||||
|
||||
function toggle(id) {
|
||||
const item = items.value.find(i => i.id === id)
|
||||
if (item) item.checked = !item.checked
|
||||
}
|
||||
|
||||
function remove(id) {
|
||||
items.value = items.value.filter(i => i.id !== id)
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
if (confirm('Svuotare tutta la lista?')) items.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.add-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
min-width: 44px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shop-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
width: 100%;
|
||||
background: var(--color-danger);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
2
src/utils/conversion.js
Normal file
2
src/utils/conversion.js
Normal file
@@ -0,0 +1,2 @@
|
||||
export const rawToCooked = (food, method, raw, db) => raw * db[food][method].yield
|
||||
export const cookedToRaw = (food, method, cooked, db) => cooked / db[food][method].yield
|
||||
5
src/utils/storage.js
Normal file
5
src/utils/storage.js
Normal file
@@ -0,0 +1,5 @@
|
||||
export const save = (key, val) => localStorage.setItem(key, JSON.stringify(val))
|
||||
export const load = (key, def) => {
|
||||
const v = localStorage.getItem(key)
|
||||
return v ? JSON.parse(v) : def
|
||||
}
|
||||
Reference in New Issue
Block a user