diff --git a/css/style.css b/css/style.css index 450dfd3..d906f02 100644 --- a/css/style.css +++ b/css/style.css @@ -1,42 +1,81 @@ + +/* Podstawowe style dla zakładek */ +.tab { + display: none; +} + +.tab.active { + display: block; +} + +/* Style dla przycisków kategorii */ +.category-buttons { + margin: 10px 0; + text-align: center; +} + +.category-buttons button { + margin: 5px; + padding: 10px 15px; + font-size: 16px; + cursor: pointer; + background-color: #f2f2f2; + border: 1px solid #ccc; + border-radius: 4px; +} + +.category-buttons button.active { + background-color: #4CAF50; + color: white; + border: 1px solid #4CAF50; +} + +/* Stylizacja tabeli */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: center; +} + +th { + background-color: #f2f2f2; +} + +tr:nth-child(even) { + background-color: #f9f9f9; +} + +/* Stylizacja kontenera klasy */ +.select-class { + margin-top: 20px; + text-align: center; +} + +.select-class select { + padding: 5px; + font-size: 16px; +} + +/* Stylizacja nagłówków */ +h1, h2, h3 { + text-align: center; +} + +/* Dodatkowe style dla układu */ body { font-family: Arial, sans-serif; margin: 20px; } -table { - width: 100%; - border-collapse: collapse; -} -table, th, td { - border: 1px solid black; -} -th, td { - padding: 10px; + +footer { text-align: center; + margin-top: 40px; + font-size: 14px; + color: #555; } -th { - background-color: #f2f2f2; -} -input[type="number"], input[type="checkbox"] { - transform: scale(1.2); -} -button { - padding: 10px; - margin: 10px 5px; - font-size: 16px; -} -#stats { - margin-top: 20px; -} -.tab { - display: none; -} -.active { - display: block; -} - -select { - margin-bottom: 10px; - padding: 5px; - background-color: #f2f2f2; - -} \ No newline at end of file diff --git a/index.html b/index.html index e4f0bdc..d6f1fe3 100644 --- a/index.html +++ b/index.html @@ -5,15 +5,6 @@ Ocena Zachowania - @@ -48,7 +39,67 @@ Minimum 85% frekwencja - + + Etap szkolny + + + + Etap rejonowy + + + + Etap wojewódzki + + + + Etap ogólnopolski + + + + Udział w konkursach + + + + Wyróżnienie w konkursie + + + + Reprezentacja indywidualna + + + + Reprezentacja zespołowa + + + + Udział w zawodach + + + + Organizacja imprez + + + + Funkcje w klasie + + + + Uroczystości okolicznościowe + + + + Udział w poczcie sztandarowej + + + + Pomoc nauczycielowi + + + + Wolontariat + + + @@ -60,167 +111,53 @@ -
- - - - - -
-
+ +

Wybierz klasę:

- - -
-

Frekwencja

- - - - - - - - - - - - - - - -
Frekwencja 95-100%Brak godzin nieusprawiedliwionychMinimum 85% frekwencja
.........
-
- - -
-

Olimpiady

- - - - - - - - - - - - - - - - - -
Etap szkolnyEtap rejonowyEtap wojewódzkiEtap ogólnopolski
............
-
- - -
-

Konkursy Szkolne

- - - - - - - - - - - - - -
Udział w konkursachWyróżnienie w konkursie
......
-
- - -
-

Reprezentacja Szkoły

- - - - - - - - - - - - - - - -
Reprezentacja indywidualnaReprezentacja zespołowaUdział w zawodach
.........
-
- - -
-

Aktywność

- - - - - - - - - - - - - - - - - - - - - -
Organizacja imprezFunkcje w klasieUroczystości okolicznościoweUdział w poczcie sztandarowymPomoc nauczycielowiWolontariat
..................
+
+ + + + +
+
+ + + + + + + + + + + +

Statystyka dla wszystkich dni

-
+
- + + diff --git a/js/script.js b/js/script.js index 67fb87c..eee3c2e 100644 --- a/js/script.js +++ b/js/script.js @@ -1,11 +1,39 @@ -//Funkcja do sprawdzania ktora klasa jest wybrana w SELECT +// Definicja kategorii i ich kryteriów +const categories = { + frekwencja: [ + { name: "Frekwencja 95-100%", id: "frekwencja" }, + { name: "Brak godzin nieusprawiedliwionych", id: "brak_godzin" }, + { name: "Minimum 85% frekwencja", id: "min_85" } + ], + olimpiady: [ + { name: "Etap szkolny", id: "etap_szkolny" }, + { name: "Etap rejonowy", id: "etap_rejonowy" }, + { name: "Etap wojewódzki", id: "etap_wojewodzki" }, + { name: "Etap ogólnopolski", id: "etap_ogolnopolski" } + ], + konkursy: [ + { name: "Udział w konkursach", id: "udzial_konkurs" }, + { name: "Wyróżnienie w konkursie", id: "wyroznienie_konkurs" } + ], + reprezentacja: [ + { name: "Reprezentacja indywidualna", id: "reprezentacja_indywidualna" }, + { name: "Reprezentacja zespołowa", id: "reprezentacja_zespolowa" }, + { name: "Udział w zawodach", id: "udzial_zawody" } + ], + aktywnosc: [ + { name: "Organizacja imprez", id: "organizacja_imprez" }, + { name: "Funkcje w klasie", id: "funkcja_klasa" }, + { name: "Uroczystości okolicznościowe", id: "uroczystosci" }, + { name: "Udział w poczcie sztandarowej", id: "poczta_sztandar" }, + { name: "Pomoc nauczycielowi", id: "pomoc_nauczyciel" }, + { name: "Wolontariat", id: "wolontariat" } + ] +}; -function selected_class() { +// Zmienna przechowująca aktualną kategorię +let currentCategory = 'frekwencja'; -} - - -// Funkcja do wczytania pliku JSON +// Funkcja do wczytywania pliku JSON async function fetchJSONFile(filePath) { try { const response = await fetch(filePath); @@ -26,62 +54,44 @@ async function loadClasses() { if (classes) { console.log('Classes loaded:', classes); - var section_HTML = "" + let section_HTML = ""; // Iterowanie po wszystkich klasach i wczytywanie plików z danymi uczniów for (const classInfo of classes) { - const studentsFilePath = '/data/'+ classInfo.file_path; - const studentsData = await fetchJSONFile(studentsFilePath); + const studentsFilePath = '/data/' + classInfo.file_path; + const studentsDataFromFile = await fetchJSONFile(studentsFilePath); // Wczytywanie klas do elementu select w html + const selectClass = document.getElementById("select-class-select"); - const section_by_id = document.getElementById("select-class") - if (!section_HTML.includes(classInfo.class)) { - const section_option = "" - section_HTML += section_option; - console.log("DODANO KLASE ", classInfo.class, " DO SELECT") - section_by_id.innerHTML = section_HTML + const option = document.createElement('option'); + option.value = classInfo.class; + option.textContent = `Klasa: ${classInfo.class}`; + selectClass.appendChild(option); + console.log("DODANO KLASE ", classInfo.class, " DO SELECT"); + section_HTML += classInfo.class; } - if (studentsData) { - console.log(`Students loaded for class ${classInfo.class}:`, studentsData); - // Tutaj możesz przechowywać dane lub je przetwarzać według potrzeb - processClassData(classInfo, studentsData); - - - + if (studentsDataFromFile) { + console.log(`Students loaded for class ${classInfo.class}:`, studentsDataFromFile); + // Możesz tutaj przechowywać dane uczniów dla poszczególnych klas + // Na przykład, dodając je do odpowiedniego obiektu lub tablicy } } } } -async function loadCriteria () { +// Funkcja do wczytania pliku criteria.json +async function loadCriteria() { const criteriaFilePath = '/data/criteria.json'; const criteria = await fetchJSONFile(criteriaFilePath); - console.log ("break") + console.log("Criteria loaded:", criteria); + // Implementacja dalszego przetwarzania kryteriów, jeśli jest potrzebna } -const classData = [] - -// Funkcja do przetwarzania danych o klasach i uczniach -function processClassData(classInfo, studentsData) { - console.log(`Class: ${classInfo.class}, Group: ${classInfo.group}, Students Count: ${classInfo.student_count}`); - console.log('Student Data:', studentsData); - classData.push(studentsData) - // Możesz tutaj np. wyświetlić dane w interfejsie lub przeprowadzić dodatkowe operacje -} - -// Uruchomienie wczytywania klas -loadClasses(); -loadCriteria(); -// -// -// - -let currentDay = 0; -const baseDate = new Date(); +// Dane uczniów (przykładowe, powinny być ładowane z plików JSON) const studentsData = [ { name: "Jan Kowalski", behavior: {} }, { name: "Anna Nowak", behavior: {} }, @@ -89,10 +99,20 @@ const studentsData = [ { name: "Katarzyna Zielińska", behavior: {} } ]; +let currentDay = 0; +const baseDate = new Date(); + +// Funkcja do przełączania głównych zakładek function showTab(tabName) { + // Ukryj wszystkie główne taby const tabs = document.querySelectorAll('.tab'); tabs.forEach(tab => tab.classList.remove('active')); - document.getElementById(tabName).classList.add('active'); + + // Pokaż wybrany tab + const selectedTab = document.getElementById(tabName); + if (selectedTab) { + selectedTab.classList.add('active'); + } if (tabName === 'criteria') { loadDayData(); @@ -101,57 +121,34 @@ function showTab(tabName) { } } -async function changeClass() { - await loadClasses() - let classesNames = [] -for (const classInfo of classData) { - console.log(classInfo) - classesNames.push(classInfo.header.class + "-" + classInfo.header.group) -} -console.log("lol") -console.log(classesNames) - +// Funkcja do przełączania kategorii w tabeli uczniów +function showInnerTab(category) { + currentCategory = category; + // Generowanie tabeli na podstawie wybranej kategorii + generateTable(category); + + // Podkreślenie aktywnego przycisku + const buttons = document.querySelectorAll('.category-buttons button'); + buttons.forEach(button => button.classList.remove('active')); + const activeButton = document.querySelector(`.category-buttons button[data-category="${category}"]`); + if (activeButton) { + activeButton.classList.add('active'); + } } +// Funkcja, aby ustawić domyślną kategorię i zakładkę +document.addEventListener("DOMContentLoaded", function() { + showInnerTab('frekwencja'); // Pokaż domyślnie zakładkę Frekwencja + // Ustawienie daty na dziś + document.getElementById('current-date').innerText = baseDate.toLocaleDateString(); -function generateTable() { - changeClass() - const table = document.getElementById('student-table'); - table.innerHTML = ''; - - //xd - - studentsData.forEach(student => { - const row = document.createElement('tr'); - row.innerHTML = ` - - - - ${student.name} - - - - - - - - - - - - - - - - - - - `; - table.appendChild(row); - }); -} + // Uruchomienie wczytywania klas i kryteriów + loadClasses(); + loadCriteria(); +}); +// Funkcja do zmiany dnia function changeDay(direction) { saveDayData(); currentDay += direction; @@ -161,81 +158,49 @@ function changeDay(direction) { loadDayData(); } +// Funkcja do ładowania danych dnia function loadDayData() { - studentsData.forEach(student => { - const studentId = student.name.replace(' ', '-'); - const behavior = student.behavior[`day${currentDay}`] || {}; - - document.getElementById(`frekwencja-${studentId}`).checked = behavior.frekwencja || false; - document.getElementById(`brak-godzin-${studentId}`).checked = behavior.brak_godzin || false; - document.getElementById(`min-85-${studentId}`).checked = behavior.min_85 || false; - document.getElementById(`etap-szkolny-${studentId}`).checked = behavior.etap_szkolny || false; - document.getElementById(`etap-rejonowy-${studentId}`).checked = behavior.etap_rejonowy || false; - document.getElementById(`etap-wojewodzki-${studentId}`).checked = behavior.etap_wojewodzki || false; - document.getElementById(`etap-ogolnopolski-${studentId}`).checked = behavior.etap_ogolnopolski || false; - document.getElementById(`udzial-konkurs-${studentId}`).checked = behavior.udzial_konkurs || false; - document.getElementById(`wyroznienie-konkurs-${studentId}`).checked = behavior.wyroznienie_konkurs || false; - document.getElementById(`reprezentacja-indywidualna-${studentId}`).checked = behavior.reprezentacja_indywidualna || false; - document.getElementById(`reprezentacja-zespolowa-${studentId}`).checked = behavior.reprezentacja_zespolowa || false; - document.getElementById(`udzial-zawody-${studentId}`).checked = behavior.udzial_zawody || false; - document.getElementById(`organizacja-imprez-${studentId}`).checked = behavior.organizacja_imprez || false; - document.getElementById(`funkcja-klasa-${studentId}`).checked = behavior.funkcja_klasa || false; - document.getElementById(`uroczystosci-${studentId}`).checked = behavior.uroczystosci || false; - document.getElementById(`poczta-sztandar-${studentId}`).checked = behavior.poczta_sztandar || false; - document.getElementById(`pomoc-nauczyciel-${studentId}`).checked = behavior.pomoc_nauczyciel || false; - document.getElementById(`wolontariat-${studentId}`).checked = behavior.wolontariat || false; - }); - + // Wczytaj dane dla aktualnego dnia, jeśli istnieją + // Możesz tu zaimplementować dodatkową logikę, jeśli potrzebujesz calculateStats(); } +// Funkcja do zapisywania danych dnia function saveDayData() { studentsData.forEach(student => { - const studentId = student.name.replace(' ', '-'); - const behavior = { - frekwencja: document.getElementById(`frekwencja-${studentId}`).checked, - brak_godzin: document.getElementById(`brak-godzin-${studentId}`).checked, - min_85: document.getElementById(`min-85-${studentId}`).checked, - etap_szkolny: document.getElementById(`etap-szkolny-${studentId}`).checked, - etap_rejonowy: document.getElementById(`etap-rejonowy-${studentId}`).checked, - etap_wojewodzki: document.getElementById(`etap-wojewodzki-${studentId}`).checked, - etap_ogolnopolski: document.getElementById(`etap-ogolnopolski-${studentId}`).checked, - udzial_konkurs: document.getElementById(`udzial-konkurs-${studentId}`).checked, - wyroznienie_konkurs: document.getElementById(`wyroznienie-konkurs-${studentId}`).checked, - reprezentacja_indywidualna: document.getElementById(`reprezentacja-indywidualna-${studentId}`).checked, - reprezentacja_zespolowa: document.getElementById(`reprezentacja-zespolowa-${studentId}`).checked, - udzial_zawody: document.getElementById(`udzial-zawody-${studentId}`).checked, - organizacja_imprez: document.getElementById(`organizacja-imprez-${studentId}`).checked, - funkcja_klasa: document.getElementById(`funkcja-klasa-${studentId}`).checked, - uroczystosci: document.getElementById(`uroczystosci-${studentId}`).checked, - poczta_sztandar: document.getElementById(`poczta-sztandar-${studentId}`).checked, - pomoc_nauciciel: document.getElementById(`pomoc-nauczyciel-${studentId}`).checked, - wolontariat: document.getElementById(`wolontariat-${studentId}`).checked - }; + const studentId = student.name.replace(/ /g, '-'); + const behavior = student.behavior[`day${currentDay}`] || {}; + + const categoryColumns = categories[currentCategory]; + + categoryColumns.forEach(column => { + behavior[column.id] = document.getElementById(`${column.id}-${studentId}`).checked; + }); student.behavior[`day${currentDay}`] = behavior; }); } +// Funkcja do obliczania statystyk function calculateStats() { - const frekwencjaPoints = parseInt(document.getElementById('frekwencja-punkty').value); - const brakGodzinPoints = parseInt(document.getElementById('brak-godzin-punkty').value); - const min85Points = parseInt(document.getElementById('min-85-punkty').value); - const etapSzkolnyPoints = parseInt(document.getElementById('etap-szkolny-punkty').value); - const etapRejonowyPoints = parseInt(document.getElementById('etap-rejonowy-punkty').value); - const etapWojewodzkiPoints = parseInt(document.getElementById('etap-wojewodzki-punkty').value); - const etapOgolnopolskiPoints = parseInt(document.getElementById('etap-ogolnopolski-punkty').value); - const udzialKonkursPoints = 5; // stała wartość - const wyroznienieKonkursPoints = 10; // stała wartość - const reprezentacjaIndPoints = 5; // stała wartość - const reprezentacjaZesPoints = 10; // stała wartość - const udzialZawodyPoints = 15; // stała wartość - const organizacjaImprezPoints = 10; // stała wartość - const funkcjaKlasyPoints = 10; // stała wartość - const uroczystosciPoints = 10; // stała wartość - const pocztaSztandarPoints = 20; // stała wartość - const pomocNauczycielaPoints = 10; // stała wartość - const wolontariatPoints = 10; // stała wartość + const frekwencjaPoints = parseInt(document.getElementById('frekwencja-punkty').value) || 0; + const brakGodzinPoints = parseInt(document.getElementById('brak-godzin-punkty').value) || 0; + const min85Points = parseInt(document.getElementById('min-85-punkty').value) || 0; + const etapSzkolnyPoints = parseInt(document.getElementById('etap-szkolny-punkty')?.value) || 5; + const etapRejonowyPoints = parseInt(document.getElementById('etap-rejonowy-punkty')?.value) || 10; + const etapWojewodzkiPoints = parseInt(document.getElementById('etap-wojewodzki-punkty')?.value) || 15; + const etapOgolnopolskiPoints = parseInt(document.getElementById('etap-ogolnopolski-punkty')?.value) || 20; + const udzialKonkursPoints = parseInt(document.getElementById('udzial-konkurs-punkty')?.value) || 5; + const wyroznienieKonkursPoints = parseInt(document.getElementById('wyroznienie-konkurs-punkty')?.value) || 10; + const reprezentacjaIndPoints = parseInt(document.getElementById('reprezentacja-indywidualna-punkty')?.value) || 5; + const reprezentacjaZesPoints = parseInt(document.getElementById('reprezentacja-zespolowa-punkty')?.value) || 10; + const udzialZawodyPoints = parseInt(document.getElementById('udzial-zawody-punkty')?.value) || 15; + const organizacjaImprezPoints = parseInt(document.getElementById('organizacja-imprez-punkty')?.value) || 10; + const funkcjaKlasyPoints = parseInt(document.getElementById('funkcja-klasa-punkty')?.value) || 10; + const uroczystosciPoints = parseInt(document.getElementById('uroczystosci-punkty')?.value) || 10; + const pocztaSztandarPoints = parseInt(document.getElementById('poczta-sztandar-punkty')?.value) || 20; + const pomocNauczycielaPoints = parseInt(document.getElementById('pomoc-nauczyciel-punkty')?.value) || 10; + const wolontariatPoints = parseInt(document.getElementById('wolontariat-punkty')?.value) || 10; let stats = ''; @@ -262,7 +227,7 @@ function calculateStats() { if (behavior.funkcja_klasa) dayPoints += funkcjaKlasyPoints; if (behavior.uroczystosci) dayPoints += uroczystosciPoints; if (behavior.poczta_sztandar) dayPoints += pocztaSztandarPoints; - if (behavior.pomoc_nauciciel) dayPoints += pomocNauczycielaPoints; + if (behavior.pomoc_nauczyciel) dayPoints += pomocNauczycielaPoints; if (behavior.wolontariat) dayPoints += wolontariatPoints; totalPoints += dayPoints; @@ -271,9 +236,10 @@ function calculateStats() { stats += `${student.name}: ${totalPoints} punktów (${getGrade(totalPoints)})\n`; }); - document.getElementById('stats').innerText = stats; + document.getElementById('stats-output').innerText = stats; } +// Funkcja do przypisywania ocen na podstawie punktów function getGrade(points) { if (points >= 250) return "Wzorowe"; if (points >= 180) return "Bardzo dobre"; @@ -283,8 +249,57 @@ function getGrade(points) { return "Naganne"; } -// Ustawienie daty na dziś -document.getElementById('current-date').innerText = baseDate.toLocaleDateString(); +// Funkcja do generowania tabeli uczniów na podstawie wybranej kategorii +function generateTable(category) { + const table = document.getElementById('student-table'); + const thead = table.querySelector('thead tr'); + const tbody = table.querySelector('tbody'); -// Generowanie tabeli przy starcie -generateTable(); \ No newline at end of file + // Clear existing headers and body + thead.innerHTML = ''; + tbody.innerHTML = ''; + + // Add 'Imię i Nazwisko' header + const thName = document.createElement('th'); + thName.textContent = "Imię i Nazwisko"; + thead.appendChild(thName); + + // Get columns for the category + const categoryColumns = categories[category]; + + // Add headers for category + categoryColumns.forEach(column => { + const th = document.createElement('th'); + th.textContent = column.name; + thead.appendChild(th); + }); + + // Generate rows + studentsData.forEach(student => { + const row = document.createElement('tr'); + + // Name cell + const tdName = document.createElement('td'); + tdName.textContent = student.name; + row.appendChild(tdName); + + // Checkbox cells + categoryColumns.forEach(column => { + const td = document.createElement('td'); + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.id = `${column.id}-${student.name.replace(/ /g, '-')}`; + checkbox.onchange = calculateStats; + + // Ustawienie stanu checkboxa na podstawie zapisanych danych + if (student.behavior[`day${currentDay}`] && student.behavior[`day${currentDay}`][column.id]) { + checkbox.checked = student.behavior[`day${currentDay}`][column.id]; + } + + td.appendChild(checkbox); + row.appendChild(td); + }); + + tbody.appendChild(row); + }); +}