Merge pull request #272 from LL08-MathematicalModelling-dowell/fronte…

…nd-Norah

Frontend norah

package.json

@@ -18,6 +18,7 @@
     "@mui/material": "^5.15.18",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/x-charts": "^7.5.1",
+    "@react-google-maps/api": "^2.19.3",
     "axios": "^1.5.0",
     "chart.js": "^4.4.3",
     "emoji-mart": "^5.5.2",

src/pages/scales/report/Booth.jsx

@@ -35,31 +35,130 @@ import React from 'react'
 import { useState, useEffect} from 'react';
 import { Link, useParams, useLocation, useSearchParams } from "react-router-dom";
 import logo from "../../../../src/assets/dowell.png"
+import MapComponent from './MapComponent';
+import axios from 'axios';
 const Booth = () => {
 
-  const [boothInput, setBoothInput] = useState(0)
+const [boothInput, setBoothInput] = useState(0)
+const[boothErr,setBoothErr]=useState(false)
+const [searchParams, setSearchParams] = useSearchParams();
+const[submitted,setSubmitted]=useState(false)
+const[latitude,setLatitude]=useState("")
+const[longitude,setLongitude]=useState("")
+const[locationLoading,setLocationLoading]=useState(0)
+const[valid,setValid]=useState(0)
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
   const workspaceId=searchParams.get("workspace_id")
   const scaleId=searchParams.get("scale_id")
-  const scale_type =searchParams.get("scale_type")
+  const scaleType =searchParams.get("scale_type")
   const channelName=searchParams.get("channel")
-  console.log(scaleId,channelName,workspaceId)
 
-  console.log(scale_type, "GGG")
+  const myParam = new URLSearchParams(location.search).get('scale_type');
+
+  console.log(myParam, "GGGGG")
+
+  function calculateDistance(lat1, lon1, lat2, lon2) {
+    const earthRadiusKm = 6371; // Radius of the Earth in kilometers
+    const dLat = degreesToRadians(lat2 - lat1);
+    const dLon = degreesToRadians(lon2 - lon1);
+
+    const a =
+        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(degreesToRadians(lat1)) * Math.cos(degreesToRadians(lat2)) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2);
+
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    const distance = earthRadiusKm * c * 1000; 
+    return distance;
+}
+
+function degreesToRadians(degrees) {
+    return degrees * (Math.PI / 180);
+}
 
 
   const handleGoButton = () =>{
-    window.location.href=`https://100035.pythonanywhere.com/nps-lite/api/v5/nps-lite-create-scale/?user=False&scale_type=nps_lite&workspace_id=${workspaceId}&username=HeenaK&scale_id=${scaleId}&channel_name=${channelName}&instance_id=${boothInput}`
+    setSubmitted(true)
+    if(boothInput<=0 || isNaN(boothInput))
+      {
+        setSubmitted(false)
+        setBoothErr(true)
+        return
+      }else{
+      const distance=calculateDistance(latitude,longitude,latitude,longitude)
+      console.log(distance)
+      if(distance<=3){
+        window.location.href=`https://100035.pythonanywhere.com/nps-lite/api/v5/nps-lite-create-scale/?user=False&scale_type=${scaleType}&workspace_id=${workspaceId}&username=HeenaK&scale_id=${scaleId}&channel_name=${channelName}&instance_id=${boothInput}`
+      }else{
+        setValid(-1)
+        setSubmitted(false)
+      }
+      }
+
   }
