95 zoom able image

frontend/src/Components/RoadDetails/ImageAbleZoom.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+interface ImageZoom {
+  /** The URL of the image to display in the zoomed view. */
+  imageUrl: string;
+  /** A callback function to close the zoomed view. */
+  onClose: () => void;
+  /** A callback function for navigating to the previous or next image. */
+  onNavigate: (direction: number) => void;
+  /** The index of the currently displayed image. */
+  currentImageIndex: number;
+  /** The total number of images in the gallery. */
+  totalImages: number;
+}
+
+/**
+ * ImageZoom make images clickable and open a popup to see image closer
+ */
+// ...
+const ImageZoom: React.FC<ImageZoom> = ({
+  imageUrl,
+  onClose,
+  onNavigate,
+  currentImageIndex,
+  totalImages,
+}) => {
+  // Check if the left/right navigation arrow should be disabled
+  const isLeftDisabled = currentImageIndex === 0;
+  const isRightDisabled = currentImageIndex === totalImages - 1;
+
+  const handleClickOutside = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="image-click-modal" onClick={handleClickOutside}>
+      <div className="image-modal-content">
+        <button
+          className={`nav-button left ${isLeftDisabled ? 'disabled' : ''}`}
+          onClick={() => onNavigate(-1)}
+          disabled={isLeftDisabled}
+        >
+          &lt; {/* Left arrow symbol */}
+        </button>
+        <img src={imageUrl} draggable="false" alt="Zoomed Image" />
+        <button
+          className={`nav-button right ${isRightDisabled ? 'disabled' : ''}`}
+          onClick={() => onNavigate(1)}
+          disabled={isRightDisabled}
+        >
+          &gt; {/* Right arrow symbol */}
+        </button>
+        <span className="close-icon" onClick={onClose}>
+          {/* Close button code */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            fill="currentColor"
+            className="bi bi-x-circle"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+          </svg>
+        </span>
+      </div>
+    </div>
+  );
+};
+// ...
+
+export default ImageZoom;

frontend/src/Components/RoadDetails/ImageGallery.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import ImageZoom from './ImageAbleZoom';
 
 interface Image {
   id: number;
@@ -68,12 +69,22 @@ const images: Image[] = [
   },
 ];
 
+/**
+ * React functional component for the Image Gallery.
+ * Image gallery is for show the real road image, and user can scroll to check
+ */
 const ImageGallery: React.FC = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
   const galleryRef = useRef<HTMLDivElement>(null);
 
-  const openImageInNewTab = (imageUrl: string) => {
-    window.open(imageUrl, '_blank');
+  // Add feature for the pop-up of clicking and checking images
+  const [isImageClickOpen, setIsImageClickOpen] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  // Function to open the pop-up
+  const openImageInPopup = (imageId: number) => {
+    setCurrentImageIndex(imageId - 1); // Adjust for 0-based index
+    setIsImageClickOpen(true);
   };
 
   const handleScroll = (scrollOffset: number) => {
@@ -122,14 +133,32 @@ const ImageGallery: React.FC = () => {
               className="image-thumbnail"
               src={image.url}
               alt="Gallery Thumbnail"
-              onClick={() => openImageInNewTab(image.url)}
+              onClick={() => openImageInPopup(image.id)}
             />
           </div>
         ))}
       </div>
       <button className="arrow-button right-arrow" onClick={scrollRight}>
         &gt;
       </button>
+      {isImageClickOpen && (
+        <ImageZoom
+          imageUrl={images[currentImageIndex].url}
+          onClose={() => setIsImageClickOpen(false)}
+          onNavigate={(direction) => {
+            // Handle navigation here if needed
+            if (direction === -1) {
+              // Navigate to the previous image
+              setCurrentImageIndex((prevIndex) => prevIndex - 1);
+            } else if (direction === 1) {
+              // Navigate to the next image
+              setCurrentImageIndex((prevIndex) => prevIndex + 1);
+            }
+          }}
+          currentImageIndex={currentImageIndex}
+          totalImages={images.length}
+        />
+      )}
     </div>
   );
 };

frontend/src/css/road_details.css

@@ -267,3 +267,82 @@ input[type='checkbox'] {
 .image-gallery-page.center-images {
   justify-content: center;
 }
+
+/* Css for click image to zoom */
+.image-click-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; /* Ensure the modal is displayed above other components */
+}
+.image-modal-content {
+  position: relative;
+  max-height: 50vw;
+  max-width: auto;
+  overflow: auto;
+  background-color: white;
+  z-index: 1100; /* Ensure content inside the modal is above the background */
+}
+.close-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+}
+
+.image-modal-content img {
+  height: 50vw;
+  width: auto;
+}
+
+.close-icon {
+  color: #333;
+  stroke: #333;
+  stroke-width: 0.5;
+}
+
+/* Imgae Zoom arrows style */
+.nav-button {
+  background: none;
+  border: none;
+  font-size: 12px;
+  cursor: pointer;
+  color: #333; /* Color for the arrows */
+  border: none;
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.nav-button.left {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+}
+
+.nav-button.right {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+}
+
+.nav-button:hover {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.nav-button:active {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.nav-button.disabled {
+  display: none;
+}