[cc4db18] | 1 | import React, {useState, useEffect} from 'react'
|
---|
[d76b7ee] | 2 | import {Header} from "./Header";
|
---|
[a26f6a1] | 3 | import {Link, useNavigate} from "react-router-dom";
|
---|
[899b19d] | 4 | import {Button, Card, DatePicker, Form, Image, Input, Modal, notification, Rate, Spin} from "antd";
|
---|
[d76b7ee] | 5 | import placeholderImage from '../src/Assets/placeholder.png'
|
---|
| 6 | import AddNewReservation from "./Dashboard/AddNewReservation";
|
---|
[cc4db18] | 7 | import axios from "axios";
|
---|
| 8 | import env from "./env";
|
---|
[899b19d] | 9 | import Review from "./Dashboard/Review";
|
---|
[d76b7ee] | 10 |
|
---|
[899b19d] | 11 | const FrontPage = ({user, logout}) => {
|
---|
[d76b7ee] | 12 | const [restaurant, setRestaurant] = useState({name:'Sample Restaurant name', address: 'Sample street 1', city:'Sample'});
|
---|
| 13 | const [newReservationModal, setNewReservationModal] = useState(false);
|
---|
| 14 | const [saveModalLoading, setSaveModalLoading] = useState(false);
|
---|
[899b19d] | 15 | const [newReviewModal, setNewReviewModal] = useState(false);
|
---|
[cc4db18] | 16 | const [loading, setLoading] = useState(true);
|
---|
[899b19d] | 17 | const [refreshToggle, setRefreshToggle] = useState(false);
|
---|
[d76b7ee] | 18 | const history = useNavigate();
|
---|
[cc4db18] | 19 |
|
---|
| 20 | useEffect(()=>{
|
---|
| 21 | setLoading(true);
|
---|
| 22 | axios.get(env.api + 'Restaurants').then(res=>{
|
---|
| 23 | setRestaurant(res.data);
|
---|
| 24 | setLoading(false);
|
---|
| 25 | });
|
---|
| 26 | },[])
|
---|
| 27 |
|
---|
[a26f6a1] | 28 | useEffect(()=>{
|
---|
| 29 | if(user && !user.isConfirmed) {
|
---|
| 30 | notification['warning']({
|
---|
| 31 | message: <p>Вашиот емаил не е потврден. <a href={'/confirm-email'}>Потврдете го тука</a></p>
|
---|
| 32 | });
|
---|
| 33 | }
|
---|
| 34 | },[user])
|
---|
| 35 |
|
---|
[899b19d] | 36 | const saveNewReview = data =>{
|
---|
| 37 | setSaveModalLoading(true)
|
---|
[a26f6a1] | 38 | axios.post(env.api + 'Reviews',data,{ headers: {Authorization: localStorage.getItem('Auth')}}).then(res=>{
|
---|
[899b19d] | 39 | setNewReviewModal(false)
|
---|
| 40 | setSaveModalLoading(false)
|
---|
| 41 | notification['success']({
|
---|
| 42 | message: 'Успешно зачувано',
|
---|
| 43 | });
|
---|
| 44 | setRefreshToggle(ref => !ref);
|
---|
| 45 | }).catch(err=>{
|
---|
| 46 | setSaveModalLoading(false)
|
---|
| 47 | notification['error']({
|
---|
| 48 | message: 'Се случи проблем при зачувување',
|
---|
| 49 | });
|
---|
| 50 | });
|
---|
| 51 | }
|
---|
| 52 |
|
---|
[d76b7ee] | 53 | return(
|
---|
| 54 | <div>
|
---|
[899b19d] | 55 | <Header onClickButton={!user?()=>history('/login'):logout} buttonText={!user?'Најави се':'Одјави се'}/>
|
---|
[cc4db18] | 56 | {loading ? <Spin style={{margin: 20}}/> :
|
---|
[d76b7ee] | 57 | <div style={{
|
---|
| 58 | height: '400px',
|
---|
| 59 | width: '100%',
|
---|
| 60 | borderTop: '1px solid gray',
|
---|
| 61 | padding: '20px'
|
---|
| 62 | }}>
|
---|
[cc4db18] | 63 | <div id={'businessFrontImage'}>
|
---|
| 64 | <Image
|
---|
| 65 | src={restaurant.base64Image}
|
---|
| 66 | id={'businessFrontInsideImage'}
|
---|
| 67 | placeholder={
|
---|
| 68 | <img
|
---|
| 69 | src={placeholderImage}
|
---|
| 70 | alt={'place'}
|
---|
| 71 | style={{width: '100%', height: '100%'}}
|
---|
| 72 | />
|
---|
| 73 | }
|
---|
| 74 | wrapperStyle={{overflow: 'hidden', width: '100%'}}
|
---|
| 75 | style={{width: '100%', height: '100%', margin: 'auto', objectFit: 'cover'}}>
|
---|
| 76 | </Image>
|
---|
[d76b7ee] | 77 | </div>
|
---|
[cc4db18] | 78 | <div id={'businessFrontInfo'}>
|
---|
| 79 | <div style={{
|
---|
| 80 | width: '100%',
|
---|
| 81 | height: '100%',
|
---|
| 82 | display: 'flex',
|
---|
| 83 | flexDirection: 'column',
|
---|
| 84 | justifyContent: 'space-between'
|
---|
| 85 | }}>
|
---|
| 86 | <div style={{flexGrow: 1, fontSize: '20px', fontWeight: '500', textAlign: 'start'}}>
|
---|
| 87 | {restaurant.name}
|
---|
| 88 | <div style={{
|
---|
| 89 | color: 'gray',
|
---|
| 90 | fontSize: '10px'
|
---|
| 91 | }}>{restaurant.address}, {restaurant.phone}</div>
|
---|
| 92 | </div>
|
---|
| 93 | <Button onClick={() => setNewReservationModal(true)}
|
---|
| 94 | style={{width: '100%', marginTop: '5px'}} type={'primary'}>Резервирај</Button>
|
---|
| 95 | </div>
|
---|
[d76b7ee] | 96 |
|
---|
[cc4db18] | 97 | </div>
|
---|
| 98 | <div style={{textAlign: 'start', backgroundColor: '#F2F2F2'}}>
|
---|
[899b19d] | 99 | <div style={{
|
---|
| 100 | width: '100%',
|
---|
| 101 | height:'75px',
|
---|
| 102 | backgroundColor: 'white',
|
---|
| 103 | padding: '20px',
|
---|
| 104 | border: '1px solid lightgray'
|
---|
| 105 | }} >
|
---|
| 106 | <h2 style={{float: 'left'}}>Мени</h2>
|
---|
| 107 | </div>
|
---|
[cc4db18] | 108 | {restaurant.menu.map(el =>
|
---|
[899b19d] | 109 | <Card key={el.id} title={el.title} style={{ width: 280, display:'inline-block', margin:'10px' }} size="small">
|
---|
[cc4db18] | 110 | <p>{el.description}</p>
|
---|
| 111 | <b>{el.price} ден.</b>
|
---|
| 112 | </Card>
|
---|
| 113 | )}
|
---|
[899b19d] | 114 | <Review user={user} front refresh={refreshToggle} setVisible={setNewReviewModal}/>
|
---|
[cc4db18] | 115 | </div>
|
---|
[d76b7ee] | 116 | </div>
|
---|
[cc4db18] | 117 | }
|
---|
[d76b7ee] | 118 | <Modal
|
---|
| 119 | style={{top: 20}}
|
---|
| 120 | width={'700px'}
|
---|
| 121 | title="Нова Резервација"
|
---|
| 122 | footer={[
|
---|
| 123 | <Button form="newResForm" key="submit" htmlType="submit" type={'primary'} loading={saveModalLoading}>
|
---|
| 124 | Прати
|
---|
| 125 | </Button>
|
---|
| 126 | ]}
|
---|
| 127 | onCancel={()=>setNewReservationModal(false)}
|
---|
| 128 | visible={newReservationModal}>
|
---|
| 129 | <AddNewReservation setModalSaveLoading={setSaveModalLoading} setModalVisible={setNewReservationModal} />
|
---|
| 130 | </Modal>
|
---|
[899b19d] | 131 | <Modal
|
---|
| 132 | style={{top: 20}}
|
---|
| 133 | width={'700px'}
|
---|
| 134 | title="Нова оценка"
|
---|
| 135 | footer={[
|
---|
| 136 | <Button form="newReviewForm" key="submit" htmlType="submit" type={'primary'} loading={saveModalLoading}>
|
---|
| 137 | Прати
|
---|
| 138 | </Button>
|
---|
| 139 | ]}
|
---|
| 140 | onCancel={()=>setNewReviewModal(false)}
|
---|
| 141 | visible={newReviewModal}>
|
---|
| 142 | <Form onFinish={saveNewReview}
|
---|
| 143 | id={'newReviewForm'}
|
---|
| 144 | onFinishFailed={()=>
|
---|
| 145 | notification['error']({
|
---|
| 146 | message: 'Ве молиме поправете ги сите грешки пред зачувување!',
|
---|
| 147 | })}>
|
---|
| 148 | <Form.Item
|
---|
| 149 | label="Наслов"
|
---|
| 150 | name="title"
|
---|
| 151 | rules={[
|
---|
| 152 | {
|
---|
| 153 | required: true,
|
---|
| 154 | message: 'Ве молиме внесете наслов!',
|
---|
| 155 | },
|
---|
| 156 | ]}
|
---|
| 157 | >
|
---|
| 158 | <Input/>
|
---|
| 159 | </Form.Item>
|
---|
| 160 | <Form.Item
|
---|
| 161 | label="Опис"
|
---|
| 162 | name="description"
|
---|
| 163 | rules={[
|
---|
| 164 | {
|
---|
| 165 | required: true,
|
---|
| 166 | message: 'Ве молиме внесете опис!',
|
---|
| 167 | },
|
---|
| 168 | ]}
|
---|
| 169 | >
|
---|
| 170 | <Input.TextArea rows={4}/>
|
---|
| 171 | </Form.Item>
|
---|
| 172 | <Form.Item
|
---|
| 173 | label="Оценка"
|
---|
| 174 | name="stars"
|
---|
| 175 | rules={[
|
---|
| 176 | {
|
---|
| 177 | required: true,
|
---|
| 178 | message: 'Ве молиме внесете оценка!',
|
---|
| 179 | },
|
---|
| 180 | ]}
|
---|
| 181 | >
|
---|
| 182 | <Rate/>
|
---|
| 183 | </Form.Item>
|
---|
| 184 | </Form>
|
---|
| 185 | </Modal>
|
---|
[d76b7ee] | 186 | </div>
|
---|
| 187 | )
|
---|
| 188 | }
|
---|
| 189 | export default FrontPage; |
---|