1 | import React, {useEffect, useState} from 'react'
|
---|
2 | import {Button, Modal, DatePicker, List, notification, Input} from "antd";
|
---|
3 | import AddNewReservation from "./AddNewReservation";
|
---|
4 | import moment from 'moment'
|
---|
5 | import axios from "axios";
|
---|
6 | import env from '../env'
|
---|
7 |
|
---|
8 | const {RangePicker} = DatePicker
|
---|
9 |
|
---|
10 | const Reservations = ({}) => {
|
---|
11 | const [newReservationModal, setNewReservationModal] = useState(false);
|
---|
12 | const [saveModalLoading, setSaveModalLoading] = useState(false);
|
---|
13 | const [date, setDate] = useState([moment().startOf('day'), moment().add(24,'hours')]);
|
---|
14 | const [reservations, setReservations] = useState([])
|
---|
15 | const [newReservations, setNewReservations] = useState([])
|
---|
16 | const [loadingReservations, setLoadingReservations] = useState(true)
|
---|
17 |
|
---|
18 | useEffect(()=> {
|
---|
19 | getReservations()
|
---|
20 | },[])
|
---|
21 | const getReservations = () =>{
|
---|
22 | setLoadingReservations(true)
|
---|
23 | setDate(date => {
|
---|
24 | axios.get(env.api + 'Reservations', {
|
---|
25 | params: {
|
---|
26 | from: date[0].format('YYYY-MM-DDThh:mm:ss') + 'Z',
|
---|
27 | to: date[1].format('YYYY-MM-DDThh:mm:ss') + 'Z'
|
---|
28 | }, headers: {Authorization: localStorage.getItem('Auth')}
|
---|
29 | }).then(res => {
|
---|
30 | axios.get(env.api + 'Reservations/new', {
|
---|
31 | headers: {Authorization: localStorage.getItem('Auth')}
|
---|
32 | }).then(newres=>{
|
---|
33 | setNewReservations(newres.data);
|
---|
34 | setReservations(res.data);
|
---|
35 | setLoadingReservations(false)
|
---|
36 | })
|
---|
37 | }).catch(er => {
|
---|
38 | setLoadingReservations(false)
|
---|
39 | notification['error']({
|
---|
40 | message: 'Се случи проблем при додавање резервација. Ве молиме пробајте повторно подоцна',
|
---|
41 | });
|
---|
42 | console.log(er);
|
---|
43 | });
|
---|
44 | return date;
|
---|
45 | })
|
---|
46 | }
|
---|
47 | const dateChanged = (cng) => {
|
---|
48 | setDate(cng)
|
---|
49 | getReservations()
|
---|
50 | }
|
---|
51 | const changeReservationStatus = (id, newStatus) => {
|
---|
52 | console.log(id)
|
---|
53 | axios.put(env.api + 'Reservations/'+id+'/status',{}, {
|
---|
54 | params: {
|
---|
55 | status: newStatus
|
---|
56 | }, headers: {Authorization: localStorage.getItem('Auth')}
|
---|
57 | }).then(res => {
|
---|
58 | getReservations()
|
---|
59 | }).catch(er => {
|
---|
60 | notification['error']({
|
---|
61 | message: 'Се случи проблем при менување резервација. Ве молиме пробајте повторно подоцна',
|
---|
62 | });
|
---|
63 | console.log(er);
|
---|
64 | })
|
---|
65 | }
|
---|
66 | const changeTable = (ev, item) => {
|
---|
67 | axios.put(env.api + 'Reservations/'+item.id+'/table',{}, {
|
---|
68 | params: {
|
---|
69 | tableId: ev.target.value == '' ? 0 : ev.target.value
|
---|
70 | }, headers: {Authorization: localStorage.getItem('Auth')}
|
---|
71 | }).then(res => {
|
---|
72 | console.log("success");
|
---|
73 | }).catch(er => {
|
---|
74 | notification['error']({
|
---|
75 | message: 'Се случи проблем при менување резервација. Ве молиме пробајте повторно подоцна',
|
---|
76 | });
|
---|
77 | console.log(er);
|
---|
78 | })
|
---|
79 | setNewReservations(old =>{
|
---|
80 | const newRes = old.indexOf(item);
|
---|
81 | if(newRes == -1) return old;
|
---|
82 | const copy = [...old];
|
---|
83 | copy[newRes].table = ev.target.value;
|
---|
84 | return copy;
|
---|
85 | })
|
---|
86 | setReservations(old =>{
|
---|
87 | const newRes = old.indexOf(item);
|
---|
88 | if(newRes == -1) return old;
|
---|
89 | const copy = [...old];
|
---|
90 | copy[newRes].table = ev.target.value;
|
---|
91 | return copy;
|
---|
92 | })
|
---|
93 | }
|
---|
94 |
|
---|
95 | const ReservationType = [ 'Кратко', 'Долго', 'Настан' ];
|
---|
96 | const ReservationPlace = [ 'Внатре', 'Надвор' ];
|
---|
97 | const ReservationStatus = [ 'New', 'Confirmed', 'Cancelled' ];
|
---|
98 | return(
|
---|
99 | <div style={{padding:'20px'}}>
|
---|
100 | <div style={{
|
---|
101 | width: '100%',
|
---|
102 | backgroundColor: 'white',
|
---|
103 | padding: '20px',
|
---|
104 | height:'75px',
|
---|
105 | border: '1px solid lightgray'
|
---|
106 | }} id={'expandMain'}>
|
---|
107 | <h2 style={{float: 'left'}}>Резервации</h2>
|
---|
108 | <Button style={{float:'right'}} type={'primary'} onClick={()=>setNewReservationModal(true)}>Нова резервација</Button>
|
---|
109 | </div>
|
---|
110 | <div style={{marginTop:'20px', backgroundColor:'white'}}>
|
---|
111 | <div style={{
|
---|
112 | width: '100%',
|
---|
113 | height:'75px',
|
---|
114 | backgroundColor: 'white',
|
---|
115 | padding: '20px',
|
---|
116 | border: '1px solid lightgray'
|
---|
117 | }} >
|
---|
118 | <h3 style={{float: 'left'}}>Нови резервации</h3>
|
---|
119 | </div>
|
---|
120 | <List loading={loadingReservations} dataSource={newReservations} itemLayout={'horizontal'} locale={{emptyText:'Немате нови резервации'}}
|
---|
121 | renderItem={item => (
|
---|
122 | <List.Item
|
---|
123 | actions={
|
---|
124 | item.reservationStatus == 0 ?
|
---|
125 | [<a onClick={()=>changeReservationStatus(item.id,ReservationStatus[1])}>Прифати</a>, <a style={{color:'red'}} onClick={()=>changeReservationStatus(item.id,ReservationStatus[2])}>Отфрли</a>]
|
---|
126 | : item.reservationStatus == 1 ? [<span style={{color:'green'}}>Прифатено</span>] : [<span style={{color:'red'}}>Отфрлено</span>]}>
|
---|
127 | <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',width:'100%', padding:'10px'}}>
|
---|
128 | <div style={{textAlign:'start', width:'200px'}}>
|
---|
129 | <div><b>Име:</b> {item.contactName}</div>
|
---|
130 | <div><b>Број:</b> {item.contactNumber}</div>
|
---|
131 | </div>
|
---|
132 | <div style={{marginTop:'10px'}}>
|
---|
133 | Маса: <Input style={{ width: '60px' }} type={'number'} value={item.table == 0 ? '' : item.table} onChange={(ev)=>changeTable(ev,item)}/>
|
---|
134 | </div>
|
---|
135 | <div>
|
---|
136 | <div><b>Луѓе:</b> {item.persons}</div>
|
---|
137 | <div>{ReservationPlace[item.reservationPlace]}, {ReservationType[item.reservationType]}</div>
|
---|
138 | </div>
|
---|
139 | <div>
|
---|
140 | <div style={{marginTop:'10px'}}>{moment(item.startDate).format('hh:mm DD/MM/YY')}</div>
|
---|
141 | </div>
|
---|
142 | </div>
|
---|
143 | </List.Item>
|
---|
144 | )}/>
|
---|
145 | </div>
|
---|
146 | <div style={{marginTop:'20px', backgroundColor:'white'}}>
|
---|
147 | <div style={{
|
---|
148 | width: '100%',
|
---|
149 | height:'75px',
|
---|
150 | backgroundColor: 'white',
|
---|
151 | padding: '20px',
|
---|
152 | border: '1px solid lightgray'
|
---|
153 | }} >
|
---|
154 | <h3 style={{float: 'left'}}>Сите резервации</h3>
|
---|
155 | <RangePicker
|
---|
156 | onChange={dateChanged}
|
---|
157 | style={{float:'right'}}
|
---|
158 | ranges={{
|
---|
159 | 'Наредни 3 часа': [moment(), moment().add(3,'hours')],
|
---|
160 | 'Следни 24 часа': [moment().startOf('day'), moment().add(24,'hours')],
|
---|
161 | 'Овој месец': [moment().startOf('month'), moment().endOf('month')],
|
---|
162 | 'Последни 30 дена': [moment().subtract(30, 'days'), moment()],
|
---|
163 | }}
|
---|
164 | defaultValue={date}
|
---|
165 | />
|
---|
166 | </div>
|
---|
167 | <List loading={loadingReservations} dataSource={reservations} itemLayout={'horizontal'} locale={{emptyText:'Нема резервации за овој период'}}
|
---|
168 | renderItem={item => (
|
---|
169 | <List.Item
|
---|
170 | actions={
|
---|
171 | item.reservationStatus == 0 ?
|
---|
172 | [<a onClick={()=>changeReservationStatus(item.id,ReservationStatus[1])}>Прифати</a>, <a style={{color:'red'}} onClick={()=>changeReservationStatus(item.id,ReservationStatus[2])}>Отфрли</a>]
|
---|
173 | : item.reservationStatus == 1 ? [<span style={{color:'green'}}>Прифатено</span>] : [<span style={{color:'red'}}>Отфрлено</span>]}>
|
---|
174 | <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',width:'100%', padding:'10px'}}>
|
---|
175 | <div style={{textAlign:'start', width:'200px'}}>
|
---|
176 | <div><b>Име:</b> {item.contactName}</div>
|
---|
177 | <div><b>Број:</b> {item.contactNumber}</div>
|
---|
178 | </div>
|
---|
179 | <div style={{marginTop:'10px'}}>
|
---|
180 | Маса: <Input style={{ width: '60px' }} type={'number'} value={item.table == 0 ? '' : item.table} onChange={(ev)=>changeTable(ev,item)}/>
|
---|
181 | </div>
|
---|
182 | <div>
|
---|
183 | <div><b>Луѓе:</b> {item.persons}</div>
|
---|
184 | <div>{ReservationPlace[item.reservationPlace]}, {ReservationType[item.reservationType]}</div>
|
---|
185 | </div>
|
---|
186 | <div>
|
---|
187 | <div style={{marginTop:'10px'}}>{moment(item.startDate).format('hh:mm DD/MM/YY')}</div>
|
---|
188 | </div>
|
---|
189 | </div>
|
---|
190 | </List.Item>
|
---|
191 | )}/>
|
---|
192 | </div>
|
---|
193 | <Modal
|
---|
194 | style={{top: 20}}
|
---|
195 | width={'700px'}
|
---|
196 | title="Нова Резервација"
|
---|
197 | footer={[
|
---|
198 | <Button form="newResForm" key="submit" htmlType="submit" type={'primary'} loading={saveModalLoading}>
|
---|
199 | Прати
|
---|
200 | </Button>
|
---|
201 | ]}
|
---|
202 | onCancel={()=>setNewReservationModal(false)}
|
---|
203 | visible={newReservationModal}>
|
---|
204 | <AddNewReservation setModalSaveLoading={setSaveModalLoading} setModalVisible={setNewReservationModal} fetchData={getReservations}/>
|
---|
205 | </Modal>
|
---|
206 | </div>
|
---|
207 | )
|
---|
208 | }
|
---|
209 |
|
---|
210 | export default Reservations; |
---|