Changeset 79a0317 for imaps-frontend/src/pages/MyMaps

Timestamp:

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

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

0c6b92a

Message:

F4 Finalna Verzija

Location:

imaps-frontend/src/pages/MyMaps

Files:

• CreateMaps.module.css (modified) (3 diffs)
• MyMaps.jsx (modified) (13 diffs)

imaps-frontend/src/pages/MyMaps/CreateMaps.module.css

@@ -55 +55 @@
   margin-bottom: 30px;
   text-align: center;
+  margin-top: 5em;
+
 }
 
 .searchBar input {
-  width: 300px;
+  /*width: 300px;*/
+  width: 33vw;
   padding: 10px;
   font-size: 16px;
@@ -83 +86 @@
   display: flex;
   flex-direction: column;
-  align-items: center; /* Center items horizontally */
-  justify-content: flex-start; /* Ensure tiles stack from the top */
+  align-items: center;
+  justify-content: flex-start;
   padding: 10px;
+  /*padding-left: 2.5em;*/
   background-color: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
+
+}
+
 
 .tile {
@@ -127 +133 @@
 }
 
+.plusButton {
+  width: 50px;
+  height: 50px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease-in-out;
+  background: #4ebc3b;
+  margin-right: 20px;
+}
+
+.plusButton img {
+  width: 50px;
+  height: auto;
+  margin-left: 0;
+}
+
+.plusButton:hover {
+  transform: scale(1.1);
+  background: #46be2f;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #f8f9fa; /* Light grey background for a clean look */
+  border-bottom: 1px solid #ddd; /* Subtle separation from the rest of the page */
+  padding: 10px 20px; /* Add some space around the content */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for subtle elevation */
+}
+
+.header .logo-wrapper,
+.header .profile-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.header h1 {
+  font-size: 1.5rem; /* Slightly larger font size */
+  color: #333; /* Dark grey for a professional tone */
+  margin: 0 auto; /* Center-align the title */
+  font-weight: 600; /* Semi-bold text for emphasis */
+  text-align: center;
+  flex-grow: 1; /* Allow it to take space in the middle */
+}
+
+.logo-wrapper {
+  margin-right: auto; /* Push logo to the far left */
+}
+
+.profile-wrapper {
+  margin-left: auto; /* Push profile to the far right */
+}
+
+
+
+
 @media (max-width: 768px) {
   .mapsContainer {

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

@@ -10 +10 @@
 import {useAppContext} from "../../components/AppContext/AppContext.jsx";
 import config from "../../scripts/net/netconfig.js";
-import {element} from "prop-types";
 import Toast from "../../components/Toast/Toast.jsx";
+import plus_icon from "../../assets/plus_icon.png";
 
 const renderTile = ({data, isDragging}, openMapInfo) => (
@@ -65 +65 @@
         setToastMessage(message);
         setToastType(type);
-        setTimeout(() => setToastMessage(null), 3000); // Automatically hide the toast after 3 seconds
-    };
-
+        setTimeout(() => setToastMessage(null), 3000);
+    };
 
     const handleUpdate = async (updatedMap) => {
-        // Placeholder for map update logic
+        try {
+            let httpService = new HttpService(true);
+            const response = await httpService.post(
+                config.my_maps.edit_map_info,
+                updatedMap
+            );
+            closeMapInfoModal()
+            window.location.reload();
+
+        } catch (error) {
+            showToast("Map Name already taken", 0)
+            closeMapInfoModal()
+        }
     };
 
@@ -83 +94 @@
                 setTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
                 setAllTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
-                showToast("Map deleted", 1)
+                showToast("Map deleted", 1);
             })
             .catch((error) => {
                 const errorMessage = error.response?.data?.error || error.message || "Unknown error";
-                // alert(`Error deleting the map: ${errorMessage}`);
-                showToast(`Error deleting the map: ${errorMessage}`, 0)
+                showToast(`Error deleting the map: ${errorMessage}`, 0);
             });
     };
@@ -97 +107 @@
 
         httpService
