add spread data from db to table in main view

2025-09-10 11:35:22 +00:00 · 2025-09-10 11:35:22 +00:00 · e30d313d98
commit e30d313d98
parent 53d00bc5ae
2 changed files with 44 additions and 35 deletions
--- a/i1.html
+++ b/i1.html
@ -4,6 +4,8 @@
    <meta charset="UTF-8">
    <title>Kursy komputerowe</title>
    <link rel="stylesheet" href="css/layout.css">
+    <script src="js/script.js" defer> </script>
+
 </head>
 <body>
    <header>
@ -17,7 +19,7 @@
    </nav>
    <main>
        <h3>Kursy komputerowe - programowanie</h3>
-        <table>
+                <table id="tab">
            <tr>
                <th>Kurs</th>
                <th>Czas trwania</th>
--- a/js/script.js
+++ b/js/script.js
@ -1,37 +1,44 @@
 document.addEventListener('DOMContentLoaded', function() {
-    document.getElementById('oblicz').addEventListener('click', function() {
-        // Pobieranie wybranych kursów
-        const wybraneKursy = document.querySelectorAll('input[name="kurs"]:checked');
-        // Ceny kursów
-        const cenaReact = 1500;
-        const cenaJavaScript = 1200;
-        
-        // Obliczanie całkowitej kwoty
-        let calkowitaKwota = 0;
-        wybraneKursy.forEach(kurs => {
-            if (kurs.value === 'React.js') {
-                calkowitaKwota += cenaReact;
-            } else if (kurs.value === 'JavaScript') {
-                calkowitaKwota += cenaJavaScript;
-            }
-        });
-        
-        // Pobieranie liczby rat
-        const iloscRat = parseInt(document.getElementById('raty').value);
-        // Pobieranie miasta
-        const miasto = document.getElementById('miasto').value;
-        
-        // Sprawdzanie poprawności danych
-        if (wybraneKursy.length === 0 || isNaN(iloscRat) || iloscRat <= 0) {
-            document.getElementById('wynik').textContent = 'Proszę wybrać przynajmniej jeden kurs i podać poprawną liczbę rat.';
-            return;
+    console.log("ok");
+
+    const fetchData = () => {
+        return fetch('./php/get.php')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Błąd pobierania danych');
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log("Dane załadowane:", data);
+                renderTable(data); // Wywołaj funkcję renderującą tabelę
+            })
+            .catch(error => {
+                console.error("Błąd:", error);
+            });
+    };
+
+    // Funkcja do renderowania danych w tabeli
+    const renderTable = (data) => {
+        const table = document.getElementById('tab');
+
+        // Usuń wszystkie rzędy po nagłówku (czyli od drugiego)
+        while (table.rows.length > 1) {
+            table.deleteRow(1);
        }
-        
-        // Obliczanie miesięcznej raty
-        const rata = calkowitaKwota / iloscRat;
-        
-        // Wyświetlanie wyniku
-        document.getElementById('wynik').textContent = 
-            `Kurs odbędzie się w ${miasto}. Koszt całkowity: ${calkowitaKwota} zł. Płacisz ${iloscRat} rat po ${rata.toFixed(2)} zł`;
-    });
+
+        // Dodaj nowe wiersze dla każdego kursu
+        data.forEach(row => {
+            const tr = document.createElement('tr');
+            tr.innerHTML = `
+                <td>${row.kurs}</td>
+                <td>${row.czas_trwania}</td>
+                <td>${row.cena}</td>
+            `;
+            table.appendChild(tr);
+        });
+    };
+
+    // Uruchom pobieranie danych
+    fetchData();
 });