Ignore:
Timestamp:
01/21/25 03:08:24 (3 days ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
0c6b92a
Message:

F4 Finalna Verzija

File:
1 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/pages/Draw/Draw.jsx

    r0c6b92a r79a0317  
    1 import { useContext, useEffect, useState } from "react";
     1import {useContext, useEffect, useState} from "react";
    22import styles from "./Draw.module.css";
    33import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
    … …  
    88import SaveMap from "../../components/SaveMap/SaveMap.jsx";
    99import Logo from "../../components/Logo/Logo.jsx";
    10 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
     10import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
    1111import Profile from "../../components/Profile/Profile.jsx";
    1212import HttpService from "../../scripts/net/HttpService.js";
    … …  
    1818import config from "../../scripts/net/netconfig.js";
    1919import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
     20import {TopPanel} from "./TopPanel/TopPanel.jsx";
    2021
    2122function Draw() {
    22   const { mapName } = useParams();
    23   const { username } = useAppContext();
     23    const {mapName} = useParams();
     24    const {username} = useAppContext();
    2425
    25   const [isPopupVisible, setIsPopupVisible] = useState(false);
    26   const [errorMessage, setErrorMessage] = useState("Error");
    27   const [hasError, setHasError] = useState(false);
    28   const [searchParams, setSearchParams] = useSearchParams();
     26    const [isPopupVisible, setIsPopupVisible] = useState(false);
     27    const [errorMessage, setErrorMessage] = useState("Error");
     28    const [hasError, setHasError] = useState(false);
     29    const [searchParams, setSearchParams] = useSearchParams();
    2930
    30   const[roomTypes,setRoomTypes] = useState([]);
     31    const [roomTypes, setRoomTypes] = useState([]);
    3132
    32   const {app,floors,saveFloor,setFloors} = useMapLoader(mapName,username,searchParams,setSearchParams)
    33   const {addRoomType} = useRoomTypesLoader(setRoomTypes,mapName,username);
     33    const {app, floors, saveFloor, setFloors} = useMapLoader(mapName, username, searchParams, setSearchParams)
     34    const {addRoomType} = useRoomTypesLoader(setRoomTypes, mapName, username);
    3435
    35   const addFloorHandler = async (newFloorNum) => {
    36     const httpService = new HttpService();
    37     httpService.setAuthenticated();
     36    const addFloorHandler = async (newFloorNum) => {
     37        const httpService = new HttpService();
     38        httpService.setAuthenticated();
    3839
    39     const payload = {
    40       num: newFloorNum,
    41       mapName: mapName,
     40        const payload = {
     41            num: newFloorNum,
     42            mapName: mapName,
     43        };
     44
     45        try {
     46            await httpService.put(`${config.floors.add}`, payload);
     47            console.log(`Added floor ${newFloorNum}`);
     48            setFloors((prevFloors) => [...prevFloors, {num: newFloorNum}]);
     49        } catch (error) {
     50            console.error("Error adding floor:", error);
     51        }
    4252    };
    4353
    44     try {
    45       await httpService.put(`${config.floors.add}`, payload);
    46       console.log(`Added floor ${newFloorNum}`);
    47       setFloors((prevFloors) => [...prevFloors, { num: newFloorNum }]);
    48     } catch (error) {
    49       console.error("Error adding floor:", error);
    50     }
    51   };
     54    const deleteFloorHandler = async (floorNum) => {
     55        if (floorNum === 0) return
    5256
    53   const deleteFloorHandler = async (floorNum) => {
    54     if(floorNum === 0) return
     57        const httpService = new HttpService();
     58        httpService.setAuthenticated();
    5559
    56     const httpService = new HttpService();
    57     httpService.setAuthenticated();
     60        try {
     61            await httpService.delete(`${config.floors.delete}?floorNum=${floorNum}&mapName=${mapName}`);
     62            setFloors((prevFloors) => prevFloors.filter(f => f.num !== floorNum))
    5863
    59     try {
    60       await httpService.delete(`${config.floors.delete}?floorNum=${floorNum}&mapName=${mapName}`);
    61       setFloors((prevFloors) => prevFloors.filter(f => f.num !== floorNum))
     64            const currFloor = searchParams.get("floor");
     65            if (currFloor == floorNum) {
     66                setSearchParams({floor: "0"}, {replace: true})
     67            }
     68            console.log(`Deleted floor ${floorNum}`);
     69        } catch (error) {
     70            console.error("Error deleting floor:", error);
     71        }
     72    };
    6273
    63       const currFloor = searchParams.get("floor");
    64       if(currFloor == floorNum){
    65         setSearchParams({floor:"0"},{replace:true})
    66       }
    67       console.log(`Deleted floor ${floorNum}`);
    68     } catch (error) {
    69       console.error("Error deleting floor:", error);
    70     }
    71   };
    72 
    73   useEffect(() => {
    74     return () => {
    75       ShapeRegistry.clear();
    76     }
    77   }, []);
     74    useEffect(() => {
     75        return () => {
     76            ShapeRegistry.clear();
     77        }
     78    }, []);
    7879
    7980
    80   const handleSaveClick = async () => {
    81     saveFloor().then(r => {
    82      floors.forEach(flr => {
    83        setIsPopupVisible(true);
    84        setTimeout(() => {
    85          setIsPopupVisible(false);},
    86            3000);
    87        console.log("floor after save: " + JSON.stringify(flr))
    88      })
    89     });
     81    const handleSaveClick = async () => {
     82        saveFloor()
     83        setIsPopupVisible(true);
     84        setTimeout(() => {
     85                setIsPopupVisible(false);
     86            },
     87            3000);
     88    };
    9089
     90    return (
     91        <div className={styles.wrapper} id="wrapper">
     92            {/* <SideBar></SideBar> */}
     93            <Logo></Logo>
     94            <div id="container" className={styles.cont}></div>
     95            <div className={styles.panel}>
     96                <div className={styles.topPanelH}>
     97                    <Profile position="inline"></Profile>
     98                </div>
     99                <Link to={`/myMaps/View/${mapName}`} className={styles.titleLink}>
     100                    <h1 className={styles.title}>{mapName}</h1>
     101                </Link>
     102                <div className={styles.guideWrapper}>
     103                    <DrawGuide/>
     104                </div>
     105                <hr/>
     106                <br/>
     107                {/* {<h2 className={styles.paragraph}>Objects:</h2>} */}
     108                <ul className={styles.shapeOptions} id="shapeOptions">
     109                    <li data-info="Entrance" className={`${styles.shapeOption} ${styles.entrance}`}></li>
     110                    <li data-info="Wall" className={`${styles.shapeOption} ${styles.wall}`} id="wall"></li>
     111                    <li data-info="Room" className={`${styles.shapeOption} ${styles.room}`} id="room"></li>
     112                    <li data-info="Stairs" className={`${styles.shapeOption} ${styles.stairs}`} id="stairs"></li>
     113                </ul>
     114                <RoomTypeModal map={app} roomTypes={roomTypes} addRoomTypeDB={addRoomType}></RoomTypeModal>
     115                <br/>
     116                <hr/>
     117                <br/>
     118                <FloorSelector floorConfig={{
     119                    floors, searchParams,
     120                    setSearchParams, addFloorHandler,
     121                    deleteFloorHandler
     122                }}></FloorSelector>
    91123
    92   };
     124                <br/>
    93125
    94   return (
    95     <div className={styles.wrapper} id="wrapper">
    96       {/* <SideBar></SideBar> */}
    97       <Logo></Logo>
    98       <div id="container" className={styles.cont}></div>
    99       <div className={styles.panel}>
    100         <div className={styles.topPanelH}>
    101           <Profile position="inline"></Profile>
     126                <hr/>
     127                <br/>
     128                {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
     129                <div className={styles.templateCont}>
     130                    <SaveMap submitHandler={handleSaveClick}></SaveMap>
     131                </div>
     132
     133                <div className={styles.hide}>
     134                    <RoomModal map={app} roomTypes={roomTypes}></RoomModal>
     135                    <EntranceModal map={app}></EntranceModal>
     136                    <InfoPinModal map={app}></InfoPinModal>
     137                    <StairsModal map={app}></StairsModal>
     138                </div>
     139            </div>
     140
     141            {isPopupVisible && (
     142                <div className={styles.popup}>
     143                    <div className={styles.popupContent}>
     144                        <h2>Map Saved!</h2>
     145                        <p>Your map has been successfully saved.</p>
     146                    </div>
     147                </div>
     148            )}
    102149        </div>
    103         <Link to={`/myMaps/${mapName}/View`} className={styles.titleLink}>
    104           <h1 className={styles.title}>{mapName}</h1>
    105         </Link>
    106         <div className={styles.guideWrapper}>
    107           <DrawGuide/>
    108         </div>
    109         <hr/>
    110         <br/>
    111         {/* {<h2 className={styles.paragraph}>Objects:</h2>} */}
    112         <ul className={styles.shapeOptions} id="shapeOptions">
    113           <li data-info="Entrance" className={`${styles.shapeOption} ${styles.entrance}`}></li>
    114           <li data-info="Wall" className={`${styles.shapeOption} ${styles.wall}`} id="wall"></li>
    115           <li data-info="Room" className={`${styles.shapeOption} ${styles.room}`} id="room"></li>
    116           <li data-info="Stairs" className={`${styles.shapeOption} ${styles.stairs}`} id="stairs"></li>
    117         </ul>
    118         <RoomTypeModal map={app} roomTypes={roomTypes} addRoomTypeDB={addRoomType}></RoomTypeModal>
    119         <br/>
    120         <hr/>
    121         <br/>
    122         <FloorSelector floorConfig={{
    123           floors,searchParams,
    124           setSearchParams,addFloorHandler,
    125           deleteFloorHandler
    126         }}></FloorSelector>
    127 
    128         <br/>
    129 
    130         <hr/>
    131         <br/>
    132         {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
    133         <div className={styles.templateCont}>
    134           <SaveMap submitHandler={handleSaveClick}></SaveMap>
    135         </div>
    136 
    137         <div className={styles.hide}>
    138           <RoomModal map={app} roomTypes={roomTypes}></RoomModal>
    139           <EntranceModal map={app}></EntranceModal>
    140           <InfoPinModal map={app}></InfoPinModal>
    141           <StairsModal map={app}></StairsModal>
    142         </div>
    143       </div>
    144 
    145       {isPopupVisible && (
    146           <div className={styles.popup}>
    147             <div className={styles.popupContent}>
    148               <h2>Map Saved!</h2>
    149               <p>Your map has been successfully saved.</p>
    150             </div>
    151           </div>
    152       )}
    153     </div>
    154   );
     150    );
    155151}
    156152
Note: See TracChangeset for help on using the changeset viewer.