Changeset 79a0317 for imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx

Timestamp:

01/21/25 03:08:24 (3 days ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

0c6b92a

Message:

F4 Finalna Verzija

File:

• imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx (modified) (11 diffs)

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

@@ -1 +1 @@
 import styles from "./Maps.module.css";
 import "react-tiles-dnd/esm/index.css";
-import { TilesContainer } from "react-tiles-dnd";
-import { Link } from "react-router-dom";
+import {TilesContainer} from "react-tiles-dnd";
+import {Link} from "react-router-dom";
 import card from "../../assets/card-map.png";
 import star_icon from "../../assets/star_icon.png"; // Unfilled star icon
 import star_filled_icon from "../../assets/star_filled_icon.png"; // Filled star icon
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import HttpService from "../../scripts/net/HttpService.js";
 import Logo from "../../components/Logo/Logo.jsx";
 import Profile from "../../components/Profile/Profile.jsx";
 import config from "../../scripts/net/netconfig.js";
-import { useAppContext } from "../../components/AppContext/AppContext.jsx";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import FilterMaps from "../../components/FilterMaps/FilterMaps.jsx";
 
 let loadedTiles = [];
 
-const renderTile = ({ data, isDragging, toggleFavorite }) => (
-    <div style={{ padding: "1rem", width: "100%", position: "relative" }}>
-        <Link to={`/Maps/${data.text}/View`} className={styles.linkStyle}>
+const renderTile = ({data, isDragging, toggleFavorite}) => (
+    <div style={{padding: "1rem", width: "100%", position: "relative"}}>
+        <Link to={`/Maps/View/${data.text}`} className={styles.linkStyle}>
             <div
                 className={`${styles.tile} ${isDragging ? styles.dragging : ""}`}
-                style={{ width: "100%", height: "100%" }}
+                style={{width: "100%", height: "100%"}}
             >
-                <img src={card} className={styles.imgStyle} alt="Map Thumbnail" />
-                <div style={{ fontFamily: "exo" }}>
+                <img src={card} className={styles.imgStyle} alt="Map Thumbnail"/>
+                <div style={{fontFamily: "exo"}}>
                     {data.text} {isDragging ? "DRAGGING" : null}
                 </div>
@@ -32 +33 @@
                 src={data.isFavorite ? star_filled_icon : star_icon}
                 alt="Favorite Icon"
-                style={{ width: "20px", height: "20px" }}
+                style={{width: "20px", height: "20px"}}
             />
         </div>
@@ -46 +47 @@
     const [searchTerm, setSearchTerm] = useState("");
     const [tiles, setTiles] = useState([]);
-    const { username, isAuthenticated } = useAppContext();
+    const {username, isAuthenticated} = useAppContext();
+    const [filter, setFilter] = useState("all")
+    const [mapFilters, setMapFilters] = useState([])
 
     useEffect(() => {
@@ -52 +55 @@
             const httpService = new HttpService();
             let mapTiles = [];
-
+            let mapTypes = ['Hospital', 'Faculty', 'House', 'Other'];
             if (isAuthenticated) {
                 // :D
@@ -63 +66 @@
                     rows: 1,
                     isFavorite: true,
+                    type: elem.mapType,
                 }));
 
+                console.log("TUKA")
                 // Load all maps
                 const allResp = await httpService.get(config.view_maps.display);
                 console.log("RESPONSE MAPS PUBLIC", allResp);
+
+                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
+
 
                 const nonFavMapTiles = allResp
@@ -76 +84 @@
                         rows: 1,
                         isFavorite: false,
+                        type: elem.mapType,
                     }));
+
 
                 mapTiles = [...favMapTiles, ...nonFavMapTiles];
@@ -82 +92 @@
                 const allResp = await httpService.get(config.view_maps.display);
                 console.log("RESPONSE MAPS PUBLIC", allResp);
+                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
 
                 mapTiles = allResp.map((elem) => ({
@@ -88 +99 @@
                     rows: 1,
                     isFavorite: false,
+                    type: elem.mapType,
                 }));
             }
+
+            console.log("TYPES:", mapTypes);
+            setMapFilters(mapTypes);
 
             loadedTiles = [...mapTiles];
@@ -114 +129 @@
 
         const updatedTiles = tiles.map((tile) =>
-            tile.text === tileName ? { ...tile, isFavorite: !tile.isFavorite } : tile
+            tile.text === tileName ? {...tile, isFavorite: !tile.isFavorite} : tile
         );
 
@@ -140 +155 @@
     };
 
+    const onFilter = (selectedFilter) => {
+        setFilter(selectedFilter);
+
+        if (selectedFilter === "all") {
+            // Show all tiles
+            setTiles(loadedTiles);
+        } else {
+            // Filter tiles by selected type
+            const filteredTiles = loadedTiles.filter((tile) => tile.type === selectedFilter);
+            setTiles(filteredTiles);
+        }
+    };
+
+
     return (
         <div className={styles.container}>
@@ -152 +181 @@
                     onChange={handleSearchChange}
                 />
+
             </div>
-
+            <div className={styles.filterBar}>
+            <FilterMaps mapTypes={mapFilters} setFilter={onFilter}></FilterMaps>
+            </div>
+            {filter !== "all" && tiles.length === 0 && <p>No maps of type {filter} found</p>}
             <TilesContainer
                 data={tiles}
-                renderTile={(props) => renderTile({ ...props, toggleFavorite })}
+                renderTile={(props) => renderTile({...props, toggleFavorite})}
                 tileSize={tileSize}
-                forceTileWidth={150}
-                forceTileHeight={170}
+                forceTileWidth={170}
+                forceTileHeight={200}
             />
         </div>