Changeset 07f4e8b for frontend/src/Components/HotelEdit

Timestamp:

01/24/24 17:42:28 (10 months ago)

Author:

darsov2 <62809499+darsov2@…>

Branches:

master

Children:

0f5aa27

Parents:

5528b99

Message:

prefinal fixes

Location:

frontend/src/Components/HotelEdit

Files:

• HotelEditTab.js (modified) (1 diff)
• ReservationListing.js (modified) (2 diffs)

frontend/src/Components/HotelEdit/HotelEditTab.js

@@ -1 +1 @@
 import React from "react";
-import { Container, Col, Row, Image, Nav, Tab } from "react-bootstrap";
-import { useState } from "react";
-import { FaTaxi, FaHotel } from "react-icons/fa";
-import { MdOutlineStickyNote2 } from "react-icons/md";
+import {Container, Col, Row, Image, Nav, Tab} from "react-bootstrap";
+import {useState} from "react";
+import {FaTaxi, FaHotel} from "react-icons/fa";
+import {MdOutlineStickyNote2} from "react-icons/md";
 import AddNew from "../Resources/AddNew";
-import { BiData } from "react-icons/bi"
+import {BiData} from "react-icons/bi"
 import RoomListing from "./RoomListing";
 import HotelEditForm from "./HotelEditForm";
 import AddHotelForm from "../Forms/AddHotelForm";
 import EditModal from "../Resources/EditModal";
+import AddAvailability from "../Resources/AddAvailability";
+import useGet from "../Hooks/useGet";
+import ReservationListing from "./ReservationListing";
 
 function HotelEditTab(props) {
-  const [activeTab, setActiveTab] = useState("/hotel");
-  const [modalData, setModalData] = useState("");
-  const [show, setShow] = useState(false);
+    const [activeTab, setActiveTab] = useState("/hotel");
+    const [modalData, setModalData] = useState("");
+    const [show, setShow] = useState(false);
 
-  const handleClose = () => setShow(false);
-  const handleShow = () => {
-    //e.preventDefault();
-    setShow(true);
+    console.log(props)
 
-  };
+    const {
+        data,
+        isLoading,
+        setData,
+        getData,
+        setChanged
+    } = useGet(`/hotel/${props.displayRoom.hotelId}/reservations/active`)
 
-  const showModal = (modalData) => {
-    setModalData(modalData);
-    handleShow();
-  }
-  console.log(props.displayRoom)
+    !isLoading && console.log(data)
 
-  const handleSelect = (eventKey) => {
-    setActiveTab(eventKey);
-  };
+    const handleClose = () => setShow(false);
+    const handleShow = () => {
+        //e.preventDefault();
+        setShow(true);
 
-  return (
-    <Container className="rounded-5">
-      <Tab.Container
-        activeKey={activeTab}
-        onSelect={handleSelect}
-        className="bg-dark rounded-5"
-      >
-        <Nav
-          fill
-          variant="tabs"
-          className="bg-body rounded-top-5"
-          activeKey="/hotel"
-          id="tab_item"
-        >
-          <Nav.Item className="tab_item rounded-5">
-            <Nav.Link eventKey="/hotel" className="text-left rounded-5">
+    };
+
+    const showModal = (modalData) => {
+        setModalData(modalData);
+        handleShow();
+    }
+    console.log(props.displayRoom)
+
+    const handleSelect = (eventKey) => {
+        setActiveTab(eventKey);
+    };
+
+    return (
+        <Container className="rounded-5">
+            <Tab.Container
+                activeKey={activeTab}
+                onSelect={handleSelect}
+                className="bg-dark rounded-5"
+            >
+                <Nav
+                    fill
+                    variant="tabs"
+                    className="bg-body rounded-top-5"
+                    activeKey="/hotel"
+                    id="tab_item"
+                >
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link eventKey="/hotel" className="text-left rounded-5">
               <span className="ikona">
                 <FaHotel
-                  color="#159895"
-                  style={{ lineHeight: "100em" }}
-                  size={"1.5em"}
-                  className="mx-3"
+                    color="#159895"
+                    style={{lineHeight: "100em"}}
+                    size={"1.5em"}
+                    className="mx-3"
                 />
               </span>
-              <span className="ikona">Соби</span>
-            </Nav.Link>
-          </Nav.Item>
-          <Nav.Item className="tab_item">
-            <Nav.Link eventKey="/restaurant">
+                            <span className="ikona">Соби</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item">
+                        <Nav.Link eventKey="/restaurant">
               <span className="ikona">
-                <MdOutlineStickyNote2 color="#159895" size={"1.5em"} className="mx-3" />
+                <MdOutlineStickyNote2 color="#159895" size={"1.5em"} className="mx-3"/>
               </span>
-              <span className="ikona">Резервации</span>
-            </Nav.Link>
-          </Nav.Item>
-          <Nav.Item className="tab_item rounded-5">
-            <Nav.Link eventKey="/transport" className="text-left rounded-5">
+                            <span className="ikona">Резервации</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                    <Nav.Item className="tab_item rounded-5">
+                        <Nav.Link eventKey="/transport" className="text-left rounded-5">
               <span className="ikona">
-                <BiData color="#159895" size={"1.5em"} className="mx-3" />
+                <BiData color="#159895" size={"1.5em"} className="mx-3"/>
               </span>
-              <span className="ikona">Општи податоци</span>
-            </Nav.Link>
-          </Nav.Item>
-        </Nav>
+                            <span className="ikona">Општи податоци</span>
+                        </Nav.Link>
+                    </Nav.Item>
+                </Nav>
 
-        <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
-          <Tab.Pane eventKey="/hotel">
-          {props.displayRoom.hotelRooms.map((room) => {
-              return <RoomListing key={room.hotelRoomId} data={room} showModal={showModal}/>
-            })}
-            <EditModal show={show} handleClose={handleClose} type="room" room={modalData}></EditModal>
-            <AddNew Id={props.displayRoom.hotelId} refresh={props.refresh} type="room"/>
-          </Tab.Pane>
-          <Tab.Pane eventKey="/restaurant">
-            <AddNew type="restaurant"/>
-          </Tab.Pane>
-          <Tab.Pane eventKey="/transport">
-            <AddHotelForm refresh={props.refresh} hotel={props.displayRoom}/>
-          </Tab.Pane>
-        </Tab.Content>
-      </Tab.Container>
-    </Container>
-  );
+                <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+                    <Tab.Pane eventKey="/hotel">
+                        {props.displayRoom.hotelRooms.map((room) => {
+                            return <RoomListing key={room.hotelRoomId} data={room} showModal={showModal}/>
+                        })}
+                        <EditModal show={show} handleClose={handleClose} type="room" room={modalData}></EditModal>
+                        <AddNew Id={props.displayRoom.hotelId} refresh={props.refresh} type="room"/>
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/restaurant">
+                        {!isLoading && data.map((res) => {
+                            return (
+                                <ReservationListing type={'hotel'} data={res}/>
+                            )
+                        })}
+                        {/*<AddNew type="restaurant"/>*/}
+                    </Tab.Pane>
+                    <Tab.Pane eventKey="/transport">
+                        <AddHotelForm refresh={props.refresh} hotel={props.displayRoom}/>
+                    </Tab.Pane>
+                </Tab.Content>
+            </Tab.Container>
+        </Container>
+    );
 }
 

