update

backend/dane.json

@@ -6,7 +6,11 @@
         "nazwisko": "Kowalski",
         "Zadanie domowe": 10,
         "Aktywność": 3,
-        "Sprawdzian": 4
+        "Sprawdzian": 4,
+        "good_frekwencja": 4,
+        "aktywnosc": 2,
+        "bad_frekwencja": 0,
+        "sprawdzian": 1
       }
     },
     {
@@ -26,7 +30,9 @@
         "nazwisko": "Wiśniewski",
         "Zadanie domowe": 10,
         "Aktywność": 0,
-        "Sprawdzian": 0
+        "Sprawdzian": 0,
+        "aktywnosc": 5,
+        "bad_frekwencja": 3
       }
     },
     {
@@ -35,7 +41,9 @@
         "nazwisko": "Kowalczyk",
         "Zadanie domowe": 3,
         "Aktywność": 2,
-        "Sprawdzian": 1
+        "Sprawdzian": 1,
+        "sprawdzian": 5,
+        "bad_frekwencja": 27
       }
     }
   ]

backend/kryteria.json

@@ -1,5 +1,6 @@
 [
-    "Zadanie domowe",
+    { "nazwa": "good_frekwencja", "punkty": 10 },
-    "Aktywność",
+    { "nazwa": "bad_frekwencja", "punkty": -10 },
-    "Sprawdzian"
+    { "nazwa": "aktywnosc", "punkty": 5 },
+    { "nazwa": "sprawdzian", "punkty": -200 }
 ]

index.html

@@ -10,13 +10,22 @@
     <div class="container">
         <h1>Zarządzanie Uczniami</h1>
 
+        <!-- Zakładki -->
+        <div class="tabs">
+            <button id="students-tab">Uczniowie</button>
+            <button id="stats-tab">Statystyka</button>
+        </div>
+
         <!-- Wybór klasy -->
         <label for="class-select">Wybierz klasę:</label>
-        <select id="class-select"></select>
+        <select id="class-select" style="margin-bottom: 50px;"></select>
 
         <!-- Lista uczniów -->
         <div id="students-list"></div>
 
+        <!-- Statystyki -->
+        <div id="stats-content" style="display: none;"></div>
+
         <!-- Przycisk do zapisywania danych -->
         <button id="save-button">Zapisz dane</button>
     </div>

script.js

