class 2-5
This commit is contained in:
@@ -0,0 +1,433 @@
|
||||
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);
|
||||
Reference in New Issue
Block a user