434 lines
13 KiB
JavaScript
434 lines
13 KiB
JavaScript
class meal_list extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
const now = new Date();
|
|
const hours = now.getHours();
|
|
|
|
this.date = new Date("2025-03-10")
|
|
.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 {
|
|
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);
|
|
|
|
class task_list extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
async render() {
|
|
const ul = document.createElement("ul");
|
|
|
|
let data = await fetch("/api/tasklist");
|
|
data = await data.json();
|
|
|
|
for (let i of data) {
|
|
const date = new Date(i.end.date);
|
|
date.setDate(date.getDate() - 1);
|
|
|
|
const li = document.createElement("li");
|
|
|
|
const name = document.createElement("h2");
|
|
name.textContent = i.summary;
|
|
|
|
const box = document.createElement("div");
|
|
const cal = document.createElement("img");
|
|
cal.src = "/public/images/calendar.png";
|
|
const deadline = document.createElement("p");
|
|
deadline.textContent = date.toISOString().slice(0, 10);
|
|
|
|
box.append(cal, deadline);
|
|
|
|
li.append(name, box);
|
|
|
|
li.addEventListener("click", () => {
|
|
const modal = document.createElement("task-edit");
|
|
modal.setAttribute("event_id", i.id);
|
|
document.body.appendChild(modal);
|
|
});
|
|
|
|
ul.appendChild(li);
|
|
}
|
|
this.innerHTML = "";
|
|
this.appendChild(ul);
|
|
}
|
|
}
|
|
|
|
customElements.define("task-list", task_list);
|
|
|
|
class edit_task extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
async getData() {
|
|
const response = await fetch(
|
|
`/api/gettask?event_id=${this.getAttribute("event_id")}`
|
|
);
|
|
|
|
let data = response.json();
|
|
|
|
return data;
|
|
}
|
|
|
|
async render() {
|
|
this.className = "task_modal";
|
|
|
|
const data = await this.getData();
|
|
|
|
// 📌 닫기 버튼
|
|
const closeBtn = document.createElement("span");
|
|
closeBtn.classList.add("close");
|
|
closeBtn.innerHTML = "✖";
|
|
closeBtn.addEventListener("click", () => this.remove());
|
|
|
|
// 📌 제목
|
|
const title = document.createElement("div");
|
|
title.classList.add("title");
|
|
title.textContent = "Edit Task";
|
|
|
|
// 📌 Name 입력란
|
|
const nameGroup = this.createInputGroup(
|
|
"Name",
|
|
"text",
|
|
"name",
|
|
data.summary
|
|
);
|
|
|
|
// 📌 Date 입력란 (시작~종료)
|
|
const dateGroup = document.createElement("div");
|
|
dateGroup.classList.add("input-group");
|
|
const dateLabel = document.createElement("label");
|
|
dateLabel.textContent = "Date";
|
|
const dateContainer = document.createElement("div");
|
|
dateContainer.classList.add("date-group");
|
|
const startDate = this.createInput(
|
|
"date",
|
|
"start-date",
|
|
data.start.date
|
|
);
|
|
const tilde = document.createElement("span");
|
|
tilde.textContent = "~";
|
|
const endDate = this.createInput("date", "end-date", data.end.date);
|
|
dateContainer.append(startDate, tilde, endDate);
|
|
dateGroup.append(dateLabel, dateContainer);
|
|
|
|
// 📌 Description 입력란
|
|
const descGroup = this.createInputGroup(
|
|
"Desc",
|
|
"textarea",
|
|
"desc",
|
|
data.description
|
|
);
|
|
|
|
// 📌 버튼 컨테이너
|
|
const buttonContainer = document.createElement("div");
|
|
buttonContainer.classList.add("buttons");
|
|
|
|
const cancelBtn = document.createElement("button");
|
|
cancelBtn.classList.add("cancel");
|
|
cancelBtn.textContent = "Cancel";
|
|
cancelBtn.addEventListener("click", () => this.remove());
|
|
|
|
const saveBtn = document.createElement("button");
|
|
saveBtn.classList.add("save");
|
|
saveBtn.textContent = "Save";
|
|
saveBtn.addEventListener("click", async () => await this.saveTask());
|
|
|
|
buttonContainer.append(cancelBtn, saveBtn);
|
|
|
|
this.innerHTML = "";
|
|
this.append(
|
|
closeBtn,
|
|
title,
|
|
nameGroup,
|
|
dateGroup,
|
|
descGroup,
|
|
buttonContainer
|
|
);
|
|
}
|
|
|
|
createInputGroup(labelText, inputType, id, default_value) {
|
|
const group = document.createElement("div");
|
|
group.classList.add("input-group");
|
|
|
|
const label = document.createElement("label");
|
|
label.textContent = labelText;
|
|
|
|
let input;
|
|
if (inputType === "textarea") {
|
|
input = document.createElement("textarea");
|
|
input.rows = "4";
|
|
} else {
|
|
input = document.createElement("input");
|
|
input.type = inputType;
|
|
}
|
|
input.value = default_value;
|
|
input.placeholder = default_value;
|
|
input.id = id;
|
|
|
|
group.append(label, input);
|
|
return group;
|
|
}
|
|
|
|
createInput(type, id, default_value) {
|
|
const input = document.createElement("input");
|
|
input.type = type;
|
|
input.id = id;
|
|
input.value = default_value;
|
|
input.placeholder = default_value;
|
|
return input;
|
|
}
|
|
|
|
async saveTask() {
|
|
const name = document.getElementById("name").value;
|
|
const startDate = document.getElementById("start-date").value;
|
|
const endDate = document.getElementById("end-date").value;
|
|
const desc = document.getElementById("desc").value;
|
|
|
|
let response = await fetch("/api/edittask", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
event_id: this.getAttribute("event_id"),
|
|
data: {
|
|
end: { date: endDate },
|
|
start: { date: startDate },
|
|
summary: name,
|
|
description: desc,
|
|
},
|
|
}),
|
|
});
|
|
response = await response.json();
|
|
console.log(response);
|
|
|
|
const taskListComponent = document.querySelector("task-list");
|
|
if (taskListComponent) {
|
|
taskListComponent.render();
|
|
}
|
|
|
|
const targetIframe = document.getElementById("calendar_iframe");
|
|
if (targetIframe) {
|
|
targetIframe.src = targetIframe.src; // ✅ iframe 새로고침
|
|
}
|
|
|
|
this.remove();
|
|
}
|
|
}
|
|
|
|
customElements.define("task-edit", edit_task);
|
|
|
|
class create_task extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
async render() {
|
|
this.className = "task_modal";
|
|
|
|
// 📌 닫기 버튼
|
|
const closeBtn = document.createElement("span");
|
|
closeBtn.classList.add("close");
|
|
closeBtn.innerHTML = "✖";
|
|
closeBtn.addEventListener("click", () => this.remove());
|
|
|
|
// 📌 제목
|
|
const title = document.createElement("div");
|
|
title.classList.add("title");
|
|
title.textContent = "Create Task";
|
|
|
|
// 📌 Name 입력란
|
|
const nameGroup = this.createInputGroup("Name", "text", "name");
|
|
|
|
// 📌 Date 입력란 (시작~종료)
|
|
const dateGroup = document.createElement("div");
|
|
dateGroup.classList.add("input-group");
|
|
const dateLabel = document.createElement("label");
|
|
dateLabel.textContent = "Date";
|
|
const dateContainer = document.createElement("div");
|
|
dateContainer.classList.add("date-group");
|
|
const startDate = this.createInput("date", "start-date");
|
|
const tilde = document.createElement("span");
|
|
tilde.textContent = "~";
|
|
const endDate = this.createInput("date", "end-date");
|
|
dateContainer.append(startDate, tilde, endDate);
|
|
dateGroup.append(dateLabel, dateContainer);
|
|
|
|
// 📌 Description 입력란
|
|
const descGroup = this.createInputGroup("Desc", "textarea", "desc");
|
|
|
|
// 📌 버튼 컨테이너
|
|
const buttonContainer = document.createElement("div");
|
|
buttonContainer.classList.add("buttons");
|
|
|
|
const cancelBtn = document.createElement("button");
|
|
cancelBtn.classList.add("cancel");
|
|
cancelBtn.textContent = "Cancel";
|
|
cancelBtn.addEventListener("click", () => this.remove());
|
|
|
|
const saveBtn = document.createElement("button");
|
|
saveBtn.classList.add("save");
|
|
saveBtn.textContent = "Save";
|
|
saveBtn.addEventListener("click", async () => await this.saveTask());
|
|
|
|
buttonContainer.append(cancelBtn, saveBtn);
|
|
|
|
this.innerHTML = "";
|
|
this.append(
|
|
closeBtn,
|
|
title,
|
|
nameGroup,
|
|
dateGroup,
|
|
descGroup,
|
|
buttonContainer
|
|
);
|
|
}
|
|
|
|
createInputGroup(labelText, inputType, id) {
|
|
const group = document.createElement("div");
|
|
group.classList.add("input-group");
|
|
|
|
const label = document.createElement("label");
|
|
label.textContent = labelText;
|
|
|
|
let input;
|
|
if (inputType === "textarea") {
|
|
input = document.createElement("textarea");
|
|
input.rows = "4";
|
|
} else {
|
|
input = document.createElement("input");
|
|
input.type = inputType;
|
|
}
|
|
input.id = id;
|
|
|
|
group.append(label, input);
|
|
return group;
|
|
}
|
|
|
|
createInput(type, id) {
|
|
const input = document.createElement("input");
|
|
input.type = type;
|
|
input.id = id;
|
|
return input;
|
|
}
|
|
|
|
async saveTask() {
|
|
const name = document.getElementById("name").value;
|
|
const startDate = document.getElementById("start-date").value;
|
|
const endDate = document.getElementById("end-date").value;
|
|
const desc = document.getElementById("desc").value;
|
|
|
|
let response = await fetch("/api/createtask", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
event_id: this.getAttribute("event_id"),
|
|
data: {
|
|
end: { date: endDate },
|
|
start: { date: startDate },
|
|
summary: name,
|
|
description: desc,
|
|
},
|
|
}),
|
|
});
|
|
response = await response.json();
|
|
console.log(response);
|
|
|
|
const taskListComponent = document.querySelector("task-list");
|
|
if (taskListComponent) {
|
|
taskListComponent.render();
|
|
}
|
|
|
|
const targetIframe = document.getElementById("calendar_iframe");
|
|
if (targetIframe) {
|
|
targetIframe.src = targetIframe.src; // ✅ iframe 새로고침
|
|
}
|
|
|
|
this.remove();
|
|
}
|
|
}
|
|
|
|
customElements.define("create-task", create_task);
|