Changeset 79a0317 for imaps-frontend/src/components/MapInfoModal
- Timestamp:
- 01/21/25 03:08:24 (3 days ago)
- Branches:
- main
- Parents:
- 0c6b92a
- Location:
- imaps-frontend/src/components/MapInfoModal
- Files:
-
- 2 edited
-
MapInfoModal.jsx (modified) (3 diffs)
-
MapInfoModal.module.css (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx
r0c6b92a r79a0317 1 import React, { useEffect, useState} from "react";1 import React, { useEffect, useState } from "react"; 2 2 import styles from "./MapInfoModal.module.css"; 3 import {json, useNavigate} from "react-router-dom";4 3 import edit_icon from "../../assets/edit_icon_black.png"; 5 4 import PublishForm from "../PublishForm/PublishForm.jsx"; 6 5 import HttpService from "../../scripts/net/HttpService.js"; 7 6 import config from "../../scripts/net/netconfig.js"; 8 import {useAppContext} from "../AppContext/AppContext.jsx"; 9 10 export default function MapInfoModal({isOpen, onClose, map, onDelete, onUpdate, onPublish, published=false}) { 7 import { useAppContext } from "../AppContext/AppContext.jsx"; 8 import { useNavigate } from "react-router-dom"; 9 10 export default function MapInfoModal({ 11 isOpen, 12 onClose, 13 map, 14 onDelete, 15 onUpdate, 16 onPublish, 17 published = false, 18 }) { 11 19 const [isEditPopupOpen, setEditPopupOpen] = useState(false); 12 const [editedName, setEditedName] = useState(map?.mapName || ""); 13 const [editedGmapsUrl, setEditedGmapsUrl] = useState(map?.gmaps_url || ""); 14 const [publishFormOpen,setPublishFormOpen] = useState(false) 20 const [editedName, setEditedName] = useState(""); 21 const [editedGmapsUrl, setEditedGmapsUrl] = useState(""); 22 const [editedType, setEditedType] = useState(""); 23 const [publishFormOpen, setPublishFormOpen] = useState(false); 15 24 const navigate = useNavigate(); 16 const[loadedFormData,setLoadedFormData] = useState(null) 17 25 const [loadedFormData, setLoadedFormData] = useState(null); 26 const { setLoading } = useAppContext(); 27 const { loading } = useAppContext(); 28 const { username } = useAppContext(); 18 29 19 30 useEffect(() => { 20 console.log("GMAPS: " + JSON.stringify(map)) 21 }, []); 22 23 const {username} = useAppContext(); 31 if (map) { 32 setEditedName(map.mapName || ""); 33 setEditedGmapsUrl(map.gmaps_url || ""); 34 setEditedType(map.mapType || ""); 35 } 36 }, [map, isEditPopupOpen]); 24 37 25 38 if (!isOpen || !map) return null; 26 39 27 40 const handleView = () => { 28 navigate(`/myMaps/ ${map.mapName}/View`)41 navigate(`/myMaps/View/${map.mapName}`); 29 42 }; 30 43 31 44 const handleEdit = () => { 32 navigate(`/myMaps/ ${map.mapName}/Draw`)45 navigate(`/myMaps/Draw/${map.mapName}`); 33 46 }; 34 47 35 48 const handleDelete = () => { 36 if (window.confirm(`Are you sure you want to delete the map "${map.mapName}"?`)) { 49 if ( 50 window.confirm(`Are you sure you want to delete the map "${map.mapName}"?`) 51 ) { 37 52 onDelete(map.mapName); 38 53 onClose(); … … 40 55 }; 41 56 42 43 57 const openEditPopup = () => { 44 58 setEditPopupOpen(true); … … 51 65 const handleEditSubmit = async () => { 52 66 const updatedMap = { 53 ...map, 54 mapName: editedName, 55 gmaps_url: editedGmapsUrl, 67 initialName: map.mapName, 68 name: editedName, 69 gmapsUrl: editedGmapsUrl, 70 type: editedType, 56 71 }; 57 58 try { 59 //await onUpdate(updatedMap); 60 setEditPopupOpen(false); 61 } catch (error) { 62 console.error("Error updating map:", error); 63 } 64 }; 65 66 const openPublishModal = async () => { 67 const httpService = new HttpService(true); 68 const respForm = await httpService.get(`${config.my_maps.publish_get}?mapName=${map.mapName}`) 69 setLoadedFormData(respForm); 70 setPublishFormOpen(true) 71 }; 72 73 const sendPublishRequest = async (formData) => { 74 const httpService = new HttpService(true); 75 formData.mapName = map.mapName; 76 console.log("FORMDATA: "+JSON.stringify(formData)) 77 await httpService.post(`${config.my_maps.publish}?username=${username}`,formData); 78 setPublishFormOpen(false) 79 onPublish() 80 } 72 onUpdate(updatedMap); 73 closeEditPopup() 74 }; 81 75 82 76 return ( 83 77 <div className={styles.modalOverlay} onClick={onClose}> 84 <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}> 85 {publishFormOpen && ( 86 <PublishForm mapName={map.mapName} formData={loadedFormData} onSubmit={sendPublishRequest} onCancel={() => setPublishFormOpen(false)}/> 87 )} 88 89 <img src={map.image_url} alt="Map Thumbnail" className={styles.mapImage}/> 90 <h2 className={styles.title}> 91 {map.mapName} 92 <img 93 src={edit_icon} 94 alt="Edit" 95 className={styles.editIcon} 96 onClick={openEditPopup} 97 /> 98 </h2> 99 <p><strong>Status:</strong> {map.status}</p> 100 101 <p><strong>Created At:</strong> {new Date(map.created_at).toLocaleString()}</p> 102 <p><strong>Modified At:</strong> {new Date(map.modified_at).toLocaleString()}</p> 103 <p><strong>Published 104 At:</strong> {map.published_at ? new Date(map.published_at).toLocaleString() : "Not published yet"} 105 </p> 106 <p> 107 <strong>Google Maps URL:</strong> 108 <a href={map.gMapsUrl} rel="noopener noreferrer"> 109 Open in Google Maps 110 </a> 111 </p> 112 113 <div className={styles.buttonContainer}> 114 <button className={styles.viewButton} onClick={handleView}> 115 View 116 </button> 117 <button className={styles.editButton} onClick={handleEdit}> 118 Edit 119 </button> 120 <button className={styles.deleteButton} onClick={handleDelete}> 121 Delete 122 </button> 123 {!map.is_published && !published && ( 124 <button className={styles.publishButton} onClick={openPublishModal}> 125 Publish 78 <div 79 className={styles.modalContent} 80 onClick={(e) => e.stopPropagation()} 81 > 82 {!loading && ( 83 <> 84 <img 85 src={map.image_url} 86 alt="Map Thumbnail" 87 className={styles.mapImage} 88 /> 89 <h2 className={styles.title}> 90 {map.mapName} 91 <img 92 src={edit_icon} 93 alt="Edit" 94 className={styles.editIcon} 95 onClick={openEditPopup} 96 /> 97 </h2> 98 <p> 99 <strong>Status:</strong> {map.status} 100 </p> 101 <p> 102 <strong>Created At:</strong>{" "} 103 {new Date(map.created_at).toLocaleString()} 104 </p> 105 <p> 106 <strong>Modified At:</strong>{" "} 107 {new Date(map.modified_at).toLocaleString()} 108 </p> 109 <p> 110 <strong>Published At:</strong>{" "} 111 {map.published_at 112 ? new Date(map.published_at).toLocaleString() 113 : "Not published yet"} 114 </p> 115 <p> 116 <strong>Google Maps URL:</strong>{" "} 117 <a href={`${map.gmaps_url}`} rel="noopener noreferrer"> 118 Open in Google Maps 119 </a> 120 </p> 121 122 <div className={styles.buttonContainer}> 123 <button className={styles.viewButton} onClick={handleView}> 124 View 125 </button> 126 <button className={styles.editButton} onClick={handleEdit}> 127 Edit 128 </button> 129 <button className={styles.deleteButton} onClick={handleDelete}> 130 Delete 131 </button> 132 {!map.is_published && !published && ( 133 <button 134 className={styles.publishButton} 135 onClick={() => setPublishFormOpen(true)} 136 > 137 Publish 138 </button> 139 )} 140 </div> 141 <button className={styles.closeButton} onClick={onClose}> 142 Close 126 143 </button> 127 )} 128 </div> 129 <button className={styles.closeButton} onClick={onClose}> 130 Close 131 </button> 132 133 {isEditPopupOpen && ( 134 <div className={styles.editPopupOverlay} onClick={closeEditPopup}> 135 <div 136 className={styles.editPopupContent} 137 onClick={(e) => e.stopPropagation()} 138 > 139 <h3 className={styles.title}>Edit Map Details</h3> 140 <div className={styles.editField}> 141 <label>Map Name:</label> 142 <input 143 type="text" 144 value={editedName} 145 onChange={(e) => setEditedName(e.target.value)} 146 /> 144 145 {isEditPopupOpen && ( 146 <div 147 className={styles.editPopupOverlay} 148 onClick={closeEditPopup} 149 > 150 <div 151 className={styles.editPopupContent} 152 onClick={(e) => e.stopPropagation()} 153 > 154 <h3 className={styles.title}>Edit Map Details</h3> 155 <div className={styles.editField}> 156 <label>Map Name:</label> 157 <input 158 type="text" 159 value={editedName} 160 onChange={(e) => setEditedName(e.target.value)} 161 /> 162 </div> 163 <div className={styles.editField}> 164 <label>Google Maps URL:</label> 165 <input 166 type="text" 167 value={editedGmapsUrl} 168 onChange={(e) => setEditedGmapsUrl(e.target.value)} 169 /> 170 </div> 171 <div className={styles.editField}> 172 <label>Map Type:</label> 173 <input 174 type="text" 175 value={editedType} 176 onChange={(e) => setEditedType(e.target.value)} 177 /> 178 </div> 179 <div className={styles.editPopupButtons}> 180 <button 181 className={styles.submitButton} 182 onClick={handleEditSubmit} 183 > 184 Submit 185 </button> 186 <button 187 className={styles.cancelButton} 188 onClick={closeEditPopup} 189 > 190 Cancel 191 </button> 192 </div> 193 </div> 147 194 </div> 148 <div className={styles.editField}> 149 <label>Google Maps URL:</label> 150 <input 151 type="text" 152 value={editedGmapsUrl} 153 onChange={(e) => setEditedGmapsUrl(e.target.value)} 154 /> 155 </div> 156 <div className={styles.editPopupButtons}> 157 <button className={styles.submitButton} onClick={handleEditSubmit}> 158 Submit 159 </button> 160 <button className={styles.cancelButton} onClick={closeEditPopup}> 161 Cancel 162 </button> 163 </div> 164 </div> 165 </div> 195 )} 196 </> 166 197 )} 167 198 </div> -
imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css
r0c6b92a r79a0317 14 14 15 15 .modalContent { 16 position: relative; 16 17 background-color: white; 17 18 padding: 20px; … … 22 23 text-align: center; 23 24 animation: fadeIn 0.3s ease-out; 25 24 26 } 25 27
Note:
See TracChangeset
for help on using the changeset viewer.
