Commit d0f6f520 authored by CHAERIN KIM's avatar CHAERIN KIM
Browse files

기능 ㄹㅇ 완료

parent 3dfcbd6d
import React, { useState, useEffect } from 'react';
import { Field, Formik } from 'formik';
import axios from 'axios';
import { render } from 'react-dom';
import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components';
function List(props) {
function remove() {
console.log(props._id)
axios.delete(`/reserves/${props._id}`, { data: { _id: props._id, }})
.then(res => {
if (res.status === 404) return alert(res.data.error)
alert("신청이 완료되었습니다!")
})
.catch(err => {
alert(err.error)
});
};
return (
<div>
<div>날짜 : {props.date}</div>
<div>이름 : {props.name}</div>
<div>강의실 : {props.room}</div>
<div>시간 : {props.time}</div>
<div>사용인원 : {props.num}</div>
<div>{props._id}</div>
<form onSubmit={remove} className="col-sm-3">
<button type="submit" className="btn btn-dark">
신청 취소
</button>
</form>
</div>
)
}
export default List;
\ No newline at end of file
...@@ -39,7 +39,10 @@ function Menu() { ...@@ -39,7 +39,10 @@ function Menu() {
<Link to="/home" className="nav-link">대관 현황</Link> <Link to="/home" className="nav-link">대관 현황</Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<Link to="/apply" className="nav-link">대관 신청</Link> <Link to={{
pathname: `/apply/${localStorage.getItem('_id')}`,
state: { id: localStorage.getItem('_id') },
}} className="nav-link">대관 신청</Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<Link to={{ <Link to={{
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Formik } 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 { Redirect } from 'react-router-dom';
function Apply(props) {
const [state, setState] = useState();
const [user, setUser] = useState({ name: "" });
useEffect(() => {
getUser();
}, [])
if (state) {
return <Redirect to={{
pathname: `/check/${props.match.params.id}`,
state: { id: props.match.params.id },
}} />;
}
function getUser() {
axios.get(`/users/${props.match.params.id}`, {
headers: { authorization: localStorage.getItem('token') },
})
.then(res => {
if (res.status !== 201) {
alert(res.data.error);
}
console.log(res.data);
setUser(res.data);
})
.catch(err => {
alert(err.error)
});
}
function Apply() {
return ( return (
<div> <div>
<Menu /> <Menu />
<div className="container">apply
<Formik <Formik
initialValues={{ initialValues={{
date: "20201003", _id: `${props.match.params.id}`,
time: "시간", date: '',
room: "9-116", time: '',
name: "종윤", room: '',
_id: "5f6fa20001988e5604603870", reason: '',
reason: "study hard", students: [
member: "jinju rkyoung", {
approve: false, member: '',
num: 5, },
],
}} }}
validationSchema={Yup.object({
date: Yup.string()
.required('날짜를 입력해주세요.'),
time: Yup.string()
.required('시간을 입력해주세요.'),
room: Yup.string()
.required('강의실 번호를 입력해주세요.'),
reason: Yup.string()
.required('대관목적을 입력해주세요.'),
})}
onSubmit={(values, { setSubmitting }) => { onSubmit={(values, { setSubmitting }) => {
console.log(values)
axios({ axios({
method: 'post', method: 'post',
url: '/reserves', url: '/reserves',
data: values, data: values
}).then(res => { }).then(res => {
if (res.status === 404) return alert(res.data.error) if (res.status === 404) return alert(res.data.error)
alert("신청이 완료되었습니다!") alert("신청이 완료되었습니다!");
setState(true);
}) })
.catch(err => { .catch(err => {
alert(err.error) alert(err.error)
}); });
setTimeout(() => { // setTimeout(() => {
setSubmitting(false); // setSubmitting(false);
}, 400); // finish the cycle in handler // }, 400); // finish the cycle in handler
}} }}
> >
{({ {({
errors,
touched,
values,
handleSubmit, handleSubmit,
getFieldProps,
isSubmitting, isSubmitting,
}) => ( }) => (
<div className="row justify-content-center align-items-center"> <div className="row justify-content-center align-items-center">
{console.log(user)}
<form onSubmit={handleSubmit} className="col-sm-3"> <form onSubmit={handleSubmit} className="col-sm-3">
<div className="form-group mb-4">
<label>대표자</label>
<div>{user.name}</div>
</div>
<div className="form-group mb-4">
<label>신청날짜</label>
<input
className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")}
type="number"
name="date"
{...getFieldProps('date')}
placeholder="2020mmdd"
/>
{touched.date && errors.date ? (
<div className="invalid-feedback text-left">{errors.date}</div>
) : null}
</div>
<div className="form-group mb-4">
<label>이용시간</label>
<input
className={(touched.time && errors.time ? 'form-control is-invalid' : "form-control")}
type="text"
name="time"
{...getFieldProps('time')}
placeholder="ex) 11:00~14:00"
/>
{touched.time && errors.time ? (
<div className="invalid-feedback text-left">{errors.time}</div>
) : null}
</div>
<div className="form-group mb-4">
<label>강의실</label>
<input
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
name={`students.${index}.member`}
placeholder="이용자 성함을 입력하세요."
type="text"
/>
<ErrorMessage
name={`friends.${index}.name`}
component="div"
className="field-error"
/>
<button
type="button"
className="secondary"
onClick={() => remove(index)}
>
X
</button>
</div>
</div>
))}
<button
type="button"
className="btn btn-primary"
onClick={() => push({ member: '' })}
>
추가
</button>
</div>
)}
</FieldArray>
</div>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}> <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
신청 신청하기
</button> </button>
</form> </form>
</div> </div>
)} )}
</Formik> </Formik>
</div> </div>
</div>
) )
} }
......
...@@ -3,6 +3,11 @@ import Menu from '../Components/Menu'; ...@@ -3,6 +3,11 @@ import Menu from '../Components/Menu';
import axios from 'axios'; import axios from 'axios';
function Check(props) { function Check(props) {
const [reserve, setReserve] = useState([]);
useEffect(() => {
getReserve();
}, [])
function getReserve() { function getReserve() {
axios.get(`/reserves/${props.match.params.id}`, { axios.get(`/reserves/${props.match.params.id}`, {
headers: { authorization: localStorage.getItem('token') }, headers: { authorization: localStorage.getItem('token') },
...@@ -22,54 +27,49 @@ function Check(props) { ...@@ -22,54 +27,49 @@ function Check(props) {
axios.delete(`/reserves/${reserve[index]._id}`) axios.delete(`/reserves/${reserve[index]._id}`)
.then(res => { .then(res => {
if (res.status === 404) return alert(res.data.error) if (res.status === 404) return alert(res.data.error)
alert("삭제되었습니다!") alert("삭제되었습니다!");
getReserve();
}) })
.catch(err => { .catch(err => {
alert(err.error) alert(err.error)
}); });
}; };
function renderTableBody() {
return reserve.map((reserve, index) => { return (
<div>
<Menu />
<div className="">
<table className="table">
<thead>
<tr>
<th>날짜</th>
<th>시간</th>
<th>강의실</th>
<th>사용인원</th>
<th>승인여부</th>
<th>예약취소</th>
</tr>
</thead>
<tbody>
{reserve.map((reserve, index) => {
return ( return (
<tr key={index}> <tr key={index}>
<td>{props.match.params.id}</td>
<td>{reserve.name}</td>
<td>{reserve.date}</td> <td>{reserve.date}</td>
<td>{reserve.time}</td>
<td>{reserve.room}</td> <td>{reserve.room}</td>
<td>{reserve.num}</td>
<td>{reserve.approve?"사용허가":"글쎄..."}</td>
<td> <td>
<button onClick={() => remove(index)} className="btn btn-dark"> <button onClick={() => remove(index)} className="btn btn-danger">
취소 취소
</button> </button>
</td> </td>
</tr> </tr>
) )
}) })}
}
function renderTableHeader(props) {
return (
<tr>
<th>아이디</th>
<th>이름</th>
<th>날짜</th>
<th>강의실</th>
<th>예약취소</th>
</tr>
)
}
const [reserve, setReserve] = useState([]);
useEffect(() => {
getReserve();
}, [])
return (
<div>
<Menu />
<div className="">check
<tbody>
{renderTableHeader()}
{renderTableBody()}
</tbody> </tbody>
</table>
</div> </div>
</div> </div>
) )
......
...@@ -132,7 +132,7 @@ function Login() { ...@@ -132,7 +132,7 @@ function Login() {
if (res.status === 404) return alert(res.data.error) if (res.status === 404) return alert(res.data.error)
localStorage.setItem('token', res.data.token); localStorage.setItem('token', res.data.token);
localStorage.setItem('id', res.data.users._id); localStorage.setItem('_id', res.data.users._id);
localStorage.setItem('name', res.data.users.name); localStorage.setItem('name', res.data.users.name);
setState(true); setState(true);
}) })
......
...@@ -29,7 +29,7 @@ ReactDOM.render( ...@@ -29,7 +29,7 @@ ReactDOM.render(
<Route path="/signup" component={Signup} /> <Route path="/signup" component={Signup} />
<Route path="/find" component={Find} /> <Route path="/find" component={Find} />
<Route path="/change" component={Change} /> <Route path="/change" component={Change} />
<Route path="/apply" component={Apply} /> <Route path="/apply/:id" component={Apply} />
<Route path="/check/:id" component={Check} /> <Route path="/check/:id" component={Check} />
<Route path="/notice" component={Notice} /> <Route path="/notice" component={Notice} />
<Redirect path="/" to="/" /> <Redirect path="/" to="/" />
......
...@@ -8,15 +8,15 @@ router.post('/', function (req, res, next) { ...@@ -8,15 +8,15 @@ router.post('/', function (req, res, next) {
console.log('/reserve post req.body', req.body) console.log('/reserve post req.body', req.body)
const reserve = new Reserve({ const reserve = new Reserve({
id: req.body._id,
date: req.body.date, date: req.body.date,
time: req.body.time, time: req.body.time,
room: req.body.room, room: req.body.room,
name: req.body.name, name: req.body.name,
id: req.body._id,
reason: req.body.reason, reason: req.body.reason,
member: req.body.member, students: req.body.students,
approve: req.body.approve, approve: req.body.approve,
num: req.body.num, num: req.body.students.length + 1,
}); });
reserve.save() reserve.save()
......
...@@ -34,6 +34,15 @@ router.post('/', function (req, res, next) { ...@@ -34,6 +34,15 @@ router.post('/', function (req, res, next) {
}) })
}); });
router.get('/:_id', function (req, res, next) {
console.log('/users get req.params', req.params)
User.findOne({ _id: req.params._id }, function (err, user) {
if (err) return res.status(500).json({ error: err });
res.status(201).json(user);
})
})
router.put('/change/:id', function (req, res, next) { router.put('/change/:id', function (req, res, next) {
console.log('/change put req.body', req.params) console.log('/change put req.body', req.params)
User.findOne({ _id: req.params.id }, 'password', function (err, user) { User.findOne({ _id: req.params.id }, 'password', function (err, user) {
......
...@@ -5,7 +5,7 @@ module.exports = () => { ...@@ -5,7 +5,7 @@ module.exports = () => {
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
mongoose.set('debug', true); mongoose.set('debug', true);
} }
mongoose.connect('mongodb://hyj:hyj3657@localhost:27017/admin', { mongoose.connect('mongodb://cherry:1q2w3e4r@localhost:27017/admin', {
dbName: 'ku_rental', useNewUrlParser: true, useUnifiedTopology: true, dbName: 'ku_rental', useNewUrlParser: true, useUnifiedTopology: true,
}, (error) => { }, (error) => {
if (error) { if (error) {
......
...@@ -27,8 +27,8 @@ const reserveSchema = new Schema({ ...@@ -27,8 +27,8 @@ const reserveSchema = new Schema({
type: String, type: String,
}, },
member: { students: {
type: String, type: Array,
}, },
approve: { approve: {
......
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