mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-11 17:27:31 +02:00
Move geolocation feature to weather utility and add to settings page
The geolocation functionality has been extracted from the WeatherWidget component and integrated into the WeatherSettings page. A new button allows users to update their location using their device's geolocation services. The WeatherWidget has been updated to remove its geolocation button and now displays the location in a more concise format. Replit-Commit-Author: Agent Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/sBtPBve
This commit is contained in:
michaelschal committed
1 parent
b590fa8b30
commit
cacc3984d5
2 files changed
+118
-112
No files matched your search
@@ -1,9 +1,6 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Cloud, CloudRain, Sun, CloudSnow, CloudSun, ThermometerSun, CloudDrizzle, Wind, Zap, Eye, MapPin, Loader2 } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Cloud, CloudRain, Sun, CloudSnow, CloudSun, ThermometerSun, CloudDrizzle, Wind, Zap, Eye } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
|
||||
interface WeatherData {
|
||||
id: number;
|
||||
@@ -130,86 +127,7 @@ export default function WeatherWidget() {
|
||||
retry: 1,
|
||||
});
|
||||
|
||||
// Mutation pour la géolocalisation
|
||||
const geoLocationMutation = useMutation({
|
||||
mutationFn: async (coordinates: { latitude: number; longitude: number }) => {
|
||||
const response = await fetch('/api/weather/geolocation', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(coordinates),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || 'Erreur de géolocalisation');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
toast({
|
||||
title: "Localisation mise à jour",
|
||||
description: data.message,
|
||||
});
|
||||
|
||||
// Forcer le rechargement immédiat des données météo
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/weather/current'] });
|
||||
queryClient.refetchQueries({ queryKey: ['/api/weather/current'] });
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast({
|
||||
title: "Erreur de géolocalisation",
|
||||
description: error.message || "Impossible de déterminer votre localisation",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Fonction pour obtenir la géolocalisation
|
||||
const handleGeolocation = () => {
|
||||
if (!navigator.geolocation) {
|
||||
toast({
|
||||
title: "Géolocalisation non supportée",
|
||||
description: "Votre navigateur ne supporte pas la géolocalisation",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
const { latitude, longitude } = position.coords;
|
||||
geoLocationMutation.mutate({ latitude, longitude });
|
||||
},
|
||||
(error) => {
|
||||
let message = "Erreur de géolocalisation";
|
||||
switch (error.code) {
|
||||
case error.PERMISSION_DENIED:
|
||||
message = "Autorisation de géolocalisation refusée";
|
||||
break;
|
||||
case error.POSITION_UNAVAILABLE:
|
||||
message = "Position non disponible";
|
||||
break;
|
||||
case error.TIMEOUT:
|
||||
message = "Délai d'attente dépassé";
|
||||
break;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Erreur de géolocalisation",
|
||||
description: message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 300000, // 5 minutes
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -247,25 +165,9 @@ export default function WeatherWidget() {
|
||||
<WeatherIcon condition={weather.currentYear?.condition || ''} size={24} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-slate-700 dark:text-slate-200 font-semibold text-sm">
|
||||
{location.split(',')[0]}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleGeolocation}
|
||||
disabled={geoLocationMutation.isPending}
|
||||
className="h-6 w-6 p-0 hover:bg-slate-200 dark:hover:bg-slate-600"
|
||||
title="Détecter ma localisation"
|
||||
>
|
||||
{geoLocationMutation.isPending ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<MapPin className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-slate-700 dark:text-slate-200 font-semibold text-sm">
|
||||
{location.split(',')[0]}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{translateToFrench(weather.currentYear?.condition || 'Inconnu')}
|
||||
</span>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { AlertCircle, CheckCircle, Cloud, Settings } from "lucide-react";
|
||||
import { AlertCircle, CheckCircle, Cloud, Settings, MapPin, Loader2 } from "lucide-react";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
@@ -66,6 +66,92 @@ export default function WeatherSettings() {
|
||||
},
|
||||
});
|
||||
|
||||
// Geolocation mutation
|
||||
const geoLocationMutation = useMutation({
|
||||
mutationFn: async (coordinates: { latitude: number; longitude: number }) => {
|
||||
const response = await fetch('/api/weather/geolocation', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(coordinates),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || 'Erreur de géolocalisation');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
toast({
|
||||
title: "Localisation mise à jour",
|
||||
description: data.message,
|
||||
});
|
||||
|
||||
// Refresh settings to get updated location
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/weather/settings'] });
|
||||
|
||||
// Update the form field
|
||||
const locationInput = document.getElementById('location') as HTMLInputElement;
|
||||
if (locationInput && data.location?.fullLocation) {
|
||||
locationInput.value = data.location.fullLocation;
|
||||
}
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast({
|
||||
title: "Erreur de géolocalisation",
|
||||
description: error.message || "Impossible de déterminer votre localisation",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Handle geolocation
|
||||
const handleGeolocation = () => {
|
||||
if (!navigator.geolocation) {
|
||||
toast({
|
||||
title: "Géolocalisation non supportée",
|
||||
description: "Votre navigateur ne supporte pas la géolocalisation",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
const { latitude, longitude } = position.coords;
|
||||
geoLocationMutation.mutate({ latitude, longitude });
|
||||
},
|
||||
(error) => {
|
||||
let message = "Erreur de géolocalisation";
|
||||
switch (error.code) {
|
||||
case error.PERMISSION_DENIED:
|
||||
message = "Autorisation de géolocalisation refusée";
|
||||
break;
|
||||
case error.POSITION_UNAVAILABLE:
|
||||
message = "Position non disponible";
|
||||
break;
|
||||
case error.TIMEOUT:
|
||||
message = "Délai d'attente dépassé";
|
||||
break;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Erreur de géolocalisation",
|
||||
description: message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 300000, // 5 minutes
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Test API connection
|
||||
const testConnection = async (apiKey: string, location: string) => {
|
||||
setIsTesting(true);
|
||||
@@ -174,15 +260,33 @@ export default function WeatherSettings() {
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">Localisation</Label>
|
||||
<Input
|
||||
id="location"
|
||||
name="location"
|
||||
placeholder="Nancy, France"
|
||||
defaultValue={settings?.location || "Nancy, France"}
|
||||
required
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="location"
|
||||
name="location"
|
||||
placeholder="Nancy, France"
|
||||
defaultValue={settings?.location || "Nancy, France"}
|
||||
required
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleGeolocation}
|
||||
disabled={geoLocationMutation.isPending}
|
||||
className="px-3"
|
||||
title="Détecter ma localisation automatiquement"
|
||||
>
|
||||
{geoLocationMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<MapPin className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Ville ou région pour laquelle afficher la météo
|
||||
Ville ou région pour laquelle afficher la météo. Cliquez sur 📍 pour détecter automatiquement votre localisation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user