From 7431145ee3a48d12a2b957e7c42306c3c3700def Mon Sep 17 00:00:00 2001 From: marco370 <48531002-marco370@users.noreply.replit.com> Date: Thu, 23 Oct 2025 10:46:54 +0000 Subject: [PATCH] Integrate map functionality for planning mobile view Add Leaflet map integration to the planning mobile view, displaying sites with coordinates and filtering guards with driver licenses. Replit-Commit-Author: Agent Replit-Commit-Session-Id: e5565357-90e1-419f-b9a8-6ee8394636df Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/6d543d2c-20b9-4ea6-93fe-70fe9b1d9f80/e5565357-90e1-419f-b9a8-6ee8394636df/TFybNy5 --- client/index.html | 5 ++ client/src/pages/planning-mobile.tsx | 105 +++++++++++++++++++++------ server/routes.ts | 2 - 3 files changed, 89 insertions(+), 23 deletions(-) diff --git a/client/index.html b/client/index.html index aae19fb..0344cf4 100644 --- a/client/index.html +++ b/client/index.html @@ -18,6 +18,11 @@ + + +
diff --git a/client/src/pages/planning-mobile.tsx b/client/src/pages/planning-mobile.tsx index 7b7d078..95f7f50 100644 --- a/client/src/pages/planning-mobile.tsx +++ b/client/src/pages/planning-mobile.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useMemo } from "react"; import { useQuery } from "@tanstack/react-query"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; @@ -9,6 +9,16 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ import { Calendar, MapPin, User, Car, Clock } from "lucide-react"; import { format, parseISO, isValid } from "date-fns"; import { it } from "date-fns/locale"; +import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; +import L from 'leaflet'; + +// Fix Leaflet default icon issue with Webpack +delete (L.Icon.Default.prototype as any)._getIconUrl; +L.Icon.Default.mergeOptions({ + iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png', + iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png', + shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png', +}); type Location = "roccapiemonte" | "milano" | "roma"; @@ -16,12 +26,11 @@ type MobileSite = { id: string; name: string; address: string; - city: string; - serviceTypeId: string; - serviceTypeName: string; + serviceTypeId: string | null; + serviceTypeName: string | null; location: Location; - latitude: number | null; - longitude: number | null; + latitude: string | null; + longitude: string | null; }; type AvailableGuard = { @@ -77,6 +86,23 @@ export default function PlanningMobile() { roma: "bg-purple-500", }; + // Coordinate di default per centrare la mappa sulla location selezionata + const locationCenters: Record = { + roccapiemonte: [40.8167, 14.6167], // Roccapiemonte, Salerno + milano: [45.4642, 9.1900], // Milano + roma: [41.9028, 12.4964], // Roma + }; + + // Filtra siti con coordinate valide per la mappa + const sitesWithCoordinates = useMemo(() => { + return mobileSites?.filter((site) => + site.latitude !== null && + site.longitude !== null && + !isNaN(parseFloat(site.latitude)) && + !isNaN(parseFloat(site.longitude)) + ) || []; + }, [mobileSites]); + return (
{/* Header */} @@ -154,15 +180,50 @@ export default function PlanningMobile() { {mobileSites?.length || 0} siti con servizi mobili in {locationLabels[selectedLocation]} - -
- -

- Integrazione mappa in sviluppo -
- (Leaflet/Google Maps) -

-
+ + {sitesWithCoordinates.length > 0 ? ( + + + {sitesWithCoordinates.map((site) => ( + + +
+

{site.name}

+

{site.address}

+ {site.serviceTypeName && ( + + {site.serviceTypeName} + + )} +
+ + + ))} + + ) : ( +
+
+ +

+ Nessun sito con coordinate GPS disponibile +
+ Aggiungi latitudine e longitudine ai siti per visualizzarli sulla mappa +

+
+
+ )} @@ -192,18 +253,20 @@ export default function PlanningMobile() {

{site.name}

- {site.address}, {site.city} + {site.address}

{locationLabels[site.location]} -
- - {site.serviceTypeName} - -
+ {site.serviceTypeName && ( +
+ + {site.serviceTypeName} + +
+ )}