Changeset 0c6b92a for imaps-frontend/src/pages/Draw

Timestamp:

12/12/24 17:06:06 (5 weeks ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

d565449

Message:

Pred finalna verzija

Location:

imaps-frontend/src/pages/Draw

Files:

• Draw.jsx (modified) (1 diff)
• Draw.module.css (modified) (10 diffs)
• FloorSelector.jsx (added)
• Hooks/useMapLoader.js (added)
• Hooks/useRoomTypesLoader.js (added)
• shapeImages/stairs_icon.png (added)

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

@@ -1 @@
-import { useEffect, useState } from "react";
-import { MapBuilder } from "../../scripts/main/MapBuilder.js";
+import { useContext, useEffect, useState } from "react";
 import styles from "./Draw.module.css";
-import RoomModal from "../../components/RoomModal/RoomModal.jsx";
-import SideBar from "../../components/SideBar/SideBar.jsx";
-import EntranceModal from "../../components/EntranceModal/EntranceModal.jsx";
+import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
+import EntranceModal from "../../components/Modals/EntranceModal/EntranceModal.jsx";
 import DrawGuide from "../../components/DrawGuide/DrawGuide.jsx";
-import RoomTypeModal from "../../components/RoomTypeModal/RoomTypeModal.jsx";
-import InfoPinModal from "../../components/InfoPinModal/InfoPinModal.jsx";
+import RoomTypeModal from "../../components/Modals/RoomTypeModal/RoomTypeModal.jsx";
+import InfoPinModal from "../../components/Modals/InfoPinModal/InfoPinModal.jsx";
+import SaveMap from "../../components/SaveMap/SaveMap.jsx";
+import Logo from "../../components/Logo/Logo.jsx";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import Profile from "../../components/Profile/Profile.jsx";
 import HttpService from "../../scripts/net/HttpService.js";
-import SaveMap from "../../components/SaveMap/SaveMap.jsx";
-import logo from "../../assets/logo_icon.png";
-import MapTemplateSelector from "../../components/MapTemplateSelector/LoadMap.jsx";
-import KeymapPanel from "../../components/KeyMappingsGuidePanel/KeymapPanel.jsx";
-import { Link } from "react-router-dom";
+import StairsModal from "../../components/Modals/StairsModal/StairsModal.jsx";
+import useMapLoader from "./Hooks/useMapLoader.js";
+import {FloorSelector} from "./FloorSelector.jsx";
+import {useRoomTypesLoader} from "./Hooks/useRoomTypesLoader.js";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
+import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
 
 function Draw() {
-  const [selectedFloor, setSelectedFloor] = useState(1);
-  const [app, setApp] = useState(null);
+  const { mapName } = useParams();
+  const { username } = useAppContext();
+
   const [isPopupVisible, setIsPopupVisible] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("Error");
+  const [hasError, setHasError] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const[roomTypes,setRoomTypes] = useState([]);
+
+  const {app,floors,saveFloor,setFloors} = useMapLoader(mapName,username,searchParams,setSearchParams)
+  const {addRoomType} = useRoomTypesLoader(setRoomTypes,mapName,username);
+
+  const addFloorHandler = async (newFloorNum) => {
+    const httpService = new HttpService();
+    httpService.setAuthenticated();
+
+    const payload = {
+      num: newFloorNum,
+      mapName: mapName,
+    };
+
+    try {
+      await httpService.put(`${config.floors.add}`, payload);
+      console.log(`Added floor ${newFloorNum}`);
+      setFloors((prevFloors) => [...prevFloors, { num: newFloorNum }]);
+    } catch (error) {
+      console.error("Error adding floor:", error);
+    }
+  };
+
+  const deleteFloorHandler = async (floorNum) => {
+    if(floorNum === 0) return
+
+    const httpService = new HttpService();
+    httpService.setAuthenticated();
+
+    try {
+      await httpService.delete(`${config.floors.delete}?floorNum=${floorNum}&mapName=${mapName}`);
+      setFloors((prevFloors) => prevFloors.filter(f => f.num !== floorNum))
+
+      const currFloor = searchParams.get("floor");
+      if(currFloor == floorNum){
+        setSearchParams({floor:"0"},{replace:true})
+      }
+      console.log(`Deleted floor ${floorNum}`);
+    } catch (error) {
+      console.error("Error deleting floor:", error);
+    }
+  };
+
   useEffect(() => {
-    const app = new MapBuilder("container");
-    setApp(app);
-    // fpsCounterLoop();
+    return () => {
+      ShapeRegistry.clear();
+    }
   }, []);
 
-  const handleFloorChange = (event) => {
-    setSelectedFloor(event.target.value);
-    console.log(`Floor changed to: ${event.target.value}`);
-  };
 
-  const handleRenderClick = () => {
-    setIsPopupVisible(true);
+  const handleSaveClick = async () => {
+    saveFloor().then(r => {
+     floors.forEach(flr => {
+       setIsPopupVisible(true);
+       setTimeout(() => {
+         setIsPopupVisible(false);},
+           3000);
+       console.log("floor after save: " + JSON.stringify(flr))
+     })
+    });
 
-    setTimeout(() => {
-      setIsPopupVisible(false);
-    }, 3000);
-  };
 
-  const handleSaveClick = async (mapName) => {
-    const resp = await app.saveMap(mapName);
-  };
-  const handleLoadMapClick = (data) => {
-    app.deserializeMap(data);
   };
 
   return (
     <div className={styles.wrapper} id="wrapper">
-      <SideBar></SideBar>
+      {/* <SideBar></SideBar> */}
+      <Logo></Logo>
       <div id="container" className={styles.cont}></div>
       <div className={styles.panel}>
-        <Link to="/">
-          <img src={logo} alt="Finki Logo" className={styles.logo} />
+        <div className={styles.topPanelH}>
+          <Profile position="inline"></Profile>
+        </div>
+        <Link to={`/myMaps/${mapName}/View`} className={styles.titleLink}>
+          <h1 className={styles.title}>{mapName}</h1>
         </Link>
-        <h1 className={styles.title}>Map Builder</h1>
-        {/* <div id="fpscont" className={styles.fpscounter}>
-          <p id="fpsCounter"></p>
-        </div> */}
         <div className={styles.guideWrapper}>
-          <DrawGuide />
+          <DrawGuide/>
         </div>
-
-        {/* <div className={styles.floorSelector}>
-          <label htmlFor="floorSelect">Select Floor:</label>
-          <select
-            id="floorSelect"
-            value={selectedFloor}
-            onChange={handleFloorChange}
-            className={styles.floorDropdown}
-          >
-            <option value={1}>1st Floor</option>
-            <option value={2}>2nd Floor</option>
-            <option value={3}>3rd Floor</option>
-            <option value={4}>4th Floor</option>
-          </select>
-        </div> */}
-        {/* <h2 className={styles.paragraph}>Objects:</h2> */}
+        <hr/>
+        <br/>
+        {/* {<h2 className={styles.paragraph}>Objects:</h2>} */}
         <ul className={styles.shapeOptions} id="shapeOptions">
           <li data-info="Entrance" className={`${styles.shapeOption} ${styles.entrance}`}></li>
           <li data-info="Wall" className={`${styles.shapeOption} ${styles.wall}`} id="wall"></li>
           <li data-info="Room" className={`${styles.shapeOption} ${styles.room}`} id="room"></li>
+          <li data-info="Stairs" className={`${styles.shapeOption} ${styles.stairs}`} id="stairs"></li>
         </ul>
-        <br />
-        <RoomTypeModal map={app}></RoomTypeModal>
+        <RoomTypeModal map={app} roomTypes={roomTypes} addRoomTypeDB={addRoomType}></RoomTypeModal>
+        <br/>
+        <hr/>
+        <br/>
+        <FloorSelector floorConfig={{
+          floors,searchParams,
+          setSearchParams,addFloorHandler,
+          deleteFloorHandler
+        }}></FloorSelector>
 
-        <div id="render" className={styles.buttonContainer}>
-          <button
-            id="render-button"
-            type="button"
-            className={styles.renderButton}
-            onClick={handleRenderClick}
-          >
-            Render
-          </button>
-        </div>
+        <br/>
+
+        <hr/>
+        <br/>
+        {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
         <div className={styles.templateCont}>
           <SaveMap submitHandler={handleSaveClick}></SaveMap>
-          <MapTemplateSelector loadHandler={handleLoadMapClick}></MapTemplateSelector>
         </div>
 
         <div className={styles.hide}>
-          <RoomModal map={app}></RoomModal>
+          <RoomModal map={app} roomTypes={roomTypes}></RoomModal>
           <EntranceModal map={app}></EntranceModal>
           <InfoPinModal map={app}></InfoPinModal>
+          <StairsModal map={app}></StairsModal>
         </div>
       </div>
 
       {isPopupVisible && (
-        <div className={styles.popup}>
-          <div className={styles.popupContent}>
-            <h2>Map Rendered!</h2>
-            <p>Your map has been successfully rendered.</p>
+          <div className={styles.popup}>
+            <div className={styles.popupContent}>
+              <h2>Map Saved!</h2>
+              <p>Your map has been successfully saved.</p>
+            </div>
           </div>
-        </div>
       )}
     </div>

imaps-frontend/src/pages/Draw/Draw.module.css

@@ -4 +4 @@
   padding: 0;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
   background-color: #141414;
 }
 
+.topPanelH {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
 .logo {
-  width: 100px;
-  margin: 10px;
-  align-self: center;
+  width: 80px;
 }
 
 .title {
-  margin-top: 20px;
-  color: #804047;
-  font-size: 120%;
+  text-align: center;
+  font-size: 2.5em;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #333333;
+  font-family: "Oswald", sans-serif;
+  margin-bottom: 0;
+  text-decoration: none;
+}
+
+.titleLink {
+  text-decoration: none;
+}
+.titleLink:hover{
+  text-decoration: none;
 }
 
@@ -23 +41 @@
   color: #cccccc;
 }
+
 .guideWrapper {
   display: flex;
@@ -28 +47 @@
   align-items: center;
   margin: 0;
+  width: 100%;
 }
 
@@ -51 +71 @@
   display: flex;
   flex-direction: column;
+  align-items: center; /* Center elements horizontally */
   padding: 20px;
   background-color: #1c1c1c;
@@ -58 +79 @@
   margin-right: 10px;
   border-radius: 20px;
+  overflow-x: hidden;
 }
 
 .buttonContainer {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   margin-top: 2rem;
   gap: 10px;
-}
-
-/* .hide {
-  visibility: hidden;
-} */
+  width: 100%;
+}
 
 .renderButton {
@@ -104 +123 @@
   list-style: none;
   padding: 0;
-  margin: 0 0;
-  display: flex;
-  flex-direction: column;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 15px;
+  justify-items: center;
   align-items: center;
 }
@@ -127 +147 @@
 }
 
-.templateCont {
-  display: flex;
-  flex-direction: column;
-}
-
 .shapeOption:hover {
   background-color: #94183b;
@@ -137 +152 @@
 }
 
+.templateCont {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center section horizontally */
+  width: 100%;
+}
+
 .fpscounter {
   border: 1px solid #00b822;
   margin: 20px 0;
+  text-align: center;
+  width: 100%;
 }
 
@@ -145 +169 @@
   color: #00740c;
   font-weight: bold;
-  text-align: center;
   margin: 0;
   padding: 5px 0;
 }
 
