Ignore:
Timestamp:
12/12/24 17:06:06 (5 weeks ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
d565449
Message:

Pred finalna verzija

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    rd565449 r0c6b92a  
    1 import { useEffect, useState } from "react";
    2 import { MapBuilder } from "../../scripts/main/MapBuilder.js";
     1import { useContext, useEffect, useState } from "react";
    32import styles from "./Draw.module.css";
    4 import RoomModal from "../../components/RoomModal/RoomModal.jsx";
    5 import SideBar from "../../components/SideBar/SideBar.jsx";
    6 import EntranceModal from "../../components/EntranceModal/EntranceModal.jsx";
     3import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
     4import EntranceModal from "../../components/Modals/EntranceModal/EntranceModal.jsx";
    75import DrawGuide from "../../components/DrawGuide/DrawGuide.jsx";
    8 import RoomTypeModal from "../../components/RoomTypeModal/RoomTypeModal.jsx";
    9 import InfoPinModal from "../../components/InfoPinModal/InfoPinModal.jsx";
     6import RoomTypeModal from "../../components/Modals/RoomTypeModal/RoomTypeModal.jsx";
     7import InfoPinModal from "../../components/Modals/InfoPinModal/InfoPinModal.jsx";
     8import SaveMap from "../../components/SaveMap/SaveMap.jsx";
     9import Logo from "../../components/Logo/Logo.jsx";
     10import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
     11import Profile from "../../components/Profile/Profile.jsx";
    1012import HttpService from "../../scripts/net/HttpService.js";
    11 import SaveMap from "../../components/SaveMap/SaveMap.jsx";
    12 import logo from "../../assets/logo_icon.png";
    13 import MapTemplateSelector from "../../components/MapTemplateSelector/LoadMap.jsx";
    14 import KeymapPanel from "../../components/KeyMappingsGuidePanel/KeymapPanel.jsx";
    15 import { Link } from "react-router-dom";
     13import StairsModal from "../../components/Modals/StairsModal/StairsModal.jsx";
     14import useMapLoader from "./Hooks/useMapLoader.js";
     15import {FloorSelector} from "./FloorSelector.jsx";
     16import {useRoomTypesLoader} from "./Hooks/useRoomTypesLoader.js";
     17import {useAppContext} from "../../components/AppContext/AppContext.jsx";
     18import config from "../../scripts/net/netconfig.js";
     19import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
    1620
    1721function Draw() {
    18   const [selectedFloor, setSelectedFloor] = useState(1);
    19   const [app, setApp] = useState(null);
     22  const { mapName } = useParams();
     23  const { username } = useAppContext();
     24
    2025  const [isPopupVisible, setIsPopupVisible] = useState(false);
     26  const [errorMessage, setErrorMessage] = useState("Error");
     27  const [hasError, setHasError] = useState(false);
     28  const [searchParams, setSearchParams] = useSearchParams();
     29
     30  const[roomTypes,setRoomTypes] = useState([]);
     31
     32  const {app,floors,saveFloor,setFloors} = useMapLoader(mapName,username,searchParams,setSearchParams)
     33  const {addRoomType} = useRoomTypesLoader(setRoomTypes,mapName,username);
     34
     35  const addFloorHandler = async (newFloorNum) => {
     36    const httpService = new HttpService();
     37    httpService.setAuthenticated();
     38
     39    const payload = {
     40      num: newFloorNum,
     41      mapName: mapName,
     42    };
     43
     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  };
     52
     53  const deleteFloorHandler = async (floorNum) => {
     54    if(floorNum === 0) return
     55
     56    const httpService = new HttpService();
     57    httpService.setAuthenticated();
     58
     59    try {
     60      await httpService.delete(`${config.floors.delete}?floorNum=${floorNum}&mapName=${mapName}`);
     61      setFloors((prevFloors) => prevFloors.filter(f => f.num !== floorNum))
     62
     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
    2173  useEffect(() => {
    22     const app = new MapBuilder("container");
    23     setApp(app);
    24     // fpsCounterLoop();
     74    return () => {
     75      ShapeRegistry.clear();
     76    }
    2577  }, []);
    2678
    27   const handleFloorChange = (event) => {
    28     setSelectedFloor(event.target.value);
    29     console.log(`Floor changed to: ${event.target.value}`);
    30   };
    3179
    32   const handleRenderClick = () => {
    33     setIsPopupVisible(true);
     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    });
    3490
    35     setTimeout(() => {
    36       setIsPopupVisible(false);
    37     }, 3000);
    38   };
    3991
    40   const handleSaveClick = async (mapName) => {
    41     const resp = await app.saveMap(mapName);
    42   };
    43   const handleLoadMapClick = (data) => {
    44     app.deserializeMap(data);
    4592  };
    4693
    4794  return (
    4895    <div className={styles.wrapper} id="wrapper">
    49       <SideBar></SideBar>
     96      {/* <SideBar></SideBar> */}
     97      <Logo></Logo>
    5098      <div id="container" className={styles.cont}></div>
    5199      <div className={styles.panel}>
    52         <Link to="/">
    53           <img src={logo} alt="Finki Logo" className={styles.logo} />
     100        <div className={styles.topPanelH}>
     101          <Profile position="inline"></Profile>
     102        </div>
     103        <Link to={`/myMaps/${mapName}/View`} className={styles.titleLink}>
     104          <h1 className={styles.title}>{mapName}</h1>
    54105        </Link>
    55         <h1 className={styles.title}>Map Builder</h1>
    56         {/* <div id="fpscont" className={styles.fpscounter}>
    57           <p id="fpsCounter"></p>
    58         </div> */}
    59106        <div className={styles.guideWrapper}>
    60           <DrawGuide />
     107          <DrawGuide/>
    61108        </div>
    62 
    63         {/* <div className={styles.floorSelector}>
    64           <label htmlFor="floorSelect">Select Floor:</label>
    65           <select
    66             id="floorSelect"
    67             value={selectedFloor}
    68             onChange={handleFloorChange}
    69             className={styles.floorDropdown}
    70           >
    71             <option value={1}>1st Floor</option>
    72             <option value={2}>2nd Floor</option>
    73             <option value={3}>3rd Floor</option>
    74             <option value={4}>4th Floor</option>
    75           </select>
    76         </div> */}
    77         {/* <h2 className={styles.paragraph}>Objects:</h2> */}
     109        <hr/>
     110        <br/>
     111        {/* {<h2 className={styles.paragraph}>Objects:</h2>} */}
    78112        <ul className={styles.shapeOptions} id="shapeOptions">
    79113          <li data-info="Entrance" className={`${styles.shapeOption} ${styles.entrance}`}></li>
    80114          <li data-info="Wall" className={`${styles.shapeOption} ${styles.wall}`} id="wall"></li>
    81115          <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>
    82117        </ul>
    83         <br />
    84         <RoomTypeModal map={app}></RoomTypeModal>
     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>
    85127
    86         <div id="render" className={styles.buttonContainer}>
    87           <button
    88             id="render-button"
    89             type="button"
    90             className={styles.renderButton}
    91             onClick={handleRenderClick}
    92           >
    93             Render
    94           </button>
    95         </div>
     128        <br/>
     129
     130        <hr/>
     131        <br/>
     132        {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
    96133        <div className={styles.templateCont}>
    97134          <SaveMap submitHandler={handleSaveClick}></SaveMap>
    98           <MapTemplateSelector loadHandler={handleLoadMapClick}></MapTemplateSelector>
    99135        </div>
    100136
    101137        <div className={styles.hide}>
    102           <RoomModal map={app}></RoomModal>
     138          <RoomModal map={app} roomTypes={roomTypes}></RoomModal>
    103139          <EntranceModal map={app}></EntranceModal>
    104140          <InfoPinModal map={app}></InfoPinModal>
     141          <StairsModal map={app}></StairsModal>
    105142        </div>
    106143      </div>
    107144
    108145      {isPopupVisible && (
    109         <div className={styles.popup}>
    110           <div className={styles.popupContent}>
    111             <h2>Map Rendered!</h2>
    112             <p>Your map has been successfully rendered.</p>
     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>
    113151          </div>
    114         </div>
    115152      )}
    116153    </div>
Note: See TracChangeset for help on using the changeset viewer.