-            .put(`${config.my_maps.add}?username=${username}`, mapDetails)
+            .put(`${config.my_maps.add}?username=${encodeURI(username)}`, mapDetails)
             .then((respMap) => {
-                console.log("RESP NEW MAP: " + respMap)
                 const mapTile = {
                     mapName: respMap.mapName,
@@ -108 +117 @@
                     modified_at: respMap.modifiedAt,
                     published_at: respMap.published_at,
-                    gmaps_url: respMap.gmaps_url,
+                    gmaps_url: respMap.gmapsUrl,
                     image_url: card,
                     is_published: respMap.is_published,
+                    mapType: respMap.mapType
                 };
 
@@ -116 +126 @@
                 setTiles((prevTiles) => [...prevTiles, mapTile]);
                 showToast("Map added successfully!");
-
-
             })
             .catch((error) => {
-                showToast("Map name already taken", 0)
+                showToast("Map name already taken", 0);
             });
     };
@@ -129 +137 @@
             httpService.setAuthenticated();
 
-            const respMaps = await httpService.get(`${config.my_maps.display}?username=${username}`);
+            const respMaps = await httpService.get(
+                `${config.my_maps.display}?username=${encodeURI(username)}`
+            );
 
             const mapTiles = respMaps.map((elem) => ({
@@ -139 +149 @@
                 modified_at: elem.modifiedAt,
                 published_at: elem.published_at,
-                gmaps_url: elem.gMapsUrl,
+                gmaps_url: elem.gmapsUrl,
                 image_url: card,
                 numFavourites: elem.numFavourites,
             }));
-
 
             setTiles(mapTiles);
@@ -154 +163 @@
         setPublicMaps(tiles.filter((tile) => tile.status === "PUBLIC"));
         setPrivateMaps(tiles.filter((tile) => tile.status === "PRIVATE"));
-        setPendingMaps(tiles.filter((tile) => tile.status === "INVALID"));
+        setPendingMaps(tiles.filter((tile) => tile.status === "PENDING"));
     }, [tiles]);
 
@@ -164 +173 @@
     return (
         <div className={styles.container}>
-            <Logo/>
-            <Profile/>
+
+            <div className={`${styles.logoWrapper}`}>
+                <Logo/>
+            </div>
             <h1>Your Maps</h1>
-
-            <div className={styles.actionButtons}>
-                <button className={styles.createMapsButton} onClick={openCreateModal}>
-                    Create Map
-                </button>
-            </div>
+            <div className={`${styles.profileWrapper}`}>
+                <Profile/>
+            </div>
+
 
             <div className={styles.searchBar}>
-                <input type="text" placeholder="Search for maps..." onChange={handleSearch}/>
+                <input
+                    type="text"
+                    placeholder="Search for maps..."
+                    onChange={handleSearch}
+                />
             </div>
 
@@ -201 +214 @@
                         forceTileHeight={170}
                     />
+                    <button className={styles.plusButton} onClick={openCreateModal}>
+                        <img src={plus_icon} alt="Add Map"/>
+                    </button>
                 </div>
 
@@ -222 +238 @@
                 onDelete={deleteMap}
                 onUpdate={handleUpdate}
-                onPublish={() => {
+                onPublish={(updatedMap = null) => {
+
+                    const updatedTile = {
+                        mapName: updatedMap.mapName,
+                        cols: 1,
+                        rows: 1,
+                        status: updatedMap.mapStatus,
+                        created_at: updatedMap.createdAt,
+                        modified_at: updatedMap.modifiedAt,
+                        published_at: updatedMap.published_at,
+                        gmaps_url: updatedMap.gMapsUrl,
+                        image_url: card,
+                        numFavourites: updatedMap.numFavourites,
+                    }
                     showToast(`Map ${selectedMap.mapName} published successfully!`);
                     setPrivateMaps((prevMaps) => prevMaps.filter(m => m.mapName !== selectedMap.mapName))
-                    setPendingMaps((prevMaps) => [...prevMaps,allTiles.find(m => m.mapName = selectedMap.mapName)])
+                    setPendingMaps((prevMaps) => [...prevMaps, updatedTile])
                     closeMapInfoModal()
                 }}
@@ -236 +265 @@
             />
 
-            {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
+            {toastMessage && (
+                <Toast
+                    message={toastMessage}
+                    type={toastType}
+                    onClose={() => setToastMessage(null)}
+                />
+            )}
         </div>
     );