+
+
+
+  useEffect(()=>{
+    fetchLocation()
+   },[])
+
+   async function fetchLocation(){
+        const response=await axios.get("https://www.qrcodereviews.uxlivinglab.online/api/v6/qrcode-data/22-d4234c7b-77c1-4ed6-8ea1-9417d9ad63d3/")
+        const detailedReport = response.data.response.detailed_report;
+
+   if (Array.isArray(detailedReport) && detailedReport.length > 0) {
+
+
+       setLatitude(detailedReport[detailedReport.length - 1].lat+"")
+       setLongitude(detailedReport[detailedReport.length - 1].long+"")
+       setLocationLoading(1)
+   } else {
+       console.log("detailed_report is either not an array or is empty");
+       setLocationLoading(-1)
+   }
+   }
+
+
   return (
-    <div className='flex flex-col items-center mt-10 w-[320px] h-[550px] m-auto'>
-      <img className='mt-10' src={logo} alt='booth image'/>
-      <h3 className='mt-[140px]'>Please enter your booth number</h3>
-      <input name='boothInput' value={boothInput} onChange={(e) =>setBoothInput(e.target.value)} type='number' className='w-[150px] h-[30px] border-2 border-black mt-5' />
-      <button className='w-[70px] h-[30px] rounded-lg mt-[50px] bg-orange-500 font-medium'
+    <div className='flex flex-col items-center justify-center w-full'>
+      <img className='mt-5 w-[150px] sm:w-[250px]' src={logo} alt='booth image'/>
+      <div className="flex flex-col gap-2 mt-[20px] sm:mt-[50px]"> 
+          <label htmlFor="boothNumber" className="text-[14px] sm:text-[16px] font-medium self-center">Please enter your booth number</label>
+          <input id="boothNumber" name="boothNumber" value={boothInput} type="number"
+          placeholder="enter shop/stand number"  onChange={(e) => {
+            setBoothInput(e.target.value);
+           setBoothErr(false)
+           setValid(0)
+          }
+        }
+        disabled={submitted==true}
+          className={`border rounded-full p-2 px-6 sm:text-base text-sm ${setSubmitted==true ? "bg-gray-300" : ""}`}/>
+          </div>
+          {boothErr && <p className="text-red-500 text-[12px] sm:text-[14px]">**Booth number is not valid**</p>}
+          <div className="w-[300px] sm:w-[500px] h-[250px] m-5 sm:m-10">
+            {locationLoading==0 ? (
+              <>
+              <p className="text-[18px] w-full h-full flex justify-center items-center bg-gray-100">Fetching location details...</p>
+            </>
+          ):(
+          <>
+          {locationLoading==1 ? (
+            <>
+            <MapComponent lat={latitude} lng={longitude}/>
+            </>
+          ):(
+          <>
+           <p className="text-[18px] w-full h-full flex justify-center items-center bg-gray-100">Failed to Load Location details</p>
+          </>
+        )}
+          </>
+        )}
+
+         </div>
+      <button className='w-[70px] h-[30px] rounded-lg mt-5  bg-orange-500 font-medium'
       onClick={handleGoButton}>GO</button>
+      {valid==-1 && <p className='text-red-600 p-2 mt-2 text-[12px] sm:text-[16px]'>Please check the details and try again</p>}
     </div>
 
   )

src/pages/scales/report/MapComponent.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from 'react';
+import { GoogleMap, LoadScript } from '@react-google-maps/api';
+
+const containerStyle = {
+  width: '100%',
+  height: '100%'
+};
+
+const MapComponent = ({ lat, lng }) => {
+  const mapRef = useRef(null);
+
+  useEffect(() => {
+    const initializeMap = async () => {
+      if (mapRef.current && window.google) {
+        const { AdvancedMarkerElement } = window.google.maps.marker;
+
+        const map = mapRef.current.state.map;
+        new AdvancedMarkerElement({
+          position: { lat: parseFloat(lat), lng: parseFloat(lng) },
+          map: map,
+        });
+      }
+    };
+
+    initializeMap().catch((error) => console.error('Error loading Google Maps:', error));
+  }, [lat, lng]);
+
+  return (
+    <LoadScript googleMapsApiKey="AIzaSyAsH8omDk8y0lSGLTW9YtZiiQ2MkmsF-uQ">
+      <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={{ lat: parseFloat(lat), lng: parseFloat(lng) }}
+        zoom={10}
+        onLoad={(map) => (mapRef.current = { state: { map } })}
+      />
+    </LoadScript>
+  );
+};
+
+export default MapComponent;