-.floorSelector {
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: #ffffff;
-}
-
-.floorSelector label {
-  font-size: 14px;
-}
-
-.floorDropdown {
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #3a3a3a;
-  color: #ffffff;
-  cursor: pointer;
-  width: 100%;
-  transition: border-color 0.3s;
-}
-
-.floorDropdown:focus {
-  outline: none;
-  border-color: #1e90ff;
-}
 
 .popup {
@@ -226 +221 @@
   background-image: url("./shapeImages/room_icon.png");
 }
+.stairs {
+  background-image: url("./shapeImages/stairs_icon.png");
+}
+.floorSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  background-color: #2d2d2d;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  width: 100%;
+}
+
+.floorLabel {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.floorList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+}
+
+.floorItems {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.addFloorButton {
+  background-color: #e67e22;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.addFloorButton:hover {
+  background-color: #d2691e;
+  transform: scale(1.1);
+}
+
+.addFloorButton:active {
+  background-color: #b35418;
+  transform: scale(0.95);
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  filter: invert(1);
+}
+
+.floorButton {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.floorButton:hover {
+  background-color: #4a4a4a;
+}
+
+.floorButton.active {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.floorInput {
+  width: 60%;
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #3a3a3a;
+  color: #ffffff;
+  text-align: center;
+  transition: border-color 0.3s;
+}
+
+.floorInput:focus {
+  outline: none;
+  border-color: #1e90ff;
+}
+
+.floorActions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.errorMessage {
+  color: red;
+  font-size: 12px;
+  margin-top: 10px;
+  text-align: center;
+}
+.floorItemWrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.floorItem {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  flex-grow: 1;
+  transition: background-color 0.3s;
+}
+
+.floorItem:hover {
+  background-color: #4a4a4a;
+}
+
+.activeFloor {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.deleteFloorButton {
+  background-color: #ff4d4d;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.deleteFloorButton:hover {
+  background-color: #e60000;
+  transform: scale(1.1);
+}
+
+.deleteFloorButton:active {
+  background-color: #cc0000;
+  transform: scale(0.95);
+}