diff --git a/css/style.css b/css/style.css index 6d73449..218ae7f 100644 --- a/css/style.css +++ b/css/style.css @@ -6,6 +6,26 @@ .tab.active { display: block; } +header { + display: flex; + justify-content: space-between; + align-items: right; +} +.header-box { + display: flex; + justify-content: space-between; + align-items: center; + background-color: cornflowerblue; /* Kolor tła nagłówka */ + padding: 10px; /* Padding wewnętrzny dla lepszego wyglądu */ + color: white; /* Kolor tekstu */ +} +.up-button { + display: flex; +} + +.header-title { + margin-left: auto; /* Przesuwa tytuł na prawo */ +} /* Style dla przycisków kategorii */ .category-buttons { @@ -30,6 +50,40 @@ border: 1px solid #4CAF50; } +.up-button { + margin: 10px 0; + text-align: left; +} + +.up-button button { + margin: 5px; + padding: 10px 15px; + font-size: 16px; + cursor: pointer; + background-color: #f2f2f2; + border: 1px solid #ccc; + border-radius: 4px; + transition: background-color 0.3s, color 0.3s, border 0.3s; +} + +.up-button button.active { + background-color: #4CAF50; + color: white; + border: 1px solid #4CAF50; +} + +.container { + display: flex; + flex-direction: column; /* Elementy jeden pod drugim */ + align-items: flex-start; /* Ustawia elementy po lewej stronie */ + margin-left: 20px; /* Możesz dostosować margines według potrzeb */ +} + +.select-role, +.select-class { + margin: 10px 0; /* Dostosuj odstęp między elementami */ +} + /* Stylizacja tabeli */ table { width: 100%; diff --git a/index.html b/index.html index c96e590..6128812 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,31 @@ - -

Ocena Zachowania

- -
- - - +
+
+ + +
+

Ocena Zachowania

+
+
+ + +
+ +

Ustal punkty dla kryteriów

@@ -104,36 +120,62 @@
- -
-

Kryteria oceny zachowania -

-
- - -
+ +
+

Kryteria oceny zachowania -

+ + + + + + + + + + + + +
Imię i Nazwisko
+ +
+ + + + + +
+
-
-

Wybierz role:

- -
- -
-

Wybierz klasę:

- -
- -
- - - - - -
+ +
+

Statystyka dla wszystkich dni

+
+
+ +
+

Ustal punkty dla kryteriów

+ + + + + + + + + + + + + + + + + + + +
KryteriumPunkty
Frekwencja 95-100%
Brak godzin nieusprawiedliwionych
+
diff --git a/js/script.js b/js/script.js index 7daeaee..12a491b 100644 --- a/js/script.js +++ b/js/script.js @@ -37,6 +37,63 @@ let studentsData = []; let currentDay = 0; const baseDate = new Date(); +function generateTable(category) { + const table = document.getElementById('student-table'); + const thead = table.querySelector('thead tr'); + const tbody = table.querySelector('tbody'); + + // Wyczyść istniejące nagłówki i wiersze + thead.innerHTML = ''; + tbody.innerHTML = ''; + + // Dodaj nagłówek 'Imię i Nazwisko' + const thName = document.createElement('th'); + thName.textContent = "Imię i Nazwisko"; + thead.appendChild(thName); + + // Pobierz kolumny dla wybranej kategorii + const categoryColumns = categories[category]; + + // Dodaj nagłówki dla kryteriów w kategorii + categoryColumns.forEach(column => { + const th = document.createElement('th'); + th.textContent = column.name; + thead.appendChild(th); + }); + + // Generuj wiersze dla uczniów + studentsData.forEach(student => { + const row = document.createElement('tr'); + + // Komórka z imieniem i nazwiskiem + const tdName = document.createElement('td'); + tdName.textContent = `${student.first_name} ${student.last_name}`; + row.appendChild(tdName); + + // Upewnij się, że 'behavior' jest zdefiniowany + if (!student.behavior) { + student.behavior = {}; + } + + // Komórki z checkboxami dla kryteriów + categoryColumns.forEach(column => { + const td = document.createElement('td'); + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + const studentId = `${student.first_name}-${student.last_name}`.replace(/ /g, '-'); + checkbox.id = `${column.id}-${studentId}`; + checkbox.onchange = calculateStats; + + // Ustawienie stanu checkboxa na podstawie zapisanych danych + checkbox.checked = student.behavior[`day${currentDay}`]?.[column.id] || false; + + td.appendChild(checkbox); + row.appendChild(td); + }); + + tbody.appendChild(row); + }); +} // Funkcja do wczytywania pliku JSON async function fetchJSONFile(filePath) { try { @@ -358,3 +415,48 @@ function generateTable(category) { tbody.appendChild(row); }); } +function showTab(tabName) { + // Ukryj wszystkie zakładki + const tabs = document.querySelectorAll('.tab'); + tabs.forEach(tab => tab.classList.remove('active')); + + // Pokaż wybraną zakładkę + const selectedTab = document.getElementById(tabName); + if (selectedTab) { + selectedTab.classList.add('active'); + } + + // Zmieniaj tytuł nagłówka w zależności od wybranej zakładki + const headerTitle = document.getElementById('header-title'); + const upButtonContainer = document.getElementById('up-button-container'); + const selectRoleContainer = document.getElementById('select-role-container'); + const selectClassContainer = document.getElementById('select-class-container'); + + switch (tabName) { + case 'criteria': + headerTitle.textContent = 'Ocena Zachowania'; + generateTable(currentCategory); // Generuj tabelę dla aktualnej kategorii + upButtonContainer.style.display = 'block'; // Pokaż przyciski + selectRoleContainer.style.display = 'block'; // Pokaż wybór roli + selectClassContainer.style.display = 'block'; // Pokaż wybór klasy + break; + case 'stats': + headerTitle.textContent = 'Statystyka'; + upButtonContainer.style.display = 'none'; // Ukryj przyciski + selectRoleContainer.style.display = 'none'; // Ukryj wybór roli + selectClassContainer.style.display = 'none'; // Ukryj wybór klasy + break; + case 'points': + headerTitle.textContent = 'Ustal punkty'; + upButtonContainer.style.display = 'none'; // Ukryj przyciski + selectRoleContainer.style.display = 'none'; // Ukryj wybór roli + selectClassContainer.style.display = 'none'; // Ukryj wybór klasy + break; + default: + headerTitle.textContent = 'Ocena Zachowania'; + upButtonContainer.style.display = 'none'; // Ukryj przyciski + selectRoleContainer.style.display = 'none'; // Ukryj wybór roli + selectClassContainer.style.display = 'none'; // Ukryj wybór klasy + } +} +