add username, title, content to mapbox to render

Robrowno · Jul 17, 2023 · 9cf36fa · 9cf36fa
1 parent 377031a
commit 9cf36fa
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/authentication/serializers.py b/authentication/serializers.py
@@ -20,6 +20,7 @@ class UserLoginSerializer(serializers.Serializer):
     password = serializers.CharField(max_length=128)
 
 class PhotoImageSerializer(serializers.ModelSerializer):
+    user = serializers.ReadOnlyField(source='user.username')
     image = serializers.ImageField(use_url=True)
     class Meta:
         model = PhotoImage

diff --git a/static/css/style.css b/static/css/style.css
@@ -116,6 +116,13 @@ button.accent-button {
   z-index: 9999;
 }
 
+.lightbox-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .lightbox-image {
   max-width: 90%;
   max-height: 90%;
@@ -124,6 +131,19 @@ button.accent-button {
   object-fit: contain;
 }
 
+.image-details {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: white;
+  max-width: 90%;
+  max-height: 90%;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 /* Signup page*/
 #signup {
   height: 100vh;

diff --git a/static/js/index.js b/static/js/index.js
@@ -33,33 +33,46 @@ map.on("load", () => {
             const width = marker.properties.iconSize[0];
             const height = marker.properties.iconSize[1];
             const image = marker.properties.image;
+            const title = marker.properties.title;
+            const content = marker.properties.content;
+            const user = marker.properties.user;
+
             el.className = "marker";
             el.style.backgroundImage = `url(${image})`;
             el.style.width = `${width}px`;
             el.style.height = `${height}px`;
             el.style.backgroundSize = "100%";
 
             el.addEventListener("click", () => {
-                openLightbox(image);
+                openLightbox(image, title, content, user);
             });
 
             // Add markers to the map.
-            new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map);
+            new mapboxgl.Marker(el)
+            .setLngLat(marker.geometry.coordinates)
+            .addTo(map);
         }
     }
 
-    function openLightbox(imageUrl) {
+    function openLightbox(imageUrl, title, content, user) {
         const lightbox = document.createElement("div");
         lightbox.className = "lightbox";
         lightbox.innerHTML = `
-                <img src="${imageUrl}" alt="Image" class="lightbox-image" />
+          <div class="lightbox-content">
+            <img src="${imageUrl}" alt="Image" class="lightbox-image" />
+            <div class="image-details">
+              <h4>${title}</h4>
+              <p>${content}</p>
+              <p>Uploaded by: ${user}</p>
+            </div>
+          </div>
         `;
         document.body.appendChild(lightbox);
-
+      
         lightbox.addEventListener("click", () => {
-            lightbox.remove();
+          lightbox.remove();
         });
-    }
+      }
 
     // Make an AJAX request to fetch the photo information
     const baseUrl = window.location.hostname === "127.0.0.1" ? "http://127.0.0.1:8000" : "https://summertrails-heroku-dd7388a15196.herokuapp.com";
@@ -73,8 +86,10 @@ map.on("load", () => {
                 const feature = {
                     type: "Feature",
                     properties: {
-                        message: photo.title,
+                        title: photo.title,
                         image: photo.image,
+                        content: photo.content,
+                        user: photo.user,
                         iconSize: [40, 40],
                         icon: "marker"
                     },