seung6lee/dhi-class-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

class 2-5

Browse Source
This commit is contained in:
seung6lee
2026-03-04 21:41:09 +09:00
commit 7b11ba0a8d
15 changed files with 1809 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+175
View File
@@ -0,0 +1,175 @@
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
# Logs
logs
_.log
npm-debug.log_
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Caches
.cache
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
# Runtime data
pids
_.pid
_.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
# IntelliJ based IDEs
.idea
# Finder (MacOS) folder config
.DS_Store
.prettierrc
+4
View File
@@ -0,0 +1,4 @@
{
"tabWidth": 4,
"useTabs": false
}
README.md
+15
View File
@@ -0,0 +1,15 @@
# twofive
To install dependencies:
```bash
bun install
```
To run:
```bash
bun run server.js
```
This project was created using `bun init` in bun v1.0.26. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
bun.lockb
Executable
BIN
View File
Binary file not shown.
client_secret.json
+12
View File
@@ -0,0 +1,12 @@
{
"web": {
"client_id": "769538006975-q773s454k2l1r4q35vat4psbjfgg59pk.apps.googleusercontent.com",
"project_id": "g-cal-task-management25",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_secret": "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",
"redirect_uris": ["http://localhost:4000/callback"],
"javascript_origins": ["http://localhost"]
}
}
jsconfig.json
+22
View File
@@ -0,0 +1,22 @@
{
"compilerOptions": {
"lib": ["ESNext", "DOM"],
"target": "ESNext",
"module": "ESNext",
"moduleDetection": "force",
"jsx": "react-jsx",
"allowJs": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
/* Linting */
"skipLibCheck": true,
"strict": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true
}
}
package.json
+19
View File
@@ -0,0 +1,19 @@
{
"name": "twofive",
"module": "server.js",
"type": "module",
"devDependencies": {
"@types/bun": "latest",
"sass": "^1.85.1"
},
"peerDependencies": {
"typescript": "^5.0.0"
},
"dependencies": {
"express": "^4.21.2",
"open": "^10.1.0"
},
"scripts": {
"sass-watch": "sass --watch ./public/style.scss ./public/style.css"
}
}
public/images/calendar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 305 B

