[d76b7ee] | 1 | import React, {useEffect, useState} from 'react'
|
---|
[cc4db18] | 2 | import {Button, Modal, DatePicker, List, notification, Input} from "antd";
|
---|
[d76b7ee] | 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([])
|
---|
[cc4db18] | 15 | const [newReservations, setNewReservations] = useState([])
|
---|
[d76b7ee] | 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'
|
---|
[a26f6a1] | 28 | }, headers: {Authorization: localStorage.getItem('Auth')}
|
---|
[cc4db18] | 29 | }).then(res => {
|
---|
| 30 | axios.get(env.api + 'Reservations/new', {
|
---|
[a26f6a1] | 31 | headers: {Authorization: localStorage.getItem('Auth')}
|
---|
[cc4db18] | 32 | }).then(newres=>{
|
---|
| 33 | setNewReservations(newres.data);
|
---|
[d76b7ee] | 34 | setReservations(res.data);
|
---|
| 35 | setLoadingReservations(false)
|
---|
[cc4db18] | 36 | })
|
---|
| 37 | }).catch(er => {
|
---|
[d76b7ee] | 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)
|
---|
[cc4db18] | 53 | axios.put(env.api + 'Reservations/'+id+'/status',{}, {
|
---|
[d76b7ee] | 54 | params: {
|
---|
| 55 | status: newStatus
|
---|
[a26f6a1] | 56 | }, headers: {Authorization: localStorage.getItem('Auth')}
|
---|
[d76b7ee] | 57 | }).then(res => {
|
---|
| 58 | getReservations()
|
---|
| 59 | }).catch(er => {
|
---|
| 60 | notification['error']({
|
---|
| 61 | message: 'Се случи проблем при менување резервација. Ве молиме пробајте повторно подоцна',
|
---|
| 62 | });
|
---|
| 63 | console.log(er);
|
---|
[cc4db18] | 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
|
---|
[a26f6a1] | 70 | }, headers: {Authorization: localStorage.getItem('Auth')}
|
---|
[cc4db18] | 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 | })
|
---|
[d76b7ee] | 93 | }
|
---|
[cc4db18] | 94 |
|
---|
[d76b7ee] | 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>
|
---|
[cc4db18] | 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>
|
---|
[d76b7ee] | 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={{
|
---|
[cc4db18] | 159 | 'Наредни 3 часа': [moment(), moment().add(3,'hours')],
|
---|
[d76b7ee] | 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>
|
---|
[cc4db18] | 167 | <List loading={loadingReservations} dataSource={reservations} itemLayout={'horizontal'} locale={{emptyText:'Нема резервации за овој период'}}
|
---|
[d76b7ee] | 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>
|
---|
[cc4db18] | 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>
|
---|
[d76b7ee] | 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; |
---|