Commit 147e12a8 authored by Kim, Subin's avatar Kim, Subin
Browse files

Schedule 서버 연동중

parent e4119e0e
...@@ -31,6 +31,7 @@ function App() { ...@@ -31,6 +31,7 @@ function App() {
<Route path="/subject/edit/:subjectId" component={SubjectEditPage} /> <Route path="/subject/edit/:subjectId" component={SubjectEditPage} />
<Route path="/subject/edit" component={SubjectEditPage} /> <Route path="/subject/edit" component={SubjectEditPage} />
<Route path="/admin/edit/:scheduleId" component={ScheduleEditPage} /> <Route path="/admin/edit/:scheduleId" component={ScheduleEditPage} />
<Route path="/admin/edit" component={ScheduleEditPage} />
<Route path="/admin" component={AdminPage} /> <Route path="/admin" component={AdminPage} />
{/* <PrivateRoute path="/admin" component={AdminPage} role="admin" /> */} {/* <PrivateRoute path="/admin" component={AdminPage} role="admin" /> */}
......
...@@ -7,7 +7,7 @@ const getOne = async (id, userId = "ku") => { ...@@ -7,7 +7,7 @@ const getOne = async (id, userId = "ku") => {
} }
const getbyMonth = async (date, userId = "ku") => { const getbyMonth = async (date, userId = "ku") => {
const { data } = await axios.get(`${baseUrl}/api/schedule/${userId}?date=${date}`); const { data } = await axios.get(`${baseUrl}/api/schedule/${userId}?dateMonth=${date}`);
return data return data
} }
......
...@@ -2,6 +2,8 @@ import { useState, useEffect, useRef } from "react"; ...@@ -2,6 +2,8 @@ import { useState, useEffect, useRef } from "react";
import CalendarBtn from "../Buttons/CalendarBtn.js"; import CalendarBtn from "../Buttons/CalendarBtn.js";
import DatePickerModal from "../Modal/DatePickerModal.js"; import DatePickerModal from "../Modal/DatePickerModal.js";
import ScheduleModal from "../Modal/ScheduleModal.js"; import ScheduleModal from "../Modal/ScheduleModal.js";
import scheduleApi from "../../apis/schedule.api";
import catchErrors from "../../utils/catchErrors.js";
import moment from 'moment'; import moment from 'moment';
import FullCalendar from '@fullcalendar/react'; import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
...@@ -13,7 +15,9 @@ const AdminMonthly = () => { ...@@ -13,7 +15,9 @@ const AdminMonthly = () => {
const [initialDate, setInitialDate] = useState(moment().format('YYYY-MM-DD')) const [initialDate, setInitialDate] = useState(moment().format('YYYY-MM-DD'))
const [changeDate, setChangeDate] = useState(moment().format('YYYY-MM-DD')) const [changeDate, setChangeDate] = useState(moment().format('YYYY-MM-DD'))
const [pickerShow, setPickerShow] = useState(false) const [pickerShow, setPickerShow] = useState(false)
const [dateShow, setDateShow] = useState({date: moment().format('YYYY-MM-DD'), show: false}) const [dateShow, setDateShow] = useState({ date: moment().format('YYYY-MM-DD'), show: false })
const [scheduleList, setScheduleList] = useState([])
const [error, setError] = useState("")
const calendarRef = useRef(null) const calendarRef = useRef(null)
const calenIconRef = useRef(null) const calenIconRef = useRef(null)
let calendar = null let calendar = null
...@@ -24,6 +28,13 @@ const AdminMonthly = () => { ...@@ -24,6 +28,13 @@ const AdminMonthly = () => {
} }
}) })
// useEffect(() => {
// getAll()
// return () => {
// getAll()
// }
// }, [])
useEffect(() => { useEffect(() => {
if (calenIconRef && calenIconRef.current) { if (calenIconRef && calenIconRef.current) {
calenIconRef.current.addEventListener('click', () => { calenIconRef.current.addEventListener('click', () => {
...@@ -45,10 +56,26 @@ const AdminMonthly = () => { ...@@ -45,10 +56,26 @@ const AdminMonthly = () => {
useEffect(() => { useEffect(() => {
calendar.gotoDate(changeDate) calendar.gotoDate(changeDate)
getAll()
}, [changeDate]) }, [changeDate])
useEffect(() => {
calendar.addEventSource(scheduleList)
}, [scheduleList])
async function getAll() {
try {
setError("")
const resList = await scheduleApi.getbyMonth(changeDate)
setScheduleList(resList)
} catch (error) {
catchErrors(error, setError)
}
}
return ( return (
<> <>
{console.log("list==", scheduleList)}
<div ref={calenIconRef} className="position-absolute" style={{ top: "7px", left: "7px" }}> <div ref={calenIconRef} className="position-absolute" style={{ top: "7px", left: "7px" }}>
<CalendarBtn date={moment(initialDate).format('DD')} /> <CalendarBtn date={moment(initialDate).format('DD')} />
</div> </div>
...@@ -100,6 +127,8 @@ const AdminMonthly = () => { ...@@ -100,6 +127,8 @@ const AdminMonthly = () => {
return <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal"></button> return <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal"></button>
}} }}
timeZone="local" timeZone="local"
events={scheduleList, { color: 'crimson' }}
eventLimit="3"
themeSystem='bootstrap' themeSystem='bootstrap'
height='78vh' height='78vh'
/> />
......
import KUSchedule from "../Schedule/KUSchedule.js"; import ScheduleCarousel from "../Schedule/ScheduleCarousel.js";
import ScheduleList from "../Schedule/ScheduleList.js"; import ScheduleList from "../Schedule/ScheduleList.js";
import { createPlugin } from '@fullcalendar/react'; import { createPlugin } from '@fullcalendar/react';
const CustomDateView = () => { const CustomDateView = () => {
return ( return (
<div className='fc-custom-view border-top border-dark pt-2'> <div className='fc-custom-view border-top border-dark pt-2'>
<KUSchedule /> <ScheduleCarousel />
<ScheduleList /> <ScheduleList />
</div> </div>
) )
......
...@@ -84,7 +84,9 @@ const ScheduleForm = () => { ...@@ -84,7 +84,9 @@ const ScheduleForm = () => {
} }
if (success) { if (success) {
return <Redirect to="/home" /> // if () return <Redirect to="/admin" />
// else return <Redirect to="/home" />
return <Redirect to="/admin" />
} }
return ( return (
......
import styles from "./schedule.module.scss"; import styles from "./schedule.module.scss";
const KUSchedule = ({ title="복수전공 신청" }) => { const KUSchedule = ({ schedule }) => {
return ( return (
<div className="card w-75 rounded-0 border-dark mx-auto"> <div className="card w-75 rounded-0 border-dark mx-auto">
<div className={`card-header rounded-0 p-1 ${styles.header}`}> <div className={`card-header rounded-0 p-1 ${styles.header}`}>
<img className={styles.ku_tiger} src={process.env.PUBLIC_URL + '/ku-tiger(bgX).png'} alt="어흥이" /> <img className={styles.ku_tiger} src={process.env.PUBLIC_URL + '/ku-tiger(bgX).png'} alt="어흥이" />
</div> </div>
<div className="card-body text-center pb-2"> <div className="card-body text-center pb-2">
{title.length > 12 ? <marquee className={`card-title fs-5 ${styles.flowText}`} scrollamount="6">{title}</marquee> : <h5 className="card-title">{title}</h5>} {schedule.title.length > 12 ? <marquee className={`card-title fs-5 ${styles.flowText}`} loop="infinite">{schedule.title}</marquee> : <h5 className="card-title">{schedule.title}</h5>}
<p className="card-text text-secondary mb-1">21.09.27 ~ 21.09.29</p> <p className="card-text text-secondary mb-1">{(schedule.start === schedule.end) ? schedule.start : schedule.start + "~" + schedule.end}</p>
<p className="text-start mb-0">복수전공신청</p> <p className="text-start mb-0">{schedule.memo}</p>
</div> </div>
</div> </div>
) )
......
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import KU from "./KUSchedule.js";
import scheduleApi from "../../apis/schedule.api";
import catchErrors from "../../utils/catchErrors.js";
const ScheduleCarousel = () => {
const [scheduleList, setScheduleList] = useState([])
const [error, setError] = useState("")
const { date } = useParams()
useEffect(() => {
getSchedule(date)
return () => {
getSchedule(date)
}
}, [])
useEffect(() => {
getSchedule(date)
return () => {
getSchedule(date)
}
}, [date])
async function getSchedule(date) {
try {
setError("")
const resList = await scheduleApi.getbyDate(date)
setScheduleList(resList)
} catch (error) {
catchErrors(error, setError)
}
}
return (
<div id="scheduleListCarousel" className="carousel slide" data-bs-ride="carousel">
<div className="carousel-inner">
{scheduleList.length !== 0 ?
scheduleList.map((schedule, idx) =>
<div className={"carousel-item" + (idx === 0 ? " active" : "")}>
<KU key={idx} schedule={schedule} />
</div>) : null}
</div>
</div>
)
}
export default ScheduleCarousel
\ No newline at end of file
...@@ -148,4 +148,13 @@ button { ...@@ -148,4 +148,13 @@ button {
& .fc-dayGridDay-view { & .fc-dayGridDay-view {
display: none; display: none;
} }
& .text {
font-family: "Plex-Text";
& .fc-event-title {
display: block;
text-overflow: ellipsis;
}
}
} }
\ No newline at end of file
import { KU } from "../db/index.js";
import sequelize from 'sequelize';
const { Op } = sequelize
const findbyId = async (req, res, next) => {
try {
const id = req.scheduleId
if (id) {
const findSchedule = await KU.findOne({ where: { id: id } })
if (!findSchedule) throw new Error("해당 일정을 찾지 못했습니다.")
else {
const { title, start, end, memo } = findSchedule
const startDate = dateToString(start, "full")
const endDate = dateToString(end, "full")
req.schedule = { title, startDate: startDate, endDate: endDate, memo }
}
next()
} else next()
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
const findbyDate = async (req, res, next) => {
try {
if (req.date) {
const date = new Date(req.date)
const findList = await KU.findAll({
where: {
[Op.and]: [
{
start: {
[Op.lte]: date
}
}, {
end: {
[Op.gte]: date
}
}
]
},
order: [['updatedAt', 'DESC']]
})
findList.forEach(schedule => {
schedule.dataValues.start = dateToString(schedule.start, "twoYear")
schedule.dataValues.end = dateToString(schedule.end, "twoYear")
})
req.scheduleList = findList
next()
} else next()
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
const create = async (req, res) => {
try {
const { title, startDate, endDate, memo } = req.body
const start = new Date(startDate)
const end = new Date(endDate)
const newSchedule = await KU.create({ title: title, start: start, end: end, memo: memo })
return res.json(newSchedule)
} catch (error) {
return res.status(500).send(error.message || "일정 등록 중 에러 발생")
}
}
const edit = async (req, res) => {
try {
const { scheduleId } = req.query
const { title, startDate, endDate, memo } = req.body
const updated = await KU.update({ title: title, start: startDate, end: endDate, memo: memo }, { where: { id: scheduleId } })
if (!updated) throw new Error("해당 일정의 일부 정보를 수정하는데 실패하였습니다.")
else return res.send(200)
} catch (error) {
return res.status(500).send(error.message || "일정 수정 중 에러 발생")
}
}
const remove = async (req, res) => {
try {
const { scheduleId } = req.query
const deleted = await KU.destroy({ where: { id: scheduleId } })
if (!deleted) throw new Error("해당 일정을 삭제하는데 실패하였습니다.")
else return res.send(200)
} catch (error) {
return res.status(500).send(error.message || "일정 삭제 중 에러 발생")
}
}
const querySeparation = async (req, res, next) => {
try {
const { scheduleId, date } = req.query
req.scheduleId = scheduleId
req.date = date
next()
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
const send = async (req, res) => {
try {
const result = req.schedule || req.scheduleList
return res.json(result)
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
function dateToString(dateObj, method) {
const year = dateObj.getFullYear()
const year_disit = String(year).substring(2, 4)
const month = dateObj.getMonth() + 1
const date = dateObj.getDate()
if (method === "full") return [year, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
else if (method === "twoYear") return [year_disit, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
}
export default {
findbyId,
findbyDate,
create,
edit,
remove,
querySeparation,
send
}
\ No newline at end of file
import { Schedule } from "../db/index.js"; import { KU, Schedule } from "../db/index.js";
import sequelize from 'sequelize';
const create = async (req, res) => { const { Op } = sequelize
const findbyId = async (req, res, next) => {
try {
const id = req.scheduleId
if (id) {
const findSchedule = await KU.findOne({ where: { id: id } })
if (!findSchedule) throw new Error("해당 일정을 찾지 못했습니다.")
else {
const { title, start, end, memo } = findSchedule
const startDate = dateToString(start, "full")
const endDate = dateToString(end, "full")
req.schedule = { title, startDate: startDate, endDate: endDate, memo }
}
next()
} else next()
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
const findbyDate = async (req, res, next) => {
try { try {
if (req.date || req.month) {
let date = ""
let findList = []
if (req.date) {
date = new Date(req.date)
findList = await KU.findAll({
where: {
[Op.and]: [
{
start: {
[Op.lte]: date
}
}, {
end: {
[Op.gte]: date
}
}
]
}, order: [['updatedAt', 'DESC']]
})
findList.forEach(schedule => {
schedule.dataValues.start = dateToString(schedule.start, "twoYear")
schedule.dataValues.end = dateToString(schedule.end, "twoYear")
})
} else {
date = new Date(req.month)
const year = dateToString(date, "year")
const month = dateToString(date, "month")
findList = await KU.findAll({
where: {
[Op.or]: [
{
[Op.and]: [
sequelize.where(sequelize.fn('date_part', 'year', sequelize.col('start')), year),
sequelize.where(sequelize.fn('date_part', 'month', sequelize.col('start')), month)
]
}, {
[Op.and]: [
sequelize.where(sequelize.fn('date_part', 'year', sequelize.col('end')), year),
sequelize.where(sequelize.fn('date_part', 'month', sequelize.col('end')), month)
]
}
]
}, attributes: ['id', 'title', 'start', 'end']
, order: [['start']]
})
// console.log("list==",findList)
findList.forEach(schedule => {
// const find = findList.find(el => {
// if (el.dataValues.start <= schedule.dataValues.start) {
// if (el.dataValues.end >= schedule.dataValues.start) return el
// } else if (el.dataValues.start <= schedule.dataValues.end) return el
// })
// console.log("find==",find.dataValues)
if (dateToString(schedule.start, "full") !== dateToString(schedule.end, "full")) schedule.dataValues.end = schedule.dataValues.end.setDate(schedule.dataValues.end.getDate() + 1)
schedule.dataValues.allDay = true
schedule.dataValues.className = 'text'
})
}
req.scheduleList = findList
next()
} else next()
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
const create = async (req, res) => {
try {
let newSchedule = null
const userId = req.userId
if (userId === "ku") {
const { title, startDate, endDate, memo } = req.body
const start = new Date(startDate)
const end = new Date(endDate)
newSchedule = await KU.create({ title: title, start: start, end: end, memo: memo })
} else {
const { title, startDate, endDate, startTime, endTime, allDay, location, memo } = req.body
newSchedule = await Schedule.create({ title: title, location: location, memo: memo })
}
return res.json(newSchedule)
} catch (error) { } catch (error) {
return res.status(500).send(error.message || "일정 등록 중 에러 발생") return res.status(500).send(error.message || "일정 등록 중 에러 발생")
} }
...@@ -10,7 +112,18 @@ const create = async (req, res) => { ...@@ -10,7 +112,18 @@ const create = async (req, res) => {
const edit = async (req, res) => { const edit = async (req, res) => {
try { try {
let updated = null
const userId = req.userId
const { scheduleId } = req.query
if (userId === "ku") {
const { title, startDate, endDate, memo } = req.body
updated = await KU.update({ title: title, start: startDate, end: endDate, memo: memo }, { where: { id: scheduleId } })
} else {
const { title, startDate, endDate, startTime, endTime, allDay, location, memo } = req.body
updated = await Schedule.update({ title: title, memo: memo }, { where: { id: scheduleId } })
}
if (!updated) throw new Error("해당 일정의 일부 정보를 수정하는데 실패하였습니다.")
else return res.send(200)
} catch (error) { } catch (error) {
return res.status(500).send(error.message || "일정 수정 중 에러 발생") return res.status(500).send(error.message || "일정 수정 중 에러 발생")
} }
...@@ -18,14 +131,69 @@ const edit = async (req, res) => { ...@@ -18,14 +131,69 @@ const edit = async (req, res) => {
const remove = async (req, res) => { const remove = async (req, res) => {
try { try {
let deleted = null
const userId = req.userId
const { scheduleId } = req.query
if (userId === "ku") deleted = await KU.destroy({ where: { id: scheduleId } })
else deleted = await Schedule.destroy({ where: { id: scheduleId } })
if (!deleted) throw new Error("해당 일정을 삭제하는데 실패하였습니다.")
else return res.send(200)
} catch (error) { } catch (error) {
return res.status(500).send(error.message || "일정 삭제 중 에러 발생") return res.status(500).send(error.message || "일정 삭제 중 에러 발생")
} }
} }
const getParams = async (req, res, next) => {
try {
const { userId } = req.params
console.log("getParams", userId)
req.userId = userId
next()
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
const querySeparation = async (req, res, next) => {
try {
const { scheduleId, date, dateMonth } = req.query
req.scheduleId = scheduleId
req.date = date
req.month = dateMonth
next()
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
const send = async (req, res) => {
try {
const result = req.schedule || req.scheduleList
return res.json(result)
} catch (error) {
return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
}
}
function dateToString(dateObj, method) {
const year = dateObj.getFullYear()
const year_disit = String(year).substring(2, 4)
const month = dateObj.getMonth() + 1
const date = dateObj.getDate()
if (method === "full") return [year, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
else if (method === "twoYear") return [year_disit, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
else if (method === "year") return year
else return month
}
export default { export default {
findbyId,
findbyDate,
create, create,
edit, edit,
remove remove,
getParams,
querySeparation,
send
} }
\ No newline at end of file
import express from 'express'; import express from 'express';
import kuCtrl from "../controllers/ku.controller.js";
import scheduleCtrl from "../controllers/schedule.controller.js"; import scheduleCtrl from "../controllers/schedule.controller.js";
const router = express.Router(); const router = express.Router();
router
.route("/ku")
.get(kuCtrl.querySeparation, kuCtrl.findbyId, kuCtrl.findbyDate, kuCtrl.send)
.post(kuCtrl.create)
.put(kuCtrl.edit)
.delete(kuCtrl.remove)
router router
.route("/:userId") .route("/:userId")
.get(scheduleCtrl.querySeparation, scheduleCtrl.findbyId, scheduleCtrl.findbyDate, scheduleCtrl.send)
.post(scheduleCtrl.create) .post(scheduleCtrl.create)
.put(scheduleCtrl.edit) .put(scheduleCtrl.edit)
.delete(scheduleCtrl.remove) .delete(scheduleCtrl.remove)
router.param("userId", scheduleCtrl.getParams)
export default router; export default router;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment