Skip to content

GitLab

Commit 9976f3c7 authored by Kim, Subin's avatar Kim, Subin
Browse files

스케쥴

parent e701227c
Show whitespace changes
Inline Side-by-side
server/client/package-lock.json
View file @ 9976f3c7
......@@ -1674,6 +1674,14 @@
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
"integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
},
"@toast-ui/react-calendar": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@toast-ui/react-calendar/-/react-calendar-1.0.5.tgz",
"integrity": "sha512-eG4BtdF5LvIHEyTlwZbWnLlL+GScLiWktRNV0A3L73oBFfJ5BQUNC/TRR13wfaJjXIvWYdV80ZYD75q7ilWznw==",
"requires": {
"tui-calendar": "^1.12.5"
}
},
"@types/babel__core": {
"version": "7.1.9",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.9.tgz",
......
server/client/package.json
View file @ 9976f3c7
......@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@toast-ui/react-calendar": "^1.0.5",
"axios": "^0.20.0",
"bootstrap": "^4.5.2",
"formik": "^2.1.5",
......@@ -17,7 +18,6 @@
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"styled-components": "^5.2.0",
"tui-calendar": "^1.12.14",
"yup": "^0.29.3"
},
"scripts": {
......
server/client/src/Components/Calendar.js deleted 100644 → 0
View file @ e701227c
import React, { useState, useEffect } from 'react';
import Calendar from 'tui-calendar';
import "tui-calendar/dist/tui-calendar.css";
const calendar = new Calendar('#calendar', {
defaultView: 'week',
// useCreationPopup: true,
// useDetailPopup: true
});
calendar.createSchedules([
{
id: '1',
calendarId: 'Major Lecture',
title: '자료 구조',
category: 'time',
start: '2018-11-20T10:30:00',
end: '2018-11-20T12:30:00'
},
{
id: '2',
calendarId: 'General Lecture',
title: '건강과 영양',
category: 'time',
dueDateClass: '',
start: '2018-11-20T14:30:00',
end: '2018-11-20T16:30:00',
isReadOnly: true // schedule is read-only
}
]);
calendar.render();
export default Calendar
\ No newline at end of file
server/client/src/Components/Schedule.js 0 → 100644
View file @ 9976f3c7
import React, { useState, useEffect, useRef } from 'react';
import Calendar from '@toast-ui/react-calendar';
import "tui-calendar/dist/tui-calendar.css";
import "tui-date-picker/dist/tui-date-picker.css";
import "tui-time-picker/dist/tui-time-picker.css";
function Cal(calledday) {
const calendarRef = useRef();
const [day, setDay] = useState(calledday + "15:00:00");
const [myTheme, setMyTheme] = useState({
'common.dayname.color': '#333',
'common.today.color': '#333',
// 'common.creationGuide.color': 'white',
'common.creationGuide.backgroundColor': 'gray',
// Theme object to extends default dark theme.
});
useEffect(() => {
const cal = calendarRef.current.getInstance();
cal.setDate(new Date(day));
cal.changeView('week', false);
// cal.today(new Date(day));
// calendar.on('clickSchedule', function (event) {
// const schedule = event.schedule;
// if (lastClickSchedule) {
// calendar.updateSchedule(lastClickSchedule.id, lastClickSchedule.calendarId, {
// isFocused: false,
// });
// }
// calendar.updateSchedule(schedule.id, schedule.calendarId, {
// isFocused: true,
// });
// lastClickSchedule = schedule;
// // open detail view
// return (console.log(isFocused))
// });
}, [day])
return (
<Calendar
ref={calendarRef}
height="100%"
calendars={[
{
id: 'Major Subject',
name: '전공 필수',
color: '#ffffff',
bgColor: '#ff5583',
dragBgColor: '#ff5583',
borderColor: '#ff5583'
},
{
id: 'Elective Subject',
name: '전공 선택',
color: '#ffffff',
bgColor: '#ffbb3b',
dragBgColor: '#ffbb3b',
borderColor: '#ffbb3b'
},
{
id: 'General Subject',
name: '일반 교양',
color: '#ffffff',
bgColor: '#03bd9e',
dragBgColor: '#03bd9e',
borderColor: '#03bd9e'
}
]}
disableDblClick={false}
disableClick={true}
isReadOnly={false}
// template={
// popupIsAllDay=function {
// return display: "none"
// }
// }
schedules={[
{
id: '1',
calendarId: 'Major Subject',
category: 'time',
start: '2020-10-09T11:00:00',
end: '2020-10-09T12:00:00'
},
{
id: '2',
calendarId: 'Elective Subject',
title: '웹 프로그래밍',
category: 'time',
start: '2020-10-09T10:00:00',
end: '2020-10-09T11:00:00'
},
{
id: '3',
calendarId: 'General Subject',
title: '영양과 건강',
category: 'time',
start: '2020-10-08T11:00:00',
end: '2020-10-08T15:00:00'
}
]}
scheduleView={['time']}
taskView={false}
theme={myTheme}
timezones={[
{
timezoneOffset: 540
}
]}
useDetailPopup
useCreationPopup
view={"week"}
week={{
workweek: true,
hourStart: 8,
hourEnd: 23
}}
/>
)
}
export default Cal
\ No newline at end of file
server/client/src/Pages/HomePage.js
View file @ 9976f3c7
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import Menu from '../Components/Menu';
import Calendar from '../Components/Calendar';
import Schedule from '../Components/Schedule';
import styled from 'styled-components';
import moment from 'moment';
import "moment/locale/ko";
......@@ -17,15 +17,17 @@ const Drop = styled.div`
}
`
const Schedule = styled.div`
& ul {
list-style-type: none;
const Tab = styled.ul`
& a, a:hover, a:active {
color: black;
}
`
function Home() {
const [show, setShow] = useState(false);
const [weeks, setWeeks] = useState([]);
const [days, setDays] = useState([]);
const [sendDate, setSendDate] = useState(null);
useEffect(() => {
Dateform();
......@@ -34,25 +36,38 @@ function Home() {
function Dateform() {
let today = moment();
let weeks = [];
let dates = { start: null, end: null };
let dates = [];
let sendDates = [];
for (let i = 0; i < 6; i++) {
if (i !== 0) {
today.add(7, 'd');
}
dates.start = today.startOf('week').format("MMM Do");
dates.end = today.endOf('week').weekday(4).format("MMM Do");
const week = dates.start + " ~ " + dates.end;
let date = { start: null, end: null };
date.start = today.startOf('week').format("MMM Do");
date.end = today.endOf('week').weekday(4).format("MMM Do");
dates.push(date);
const week = date.start + " ~ " + date.end;
weeks.push(week);
let sendDate = today.startOf('week').format("YYYY-MM-DD");
sendDates.push(sendDate);
};
setWeeks([...weeks])
setDays([...sendDates])
};
function choose(e, index) {
setShow(true)
setSendDate(days[index])
}
return (
<div>
{console.log(sendDate)}
<Menu />
<div className="container mt-3">
<h2>대관 현황</h2>
<p>
<strong>대관 가능 시간</strong>
......@@ -61,43 +76,48 @@ function Home() {
<li>주말: 이용 불가</li>
</ul>
</p>
<Drop className="row dropdown mt-1 mb-2">
<button className="btn btn-lg dropdown-toggle mx-auto col-5" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
기간을 선택해주십시오.
</button>
<div className="dropdown-menu col-5" aria-labelledby="dropdownMenuButton">
{weeks.map((week, index) => (
<a className="dropdown-item" href="#" onClick={() => setShow(true)}>{week}</a>
<a className="dropdown-item" id={index} onClick={(e) => choose(e, index)}>{week}</a>
))}
</div>
</Drop>
<ul className="nav nav-tabs nav-justified mt-4" id="myTab" role="tablist">
<Tab className="nav nav-tabs nav-justified mt-4" id="myTab" role="tablist" style={show ? {} : { display: "none" }}>
<li className="nav-item">
<a className="nav-link active" id="7-tab" data-toggle="tab" href="#7" role="tab"> 7-223 </a>
<a className="nav-link active" id="7-tab" data-toggle="tab" href="#tab-7" role="tab" aria-controls="7" aria-selected="true"> 7-223 </a>
</li>
<li className="nav-item">
<a className="nav-link" id="9-tab" data-toggle="tab" href="#9" role="tab"> 9-116 </a>
<a className="nav-link" id="9-tab" data-toggle="tab" href="#tab-9" role="tab" aria-controls="9" aria-selected="false"> 9-116 </a>
</li>
<li className="nav-item">
<a className="nav-link" id="25-tab" data-toggle="tab" href="#25" role="tab"> 25-307 </a>
<a className="nav-link" id="25-tab" data-toggle="tab" href="#tab-25" role="tab" aria-controls="25" aria-selected="false"> 25-307 </a>
</li>
</ul>
<div className="tab-content" id="myTabContent">
<div className="tab-pane fade show active" id="7" role="tabpanel">
{/* <Calendar />
<div className="container mt-1 mb-2"></div> */}
</Tab>
<div className="tab-content row justify-content-center" id="myTabContent" style={show ? {} : { display: "none" }}>
<div className="tab-pane fade show active col-md-11 col-12" id="tab-7" role="tabpanel" aria-labelledby="7-tab">
<Schedule day={sendDate}/>
</div>
<div className="tab-pane fade" id="9" role="tabpanel" aria-labelledby="9-tab">
<div className="tab-pane fade col-md-11 col-12" id="tab-9" role="tabpanel" aria-labelledby="9-tab">
<Schedule day={sendDate}/>
</div>
<div className="tab-pane fade" id="25" role="tabpanel" aria-labelledby="25-tab">
<div className="tab-pane fade col-md-11 col-12" id="tab-25" role="tabpanel" aria-labelledby="25-tab">
<Schedule day={sendDate}/>
</div>
</div>
<h3>유의사항</h3>
<p>
<ul>
<li>강의실을 대관하는 대표자를 기준으로 최대 주 6시간까지 대관이 가능합니다.</li>
<li>1회 대관시 최대 3시간까지 이용이 가능합니다. (1시간 단위로 대관 가능)</li>
<li><strong style={{ color: "red" }}>대관 시간 이외 강의실을 이용하다 적발될 경우 한달 간 강의실 이용이 불가합니다.</strong></li>
</ul>
</p>
<div className="bg-white">
<h6>고려대학교 대관시스템</h6>
</div>
</div>
</div>
......
server/client/src/Pages/LoginPage.js
View file @ 9976f3c7
......@@ -97,7 +97,6 @@ function Login() {
</div>
)}
</Formik>
</Log>
</div>
</div>
......
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