feat: change to TS and add better preview
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
export const getInputById = (elementId: string): HTMLInputElement => {
|
||||
const el = document.getElementById(elementId) as HTMLInputElement;
|
||||
if (!el) {
|
||||
throw new Error(`Input Element id ${elementId} not found!`);
|
||||
}
|
||||
return el;
|
||||
};
|
||||
|
||||
export const getDivById = (elementId: string): HTMLElement => {
|
||||
const el = document.getElementById(elementId) as HTMLElement;
|
||||
if (!el) {
|
||||
throw new Error(`HTML Element id ${elementId} not found!`);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
export const getButtonById = (elementId: string): HTMLButtonElement => {
|
||||
const el = document.getElementById(elementId) as HTMLButtonElement;
|
||||
if (!el) {
|
||||
throw new Error(`HTML Button Element id ${elementId} not found!`);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
export const getButtonListByClassName = (name: string): Array<HTMLButtonElement> => {
|
||||
const el = document.getElementsByClassName(name);
|
||||
if (!el) {
|
||||
throw new Error(`HTML Button List Elements not found for class ${name}!`);
|
||||
}
|
||||
return Array.from(el) as Array<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
export const showFoodPreview = (show: boolean) => {
|
||||
getDivById('food-preview').classList = `add-food-form-item ${show ? 'display-block' : 'display-none'}`;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { FoodItem } from "./types";
|
||||
|
||||
export const foodDatabase: FoodItem[] = [
|
||||
{ name: 'Frutas - Abacate', info: { calories: 96, protein: 1.2, fat: 8.4, carbs: 6, fiber: 6.3 } },
|
||||
{ name: 'Frutas - Abacaxi', info: { calories: 48, protein: 0.9, fat: 0.1, carbs: 12.3, fiber: 1 } },
|
||||
{ name: 'Frutas - Banana Nanica', info: { calories: 92, protein: 1.4, fat: 0.1, carbs: 23.8, fiber: 1.9 } },
|
||||
{ name: 'Frutas - Laranja', info: { calories: 37, protein: 1, fat: 0.1, carbs: 8.9, fiber: 0.8 } },
|
||||
{ name: 'Frutas - Maçã', info: { calories: 56, protein: 0.3, fat: 0, carbs: 15.2, fiber: 1.3 } },
|
||||
{ name: 'Frutas - Manga Palmer', info: { calories: 72, protein: 0.4, fat: 0.2, carbs: 19.4, fiber: 1.6 } },
|
||||
{ name: 'Frutas - Mamão', info: { calories: 40, protein: 0.5, fat: 0.1, carbs: 10.4, fiber: 1 } },
|
||||
{ name: 'Frutas - Melancia', info: { calories: 33, protein: 0.9, fat: 0, carbs: 8.1, fiber: 0.1 } },
|
||||
{ name: 'Frutas - Melão', info: { calories: 29, protein: 0.7, fat: 0, carbs: 7.5, fiber: 0.3 } },
|
||||
{ name: 'Frutas - Uva', info: { calories: 53, protein: 0.7, fat: 0.2, carbs: 13.6, fiber: 0.9 } },
|
||||
|
||||
{ name: 'Vegetais - Agrião', info: { calories: 17, protein: 2.7, fat: 0.2, carbs: 2.3, fiber: 2.1 } },
|
||||
{ name: 'Vegetais - Brócolis (cozido)', info: { calories: 25, protein: 2.1, fat: 0.5, carbs: 4.4, fiber: 3.4 } },
|
||||
{ name: 'Vegetais - Cenoura (cozida)', info: { calories: 30, protein: 0.8, fat: 0.2, carbs: 6.7, fiber: 2.6 } },
|
||||
{ name: 'Vegetais - Couve flor (cozida)', info: { calories: 19, protein: 1.2, fat: 0.3, carbs: 3.9, fiber: 2.1 } },
|
||||
{ name: 'Vegetais - Ervilha (cozida)', info: { calories: 88, protein: 7.5, fat: 0.5, carbs: 14.2, fiber: 9.7 } },
|
||||
{ name: 'Vegetais - Espinafre', info: { calories: 16, protein: 2, fat: 0.2, carbs: 2.6, fiber: 2.1 } },
|
||||
{ name: 'Vegetais - Feijão preto (cozido)', info: { calories: 77, protein: 4.5, fat: 0.5, carbs: 14, fiber: 8.4 } },
|
||||
{ name: 'Vegetais - Lentilha (cozida)', info: { calories: 93, protein: 6.3, fat: 0.5, carbs: 16.3, fiber: 7.9 } },
|
||||
{ name: 'Vegetais - Mandioca (cozida)', info: { calories: 125, protein: 0.6, fat: 0.3, carbs: 30.1, fiber: 1.6 } },
|
||||
{ name: 'Vegetais - Pepino', info: { calories: 10, protein: 0.9, fat: 0, carbs: 2, fiber: 1.1 } },
|
||||
{ name: 'Vegetais - Rúcula', info: { calories: 13, protein: 1.8, fat: 0.1, carbs: 2.2, fiber: 1.7 } },
|
||||
{ name: 'Vegetais - Spirulina', info: { calories: 290, protein: 57.5, fat: 23.9, carbs: 7.7, fiber: 0 } },
|
||||
{ name: 'Vegetais - Tomate', info: { calories: 15, protein: 1.1, fat: 0.2, carbs: 3.1, fiber: 1.2 } },
|
||||
|
||||
{ name: 'Carboidratos - Batata doce (assada)', info: { calories: 90, protein: 2.0, fat: 0.1, carbs: 20.7, fiber: 3.3 } },
|
||||
{ name: 'Carboidratos - Batata doce (cozida)', info: { calories: 77, protein: 0.6, fat: 0.1, carbs: 18.4, fiber: 2.2 } },
|
||||
{ name: 'Carboidratos - Batata doce (crua)', info: { calories: 118, protein: 1.3, fat: 0.1, carbs: 28.2, fiber: 2.6 } },
|
||||
{ name: 'Carboidratos - Batata inglesa (assada)', info: { calories: 94, protein: 2.1, fat: 0.1, carbs: 21.8, fiber: 2.1 } },
|
||||
{ name: 'Carboidratos - Batata inglesa (cozida)', info: { calories: 52, protein: 1.2, fat: 0, carbs: 11.9, fiber: 1.3 } },
|
||||
{ name: 'Carboidratos - Batata inglesa (crua)', info: { calories: 64, protein: 1.8, fat: 0, carbs: 14.7, fiber: 1.2 } },
|
||||
{ name: 'Carboidratos - Pão Francês', info: { calories: 300, protein: 8, fat: 3.1, carbs: 58.6, fiber: 2.3 } },
|
||||
{ name: 'Carboidrados - Polenta (cozida)', info: { calories: 192, protein: 4.8, fat: 1.2, carbs: 40, fiber: 3.8 } },
|
||||
|
||||
{ name: 'Proteínas - Atum Sólido (natural)', info: { calories: 135, protein: 28.3, fat: 2.7, carbs: 0, fiber: 0 } },
|
||||
{ name: 'Proteínas - Filé de Tilápia (cozido)', info: { calories: 128, protein: 26.1, fat: 2.6, carbs: 0, fiber: 0 } },
|
||||
{ name: 'Proteínas - Ovo inteiro (cozido)', info: { calories: 146, protein: 13.3, fat: 9.5, carbs: 0.6, fiber: 0 } },
|
||||
{ name: 'Proteínas - Ovo clara (cozido)', info: { calories: 59, protein: 13.4, fat: 0.1, carbs: 0, fiber: 0 } },
|
||||
{ name: 'Proteínas - PTS (crua)', info: { calories: 288, protein: 52, fat: 0, carbs: 20, fiber: 14 } },
|
||||
{ name: 'Proteínas - Patinho moído (grelhado)', info: { calories: 219, protein: 35.9, fat: 7.3, carbs: 0, fiber: 0 } },
|
||||
{ name: 'Proteínas - Soja em Pó Growth', info: { calories: 400, protein: 86.7, fat: 5, carbs: 3.3, fiber: 0 } },
|
||||
{ name: 'Proteínas - Sobrecoxa s/pele (cozida)', info: { calories: 245, protein: 24.9, fat: 15.4, carbs: 0, fiber: 0 } },
|
||||
{ name: 'Proteínas - Tofu', info: { calories: 65, protein: 6.5, fat: 4, carbs: 2, fiber: 0.75 } },
|
||||
|
||||
{ name: 'Grãos - Arroz integral (cozido)', info: { calories: 130, protein: 2.7, fat: 0.3, carbs: 28, fiber: 0.4 } },
|
||||
{ name: 'Grãos - Aveia', info: { calories: 394, protein: 13.9, fat: 8.5, carbs: 66.6, fiber: 9.1 } },
|
||||
{ name: 'Grãos - Grão de Bico (cozido)', info: { calories: 180, protein: 9.5, fat: 3, carbs: 30, fiber: 8.6 } },
|
||||
{ name: 'Grãos - Pão integral de forma', info: { calories: 253, protein: 9.4, fat: 3.7, carbs: 49.9, fiber: 6.9 } },
|
||||
{ name: 'Grãos - Pipoca c/óleo', info: { calories: 448, protein: 9.9, fat: 15.9, carbs: 70.3, fiber: 14.3 } },
|
||||
{ name: 'Grãos - Pipoca s/óleo', info: { calories: 178, protein: 3.3, fat: 7.2, carbs: 25, fiber: 4.3 } },
|
||||
{ name: 'Grãos - Quinoa (cozida)', info: { calories: 158, protein: 5.55, fat: 2.5, carbs: 29, fiber: 2.5 } },
|
||||
|
||||
{ name: 'Castanhas - Amêndoas', info: { calories: 581, protein: 18.6, fat: 47.3, carbs: 29.5, fiber: 11.6 } },
|
||||
{ name: 'Castanhas - Amendoin natural', info: { calories: 611, protein: 26, fat: 49, carbs: 16, fiber: 8.5 } },
|
||||
{ name: 'Castanhas - Castanha de Caju', info: { calories: 570, protein: 18.5, fat: 46.3, carbs: 29.1, fiber: 3.7 } },
|
||||
{ name: 'Castanhas - Castanha do Pará', info: { calories: 643, protein: 14.5, fat: 63.5, carbs: 15.1, fiber: 7.9 } },
|
||||
{ name: 'Sementes - Semente de Chia', info: { calories: 490, protein: 15.6, fat: 30.7, carbs: 43.8, fiber: 37.7 } },
|
||||
{ name: 'Sementes - Semente de Linhaça', info: { calories: 495, protein: 14.1, fat: 32.3, carbs: 43.3, fiber: 33.5 } },
|
||||
{ name: 'Sementes - Semente de Gergelim', info: { calories: 584, protein: 21.2, fat: 50.4, carbs: 21.6, fiber: 11.9 } },
|
||||
|
||||
{ name: 'Lanches - Barra de Proteína Vegana Growth', info: { calories: 400, protein: 25, fat: 22, carbs: 25, fiber: 8 } },
|
||||
{ name: 'Lanches - Goiabada', info: { calories: 320, protein: 0, fat: 0, carbs: 80, fiber: 4.5 } },
|
||||
{ name: 'Lanches - Mel Silvestre', info: { calories: 230, protein: 0, fat: 0, carbs: 65, fiber: 0 } },
|
||||
{ name: 'Lanches - Melado', info: { calories: 297, protein: 0, fat: 0, carbs: 76.6, fiber: 0 } },
|
||||
{ name: 'Lanches - Pasta de Amendoim Growth', info: { calories: 544, protein: 27, fat: 33, carbs: 20, fiber: 8 } },
|
||||
{ name: 'Lanches - Goma de Tapioca', info: { calories: 226, protein: 0, fat: 0, carbs: 57, fiber: 0 } },
|
||||
{ name: 'Lanches - 70% Nibs Garoto', info: { calories: 544, protein: 8.4, fat: 40, carbs: 34, fiber: 0 } }
|
||||
];
|
||||
+378
@@ -0,0 +1,378 @@
|
||||
import { foodDatabase } from './foodDatabase.js';
|
||||
import { getButtonById, getButtonListByClassName, getDivById, getInputById, showFoodPreview } from './HtmlUtil.ts';
|
||||
import { FoodItem, FoodStorage } from './types.js';
|
||||
|
||||
// App state
|
||||
let selectedDate = new Date().toISOString().split('T')[0];
|
||||
let currentViewDate = new Date();
|
||||
|
||||
// Initialize the app
|
||||
const init = () => {
|
||||
populateFoodSelect();
|
||||
updateCurrentDate();
|
||||
loadDayData(selectedDate);
|
||||
renderCalendar();
|
||||
addEvents();
|
||||
}
|
||||
|
||||
const getFoodProportion = (grams: number, foodData: FoodItem): FoodItem => {
|
||||
const multiplier = grams / 100; // Database values are per 100g
|
||||
return {
|
||||
...foodData,
|
||||
info: {
|
||||
calories: Math.round(foodData.info.calories * multiplier),
|
||||
protein: Math.round(foodData.info.protein * multiplier * 10) / 10,
|
||||
fat: Math.round(foodData.info.fat * multiplier * 10) / 10,
|
||||
carbs: Math.round(foodData.info.carbs * multiplier * 10) / 10,
|
||||
fiber: Math.round(foodData.info.fiber * multiplier * 10) / 10
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const getFoodItemByName = (foodName: string): FoodItem => {
|
||||
const foodDataSearch: FoodItem[] = foodDatabase.filter(f => f.name === foodName);
|
||||
if (foodDataSearch.length === 0) {
|
||||
throw new Error(`Food not found for name ${name}`);
|
||||
}
|
||||
return foodDataSearch[0];
|
||||
}
|
||||
|
||||
const previewCalories = () => {
|
||||
const foodSelect = getInputById('foodSelect');
|
||||
const gramAmount = getInputById('gramAmount');
|
||||
|
||||
if (!foodSelect.value) {
|
||||
showFoodPreview(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let grams = 100;
|
||||
if (gramAmount && gramAmount.value && parseFloat(gramAmount.value) > 0) {
|
||||
grams = parseFloat(gramAmount.value);
|
||||
}
|
||||
|
||||
const foodData: FoodItem = getFoodItemByName(foodSelect.value);
|
||||
const proportion = getFoodProportion(grams, foodData);
|
||||
|
||||
getDivById('calorieValuePreview').textContent = proportion.info.calories.toString();
|
||||
getDivById('proteinValuePreview').textContent = (Math.round(proportion.info.protein * 10) / 10).toString ();
|
||||
getDivById('fatValuePreview').textContent = (Math.round(proportion.info.fat * 10) / 10).toString ();
|
||||
getDivById('carboValuePreview').textContent = (Math.round(proportion.info.carbs * 10) / 10).toString ();
|
||||
getDivById('fiberValuePreview').textContent = (Math.round(proportion.info.fiber * 10) / 10).toString ();
|
||||
|
||||
showFoodPreview(true);
|
||||
}
|
||||
|
||||
const addEvents = () => {
|
||||
getInputById('foodSelect').addEventListener('change', () => {
|
||||
previewCalories();
|
||||
});
|
||||
|
||||
getInputById('gramAmount').addEventListener('change', () => {
|
||||
previewCalories();
|
||||
});
|
||||
|
||||
getButtonById('add-food-btn').addEventListener('click', () => {
|
||||
addFood();
|
||||
});
|
||||
|
||||
getButtonById('next-month-btn').addEventListener('click', () => {
|
||||
nextMonth();
|
||||
});
|
||||
|
||||
getButtonById('previous-month-btn').addEventListener('click', () => {
|
||||
previousMonth();
|
||||
});
|
||||
}
|
||||
|
||||
const addDeleteEvents = () => {
|
||||
const elements = getButtonListByClassName('delete-food-entry');
|
||||
Array.from(elements).forEach((el: HTMLButtonElement) => {
|
||||
el.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const row = target.closest('tr');
|
||||
const entryId = row?.querySelector('.hidden-column')?.textContent;
|
||||
const entryIdNumber = entryId ? parseInt(entryId) : 0;
|
||||
if (entryIdNumber) {
|
||||
deleteEntry(selectedDate, entryIdNumber);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Populate food select dropdown
|
||||
const populateFoodSelect = () => {
|
||||
const select = getInputById('foodSelect');
|
||||
select.innerHTML = '<option value="">Select a food item...</option>';
|
||||
|
||||
const sortedFoods = foodDatabase.sort((f1, f2) => f1.name.localeCompare(f2.name));
|
||||
sortedFoods.forEach((food: FoodItem) => {
|
||||
const option = document.createElement('option') as HTMLOptionElement;
|
||||
option.value = food.name;
|
||||
option.textContent = food.name;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
// Update current date display
|
||||
const updateCurrentDate = () => {
|
||||
const date = new Date(selectedDate);
|
||||
getDivById('currentDate').textContent = date.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
// Add food to the log
|
||||
const addFood = () => {
|
||||
const foodSelect = getInputById('foodSelect');
|
||||
const gramAmount = getInputById('gramAmount');
|
||||
|
||||
if (!foodSelect.value || !gramAmount.value) {
|
||||
alert('Please select a food item and enter amount');
|
||||
return;
|
||||
}
|
||||
|
||||
const grams: number = parseFloat(gramAmount.value);
|
||||
const foodData: FoodItem = getFoodItemByName(foodSelect.value);
|
||||
|
||||
// Calculate nutrition for the amount
|
||||
const proportion: FoodItem = getFoodProportion(grams, foodData);
|
||||
const entry: FoodStorage = {
|
||||
id: Date.now(),
|
||||
name: foodSelect.value,
|
||||
grams: grams,
|
||||
calories: proportion.info.calories,
|
||||
protein: proportion.info.protein,
|
||||
fat: proportion.info.fat,
|
||||
carbs: proportion.info.carbs,
|
||||
fiber: proportion.info.fiber,
|
||||
time: new Date().toLocaleTimeString('en-US', {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
};
|
||||
|
||||
// Save to localStorage
|
||||
const dayData = getDayData(selectedDate);
|
||||
dayData.push(entry);
|
||||
saveDayData(selectedDate, dayData);
|
||||
|
||||
// Update display
|
||||
loadDayData(selectedDate);
|
||||
renderCalendar();
|
||||
|
||||
// Reset form
|
||||
foodSelect.value = '';
|
||||
gramAmount.value = '100';
|
||||
showFoodPreview(false);
|
||||
}
|
||||
|
||||
// Get day data from localStorage
|
||||
const getDayData = (date: string): FoodStorage[] => {
|
||||
const key = `calories_${date}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (!saved) {
|
||||
return [];
|
||||
}
|
||||
return JSON.parse(saved);
|
||||
}
|
||||
|
||||
// Save day data to localStorage
|
||||
const saveDayData = (date: string, data: FoodStorage[]) => {
|
||||
const key = `calories_${date}`;
|
||||
localStorage.setItem(key, JSON.stringify(data));
|
||||
}
|
||||
|
||||
// Load and display day data
|
||||
const loadDayData = (date: string) => {
|
||||
const dayData = getDayData(date);
|
||||
|
||||
// Update counters
|
||||
let totalCalories = 0;
|
||||
let totalProtein = 0;
|
||||
let totalFat = 0;
|
||||
let totalCarbs = 0;
|
||||
let totalFiber = 0;
|
||||
|
||||
dayData.forEach(entry => {
|
||||
totalCalories += entry.calories;
|
||||
totalProtein += entry.protein;
|
||||
totalFat += entry.fat;
|
||||
totalCarbs += entry.carbs;
|
||||
totalFiber += entry.fiber;
|
||||
});
|
||||
|
||||
getDivById('caloriesCounter').textContent = totalCalories.toString();
|
||||
getDivById('proteinValue').textContent = (Math.round(totalProtein * 10) / 10).toString ();
|
||||
getDivById('fatValue').textContent = (Math.round(totalFat * 10) / 10).toString ();
|
||||
getDivById('carboValue').textContent = (Math.round(totalCarbs * 10) / 10).toString ();
|
||||
getDivById('fiberValue').textContent = (Math.round(totalFiber * 10) / 10).toString ();
|
||||
|
||||
// Update table
|
||||
const tbody = document.getElementById('foodTableBody');
|
||||
if (!tbody) {
|
||||
throw Error('Unable to create row tables!');
|
||||
}
|
||||
tbody.innerHTML = '';
|
||||
|
||||
dayData.forEach(entry => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td class="hidden-column">${entry.id}</td>
|
||||
<td>${entry.time}</td>
|
||||
<td>${entry.name}</td>
|
||||
<td>${entry.grams}</td>
|
||||
<td>${entry.calories}</td>
|
||||
<td>${entry.protein}</td>
|
||||
<td>${entry.fat}</td>
|
||||
<td>${entry.carbs}</td>
|
||||
<td>${entry.fiber}</td>
|
||||
<td><button class="delete-btn delete-food-entry">Delete</button></td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
addDeleteEvents();
|
||||
}
|
||||
|
||||
// Delete an entry
|
||||
const deleteEntry = (date: string, entryId: number) => {
|
||||
if (confirm('Are you sure you want to delete this entry?')) {
|
||||
let dayData: FoodStorage[] = getDayData(date);
|
||||
dayData = dayData.filter(entry => entry.id !== entryId);
|
||||
saveDayData(date, dayData);
|
||||
loadDayData(selectedDate);
|
||||
renderCalendar();
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar functions
|
||||
const previousMonth = () => {
|
||||
currentViewDate.setMonth(currentViewDate.getMonth() - 1);
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
const nextMonth = () => {
|
||||
currentViewDate.setMonth(currentViewDate.getMonth() + 1);
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
const selectDate = (date: string) => {
|
||||
selectedDate = date;
|
||||
updateCurrentDate();
|
||||
loadDayData(selectedDate);
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
const renderCalendar = () => {
|
||||
const year = currentViewDate.getFullYear();
|
||||
const month = currentViewDate.getMonth();
|
||||
|
||||
// Update calendar title
|
||||
const monthNames = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December'
|
||||
];
|
||||
getDivById('calendarTitle').textContent = `${monthNames[month]} ${year}`;
|
||||
|
||||
// Clear calendar
|
||||
const grid = getDivById('calendarGrid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
// Add day headers
|
||||
const dayHeaders = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
dayHeaders.forEach(day => {
|
||||
const header = document.createElement('div');
|
||||
header.className = 'calendar-day-header';
|
||||
header.textContent = day;
|
||||
grid.appendChild(header);
|
||||
});
|
||||
|
||||
// Get first day of month and number of days
|
||||
const firstDay = new Date(year, month, 1);
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
const daysInMonth = lastDay.getDate();
|
||||
const startingDayOfWeek = firstDay.getDay();
|
||||
|
||||
// Add empty cells for previous month
|
||||
const prevMonth = new Date(year, month, 0);
|
||||
const daysInPrevMonth = prevMonth.getDate();
|
||||
|
||||
for (let i = startingDayOfWeek - 1; i >= 0; i--) {
|
||||
const day = daysInPrevMonth - i;
|
||||
const dayElement = createDayElement(day, true, year, month - 1);
|
||||
grid.appendChild(dayElement);
|
||||
}
|
||||
|
||||
// Add days of current month
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const dayElement = createDayElement(day, false, year, month);
|
||||
grid.appendChild(dayElement);
|
||||
}
|
||||
|
||||
// Add days from next month to fill the grid
|
||||
const totalCells = grid.children.length - 7;
|
||||
const remainingCells = 42 - totalCells;
|
||||
|
||||
for (let day = 1; day <= remainingCells; day++) {
|
||||
const dayElement = createDayElement(day, true, year, month + 1);
|
||||
grid.appendChild(dayElement);
|
||||
}
|
||||
}
|
||||
|
||||
function createDayElement(day: number, isOtherMonth: boolean, year: number, month: number) {
|
||||
const dayElement = document.createElement('div') as HTMLElement;
|
||||
dayElement.className = 'calendar-day';
|
||||
|
||||
const dayDate = new Date(year, month, day);
|
||||
const dateString = dayDate.toISOString().split('T')[0];
|
||||
|
||||
if (isOtherMonth) {
|
||||
dayElement.classList.add('other-month');
|
||||
} else {
|
||||
dayElement.onclick = () => selectDate(dateString);
|
||||
}
|
||||
|
||||
// Check if this is today
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
if (!isOtherMonth && dateString === today) {
|
||||
dayElement.classList.add('today');
|
||||
}
|
||||
|
||||
// Check if this is selected date
|
||||
if (!isOtherMonth && dateString === selectedDate) {
|
||||
dayElement.classList.add('selected');
|
||||
}
|
||||
|
||||
// Check if this day has data
|
||||
const dayData = getDayData(dateString);
|
||||
if (dayData.length > 0) {
|
||||
dayElement.classList.add('has-data');
|
||||
const totalCalories = dayData.reduce((sum, entry) => sum + entry.calories, 0);
|
||||
|
||||
dayElement.innerHTML = `
|
||||
<div>${day}</div>
|
||||
<div class="day-calories">${totalCalories} cal</div>
|
||||
`;
|
||||
} else {
|
||||
dayElement.textContent = day.toString();
|
||||
}
|
||||
|
||||
return dayElement;
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
@@ -0,0 +1,16 @@
|
||||
export type FoodItem = {
|
||||
name: string;
|
||||
info: { calories: number, protein: number, fat: number, carbs: number, fiber: number }
|
||||
}
|
||||
|
||||
export type FoodStorage = {
|
||||
id: number;
|
||||
name: string;
|
||||
grams: number;
|
||||
calories: number;
|
||||
protein: number;
|
||||
fat: number;
|
||||
carbs: number;
|
||||
fiber: number;
|
||||
time: string;
|
||||
};
|
||||
Reference in New Issue
Block a user