[0c6b92a] | 1 | import { useContext, useEffect, useState } from "react";
|
---|
[d565449] | 2 | import styles from "./Draw.module.css";
|
---|
[0c6b92a] | 3 | import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
|
---|
| 4 | import EntranceModal from "../../components/Modals/EntranceModal/EntranceModal.jsx";
|
---|
[d565449] | 5 | import DrawGuide from "../../components/DrawGuide/DrawGuide.jsx";
|
---|
[0c6b92a] | 6 | import RoomTypeModal from "../../components/Modals/RoomTypeModal/RoomTypeModal.jsx";
|
---|
| 7 | import InfoPinModal from "../../components/Modals/InfoPinModal/InfoPinModal.jsx";
|
---|
[d565449] | 8 | import SaveMap from "../../components/SaveMap/SaveMap.jsx";
|
---|
[0c6b92a] | 9 | import Logo from "../../components/Logo/Logo.jsx";
|
---|
| 10 | import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
|
---|
| 11 | import Profile from "../../components/Profile/Profile.jsx";
|
---|
| 12 | import HttpService from "../../scripts/net/HttpService.js";
|
---|
| 13 | import StairsModal from "../../components/Modals/StairsModal/StairsModal.jsx";
|
---|
| 14 | import useMapLoader from "./Hooks/useMapLoader.js";
|
---|
| 15 | import {FloorSelector} from "./FloorSelector.jsx";
|
---|
| 16 | import {useRoomTypesLoader} from "./Hooks/useRoomTypesLoader.js";
|
---|
| 17 | import {useAppContext} from "../../components/AppContext/AppContext.jsx";
|
---|
| 18 | import config from "../../scripts/net/netconfig.js";
|
---|
| 19 | import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
|
---|
[d565449] | 20 |
|
---|
| 21 | function Draw() {
|
---|
[0c6b92a] | 22 | const { mapName } = useParams();
|
---|
| 23 | const { username } = useAppContext();
|
---|
| 24 |
|
---|
[d565449] | 25 | const [isPopupVisible, setIsPopupVisible] = useState(false);
|
---|
[0c6b92a] | 26 | const [errorMessage, setErrorMessage] = useState("Error");
|
---|
| 27 | const [hasError, setHasError] = useState(false);
|
---|
| 28 | const [searchParams, setSearchParams] = useSearchParams();
|
---|
[d565449] | 29 |
|
---|
[0c6b92a] | 30 | const[roomTypes,setRoomTypes] = useState([]);
|
---|
[d565449] | 31 |
|
---|
[0c6b92a] | 32 | const {app,floors,saveFloor,setFloors} = useMapLoader(mapName,username,searchParams,setSearchParams)
|
---|
| 33 | const {addRoomType} = useRoomTypesLoader(setRoomTypes,mapName,username);
|
---|
[d565449] | 34 |
|
---|
[0c6b92a] | 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 | }
|
---|
[d565449] | 51 | };
|
---|
| 52 |
|
---|
[0c6b92a] | 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 | }
|
---|
[d565449] | 71 | };
|
---|
[0c6b92a] | 72 |
|
---|
| 73 | useEffect(() => {
|
---|
| 74 | return () => {
|
---|
| 75 | ShapeRegistry.clear();
|
---|
| 76 | }
|
---|
| 77 | }, []);
|
---|
| 78 |
|
---|
| 79 |
|
---|
| 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 | });
|
---|
| 90 |
|
---|
| 91 |
|
---|
[d565449] | 92 | };
|
---|
| 93 |
|
---|
| 94 | return (
|
---|
| 95 | <div className={styles.wrapper} id="wrapper">
|
---|
[0c6b92a] | 96 | {/* <SideBar></SideBar> */}
|
---|
| 97 | <Logo></Logo>
|
---|
[d565449] | 98 | <div id="container" className={styles.cont}></div>
|
---|
| 99 | <div className={styles.panel}>
|
---|
[0c6b92a] | 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>
|
---|
[d565449] | 105 | </Link>
|
---|
| 106 | <div className={styles.guideWrapper}>
|
---|
[0c6b92a] | 107 | <DrawGuide/>
|
---|
[d565449] | 108 | </div>
|
---|
[0c6b92a] | 109 | <hr/>
|
---|
| 110 | <br/>
|
---|
| 111 | {/* {<h2 className={styles.paragraph}>Objects:</h2>} */}
|
---|
[d565449] | 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>
|
---|
[0c6b92a] | 116 | <li data-info="Stairs" className={`${styles.shapeOption} ${styles.stairs}`} id="stairs"></li>
|
---|
[d565449] | 117 | </ul>
|
---|
[0c6b92a] | 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>}
|
---|
[d565449] | 133 | <div className={styles.templateCont}>
|
---|
| 134 | <SaveMap submitHandler={handleSaveClick}></SaveMap>
|
---|
| 135 | </div>
|
---|
| 136 |
|
---|
| 137 | <div className={styles.hide}>
|
---|
[0c6b92a] | 138 | <RoomModal map={app} roomTypes={roomTypes}></RoomModal>
|
---|
[d565449] | 139 | <EntranceModal map={app}></EntranceModal>
|
---|
| 140 | <InfoPinModal map={app}></InfoPinModal>
|
---|
[0c6b92a] | 141 | <StairsModal map={app}></StairsModal>
|
---|
[d565449] | 142 | </div>
|
---|
| 143 | </div>
|
---|
| 144 |
|
---|
| 145 | {isPopupVisible && (
|
---|
[0c6b92a] | 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>
|
---|
[d565449] | 151 | </div>
|
---|
| 152 | )}
|
---|
| 153 | </div>
|
---|
| 154 | );
|
---|
| 155 | }
|
---|
| 156 |
|
---|
| 157 | export default Draw;
|
---|