@@ -6,6 +6,8 @@ document.addEventListener("DOMContentLoaded", () => {
     const classSelect = document.getElementById("class-select");
     const studentsList = document.getElementById("students-list");
     const saveButton = document.getElementById("save-button");
+    const statsTab = document.getElementById("stats-tab");
+    const statsContent = document.getElementById("stats-content");
 
     // Ładowanie danych z serwera
     Promise.all([
@@ -19,6 +21,7 @@ document.addEventListener("DOMContentLoaded", () => {
             dane = daneData;
 
             populateClassSelect();
+            renderStats(); // Renderuj statystyki przy ładowaniu
         })
         .catch(error => console.error("Błąd ładowania danych:", error));
 
@@ -42,6 +45,7 @@ document.addEventListener("DOMContentLoaded", () => {
     classSelect.addEventListener("change", () => {
         const selectedClass = classSelect.value;
         renderStudents(selectedClass);
+        renderStats(); // Aktualizuj statystyki po zmianie klasy
     });
 
     // Renderuj uczniów
@@ -65,7 +69,11 @@ document.addEventListener("DOMContentLoaded", () => {
                 criteriaItem.className = "criteria-item";
 
                 const label = document.createElement("span");
-                label.textContent = criteria;
+                label.textContent = criteria.nazwa;
+
+                const pointsInfo = document.createElement("span");
+                pointsInfo.className = "points-info";
+                pointsInfo.textContent = `(${criteria.punkty} pkt)`;
 
                 const input = document.createElement("input");
                 input.type = "number";
@@ -73,7 +81,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
                 // Wyszukaj dane ucznia w pliku `dane.json`
                 const savedStudent = dane[className]?.find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);
-                input.value = savedStudent?.uczen[criteria] || 0;
+                input.value = savedStudent?.uczen[criteria.nazwa] || 0;
 
                 input.addEventListener("input", () => {
                     if (!savedStudent) {
@@ -87,10 +95,13 @@ document.addEventListener("DOMContentLoaded", () => {
                     }
 
                     const currentStudent = dane[className].find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);
-                    currentStudent.uczen[criteria] = parseInt(input.value) || 0;
+                    currentStudent.uczen[criteria.nazwa] = parseInt(input.value) || 0;
+
+                    renderStats(); // Aktualizuj statystyki po edycji danych
                 });
 
                 criteriaItem.appendChild(label);
+                criteriaItem.appendChild(pointsInfo);
                 criteriaItem.appendChild(input);
                 criteriaList.appendChild(criteriaItem);
             });
@@ -118,4 +129,57 @@ document.addEventListener("DOMContentLoaded", () => {
             })
             .catch(error => console.error("Błąd zapisywania danych:", error));
     });
+
+    // Renderuj statystyki
+    function renderStats() {
+        statsContent.innerHTML = "";
+
+        const selectedClass = classSelect.value;
+        const students = uczniowie[selectedClass];
+
+        if (!students) return;
+
+        students.forEach(student => {
+            const savedStudent = dane[selectedClass]?.find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);
+
+            let totalPoints = 0;
+            if (savedStudent) {
+                kryteria.forEach(criteria => {
+                    const count = savedStudent.uczen[criteria.nazwa] || 0;
+                    totalPoints += count * criteria.punkty;
+                });
+            }
+
+            const studentDiv = document.createElement("div");
+            studentDiv.className = "stat-item";
+
+            const name = document.createElement("strong");
+            name.textContent = `${student.imie} ${student.nazwisko}`;
+
+            const points = document.createElement("span");
+            points.className = "points";
+            points.textContent = `${totalPoints} pkt`;
+            if (totalPoints > 0) {
+                points.classList.add("positive");
+            } else if (totalPoints < 0) {
+                points.classList.add("negative");
+            }
+
+            studentDiv.appendChild(name);
+            studentDiv.appendChild(points);
+            statsContent.appendChild(studentDiv);
+        });
+    }
+
+    // Przełączanie między zakładkami
+    statsTab.addEventListener("click", () => {
+        studentsList.style.display = "none";
+        statsContent.style.display = "block";
+    });
+
+    const studentsTab = document.getElementById("students-tab");
+    studentsTab.addEventListener("click", () => {
+        studentsList.style.display = "block";
+        statsContent.style.display = "none";
+    });
 });

style.css

@@ -1,3 +1,4 @@
+/* Ogólne style */
 body {
     font-family: Arial, sans-serif;
     margin: 20px;
@@ -32,10 +33,43 @@ select {
     border-radius: 4px;
 }
 
-#students-list {
+button {
-    margin-top: 20px;
+    display: block;
+    margin: 20px auto;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
 }
 
+button:hover {
+    background-color: #0056b3;
+}
+
+/* Zakładki */
+.tabs {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.tabs button {
+    padding: 10px;
+    border: none;
+    background-color: #007bff;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    flex: 1;
+}
+
+.tabs button:hover {
+    background-color: #0056b3;
+}
+
+/* Zakładka Uczniowie */
 details {
     margin-bottom: 10px;
     padding: 10px;
@@ -60,6 +94,17 @@ summary {
     margin: 5px 0;
 }
 
+.criteria-item span {
+    margin-right: 10px;
+    font-weight: bold;
+}
+
+.criteria-item .points-info {
+    font-size: 12px;
+    color: #666;
+    margin-left: 10px;
+}
+
 .criteria-item input {
     width: 50px;
     margin-left: 10px;
@@ -68,17 +113,31 @@ summary {
     border-radius: 4px;
 }
 
-button {
+/* Zakładka Statystyka */
-    display: block;
+.stat-item {
-    margin: 20px auto;
+    margin-bottom: 15px;
-    padding: 10px 20px;
+    padding: 10px;
-    background-color: #007bff;
+    border: 1px solid #ddd;
-    color: #fff;
+    border-radius: 8px;
-    border: none;
+    background-color: #f9f9f9;
-    border-radius: 4px;
+    display: flex;
-    cursor: pointer;
+    justify-content: space-between;
+    align-items: center;
 }
 
-button:hover {
+.stat-item strong {
-    background-color: #0056b3;
+    font-size: 16px;
+}
+
+.stat-item .points {
+    font-weight: bold;
+    font-size: 18px;
+}
+
+.stat-item .points.positive {
+    color: green;
+}
+
+.stat-item .points.negative {
+    color: red;
 }