public/index.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Class 2-5</title>
<script src="public/script.js"></script>
<link rel="stylesheet" href="public/style.css" />
</head>
<body>
<header id="header">
<h1>Class 2-5</h1>
<ul>
<li><a href="https://classtwofive.notion.site/">Study</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Info</a></li>
</ul>
</header>
<main id="main">
<div class="box" id="calendar">
<!-- <h2 class="title">Calendar</h2> -->
<iframe
id="calendar_iframe"
src="https://calendar.google.com/calendar/embed?height=600&wkst=1&ctz=Asia%2FSeoul&showPrint=0&showTitle=0&showTz=0&src=OGVjZWRkYjQ2NTM1NWE1NWEyMDdhZjgwNDM5MzhiMTQ1MWYwY2ViZmM0ODU4ZDAxMTA2NmFlMGRiZjFkZTUwZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=NzI5ZjViZWE5YmE4M2ZmOWI4MmRkNzk3ZjE1MDg5YTA1MWZlODUwYTRkYTY2ZmNjMzkzNjgzNWU4OWUzZGU4OUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=YWI3ZjBlYWE4NmYwZDE5MWE3Y2RhYWIzMTcxMmQzZGMxN2Y4OGY1YzdhMmU1ZGY3NGVhNjFjNWIwMzNlZmJlN0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=a28uc291dGhfa29yZWEjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23A79B8E&color=%23E4C441&color=%23D50000&color=%234285F4"
></iframe>
</div>
<nav id="side">
<div class="box" id="task">
<h2 class="title">Task List</h2>
<task-list></task-list>
<span
id="add_task"
onclick="document.body.appendChild(document.createElement('create-task'))"
>+</span
>
</div>
<div class="box" id="info">
<!-- <h2 class="title">급식</h2> -->
<meal-list></meal-list>
</div>
</nav>
</main>
</body>
</html>
public/script.js
+433
View File
@@ -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);
public/style.css
+304
View File
@@ -0,0 +1,304 @@
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
font-family: "Fira Code", serif;
display: flex;
flex-direction: column;
gap: 10px;
background-color: rgb(246, 242, 237);
}
.box {
border-radius: 10px;
position: relative;
}
.title {
height: 30px;
width: 100%;
border-bottom: 2px solid black;
margin-bottom: 10px;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
}
#header {
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0 1px 1px white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
#header h1 {
font-size: 20px;
}
#header ul {
display: flex;
flex-direction: row;
}
#header ul li {
display: inline-block;
padding: 0 2rem;
font-size: 20px;
font-weight: 700;
}
#header ul li a {
text-decoration: none;
color: black;
}
#main {
width: 100%;
height: calc(100% - 60px - 10px);
padding: 10px;
display: flex;
flex-direction: row;
gap: 25px;
}
#side {
width: 400px;
height: 100%;
display: flex;
flex-direction: column;
gap: 25px;
}
#task {
width: 100%;
height: calc(100% - 515px - 25px);
background-color: white;
border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: 10px;
display: flex;
flex-direction: column;
}
#task task-list {
width: 100%;
flex-grow: 1;
}
#task task-list ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#task task-list ul li {
width: 100%;
height: 65px;
border-radius: 10px;
border: 2px solid #b4b4b4;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding-left: 10px;
cursor: pointer;
}
#task task-list ul li:hover {
border: 2px solid black;
}
#task task-list ul li h2 {
font-size: 18px;
font-size: 700;
}
#task task-list ul li div {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
#task task-list ul li div img {
width: 15px;
height: 15px;
}
#task task-list ul li div p {
font-size: 15px;
font-weight: 700;
color: #fbb40e;
}
#task #add_task {
cursor: pointer;
font-size: 25px;
padding-right: 10px;
display: flex;
flex-direction: row-reverse;
}
#info {
width: 100%;
height: 515px;
background-color: white;
border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: 10px;
}
#info meal-list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: none;
}
#info meal-list header {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#info meal-list header select {
border: none;
border-radius: 5px;
padding: 4px 4px;
font-size: 15px;
cursor: pointer;
}
#info meal-list header select:hover {
box-shadow: 0 0 0 1px black;
}
#info meal-list ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
overflow-y: auto;
overflow-x: hidden;
cursor: ns-resize;
}
#info meal-list ul::-webkit-scrollbar {
display: none;
}
#info meal-list ul li {
width: 100%;
height: 60px;
border-radius: 10px;
border: 2px solid #b4b4b4;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 10px;
flex-shrink: 0;
}
#calendar {
border: 2px solid orange;
width: calc(100% - 400px - 25px);
height: 100%;
}
#calendar iframe {
border-radius: 8px;
width: 100%;
height: 100%;
border: none;
}
.task_modal {
width: 400px;
height: auto;
border: 2px solid black;
border-radius: 10px;
background: white;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.task_modal label {
font-weight: 700;
display: block;
margin-bottom: 5px;
}
.task_modal input,
.task_modal textarea {
width: 100%;
padding: 8px;
border: 1px solid black;
border-radius: 4px;
}
.task_modal textarea {
height: 100px;
resize: none;
}
.task_modal .date-group {
display: flex;
align-items: center;
gap: 10px;
}
.task_modal .buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.task_modal button {
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
}
.task_modal .cancel {
border: 1px solid black;
background: white;
}
.task_modal .save {
background: #d1d1d1;
border: none;
}
.task_modal .close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 18px;
}
@media (max-width: 800px) {
h1 {
font-size: 20px;
}
#main {
width: 100%;
flex-direction: column;
}
#side {
width: 100%;
height: auto;
}
#task {
height: auto;
}
#info {
height: auto;
}
#calendar {
width: 100%;
height: 400px;
flex-shrink: 0;
}
}
/*# sourceMappingURL=style.css.map */
public/style.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAQ;AAQR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA,KAnBW;EAqBX;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EAOA;EACA;EAEA;EAEA;EACA;EAEA;EACA;;;AAGJ;EACI;EACA,QA/CY;EAgDZ;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAMhB;EACI;EACA;EAEA,SAxFW;EA0FX;EACA;EAEA,KA5FS;;;AA+Fb;EACI,OA/FQ;EAgGR;EAEA;EACA;EAEA,KAtGS;;;AAyGb;EACI;EACA;EAEA;EACA;EACA;EAEA,SAlHW;EAoHX;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EACA,KAjIG;;AAmIH;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA,cA7ID;EA+IC;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAOpB;EACI;EACA;EAEA;EAEA;EACA;;;AAIR;EACI;EACA,QAzLU;EA2LV;EACA;EACA;EAEA,SAlMW;;AAoMX;EACI;EACA;EAEA;EACA;EACA,KA1MO;EA4MP;;AAEA;EACI;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAKZ;EACI;EAEA;EACA;EACA;EACA,KA3OG;EA6OH;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,cA/PD;EAiQC;;;AAMhB;EACI;EAEA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EACI;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA,SAlSW;EAoSX;EACA;EACA,KAtSW;;AAwSX;EACI;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA","file":"style.css"}
public/style.scss
+383
View File
@@ -0,0 +1,383 @@
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
$small_margin: 10px;
$big_margin: 25px;
$nav_width: 400px;
$info_height: calc(60px * 7 + $small_margin * 7 + $big_margin);
$header_height: 60px;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
font-family: "Fira Code", serif;
display: flex;
flex-direction: column;
gap: $small_margin;
background-color: rgb(246, 242, 237);
}
.box {
border-radius: 10px;
position: relative;
}
.title {
height: 30px;
// background-color: white;
// position: absolute;
// top: -2px;
// left: 15px;
width: 100%;
border-bottom: 2px solid black;
margin-bottom: 10px;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
}
#header {
width: 100%;
height: $header_height;
background-color: white;
box-shadow: 0 1px 1px white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
h1 {
font-size: 20px;
}
ul {
display: flex;
flex-direction: row;
li {
display: inline-block;
padding: 0 2rem;
font-size: 20px;
font-weight: 700;
a {
text-decoration: none;
color: black;
}
}
}
}
#main {
width: 100%;
height: calc(100% - $header_height - $small_margin);
padding: $small_margin;
display: flex;
flex-direction: row;
gap: $big_margin;
}
#side {
width: $nav_width;
height: 100%;
display: flex;
flex-direction: column;
gap: $big_margin;
}
#task {
width: 100%;
height: calc(100% - $info_height - $big_margin);
background-color: white;
border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: $small_margin;
display: flex;
flex-direction: column;
task-list {
width: 100%;
flex-grow: 1;
ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: $small_margin;
li {
width: 100%;
height: 65px;
border-radius: 10px;
border: 2px solid #b4b4b4;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding-left: $small_margin;
cursor: pointer;
&:hover {
border: 2px solid black;
}
h2 {
font-size: 18px;
font-size: 700;
}
div {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
img {
width: 15px;
height: 15px;
}
p {
font-size: 15px;
font-weight: 700;
color: #fbb40e;
}
}
}
}
}
#add_task {
cursor: pointer;
font-size: 25px;
padding-right: 10px;
display: flex;
flex-direction: row-reverse;
}
}
#info {
width: 100%;
height: $info_height;
background-color: white;
border: none;
box-shadow: 0 5px 10px #d4d4d4;
padding: $small_margin;
meal-list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: $small_margin;
overflow-y: none;
header {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
select {
border: none;
border-radius: 5px;
padding: 4px 4px;
font-size: 15px;
cursor: pointer;
&:hover {
box-shadow: 0 0 0 1px black;
}
}
}
ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: $small_margin;
overflow-y: auto;
overflow-x: hidden;
cursor: ns-resize;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: 60px;
border-radius: 10px;
border: 2px solid #b4b4b4;
display: flex;
flex-direction: row;
align-items: center;
padding-left: $small_margin;
flex-shrink: 0;
}
}
}
}
#calendar {
border: 2px solid orange;
width: calc(100% - $nav_width - $big_margin);
height: 100%;
iframe {
border-radius: 8px;
width: 100%;
height: 100%;
border: none;
}
}
.task_modal {
width: 400px;
height: auto;
border: 2px solid black;
border-radius: 10px;
background: white;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: $small_margin;
display: flex;
flex-direction: column;
gap: $small_margin;
label {
font-weight: 700;
display: block;
margin-bottom: 5px;
}
input,
textarea {
width: 100%;
padding: 8px;
border: 1px solid black;
border-radius: 4px;
}
textarea {
height: 100px;
resize: none;
}
.date-group {
display: flex;
align-items: center;
gap: 10px;
}
.buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
button {
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
}
.cancel {
border: 1px solid black;
background: white;
}
.save {
background: #d1d1d1;
border: none;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 18px;
}
}
@media (max-width: 800px) {
h1 {
font-size: 20px;
}
#main {
width: 100%;
flex-direction: column;
}
#side {
width: 100%;
height: auto;
}
#task {
height: auto;
}
#info {
height: auto;
}
#calendar {
width: 100%;
height: 400px;
flex-shrink: 0;
}
}
server.js
+386
View File
@@ -0,0 +1,386 @@
import express from "express";
import path from "path";
import open from "open";
import fs from "fs";
const app = express();
app.use("/public", express.static(path.join(__dirname, "public")));
app.use(express.urlencoded({ extends: true }));
app.use(express.json());
app.listen(4000, () => {
console.log("✅Pass: Server running at http://127.0.0.1:4000");
});
app.get("/", (req, res) => {
res.sendFile(__dirname + "/public/index.html");
});
app.get("/api/meal", async (req, res) => {
const item = req.query;
const date = item.date;
const type = item.type;
const base_url = new URL("https://open.neis.go.kr/hub/mealServiceDietInfo");
const params = new URLSearchParams({
key: "504b37988adb4251b9fae916ae8c360a",
Type: "json",
ATPT_OFCDC_SC_CODE: "D10",
SD_SCHUL_CODE: "7240450",
MLSV_YMD: date,
MMEAL_SC_CODE: type,
});
const url = `${base_url}?${params.toString()}`;
try {
let data = await fetch(url);
if (!data.ok) {
res.send("No Information");
}
data = await data.json();
if (!data.mealServiceDietInfo[1].row[0]) {
res.send("No Information");
}
let meal_list = data.mealServiceDietInfo[1].row[0].DDISH_NM;
meal_list = meal_list.replace(/\([^)]+\)/g, "").split("<br/>");
res.json({
meal_list: meal_list,
kcal: data.mealServiceDietInfo[1].row[0].CAL_INFO,
});
} catch (error) {
res.send("No Information");
}
});
// G-Cal api ------------------------------------------------------------
const checkClientSecret = () => {
if (!fs.existsSync("client_secret.json")) {
throw new Error("No client_secret.json");
}
console.log("✅Pass: client_secret.json exists");
};
const checkToken = () => {
if (!fs.existsSync("token.json")) {
console.error("❌Error: No token.json");
console.warn("📣Notice: Trying to get token");
getToken();
} else {
console.log("✅Pass: token.json exists");
}
};
const getToken = () => {
const base_url = new URL("https://accounts.google.com/o/oauth2/auth");
const params = new URLSearchParams({
client_id: client().client_id,
redirect_uri: "http://localhost:4000/callback",
response_type: "code",
scope: "https://www.googleapis.com/auth/calendar",
access_type: "offline",
prompt: "consent",
});
const url = `${base_url}?${params.toString()}`;
open(url);
};
const client = () => {
const fileContent = fs.readFileSync("client_secret.json", "utf8");
return JSON.parse(fileContent).web;
};
const token = (type) => {
const fileContent = fs.readFileSync("token.json", "utf8");
if (type) {
return JSON.parse(fileContent)[type];
}
return JSON.parse(fileContent).access_token;
};
app.get("/callback", async (req, res) => {
try {
const response = await fetch("https://oauth2.googleapis.com/token", {
method: "POST",
headers: {},
body: JSON.stringify({
client_id: client().client_id,
client_secret: client().client_secret,
code: req.query.code,
grant_type: "authorization_code",
redirect_uri: "http://localhost:4000/callback",
}),
});
const data = await response.json();
if (data.error) {
console.error(`❌Error: ${data.error}, ${data.error_description}`);
res.send(
"Error occured. Automatically reopen new Oauth page if token is not saved."
);
checkToken();
return;
}
console.log("✅Pass: Successfully load token");
saveToken(data);
res.json(data);
} catch (err) {
console.error(`❌Error: ${err.message}`);
res.status(500).json({ error: err.message });
}
});
const saveToken = (data) => {
fs.writeFileSync("token.json", JSON.stringify(data, null, 2));
console.log("✅Pass: Successfully sace token.json");
};
const refreshToken = async () => {
try {
const response = await fetch("https://oauth2.googleapis.com/token", {
method: "POST",
headers: {},
body: JSON.stringify({
client_id: client().client_id,
client_secret: client().client_secret,
grant_type: "refresh_token",
refresh_token: token("refresh_token"),
}),
});
const data = await response.json();
if (data.error) {
return data;
}
data.refresh_token = token("refresh_token");
saveToken(data);
return "success";
} catch (err) {
return err;
}
};
checkClientSecret();
checkToken();
app.get("/api/tasklist", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const base_url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events`
);
const params = new URLSearchParams({
singleEvents: true,
orderBy: "startTime",
timeMin: new Date().toISOString(),
});
const url = `${base_url}?${params.toString()}`;
try {
let data = await fetch(url, {
method: "GET",
headers: {
Authorization: `Bearer ${token()}`,
},
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
const li = data.items;
res.json(li);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});
app.get("/api/gettask", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const base_url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events/${req.query.event_id}`
);
const params = new URLSearchParams({
singleEvents: true,
orderBy: "startTime",
timeMin: new Date().toISOString(),
});
const url = `${base_url}?${params.toString()}`;
try {
let data = await fetch(url, {
method: "GET",
headers: {
Authorization: `Bearer ${token()}`,
},
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
res.json(data);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});
app.post("/api/edittask", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events/${req.body.event_id}`
);
try {
let data = await fetch(url, {
method: "PUT",
headers: {
Authorization: `Bearer ${token()}`,
},
body: JSON.stringify(req.body.data),
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
res.json(data);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});
app.post("/api/createtask", async (req, res) => {
const process = async () => {
const task_calender_id =
"729f5bea9ba83ff9b82dd797f15089a051fe850a4da66fcc3936835e89e3de89@group.calendar.google.com";
const url = new URL(
`https://www.googleapis.com/calendar/v3/calendars/${task_calender_id}/events`
);
try {
let data = await fetch(url, {
method: "POST",
headers: {
Authorization: `Bearer ${token()}`,
},
body: JSON.stringify(req.body.data),
});
data = await data.json();
if (data.error) {
if (data.error.code === 401) {
console.warn("📣Notice: Token expired, refreshing...");
const refreshStatus = await refreshToken();
if (refreshStatus === "success") {
console.warn("📣Notice: Token refresh success");
return await process();
} else {
console.error("❌Error: Can't refresh token");
return refreshStatus;
}
}
console.error(
`❌Error: ${data.error.code}, ${data.error.message}`
);
return data;
}
res.json(data);
} catch (err) {
console.error(`❌Error: ${err}`);
return err;
}
};
return await process();
});
token.json
+8
View File
@@ -0,0 +1,8 @@
{
"access_token": "ya29.a0AeXRPp6dQRljlR_5KWE8DgcWu4lkKXDAgErjVzNGkgIZwiCKXqk5MtqKfB2Wp_DG58SzfM2UmPJJpeIbflU-D0_xxCnD0u0En_OccmeRsSEE56KY5q_NtQtnpwUekEvtvEjhIiGfU0M5NdgljLvnAN7JkPvv-Kjd2liy59j17QaCgYKAWkSARASFQHGX2MiA14X1b8pOFBNNRtkZ3xKug0177",
"expires_in": 3599,
"scope": "https://www.googleapis.com/auth/calendar",
"token_type": "Bearer",
"refresh_token_expires_in": 571598,
"refresh_token": "1//0erCBDblHqeswCgYIARAAGA4SNwF-L9IrKNzH7uKvucIavo21bciIQe04jXA3w-aHCLvrUmUNoaIVNn1wx4fapAmpifxS-kjcPyk"
}