Changeset ac19a0c for frontend/src/Components/HotelEdit

Timestamp:

01/13/24 23:19:50 (10 months ago)

Author:

darsov2 <62809499+darsov2@…>

Branches:

master

Children:

e85a562

Parents:

e9b4ba9

Message:

authContext impl, admin panel impl, search bar fixes, reservations listings impl

File:

• frontend/src/Components/HotelEdit/HotelEditTab.js (modified) (1 diff)

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 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>
+    );
 }