[cc4db18] | 1 | import React, {useState, useEffect} from 'react'
|
---|
[d76b7ee] | 2 | import {Header} from "./Header";
|
---|
| 3 | import {useNavigate} from "react-router-dom";
|
---|
[cc4db18] | 4 | import {Button, Card, Image, Modal, 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";
|
---|
[d76b7ee] | 9 |
|
---|
| 10 | const FrontPage = ({}) => {
|
---|
| 11 | const [restaurant, setRestaurant] = useState({name:'Sample Restaurant name', address: 'Sample street 1', city:'Sample'});
|
---|
| 12 | const [newReservationModal, setNewReservationModal] = useState(false);
|
---|
| 13 | const [saveModalLoading, setSaveModalLoading] = useState(false);
|
---|
[cc4db18] | 14 | const [loading, setLoading] = useState(true);
|
---|
[d76b7ee] | 15 | const history = useNavigate();
|
---|
[cc4db18] | 16 |
|
---|
| 17 | useEffect(()=>{
|
---|
| 18 | setLoading(true);
|
---|
| 19 | axios.get(env.api + 'Restaurants').then(res=>{
|
---|
| 20 | setRestaurant(res.data);
|
---|
| 21 | setLoading(false);
|
---|
| 22 | });
|
---|
| 23 | },[])
|
---|
| 24 |
|
---|
[d76b7ee] | 25 | return(
|
---|
| 26 | <div>
|
---|
| 27 | <Header onClickButton={()=>history('/login')} buttonText={'Логирај се'}/>
|
---|
[cc4db18] | 28 | {loading ? <Spin style={{margin: 20}}/> :
|
---|
[d76b7ee] | 29 | <div style={{
|
---|
| 30 | height: '400px',
|
---|
| 31 | width: '100%',
|
---|
| 32 | borderTop: '1px solid gray',
|
---|
| 33 | padding: '20px'
|
---|
| 34 | }}>
|
---|
[cc4db18] | 35 | <div id={'businessFrontImage'}>
|
---|
| 36 | <Image
|
---|
| 37 | src={restaurant.base64Image}
|
---|
| 38 | id={'businessFrontInsideImage'}
|
---|
| 39 | placeholder={
|
---|
| 40 | <img
|
---|
| 41 | src={placeholderImage}
|
---|
| 42 | alt={'place'}
|
---|
| 43 | style={{width: '100%', height: '100%'}}
|
---|
| 44 | />
|
---|
| 45 | }
|
---|
| 46 | wrapperStyle={{overflow: 'hidden', width: '100%'}}
|
---|
| 47 | style={{width: '100%', height: '100%', margin: 'auto', objectFit: 'cover'}}>
|
---|
| 48 | </Image>
|
---|
[d76b7ee] | 49 | </div>
|
---|
[cc4db18] | 50 | <div id={'businessFrontInfo'}>
|
---|
| 51 | <div style={{
|
---|
| 52 | width: '100%',
|
---|
| 53 | height: '100%',
|
---|
| 54 | display: 'flex',
|
---|
| 55 | flexDirection: 'column',
|
---|
| 56 | justifyContent: 'space-between'
|
---|
| 57 | }}>
|
---|
| 58 | <div style={{flexGrow: 1, fontSize: '20px', fontWeight: '500', textAlign: 'start'}}>
|
---|
| 59 | {restaurant.name}
|
---|
| 60 | <div style={{
|
---|
| 61 | color: 'gray',
|
---|
| 62 | fontSize: '10px'
|
---|
| 63 | }}>{restaurant.address}, {restaurant.phone}</div>
|
---|
| 64 | </div>
|
---|
| 65 | <Button onClick={() => setNewReservationModal(true)}
|
---|
| 66 | style={{width: '100%', marginTop: '5px'}} type={'primary'}>Резервирај</Button>
|
---|
| 67 | </div>
|
---|
[d76b7ee] | 68 |
|
---|
[cc4db18] | 69 | </div>
|
---|
| 70 | <div style={{textAlign: 'start', backgroundColor: '#F2F2F2'}}>
|
---|
| 71 | <h2 style={{textAlign:'center',paddingTop:'20px'}}>Мени</h2>
|
---|
| 72 | {restaurant.menu.map(el =>
|
---|
| 73 | <Card title={el.title} style={{ width: 280, display:'inline-block', margin:'10px' }} size="small">
|
---|
| 74 | <p>{el.description}</p>
|
---|
| 75 | <b>{el.price} ден.</b>
|
---|
| 76 | </Card>
|
---|
| 77 | )}
|
---|
| 78 | </div>
|
---|
[d76b7ee] | 79 | </div>
|
---|
[cc4db18] | 80 | }
|
---|
[d76b7ee] | 81 | <Modal
|
---|
| 82 | style={{top: 20}}
|
---|
| 83 | width={'700px'}
|
---|
| 84 | title="Нова Резервација"
|
---|
| 85 | footer={[
|
---|
| 86 | <Button form="newResForm" key="submit" htmlType="submit" type={'primary'} loading={saveModalLoading}>
|
---|
| 87 | Прати
|
---|
| 88 | </Button>
|
---|
| 89 | ]}
|
---|
| 90 | onCancel={()=>setNewReservationModal(false)}
|
---|
| 91 | visible={newReservationModal}>
|
---|
| 92 | <AddNewReservation setModalSaveLoading={setSaveModalLoading} setModalVisible={setNewReservationModal} />
|
---|
| 93 | </Modal>
|
---|
| 94 | </div>
|
---|
| 95 |
|
---|
| 96 | )
|
---|
| 97 | }
|
---|
| 98 |
|
---|
| 99 | export default FrontPage; |
---|