chore(frontend): remove maps page
This commit is contained in:
leandrofars
parent
e9d6b808d1
commit
c65d0a5350
|
|
@ -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 (
|
||||
<OverlayView
|
||||
position={props.anchorPosition}
|
||||
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
|
||||
getPixelPositionOffset={getPixelPositionOffset(props.markerPixelOffset)}
|
||||
>
|
||||
<div className="popup-tip-anchor">
|
||||
<div className="popup-bubble-anchor">
|
||||
<div className="popup-bubble-content">{props.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
</OverlayView>
|
||||
);
|
||||
};
|
||||
|
||||
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 <p>Loading...</p>;
|
||||
}
|
||||
|
||||
return ( markers && zoom &&
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
Maps | Oktopus
|
||||
</title>
|
||||
</Head>
|
||||
<GoogleMap
|
||||
options={mapOptions}
|
||||
zoom={zoom}
|
||||
center={mapCenter ? mapCenter : {
|
||||
lat: 0.0,
|
||||
lng: 0.0,
|
||||
}}
|
||||
mapContainerStyle={{ width: '100%', height: '100%' }}
|
||||
onLoad={handleOnLoad}
|
||||
clickableIcons={false}
|
||||
onDragEnd={handleDragEnd}
|
||||
onZoomChanged={handleZoomChange}
|
||||
>
|
||||
{
|
||||
markers.map((marker, index) => (
|
||||
<Marker
|
||||
key={index}
|
||||
position={{ lat: marker.coordinates.lat, lng: marker.coordinates.lng }}
|
||||
icon={{
|
||||
url: marker.img,
|
||||
scaledSize: new window.google.maps.Size(50, 50),
|
||||
anchor: new window.google.maps.Point(25, 25),
|
||||
}}
|
||||
draggable={false}
|
||||
clickable={true}
|
||||
onClick={() => {
|
||||
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 }
|
||||
});
|
||||
}}
|
||||
>
|
||||
</Marker>
|
||||
))
|
||||
}
|
||||
{activeMarker &&
|
||||
<Popup
|
||||
anchorPosition={activeMarker.position}
|
||||
markerPixelOffset={{ x: 0, y: -32 }}
|
||||
content={activeMarkerdata ?
|
||||
<div>
|
||||
<div>SN: {activeMarker.sn}</div>
|
||||
<div>
|
||||
<div>Model: {activeMarkerdata.Model?activeMarkerdata.Model:activeMarkerdata.ProductClass}</div>
|
||||
<div>Alias: {activeMarkerdata.Alias}</div>
|
||||
<div>Status: {activeMarkerdata.Status == 2 ? <span style={{color:"green"}}>online</span> : <span style={{color:"red"}}>offline</span>}</div>
|
||||
</div>
|
||||
</div>
|
||||
: <p>no device info found</p>}
|
||||
/>}
|
||||
</GoogleMap>
|
||||
</>
|
||||
)};
|
||||
|
||||
Page.getLayout = (page) => (
|
||||
<DashboardLayout>
|
||||
{page}
|
||||
</DashboardLayout>
|
||||
);
|
||||
|
||||
export default Page;
|
||||
Loading…
Reference in New Issue
Block a user