83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
class meal_list extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
const now = new Date();
|
|
const hours = now.getHours();
|
|
|
|
this.date = new Date()
|
|
.toISOString()
|
|
.slice(0, 10)
|
|
.replace(/-/g, "");
|
|
|
|
switch (true) {
|
|
case hours < 8:
|
|
this.selectedType = 1;
|
|
break;
|
|
case hours < 14:
|
|
this.selectedType = 2;
|
|
break;
|
|
default:
|
|
this.selectedType = 3;
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
async get_meal(date, type) {
|
|
try {
|
|
console.log(`/api/meal?date=${date}&type=${type}`)
|
|
let response = await fetch(`/api/meal?date=${date}&type=${type}`);
|
|
|
|
if (!response.ok) throw new Error("Failed to fetch meal data");
|
|
|
|
let data = await response.json();
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error("❌ API Error:", error);
|
|
return ["식단 정보를 불러올 수 없습니다."];
|
|
}
|
|
}
|
|
|
|
async render() {
|
|
const header = document.createElement("header");
|
|
|
|
const select = document.createElement("select");
|
|
const types = ["아침", "점심", "저녁"];
|
|
types.forEach((type, index) => {
|
|
const option = document.createElement("option");
|
|
option.textContent = types[index];
|
|
option.value = index + 1;
|
|
if (index + 1 === this.selectedType) option.selected = true;
|
|
select.appendChild(option);
|
|
});
|
|
select.addEventListener("change", async () => {
|
|
this.selectedType = Number(select.value);
|
|
await this.render();
|
|
});
|
|
|
|
const res = await this.get_meal(this.date, this.selectedType);
|
|
|
|
const ul = document.createElement("ul");
|
|
res.meal_list.forEach((meal) => {
|
|
const li = document.createElement("li");
|
|
li.textContent = meal;
|
|
ul.appendChild(li);
|
|
});
|
|
|
|
const kcal = document.createElement("p");
|
|
kcal.textContent = res.kcal;
|
|
|
|
header.appendChild(select);
|
|
header.appendChild(kcal);
|
|
|
|
this.innerHTML = "";
|
|
this.append(header);
|
|
this.appendChild(ul);
|
|
}
|
|
}
|
|
|
|
customElements.define("meal-list", meal_list); |