1 | import React from "react";
|
---|
2 | import {Button, Col, Container, Form, Row} from "react-bootstrap";
|
---|
3 | import {HiMagnifyingGlass} from "react-icons/hi2"
|
---|
4 | import useFormData from "../Hooks/useFormData";
|
---|
5 |
|
---|
6 | const timeOfArrival = () => {
|
---|
7 | let times = [];
|
---|
8 |
|
---|
9 | for (let i = 0; i <= 23; i++) {
|
---|
10 | for (let j = 0; j <= 30; j += 30) {
|
---|
11 | let hour = i.toString().padStart(2, "0");
|
---|
12 | let minutes = j.toString().padStart(2, "0");
|
---|
13 | times.push(`${hour}:${minutes}`);
|
---|
14 | }
|
---|
15 | }
|
---|
16 |
|
---|
17 | return times;
|
---|
18 | };
|
---|
19 | function TabFormRestaurant() {
|
---|
20 | const {formData, onFormChange, setFormData} = useFormData({
|
---|
21 | restaurantLocation: '',
|
---|
22 | date: '',
|
---|
23 | hourFrom: '',
|
---|
24 | hourTo: '',
|
---|
25 | numPeople: ''
|
---|
26 | })
|
---|
27 |
|
---|
28 |
|
---|
29 | const a = timeOfArrival();
|
---|
30 |
|
---|
31 | return (
|
---|
32 | <Form>
|
---|
33 | <Row>
|
---|
34 | <Col>
|
---|
35 | <Form.Floating className="mb-3">
|
---|
36 | <Form.Control
|
---|
37 | size="lg"
|
---|
38 | type="text"
|
---|
39 | placeholder="Место:"
|
---|
40 | id="location"
|
---|
41 | name={'restaurantLocation'}
|
---|
42 | value={formData.restaurantLocation}
|
---|
43 | onChange={onFormChange}
|
---|
44 | ></Form.Control>
|
---|
45 | <label htmlFor="location">Место:</label>
|
---|
46 | </Form.Floating>
|
---|
47 | </Col>
|
---|
48 | <Col>
|
---|
49 | <Form.Floating className="mb-3">
|
---|
50 | <Form.Control
|
---|
51 | size="md"
|
---|
52 | type="date"
|
---|
53 | step={3600000}
|
---|
54 | placeholder="Час од:"
|
---|
55 | id="dateFrom"
|
---|
56 | name={'date'}
|
---|
57 | value={formData.date}
|
---|
58 | onChange={onFormChange}
|
---|
59 | ></Form.Control>
|
---|
60 | <label htmlFor="dateFrom">Датум:</label>
|
---|
61 | </Form.Floating>
|
---|
62 | </Col>
|
---|
63 | <Col>
|
---|
64 | <Form.Floating className="mb-3">
|
---|
65 | <Form.Select size="md"
|
---|
66 | name={'hourFrom'}
|
---|
67 | value={formData.hourFrom}
|
---|
68 | onChange={onFormChange}>
|
---|
69 | <option>Изберете време:</option>
|
---|
70 | {a.map((x) => {
|
---|
71 | return <option key={x}>{x}</option>;
|
---|
72 | })}
|
---|
73 | </Form.Select>
|
---|
74 | <label htmlFor="hour">Час од:</label>
|
---|
75 | </Form.Floating>
|
---|
76 | </Col>
|
---|
77 | <Col>
|
---|
78 | <Form.Floating className="mb-3">
|
---|
79 | <Form.Select size="md"
|
---|
80 | name={'hourTo'}
|
---|
81 | value={formData.hourTo}
|
---|
82 | onChange={onFormChange}>
|
---|
83 | <option>Изберете време:</option>
|
---|
84 | {a.filter((x) => x > formData.hourFrom).map((x) => {
|
---|
85 | return <option key={x}>{x}</option>;
|
---|
86 | })}
|
---|
87 | </Form.Select>
|
---|
88 | <label htmlFor="hour">Час до:</label>
|
---|
89 | </Form.Floating>
|
---|
90 | </Col>
|
---|
91 | <Col>
|
---|
92 | <Form.Floating className="mb-3">
|
---|
93 | <Form.Control
|
---|
94 | size="md"
|
---|
95 | type="number"
|
---|
96 | placeholder="Број на гости:"
|
---|
97 | id="floatingPassengers"
|
---|
98 | name={'numPeople'}
|
---|
99 | value={formData.numPeople}
|
---|
100 | onChange={onFormChange}
|
---|
101 | ></Form.Control>
|
---|
102 | <label htmlFor="floatingPassengers">Број на гости:</label>
|
---|
103 | </Form.Floating>
|
---|
104 | <Form.Group className="my-1">
|
---|
105 | <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" onClick={(e) => {
|
---|
106 | e.preventDefault();
|
---|
107 | window.location.href = `/search/restaurant/${formData.restaurantLocation}/${formData.date}/${formData.hourFrom}/${formData.hourTo}/${formData.numPeople}`
|
---|
108 |
|
---|
109 | }}>
|
---|
110 | <span className="ikona my-1"><HiMagnifyingGlass/></span>
|
---|
111 | <span className="ikona mx-3">Пребарај</span>
|
---|
112 | </Button>
|
---|
113 | </Form.Group>
|
---|
114 | </Col>
|
---|
115 | </Row>
|
---|
116 | </Form>
|
---|
117 | );
|
---|
118 | }
|
---|
119 |
|
---|
120 | export default TabFormRestaurant;
|
---|