From c65d0a53503cacc340884941c88209371c0cde08 Mon Sep 17 00:00:00 2001 From: leandrofars Date: Wed, 30 Oct 2024 08:39:20 -0300 Subject: [PATCH] chore(frontend): remove maps page --- frontend/src/pages/map.js | 259 -------------------------------------- 1 file changed, 259 deletions(-) delete mode 100644 frontend/src/pages/map.js diff --git a/frontend/src/pages/map.js b/frontend/src/pages/map.js deleted file mode 100644 index 6ba92ea..0000000 --- a/frontend/src/pages/map.js +++ /dev/null @@ -1,259 +0,0 @@ -import Head from 'next/head'; -import { GoogleMap, useLoadScript, Marker, OverlayView } from "@react-google-maps/api" -import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout'; -import { useEffect, useMemo, useState } from 'react'; -import mapStyles from '../utils/mapStyles.json'; -import { useRouter } from 'next/router'; - -const getPixelPositionOffset = pixelOffset => (width, height) => ({ - x: -(width / 2) + pixelOffset.x, - y: -(height / 2) + pixelOffset.y -}); - -const Popup = props => { - return ( - -
-
-
{props.content}
-
-
- - ); -}; - -const Page = () => { - - const libraries = useMemo(() => ['places'], []); - - const router = useRouter(); - - const [mapRef, setMapRef] = useState(null); - - const [mapCenter, setMapCenter] = useState(null); - const [markers, setMarkers] = useState([]); - const [activeMarker, setActiveMarker] = useState(null); - const [activeMarkerdata, setActiveMarkerdata] = useState(null); - const [zoom, setZoom] = useState(null) - - const handleDragEnd = () => { - if (mapRef) { - const newCenter = mapRef.getCenter(); - console.log("newCenter:",newCenter.lat(), newCenter.lng()); - localStorage.setItem("mapCenter", JSON.stringify({"lat":newCenter.lat(),"lng":newCenter.lng()})) - } - } - - const handleZoomChange = () => { - if (mapRef) { - const newZoom = mapRef.getZoom(); - console.log("new zoom", newZoom) - localStorage.setItem("zoom", newZoom) - } - } - - const handleOnLoad = map => { - setMapRef(map); - }; - - const fetchMarkers = async () => { - - var myHeaders = new Headers(); - myHeaders.append("Content-Type", "application/json"); - myHeaders.append("Authorization", localStorage.getItem("token")); - - var requestOptions = { - method: 'GET', - headers: myHeaders, - redirect: 'follow' - }; - - let result = await fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/map`, requestOptions) - - if (result.status == 200) { - const content = await result.json() - setMarkers(content) - }else if (result.status == 403) { - console.log("num tenx permissão, seu boca de sandália") - return router.push("/403") - }else if (result.status == 401){ - console.log("taix nem autenticado, sai fora oh") - return router.push("/auth/login") - } else { - setMarkers([]) - console.log("error to get map markers") - } - } - - const fetchActiveMarkerData = async (id) => { - var myHeaders = new Headers(); - myHeaders.append("Content-Type", "application/json"); - myHeaders.append("Authorization", localStorage.getItem("token")); - - var requestOptions = { - method: 'GET', - headers: myHeaders, - redirect: 'follow' - }; - - let result = await fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device?id=`+id, requestOptions) - - if (result.status == 200) { - const content = await result.json() - setActiveMarkerdata(content) - }else if (result.status == 403) { - return router.push("/403") - }else if (result.status == 401){ - return router.push("/auth/login") - } else { - console.log("no device info found") - const content = await result.json() - } - } - - useEffect(()=> { - fetchMarkers(); - - let zoomFromLocalStorage = localStorage.getItem("zoom") - if (zoomFromLocalStorage) { - setZoom(Number(zoomFromLocalStorage)) - }else{ - setZoom(25) - } - - let mapCenterFromLocalStorage = localStorage.getItem("mapCenter") - if (mapCenterFromLocalStorage){ - let fmtMapCenter = JSON.parse(localStorage.getItem("mapCenter")) - console.log("mapCenterFromLocalStorage:", fmtMapCenter) - setMapCenter({ - lat: Number(fmtMapCenter.lat), - lng: Number(fmtMapCenter.lng), - }) - return - } - // Check if geolocation is supported by the browser - if ("geolocation" in navigator) { - // Prompt user for permission to access their location - navigator.geolocation.getCurrentPosition( - // Get the user's latitude and longitude coordinates - // Success callback function - function(position) { - // Update the map with the user's new location - setMapCenter({ - lat: position.coords.latitude, - lng: position.coords.longitude, - }) - }, - // Error callback function - function(error) { - // Handle errors, e.g. user denied location sharing permissions - console.log("Error getting user location:", error); - } - ); - } else { - // Geolocation is not supported by the browser - console.log("Geolocation is not supported by this browser, or the user denied access"); - } - },[]) - - const mapOptions = useMemo( - () => ({ - disableDefaultUI: false, - clickableIcons: true, - zoomControl: true, - controlSize: 23, - styles: mapStyles, - mapTypeControlOptions: { - mapTypeIds: ['roadmap', 'satellite'], - } - }), - [] - ); - - const { isLoaded } = useLoadScript({ - googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY, - libraries: libraries, - }); - - if (!isLoaded) { - return

Loading...

; - } - - return ( markers && zoom && - <> - - - Maps | Oktopus - - - - { - markers.map((marker, index) => ( - { - setActiveMarkerdata(null); - if (activeMarker?.sn === marker.sn) { - setActiveMarker(null); - return; - } - fetchActiveMarkerData(marker.sn); - setActiveMarker({ - sn: marker.sn, - position: { lat: marker.coordinates.lat, lng: marker.coordinates.lng } - }); - }} - > - - )) - } - {activeMarker && - -
SN: {activeMarker.sn}
-
-
Model: {activeMarkerdata.Model?activeMarkerdata.Model:activeMarkerdata.ProductClass}
-
Alias: {activeMarkerdata.Alias}
-
Status: {activeMarkerdata.Status == 2 ? online : offline}
-
- - :

no device info found

} - />} - - - )}; - - Page.getLayout = (page) => ( - - {page} - - ); - - export default Page; \ No newline at end of file