From 9f98dde87e45f89dc82965e252341f61b6a13879 Mon Sep 17 00:00:00 2001
From: root <root@JakubAsus.localdomain>
Date: Tue, 15 Jul 2025 10:52:04 +0200
Subject: [PATCH] modified index.html

---
 templates/index.html | 84 ++++++++++++++++++++++++--------------------
 1 file changed, 46 insertions(+), 38 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 368dde6..2be6883 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,10 +2,12 @@
 <html lang="pl">
 <head>
   <meta charset="UTF-8" />
-  <title>Pogoda Web</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <meta name="description" content="Interaktywna mapa pogody – kliknij lub wyszukaj miasto, by sprawdzić prognozę.">
+  <title>Pogoda Web</title>
+  <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" loading="lazy" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js" loading="lazy"></script>
   <style>
     * {
       box-sizing: border-box;
@@ -92,26 +94,43 @@
   </header>
   <main>
     <div id="controls">
-      <input type="text" id="cityInput" placeholder="Wpisz miasto" />
+      <input type="text" id="cityInput" placeholder="Wpisz miasto" autocomplete="off" />
       <button onclick="searchCity()">Szukaj</button>
     </div>
-    <div id="map"></div>
+    <div id="map" title="Mapa pogodowa" aria-label="Mapa pogodowa z możliwością kliknięcia"></div>
     <div id="result">Kliknij na mapie lub wyszukaj miasto, aby zobaczyć pogodę.</div>
     <canvas id="dailyChart"></canvas>
     <canvas id="hourlyChart"></canvas>
   </main>
 
-  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js" loading="lazy"></script>
   <script>
     const map = L.map('map').setView([52.237, 21.017], 6);
     let marker = null;
-    let currentPlaceName = '';
+    let currentPlaceName = null;
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map);
 
+    async function fetchWithTimeout(resource, options = {}) {
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 8000);
+      options.signal = controller.signal;
+
+      try {
+        const response = await fetch(resource, options);
+        clearTimeout(timeout);
+        return response;
+      } catch (error) {
+        clearTimeout(timeout);
+        throw error;
+      }
+    }
+
     async function fetchPlaceName(lat, lon) {
       const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`;
-      const response = await fetch(url, { headers: { 'User-Agent': 'PogodaApp/1.0' } });
+      const response = await fetchWithTimeout(url, {
+        headers: { 'User-Agent': 'PogodaApp/1.0' }
+      });
       if (!response.ok) throw new Error('Błąd podczas pobierania nazwy miejsca.');
       const data = await response.json();
       return data.display_name || 'Nieznana lokalizacja';
@@ -126,6 +145,7 @@
     map.on('click', async (e) => {
       const { lat, lng } = e.latlng;
       setMarker(lat, lng, "Ładowanie nazwy...");
+      map.setView([lat, lng], 10);
       updateResult("Ładowanie nazwy lokalizacji...");
       try {
         const placeName = await fetchPlaceName(lat, lng);
@@ -144,19 +164,15 @@
 
     async function searchCity() {
       const city = document.getElementById('cityInput').value.trim();
-      if (!city) {
-        updateResult("Proszę wpisać nazwę miasta.");
-        return;
-      }
+      if (!city) return updateResult("Proszę wpisać nazwę miasta.");
+
       updateResult("Wyszukiwanie miasta...");
       try {
-        const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(city)}`);
+        const res = await fetchWithTimeout(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(city)}`);
         if (!res.ok) throw new Error('Błąd podczas wyszukiwania miasta.');
         const data = await res.json();
-        if (data.length === 0) {
-          updateResult("Nie znaleziono miasta.");
-          return;
-        }
+        if (!data.length) return updateResult("Nie znaleziono miasta.");
+
         const { lat, lon, display_name } = data[0];
         currentPlaceName = display_name;
         map.setView([lat, lon], 10);
@@ -173,39 +189,37 @@
 
     async function fetchWeather(lat, lon) {
       try {
-        const res = await fetch('/get_weather', {
+        const res = await fetchWithTimeout('/get_weather', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ lat, lon })
         });
+
         if (!res.ok) throw new Error(`Błąd serwera: ${res.status}`);
+
         const data = await res.json();
+        if (data.error) return updateResult("Błąd serwera: " + data.error);
 
-        if (data.error) {
-          updateResult("Błąd serwera: " + data.error);
-          return;
-        }
+        const current = data.current ?? {};
+        const daily = data.daily?.forecast ?? {};
+        const hourly = data.hourly?.hourly_forecast ?? {};
 
-        const current = data.current || {};
-        const daily = data.daily?.forecast || {};
-        const hourly = data.hourly?.hourly_forecast || {};
-
-        let resultText = `Lokalizacja: ${currentPlaceName}
+        let resultText = `Lokalizacja: ${currentPlaceName ?? 'Nieznana lokalizacja'}
 Temperatura: ${current.temperature ?? 'brak danych'} °C
 Wiatr: ${current.windspeed ?? 'brak danych'} km/h
 Czas pomiaru: ${current.time ? new Date(current.time).toLocaleString() : 'brak danych'}`;
 
-        if (daily.time?.length) {
+        if (Array.isArray(daily.time) && daily.time.length > 0) {
           resultText += "\n\nPrognoza 7-dniowa:\n";
           for (let i = 0; i < daily.time.length; i++) {
-            resultText += `${daily.time[i]}: ${daily.temperature_2m_min[i]}–${daily.temperature_2m_max[i]} °C, Opady: ${daily.precipitation_sum[i]} mm\n`;
+            resultText += `${daily.time[i]}: ${daily.temperature_2m_min?.[i]}–${daily.temperature_2m_max?.[i]} °C, Opady: ${daily.precipitation_sum?.[i]} mm\n`;
           }
         }
 
-        if (hourly.time?.length) {
+        if (Array.isArray(hourly.time) && hourly.time.length > 0) {
           resultText += "\n\nNajbliższe godziny:\n";
           for (let i = 0; i < Math.min(24, hourly.time.length); i++) {
-            resultText += `${hourly.time[i]}: ${hourly.temperature_2m[i]} °C, Wiatr: ${hourly.windspeed_10m[i]} km/h, Opady: ${hourly.precipitation[i]} mm\n`;
+            resultText += `${hourly.time[i]}: ${hourly.temperature_2m?.[i]} °C, Wiatr: ${hourly.windspeed_10m?.[i]} km/h, Opady: ${hourly.precipitation?.[i]} mm\n`;
           }
         }
 
@@ -248,19 +262,13 @@ Czas pomiaru: ${current.time ? new Date(current.time).toLocaleString() : 'brak d
         },
         options: {
           responsive: true,
-          interaction: {
-            mode: 'index',
-            intersect: false,
-          },
+          interaction: { mode: 'index', intersect: false },
           stacked: false,
           scales: {
             y: {
-              type: 'linear',
-              position: 'left',
               title: { display: true, text: 'Temperatura (°C)' }
             },
             y1: {
-              type: 'linear',
               position: 'right',
               title: { display: true, text: 'Opady (mm)' },
               grid: { drawOnChartArea: false }
