- {tempDifference > 0 ? (
-
- ↗
- +{Math.round(tempDifference)}°
-
- ) : tempDifference < 0 ? (
-
- ↘
- {Math.round(tempDifference)}°
-
- ) : (
-
- =
- 0°
-
- )}
+
+
+
+ Différence
+
+
+ {tempDifference > 0 ? (
+
+ ↗
+ +{Math.round(tempDifference)}°
+
+ ) : tempDifference < 0 ? (
+
+ ↘
+ {Math.round(tempDifference)}°
+
+ ) : (
+
+ =
+ 0°
+
+ )}
+
)}
From cacc3984d5631ea6a37fd40618ad3ebdb59d4f87 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 15 Aug 2025 11:50:24 +0000
Subject: [PATCH 2/2] 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
---
client/src/components/WeatherWidget.tsx | 108 +--------------------
client/src/pages/WeatherSettings.tsx | 122 ++++++++++++++++++++++--
2 files changed, 118 insertions(+), 112 deletions(-)
diff --git a/client/src/components/WeatherWidget.tsx b/client/src/components/WeatherWidget.tsx
index d4a01dc..55e07cf 100644
--- a/client/src/components/WeatherWidget.tsx
+++ b/client/src/components/WeatherWidget.tsx
@@ -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() {
-
-
- {location.split(',')[0]}
-
-
- {geoLocationMutation.isPending ? (
-
-
+
+ {location.split(',')[0]}
+
{translateToFrench(weather.currentYear?.condition || 'Inconnu')}
diff --git a/client/src/pages/WeatherSettings.tsx b/client/src/pages/WeatherSettings.tsx
index 290c0aa..ad36d16 100644
--- a/client/src/pages/WeatherSettings.tsx
+++ b/client/src/pages/WeatherSettings.tsx
@@ -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() {