diff --git a/css/style.css b/css/style.css
index afff5d9..c0f7182 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 {
@@ -35,6 +55,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 df9d22e..75ba7f2 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,7 @@
}
+<<<<<<< HEAD
Ocena Zachowania
@@ -29,8 +30,34 @@
+=======
+
+
+
+
+
+
+
+
Ustal punkty dla kryteriów
@@ -120,32 +147,62 @@
-
-
-
Kryteria oceny zachowania -
-
-
-
-
+
+
+
Kryteria oceny zachowania -
+
+
+
+
+
+ | Imię i Nazwisko |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
Statystyka dla wszystkich dni
+
+
+
+
+
Ustal punkty dla kryteriów
+
+
diff --git a/js/script.js b/js/script.js
index 8d3a09c..46c1cb2 100644
--- a/js/script.js
+++ b/js/script.js
@@ -7,6 +7,63 @@ let currentRole = "teacher"
let currentRoleCriterias = []
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 {
@@ -414,14 +471,48 @@ async 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
+ }
+}
-//window.onscroll = function() {
- // const stickyElements = document.querySelectorAll('.sticky');
- //stickyElements.forEach(element => {
- // if (window.pageYOffset > element.offsetTop) {
- // element.classList.add('active');
- // } else {
- // element.classList.remove('active');
- //}
- //});
-//};