Skip to content

GitLab

Commit 3ef60774 authored by Kim, Subin's avatar Kim, Subin
Browse files

스케쥴, 신청, 홈 페이지

parent cd650135
Hide whitespace changes
Inline Side-by-side
server/client/src/Components/Schedule.js
View file @ 3ef60774
...@@ -5,6 +5,9 @@ import "tui-date-picker/dist/tui-date-picker.css"; ...@@ -5,6 +5,9 @@ import "tui-date-picker/dist/tui-date-picker.css";
import "tui-time-picker/dist/tui-time-picker.css"; import "tui-time-picker/dist/tui-time-picker.css";
import moment from 'moment'; import moment from 'moment';
import axios from 'axios'; import axios from 'axios';
import { Image, Button } from 'react-bootstrap';
import leftArrow from '../caret-left-fill.svg';
import rightArrow from '../caret-right-fill.svg';
function Cal(props) { function Cal(props) {
const calendarRef = useRef(null); const calendarRef = useRef(null);
...@@ -76,17 +79,17 @@ function Cal(props) { ...@@ -76,17 +79,17 @@ function Cal(props) {
return ( return (
<div> <div>
<div id="menu"> <div id="menu" className="p-2">
<span id="menu-navi" onClick={(e) => onClickNavi(e)}> <span id="menu-navi" onClick={(e) => onClickNavi(e)}>
<button type="button" className="btn btn-default btn-sm move-today" data-action="move-today">Today</button> <Button variant="default" size="sm" className="move-today" data-action="move-today">Today</Button>
<button type="button" className="btn btn-default btn-sm move-day" data-action="move-prev"> <Button variant="default" size="sm" className="move-day" data-action="move-prev">
<i class="calendar-icon ic-arrow-line-left" data-action="move-prev"></i> <Image class="calendar-icon" src={leftArrow} data-action="move-prev"></Image>
</button> </Button>
<button type="button" className="btn btn-default btn-sm move-day" data-action="move-next"> <Button variant="default" size="sm" className="move-day" data-action="move-next">
<i className="calendar-icon ic-arrow-line-right" data-action="move-next"></i> <Image className="calendar-icon" src={rightArrow} data-action="move-next"></Image>
</button> </Button>
</span> </span>
<span id="renderRange" className="render-range" style={{ height: "5em" }}>{period}</span> <span id="renderRange" className="render-range ml-2" style={{ height: "5em" }}>{period}</span>
</div> </div>
<Calendar <Calendar
ref={calendarRef} ref={calendarRef}
......
server/client/src/Pages/ACheckPage.js
View file @ 3ef60774
...@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import axios from 'axios'; import axios from 'axios';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
function ACheck(props) { function ACheck(props) {
const [state, setState] = useState() const [state, setState] = useState()
......
server/client/src/Pages/ApplyPage.js
View file @ 3ef60774
...@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
import { Formik, Field, ErrorMessage, FieldArray } from 'formik'; import { Formik, Field, ErrorMessage, FieldArray } from 'formik';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import axios from 'axios'; import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
import * as Yup from 'yup'; import * as Yup from 'yup';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { Col, Container, Row } from 'react-bootstrap';
function Apply(props) { function Apply(props) {
const [state, setState] = useState(); const [state, setState] = useState();
...@@ -23,25 +23,24 @@ function Apply(props) { ...@@ -23,25 +23,24 @@ function Apply(props) {
function time(starttime) { function time(starttime) {
if (starttime == 21) { if (starttime == 21) {
return (<Field as="select" name="usetime"> return (<Field as="select" name="usetime" className="col-12">
<option value="">이용시간을 선택하세요</option> <option value="">이용시간선택</option>
<option value="1">1시간</option> <option value="1">1시간</option>
</Field>) </Field>)
} }
if (starttime == 20) { if (starttime == 20) {
return (<Field as="select" name="usetime"> return (<Field as="select" name="usetime" className="col-12">
<option value="">이용시간을 선택하세요</option> <option value="">이용시간선택</option>
<option value="1">1시간</option> <option value="1">1시간</option>
<option value="2">2시간</option> <option value="2">2시간</option>
</Field>) </Field>)
} }
return (<Field as="select" name="usetime"> return (<Field as="select" name="usetime" className="col-12">
<option value="">이용시간을 선택하세요</option> <option value="">이용시간선택</option>
<option value="1">1시간</option> <option value="1">1시간</option>
<option value="2">2시간</option> <option value="2">2시간</option>
<option value="3">3시간</option> <option value="3">3시간</option>
</Field>) </Field>)
} }
function getUser() { function getUser() {
...@@ -63,141 +62,140 @@ function Apply(props) { ...@@ -63,141 +62,140 @@ function Apply(props) {
return ( return (
<div> <div>
<Menu /> <Menu />
<Formik <Container fluid className="mt-3">
initialValues={{ <Row className="justify-content-center">
_id: `${props.match.params.id}`, <Col md={5}>
date: '', <Formik
starttime: '', initialValues={{
usetime: '', _id: `${props.match.params.id}`,
room: '', date: '',
reason: '', starttime: '',
students: [ usetime: '',
{ room: '',
member: '', reason: '',
}, students: [
], {
}} member: '',
validationSchema={Yup.object({ },
date: Yup.string() ],
.required('날짜를 입력해주세요.'), }}
room: Yup.string() validationSchema={Yup.object({
.required('강의실 번호를 입력해주세요.'), date: Yup.string()
reason: Yup.string() .required('날짜를 입력해주세요.'),
.required('대관목적을 입력해주세요.'), reason: Yup.string()
})} .required('대관목적을 입력해주세요.'),
onSubmit={(values, { setSubmitting }) => { })}
console.log(values) onSubmit={(values, { setSubmitting }) => {
axios({ console.log(values)
method: 'post', axios({
url: '/reserves', method: 'post',
data: values url: '/reserves',
}).then(res => { data: values
if (res.status === 404) { }).then(res => {
alert(res.data.error) if (res.status === 404) {
return window.location.reload(); alert(res.data.error)
} return window.location.reload();
alert("신청이 완료되었습니다!"); }
setState(true); alert("신청이 완료되었습니다!");
console.log("res.data", res.data) setState(true);
}) console.log("res.data", res.data)
.catch(err => { })
alert(err.error) .catch(err => {
}); alert(err.error)
});
setTimeout(() => {
setSubmitting(false);
}, 400); // finish the cycle in handler
}}
>
{({
errors,
touched,
values,
handleSubmit,
getFieldProps,
isSubmitting,
}) => (
<form onSubmit={handleSubmit} className="d-flex flex-column">
<h3 className="form-group font-weight-bold">
<label className="pr-2">대표자 :</label>{user.name}
</h3>
<div className="form-group mb-4">
<div className={touched.date && errors.date ? "text-danger" : ""}>신청날짜</div>
<input
className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")}
type="text"
name="date"
{...getFieldProps('date')}
placeholder="yyyy-mm-dd"
/>
</div>
setTimeout(() => { <Row className="form-group mb-4">
setSubmitting(false); <div className="col-6 pr-0">
}, 400); // finish the cycle in handler <label>이용시작시간</label>
}} <div>
> <Field as="select" name="starttime" className="col-12">
{({ <option value="">이용시작시간</option>
errors, <option value="09">9시</option>
touched, <option value="10">10시</option>
values, <option value="11">11시</option>
handleSubmit, <option value="12">12시</option>
getFieldProps, <option value="13">13시</option>
isSubmitting, <option value="14">14시</option>
}) => ( <option value="15">15시</option>
<div className="row justify-content-center align-items-center"> <option value="16">16시</option>
<form onSubmit={handleSubmit} className="col-sm-3"> <option value="17">17시</option>
<div className="form-group mb-4"> <option value="18">18시</option>
<label>대표자</label> <option value="19">19시</option>
<div>{user.name}</div> <option value="20">20시</option>
</div> <option value="21">21시</option>
<div className="form-group mb-4"> </Field>
<label>신청날짜</label> </div>
<input </div>
className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")} <div className="col-6 pl-0">
type="text" <label>이용시간</label>
name="date" <div>
{...getFieldProps('date')} {time(values.starttime)}
placeholder="yyyy-mm-dd" </div>
/> </div>
{touched.date && errors.date ? ( </Row>
<div className="invalid-feedback text-left">{errors.date}</div>
) : null} <div className="form-group mb-4">
</div> <div className={touched.room && errors.room ? "text-danger" : ""}>강의실</div>
<div className="form-group mb-4"> <Field as="select" name="room" className="col-6">
<label>이용시작시간</label> <option value="">강의실 선택</option>
<Field as="select" name="starttime"> <option value="9-116">9-116</option>
<option value="">이용시작시간</option> <option value="7-234">7-234</option>
<option value="9">9시</option> <option value="25-101">25-101</option>
<option value="10">10시</option> </Field>
<option value="11">11시</option> </div>
<option value="12">12시</option>
<option value="13">13시</option> <div className="form-group mb-4">
<option value="14">14시</option> <div className={touched.reason && errors.reason ? "text-danger" : ""}>대관 목적</div>
<option value="15">15시</option> <input
<option value="16">16시</option> className={(touched.reason && errors.reason ? 'form-control is-invalid' : "form-control")}
<option value="17">17시</option> type="text"
<option value="18">18시</option> name="reason"
<option value="19">19시</option> {...getFieldProps('reason')}
<option value="20">20시</option> placeholder="대관목적을 입력해 주세요."
<option value="21">21시</option> />
</Field> </div>
</div>
<div className="form-group mb-4"> <div className="form-group mb-4">
<label>이용시간</label> <FieldArray name="students">
{time(values.starttime)} {({ insert, remove, push }) => (
</div> <div>
<div className="form-group mb-4"> <div className={touched.date && errors.date ? "text-danger" : ""}>이용자</div>
<label>강의실</label> {values.students.map((student, index) => (
<input <div key={index}>
className={(touched.room && errors.room ? 'form-control is-invalid' : "form-control")}
type="text"
name="room"
{...getFieldProps('room')}
placeholder="bn-nnn"
/>
{touched.room && errors.room ? (
<div className="invalid-feedback text-left">{errors.room}</div>
) : null}
</div>
<div className="form-group mb-4">
<label>대관목적</label>
<input
className={(touched.reason && errors.reason ? 'form-control is-invalid' : "form-control")}
type="text"
name="reason"
{...getFieldProps('reason')}
placeholder="대관목적을 입력해 주세요."
/>
{touched.reason && errors.reason ? (
<div className="invalid-feedback text-left">{errors.reason}</div>
) : null}
</div>
<div className="form-group mb-4">
<FieldArray name="students">
{({ insert, remove, push }) => (
<div>
<label>이용자</label>
{
values.students.map((student, index) => (
<div className="row" key={index}>
<div className="col">
<Field <Field
name={`students.${index}.member`} name={`students.${index}.member`}
placeholder="이용자 성함을 입력하세요." placeholder="이용자 이름 입력"
type="text" type="text"
className="col-6 mr-1"
/> />
<ErrorMessage <ErrorMessage
name={`friends.${index}.name`} name={`friends.${index}.name`}
...@@ -208,32 +206,29 @@ function Apply(props) { ...@@ -208,32 +206,29 @@ function Apply(props) {
type="button" type="button"
className="secondary" className="secondary"
onClick={() => remove(index)} onClick={() => remove(index)}
> >X</button>
X
</button>
</div> </div>
</div> ))}
))} <button
<button type="button"
type="button" className="btn btn-primary"
className="btn btn-primary" onClick={() => push({ member: '' })}
onClick={() => push({ member: '' })} >추가</button>
> </div>
추가 )}
</button> </FieldArray>
</div> </div>
)} <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
</FieldArray> 신청하기
</div> </button>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}> </form>
신청하기 )}
</button> </Formik>
</form> </Col>
</div> </Row>
)} </Container>
</Formik>
</div> </div>
) )
} }
export default Apply export default Apply
\ No newline at end of file
server/client/src/Pages/HomePage.js
View file @ 3ef60774
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import Schedule from '../Components/Schedule'; import Schedule from '../Components/Schedule';
import Tabs from 'react-bootstrap/Tabs'; import { Container, Tabs, Tab } from 'react-bootstrap';
import Tab from 'react-bootstrap/Tab';
function Home() { function Home() {
const [key, setKey] = useState('9-116'); const [key, setKey] = useState('9-116');
...@@ -10,7 +9,7 @@ function Home() { ...@@ -10,7 +9,7 @@ function Home() {
return ( return (
<div> <div>
<Menu /> <Menu />
<div className="container mt-3"> <Container className="col-md-10 mt-3">
<h2>대관 현황</h2> <h2>대관 현황</h2>
<p> <p>
<strong>대관 가능 시간</strong> <strong>대관 가능 시간</strong>
...@@ -41,7 +40,7 @@ function Home() { ...@@ -41,7 +40,7 @@ function Home() {
<div className="bg-white"> <div className="bg-white">
<h6>고려대학교 대관시스템</h6> <h6>고려대학교 대관시스템</h6>
</div> </div>
</div> </Container>
</div> </div>
) )
} }
......
server/client/src/caret-left-fill.svg 0 → 100644
View file @ 3ef60774
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-left-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
</svg>
\ No newline at end of file
server/client/src/caret-right-fill.svg 0 → 100644
View file @ 3ef60774
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
\ 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