Changeset ac19a0c for frontend/src/Pages


Ignore:
Timestamp:
01/13/24 23:19:50 (11 months ago)
Author:
darsov2 <62809499+darsov2@…>
Branches:
master
Children:
e85a562
Parents:
e9b4ba9
Message:

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

Location:
frontend/src/Pages
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/Pages/HotelDetailsPage.js

    re9b4ba9 rac19a0c  
    11import React from "react";
    22import LoginForm from "../Components/Login/LoginForm";
    3 import { Container, Row, Col, Form } from "react-bootstrap";
     3import {Container, Row, Col, Form, FloatingLabel} from "react-bootstrap";
    44import Navigation from "../Components/Layout/Navbar/Navigation";
    55import Carousel from "react-bootstrap/Carousel";
    … …  
    6969                  placeholder="Каде ќе патувате?:"
    7070                  id="location"
     71                  value={data.hotelLocation}
    7172                ></Form.Control>
    72                 <label htmlFor="location">Локација:</label>
     73                <label style={{left: "10px"}} htmlFor="location">Локација:</label>
    7374              </Form.Floating>
    7475            </Row>
    … …  
    8081                  placeholder="Датум на пристигнување:"
    8182                  id="dateFrom"
     83                  value={from}
    8284                ></Form.Control>
    83                 <label htmlFor="dateFrom">Датум на пристигнување:</label>
     85                <label style={{left: "10px"}} htmlFor="dateFrom">Датум на пристигнување:</label>
    8486              </Form.Floating>
    8587            </Row>
    … …  
    9193                  placeholder="Датум на заминување:"
    9294                  id="dateTo"
     95                  value={to}
    9396                ></Form.Control>
    94                 <label htmlFor="dateTo">Датум на заминување:</label>
     97                <label style={{left: "10px"}} htmlFor="dateTo">Датум на заминување:</label>
    9598              </Form.Floating>
    9699            </Row>
    … …  
    103106                  id="floatingPassengers"
    104107                ></Form.Control>
    105                 <label htmlFor="floatingPassengers">Број на гости:</label>
     108                <label style={{left: "10px"}} htmlFor="floatingPassengers">Број на гости:</label>
    106109              </Form.Floating>
    107110            </Row>

  • frontend/src/Pages/HotelEditPage.js

    re9b4ba9 rac19a0c  
    1 import React, { useState } from "react";
    2 import { Container, Col, Row, Image } from "react-bootstrap";
     1import React, {useState} from "react";
     2import {Container, Col, Row, Image} from "react-bootstrap";
    33import Navigation from "../Components/Layout/Navbar/Navigation";
    44import ResourcesTab from "../Components/Resources/ResourcesTab";
    55import HotelEditTab from "../Components/HotelEdit/HotelEditTab";
    66import useGet from "../Components/Hooks/useGet";
    7 import { useParams } from "react-router-dom";
     7import {Navigate, useParams} from "react-router-dom";
     8import {useAuth} from "../Components/Context/AuthContext";
    89
    910
    1011const HotelEditPage = () => {
    1112
    12   const params = useParams();
    13   const link = "/hotel/list/" + params.hotelId;
    14   const [changed, setChanged] = useState(0)
    15   const { data, setData, isLoading, getData } = useGet(link, changed);
     13    const params = useParams();
     14    const link = "/hotel/list/" + params.hotelId;
     15    const [changed, setChanged] = useState(0)
     16    const {data, setData, isLoading, getData} = useGet(link, changed);
    1617
    1718
    18   console.log(data)
    19   return (
    20     <>
    21       <Navigation />
    22       {!isLoading && <Container>
    23         <Row className="mb-5">
    24           <h2 style={{ color: "#159895", textAlign: "left" }}>Мои ресурси</h2>
    25         </Row>
    26         <Row className="mb-5">
    27           <Col>
    28             <Row className="d-flex mb-3">
    29               <Col
    30                 className="d-flex justify-content-center"
    31                 style={{ maxWidth: "30%" }}
    32               >
    33                 <Image
    34                   src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
    35                   style={{
    36                     height: "5em",
    37                     borderRadius: "50%",
    38                     maxWidth: "100%",
    39                   }}
    40                   className="m-auto"
    41                 ></Image>
    42               </Col>
    43               <Col className="d-flex justify-content-center">
    44                 <Container className="pt-2" style={{ textAlign: "left" }}>
    45                   <h4>{data.hotelName}</h4>
    46                   <h5>{data.hotelLocation}</h5>
    47                 </Container>
    48               </Col>
    49             </Row>
    50           </Col>
    51         </Row>
    52         <Row>
    53             <HotelEditTab refresh={setChanged} displayRoom={data}/>
    54         </Row>
    55       </Container>}
    56     </>
    57   );
     19    console.log(data)
     20    return (
     21        <>
     22            <Navigation/>
     23            {!isLoading && <Container>
     24                <Row className="mb-5">
     25                    <h2 style={{color: "#159895", textAlign: "left"}}>Мои ресурси</h2>
     26                </Row>
     27                <Row className="mb-5">
     28                    <Col>
     29                        <Row className="d-flex mb-3">
     30                            <Col
     31                                className="d-flex justify-content-center"
     32                                style={{maxWidth: "30%"}}
     33                            >
     34                                <Image
     35                                    src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
     36                                    style={{
     37                                        height: "5em",
     38                                        borderRadius: "50%",
     39                                        maxWidth: "100%",
     40                                    }}
     41                                    className="m-auto"
     42                                ></Image>
     43                            </Col>
     44                            <Col className="d-flex justify-content-center">
     45                                <Container className="pt-2" style={{textAlign: "left"}}>
     46                                    <h4>{data.hotelName}</h4>
     47                                    <h5>{data.hotelLocation}</h5>
     48                                </Container>
     49                            </Col>
     50                        </Row>
     51                    </Col>
     52                </Row>
     53                <Row>
     54                    <HotelEditTab refresh={setChanged} displayRoom={data}/>
     55                </Row>
     56            </Container>}
     57        </>
     58    );
    5859};
    5960

  • frontend/src/Pages/LoginErrorPage.js

    re9b4ba9 rac19a0c  
    1111    const [show, setShow] = useState(false);
    1212    const [changed, setChanged] = useState(0);
    13     const {data, isLoading} = useGet("/username")
    1413    const userId = localStorage.getItem("userId")
    1514    const [registered, setRegistered] = useState(false);

  • frontend/src/Pages/LoginPage.js

    re9b4ba9 rac19a0c  
    33import { Container } from "react-bootstrap";
    44import Navigation from "../Components/Layout/Navbar/Navigation";
     5import {useAuth} from "../Components/Context/AuthContext";
     6import {Navigate} from "react-router-dom";
     7
    58
    69const LoginPage = () => {
    … …  
    811  document.body.style.marginTop = "auto";
    912  document.body.style.marginBottom = "auto";
     13
     14  const Auth = useAuth();
     15  const isLoggedIn = Auth.userIsAuthenticated();
     16
     17    if (isLoggedIn) {
     18        return <Navigate to={'/home'}/>
     19    }
     20
    1021  return (
    1122    <>

  • frontend/src/Pages/NoBusinessRegisteredError.js

    re9b4ba9 rac19a0c  
    66import RegisterBusinessForm from "../Components/Forms/RegisterBusinessForm";
    77import useGet from "../Components/Hooks/useGet";
    8 import { useNavigate } from "react-router-dom";
     8import {Navigate, useNavigate} from "react-router-dom";
     9import {useAuth} from "../Components/Context/AuthContext";
    910
    1011const NoBusinessRegisteredError = (props) => {
    1112  const [show, setShow] = useState(false);
    1213  const [changed, setChanged] = useState(0);
    13   const {data, isLoading} = useGet("/username")
     14  const Auth = useAuth();
     15  const isLoggedIn = Auth.userIsAuthenticated();
    1416  const userId = localStorage.getItem("userId")
    1517  const [registered, setRegistered] = useState(false);
    … …  
    4547
    4648
    47   console.log(data)
     49  if(!isLoggedIn)
     50  {
     51    return <Navigate to={'/login'}/>
     52  }
    4853
    49   !isLoading && !data && navigator("/login")
    5054  !firmaIsLoading && firma && firma.length > 0 && firma[0].approved && navigator("/resources/hotel")
    5155 

  • frontend/src/Pages/ProfilePage.js

    re9b4ba9 rac19a0c  
    88import ChangePasswordForm from "../Components/Forms/ChangePasswordForm";
    99import useGet from "../Components/Hooks/useGet";
     10import {useAuth} from "../Components/Context/AuthContext";
     11import {Navigate} from "react-router-dom";
    1012
    1113const ProfilePage = () => {
    1214
    13   const { data, setData, isLoading, getData } = useGet("/principal");
     15    const { data, setData, isLoading, getData } = useGet("/principal");
    1416
    15  
     17
     18
    1619    const profileData = {
    1720        "name": "Марко",
    … …  
    1922        "address": "ул. Раскрсница бр. 10",
    2023        "dateOfBirth": "2002-01-01",
    21         "country": "Никогаш Северна само МАКЕДОНИЈА",
     24        "country": "Македонија",
    2225        "zip": "1000",
    2326        "city": "Скопје",
    … …  
    2730
    2831
     32
    2933  return (
    3034    <>
    3135      <Navigation />
    32 {      !isLoading && <Container>
     36    {!isLoading && <Container>
    3337        <Row className="mb-5">
    3438          <h2 style={{ color: "#159895", textAlign: "left" }}>Мојот профил</h2>

  • frontend/src/Pages/ResourcesPage.js

    re9b4ba9 rac19a0c  
    11import React from "react";
    2 import { Container, Col, Row, Image } from "react-bootstrap";
     2import {Container, Col, Row, Image} from "react-bootstrap";
    33import Navigation from "../Components/Layout/Navbar/Navigation";
    44import ResourcesTab from "../Components/Resources/ResourcesTab";
    5 import { useState } from "react";
     5import {useState} from "react";
    66import useGet from "../Components/Hooks/useGet";
     7import {useAuth} from "../Components/Context/AuthContext";
     8import {Navigate} from "react-router-dom";
    79
    810const ResourcesPage = (props) => {
    911
    10   console.log(props.tab)
    11   const { data, setData, isLoading, getData } = useGet("/principal");
     12    const Auth = useAuth();
     13    const user = Auth.getUser();
    1214
    13 
    14   return (
    15     <>
    16       <Navigation />
    17 {!isLoading && <Container>
    18         <Row className="mb-5">
    19           <h2 style={{ color: "#159895", textAlign: "left" }}>Мои ресурси</h2>
    20         </Row>
    21         <Row className="mb-5">
    22           <Col>
    23             <Row className="d-flex mb-3">
    24               <Col
    25                 className="d-flex justify-content-center"
    26                 style={{ maxWidth: "30%" }}
    27               >
    28                 <Image
    29                   src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
    30                   style={{
    31                     height: "5em",
    32                     borderRadius: "50%",
    33                     maxWidth: "100%",
    34                   }}
    35                   className="m-auto"
    36                 ></Image>
    37               </Col>
    38               <Col className="d-flex justify-content-center">
    39                 <Container className="pt-2" style={{ textAlign: "left" }}>
    40                   <h4>{data.name + " " + data.surname}</h4>
    41                   <h5>{data.email}</h5>
    42                 </Container>
    43               </Col>
    44             </Row>
    45           </Col>
    46         </Row>
    47         <Row>
    48             <ResourcesTab tab={props.tab}></ResourcesTab>
    49         </Row>
    50       </Container>}
    51     </>
    52   );
     15    return (
     16        <>
     17            <Navigation/>
     18            {<Container>
     19                <Row className="mb-5">
     20                    <h2 style={{color: "#159895", textAlign: "left"}}>Мои ресурси</h2>
     21                </Row>
     22                <Row className="mb-5">
     23                    <Col>
     24                        <Row className="d-flex mb-3">
     25                            <Col
     26                                className="d-flex justify-content-center"
     27                                style={{maxWidth: "30%"}}
     28                            >
     29                                <Image
     30                                    src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
     31                                    style={{
     32                                        height: "5em",
     33                                        borderRadius: "50%",
     34                                        maxWidth: "100%",
     35                                    }}
     36                                    className="m-auto"
     37                                ></Image>
     38                            </Col>
     39                            <Col className="d-flex justify-content-center">
     40                                <Container className="pt-2" style={{textAlign: "left"}}>
     41                                    <h4>{user.name + " " + user.surname}</h4>
     42                                    <h5>{user.username}</h5>
     43                                </Container>
     44                            </Col>
     45                        </Row>
     46                    </Col>
     47                </Row>
     48                <Row>
     49                    <ResourcesTab tab={props.tab}></ResourcesTab>
     50                </Row>
     51            </Container>}
     52        </>
     53    );
    5354};
    5455

  • frontend/src/Pages/RestaurantEditPage.js

    re9b4ba9 rac19a0c  
    66import RestaurantEditTab from "../Components/RestaurantEdit/RestaurantEditTab";
    77import useGet from "../Components/Hooks/useGet";
    8 import { useParams, useSearchParams } from "react-router-dom";
     8import {Navigate, useParams, useSearchParams} from "react-router-dom";
     9import {useAuth} from "../Components/Context/AuthContext";
    910
    1011const RestaurantEditPage = () => {

  • frontend/src/Pages/SearchPage.js

    re9b4ba9 rac19a0c  
    1111import BecomeAHost from "../Components/BecomeAHost/BecomeAHost"
    1212import HotelLisitng from "../Components/Listings/HotelListing"
    13 import SearchCriterias from "../Components/SearchCriterias/SearchCriteriasBar";
     13import SearchCriteriasHotel from "../Components/SearchCriterias/SearchCriteriasHotel";
    1414import SortButton from "../Components/Listings/SortButton";
    1515import FilterButton from "../Components/Listings/FilterButton";
    … …  
    1717import useGet from "../Components/Hooks/useGet";
    1818import { useParams } from "react-router-dom";
     19import SearchCriteriasBar from "../Components/SearchCriterias/SearchCriteriasBar";
    1920
    2021
    … …  
    3637    }
    3738   
    38     let link = props.type === "transport" ? `/transport/search?from=${params.from}&to=${params.to}&date=${params.date}` : props.type === "hotel" ? `/hotel/search?hotelLocation=${params.hotelLocation}&dateFrom=${params.dateFrom}&dateTo=${params.dateTo}&numBeds=${params.numBeds}` : ""
     39    let link = props.type === "transport" ? `/transport/search?from=${params.from}&to=${params.to}&date=${params.date}&numPassengers=${params.numPassengers}` : props.type === "hotel" ? `/hotel/search?hotelLocation=${params.hotelLocation}&dateFrom=${params.dateFrom}&dateTo=${params.dateTo}&numBeds=${params.numBeds}` : ""
    3940    console.log(link)
    4041    const { data, isLoading, getData, setData } = useGet(link);
    … …  
    4344        <>
    4445            <Navigation></Navigation>
    45             <SearchCriterias criterias={useParams()}></SearchCriterias>
     46            <SearchCriteriasBar type={props.type} criterias={useParams()}></SearchCriteriasBar>
    4647            <Container className="d-flex justify-content-end gx-5" style={{maxWidth: "60%"}}>
    4748                <Row>

  • frontend/src/Pages/TransportEditPage.js

    re9b4ba9 rac19a0c  
    1 import React, { useState } from "react";
    2 import { Container, Col, Row, Image } from "react-bootstrap";
     1import React, {useState} from "react";
     2import {Container, Col, Row, Image} from "react-bootstrap";
    33import Navigation from "../Components/Layout/Navbar/Navigation";
    44import ResourcesTab from "../Components/Resources/ResourcesTab";
    … …  
    77import TransportEditTab from "../Components/TransportEdit/TransportEditTab";
    88import useGet from "../Components/Hooks/useGet";
    9 import { useParams } from "react-router-dom";
     9import {Navigate, useParams} from "react-router-dom";
     10import {useAuth} from "../Components/Context/AuthContext";
    1011
    1112const TransportEditPage = () => {
    12   const params = useParams();
    13   console.log("transportot ima id " + params.transportId);
    14   const link = "/transport/" + params.transportId;
    15   const [changed, setChanged] = useState(0);
    16   const { data, setData, isLoading, getData } = useGet(link, changed);
    1713
    18   !isLoading && console.log(data)
     14    const params = useParams();
    1915
    20   return (
    21     <>
    22       <Navigation />
    23       {!isLoading && (
    24         <Container>
    25           <Row className="mb-5">
    26             <h2 style={{ color: "#159895", textAlign: "left" }}>Мои ресурси</h2>
    27           </Row>
    28           <Row className="mb-5">
    29             <Col>
    30               <Row className="d-flex mb-3">
    31                 <Col
    32                   className="d-flex justify-content-center"
    33                   style={{ maxWidth: "30%" }}
    34                 >
    35                   <Image
    36                     src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
    37                     style={{
    38                       height: "5em",
    39                       borderRadius: "50%",
    40                       maxWidth: "100%",
    41                     }}
    42                     className="m-auto"
    43                   ></Image>
    44                 </Col>
    45                 <Col className="d-flex justify-content-center">
    46                   <Container className="pt-2" style={{ textAlign: "left" }}>
    47                     <h4>{data.transportName}</h4>
    48                     <h5>{data.carBrand + " " + data.carType}</h5>
    49                   </Container>
    50                 </Col>
    51               </Row>
    52             </Col>
    53           </Row>
    54           <Row>
    55             {data && <TransportEditTab displayRoute={data} refresh={setChanged}/>}
    56           </Row>
    57         </Container>
    58       )}
    59     </>
    60   );
     16    const link = "/transport/" + params.transportId;
     17
     18    const {data, setData, isLoading, getData, setChanged} = useGet(link);
     19
     20    !isLoading && console.log(data)
     21
     22    return (
     23        <>
     24            <Navigation/>
     25            {!isLoading && (
     26                <Container>
     27                    <Row className="mb-5">
     28                        <h2 style={{color: "#159895", textAlign: "left"}}>Мои ресурси</h2>
     29                    </Row>
     30                    <Row className="mb-5">
     31                        <Col>
     32                            <Row className="d-flex mb-3">
     33                                <Col
     34                                    className="d-flex justify-content-center"
     35                                    style={{maxWidth: "30%"}}
     36                                >
     37                                    <Image
     38                                        src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
     39                                        style={{
     40                                            height: "5em",
     41                                            borderRadius: "50%",
     42                                            maxWidth: "100%",
     43                                        }}
     44                                        className="m-auto"
     45                                    ></Image>
     46                                </Col>
     47                                <Col className="d-flex justify-content-center">
     48                                    <Container className="pt-2" style={{textAlign: "left"}}>
     49                                        <h4>{data.transportName}</h4>
     50                                        <h5>{data.carBrand + " " + data.carType}</h5>
     51                                    </Container>
     52                                </Col>
     53                            </Row>
     54                        </Col>
     55                    </Row>
     56                    <Row>
     57                        {data && <TransportEditTab displayRoute={data} refresh={setChanged}/>}
     58                    </Row>
     59                </Container>
     60            )}
     61        </>
     62    );
    6163};
    6264
Note: See TracChangeset for help on using the changeset viewer.