frontend/src/Components/HotelEdit/ReservationListing.js

@@ -3 +3 @@
 
 const ReservationListing = (props) => {
+
+    const dateFormatter = (str) => {
+        const inputDate = new Date(str);
+
+        const options = {
+            year: '2-digit',
+            month: '2-digit',
+            day: '2-digit',
+        };
+
+        return inputDate.toLocaleString('de-DE', options);
+    }
+
     return(
         <>
@@ -15 +28 @@
                     <Col md={8} className="d-flex flex-column justify-content-start ps-5">
                         <h3 style={{fontWeight: "bold"}} className={'text-start'}>Резервација за:</h3>
-                        <h4 className={'text-start'}>{props.data.hotelRoom.hotelRoomName}</h4>
+                        {props.type === 'hotel' && <h4 className={'text-start'}>{props.data.hotelRoom.hotelRoomName}</h4>}
+                        {props.type === 'restaurant' && <h4 className={'text-start'}>{'Маса за ' + props.data.restaurantsTable.noSeats}</h4>}
+                        {props.type === 'transport' && <h4 className={'text-start'}>{props.data.transportRoute.from + ' ' + props.data.transportRoute.to}</h4>}
+                        {props.type === 'transport' && <h4 className={'text-start'}>{props.data.noSeats + ' ' + 'патници'}</h4>}
                         <h4 className={'text-start'}>{props.data.user.name + ' ' + props.data.user.surname}</h4>
-                        <h5 className={'text-start'}>{props.data.dateFrom + ' - ' + props.data.dateTo}</h5>
+                        {props.type !== 'transport' && <h5
+                            className={'text-start'}>{dateFormatter(props.data.dateFrom) + ' - ' + dateFormatter(props.data.dateTo)}</h5>}
                     </Col>
                     <Col md={4} className="d-flex flex-column justify-content-center align-content-center">
-                        <h3>Вкупна цена: <br></br>{props.data.hotelRoom.price}$</h3>
+                        {props.type === 'hotel' && <h3>Вкупна цена: <br></br>{props.data.hotelRoom.price}$</h3>}
                     </Col>
                 </Row>