Add files via upload

2025-05-13 18:26:48 +02:00
commit ecf335606e
6 changed files with 346 additions and 0 deletions
--- a/MojaAplikacja/views/index.html
+++ b/MojaAplikacja/views/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8"> <!-- Ustawienie kodowania znaków na UTF-8 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsywność na urządzeniach mobilnych -->
+    <title>Aplikacja Pogodowa</title> <!-- Tytuł strony w przeglądarce -->
+    <link rel="stylesheet" href="/style.css"> <!-- Dołączenie zewnętrznego pliku CSS -->
+</head>
+<body>
+    <div class="container"> <!-- Główne opakowanie dla treści -->
+        <h1>Aplikacja Pogodowa</h1> <!-- Nagłówek strony -->
+
+        <!-- Formularz pogodowy wysyłany metodą POST na adres /pogoda -->
+        <form id="weather-form" method="POST" action="/pogoda">
+            <div class="form-group">
+                <label for="country">Wybierz kraj:</label>
+                <!-- Lista rozwijana z krajami -->
+                <select name="country" id="country" required>
+                    <option value="">Wybierz kraj...</option>
+                    <option value="Polska">Polska</option>
+                    <option value="Niemcy">Niemcy</option>
+                    <option value="Francja">Francja</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label for="city">Miasto:</label>
+                <!-- Lista rozwijana z miastami (uzupełniana dynamicznie przez JavaScript) -->
+                <select name="city" id="city" required>
+                    <option value="">Wybierz miasto...</option>
+                </select>
+            </div>
+
+            <button type="submit">Sprawdź pogodę</button> <!-- Przycisk wysyłający formularz -->
+        </form>
+
+        <!-- Sekcja, w której pojawi się wynik (odpowiedź z serwera) -->
+        <div id="weather-result" style="margin-top: 20px;"></div>
+    </div>
+
+    <!-- Skrypt JS do dynamicznej obsługi formularza -->
+    <script>
+        // Po zmianie wybranego kraju, uzupełniamy listę miast
+        document.getElementById("country").addEventListener("change", function() {
+            const country = this.value; // Wartość wybranego kraju
+            const citySelect = document.getElementById("city"); // Element select z miastami
+
+            let cities = []; // Lista miast do uzupełnienia
+
+            // W zależności od kraju, ustawiamy odpowiednie miasta
+            if (country === "Polska") {
+                cities = ["Warszawa", "Lublin", "Gdańsk"];
+            } else if (country === "Niemcy") {
+                cities = ["Berlin", "Monachium", "Hamburg"];
+            } else if (country === "Francja") {
+                cities = ["Paryż", "Marsylia", "Lyon"];
+            }
+
+            // Czyścimy poprzednie opcje i dodajemy nowe
+            citySelect.innerHTML = '<option value="">Wybierz miasto...</option>';
+
+            cities.forEach(function(city) {
+                const option = document.createElement("option");
+                option.value = city;
+                option.textContent = city;
+                citySelect.appendChild(option);
+            });
+        });
+
+        // Obsługa formularza – wysyłanie danych AJAXem (bez przeładowania strony)
+        document.getElementById("weather-form").addEventListener("submit", function(event) {
+            event.preventDefault(); // Zatrzymujemy domyślne wysyłanie formularza
+
+            const country = document.getElementById("country").value; // Wybrany kraj
+            const city = document.getElementById("city").value;       // Wybrane miasto
+
+            // Wysyłamy dane do serwera metodą POST
+            fetch("/pogoda", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                },
+                body: new URLSearchParams({ country, city }) // Przesyłane dane formularza
+            })
+            .then(response => response.text()) // Odbieramy odpowiedź jako tekst HTML
+            .then(data => {
+                // Wyświetlamy wynik w <div id="weather-result">
+                document.getElementById("weather-result").innerHTML = data;
+            })
+            .catch(error => {
+                // Obsługa błędu – np. brak odpowiedzi z serwera
+                document.getElementById("weather-result").innerHTML = "Błąd podczas pobierania pogody.";
+                console.error("Błąd:", error);
+            });
+        });
+    </script>
+</body>
+</html>