Compare commits

..

No commits in common. "5bb646fa542084518d8f09fa41c01642d0074fc3" and "e69ad1407564d7f76cb298dd6c8143e2a4c5052c" have entirely different histories.

3 changed files with 45 additions and 234 deletions

View File

@ -6,26 +6,6 @@
.tab.active { .tab.active {
display: block; 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 */ /* Style dla przycisków kategorii */
.category-buttons { .category-buttons {
@ -55,40 +35,6 @@ header {
border: 1px solid #4CAF50; 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 */ /* Stylizacja tabeli */
table { table {
width: 100%; width: 100%;

View File

@ -19,32 +19,18 @@
} }
</style> </style>
</head> </head>
<body> <body class="dark-background">
<header class="header-box">
<div class="up-button"> <h1 class="lead" style="font-size: 48px;"><em>Ocena Zachowania</em></h1>
<button class="active" onclick="showTab('criteria')">Ocena z zachowania</button>
<button class="active" onclick="showTab('stats')">Statystyka</button>
<button class="active" onclick="showTab('points')">Ustal punkty</button>
</div> <div>
<h1 id="header-title" class="header-title">Ocena Zachowania</h1> <button onclick="showTab('criteria')">Ocena z zachowania</button>
</header> <button onclick="showTab('stats')">Statystyka</button>
<div id="up-button-container" class="up-button" class="sa"> <button onclick="showTab('points')">Ustal punkty</button>
<button class="active" onclick="changeDay(-1)">Poprzedni Dzień</button> </div>
<button class="active" onclick="changeDay(1)">Następny Dzień</button>
</div>
<div id="select-role-container" class="select-role" style="display: none;">
<p>Wybierz rolę:</p>
<select id="select-role" class="select-role">
<!-- Opcje będą ładowane dynamicznie -->
</select>
</div>
<div id="select-class-container" class="select-class" style="display: none;">
<p>Wybierz klasę:</p>
<select class="select-class" id="select-class-select">
<!-- Opcje będą ładowane dynamicznie -->
</select>
</div>
<!-- Zakładka "Ustal punkty" --> <!-- Zakładka "Ustal punkty" -->
<div id="points" class="tab"> <div id="points" class="tab">
<h2>Ustal punkty dla kryteriów</h2> <h2>Ustal punkty dla kryteriów</h2>
@ -135,61 +121,31 @@
</div> </div>
<!-- Zakładka "Kryteria oceny zachowania" --> <!-- Zakładka "Kryteria oceny zachowania" -->
<div id="criteria" class="tab active"> <div id="criteria" class="tab active">
<h2>Kryteria oceny zachowania - <span id="current-date"></span></h2> <h2>Kryteria oceny zachowania - <span id="current-date"></span></h2>
<div>
<!-- Tabela uczniów --> <button onclick="changeDay(-1)">Poprzedni Dzień</button>
<table id="student-table"> <button onclick="changeDay(1)">Następny Dzień</button>
<thead>
<tr>
<th>Imię i Nazwisko</th>
<!-- Dynamiczne kolumny będą generowane przez JavaScript -->
</tr>
</thead>
<tbody>
<!-- Wiersze uczniów będą generowane przez JavaScript -->
</tbody>
</table>
<div class="category-buttons">
<button data-category="frekwencja" onclick="showInnerTab('frekwencja')">Frekwencja</button>
<button data-category="olimpiady" onclick="showInnerTab('olimpiady')">Olimpiady</button>
<button data-category="konkursy" onclick="showInnerTab('konkursy')">Konkursy Szkolne</button>
<button data-category="reprezentacja" onclick="showInnerTab('reprezentacja')">Reprezentacja Szkoły</button>
<button data-category="aktywnosc" onclick="showInnerTab('aktywnosc')">Aktywność</button>
</div> </div>
</div>
<!-- Zakładka "Statystyka" --> <div class="select-role">
<div id="stats" class="tab"> <p>Wybierz role:</p>
<h2>Statystyka dla wszystkich dni</h2> <select onchange="changeRole()" id="select-role" class="select-role">
<div id="stats-output"></div>
</div> </select>
</div>
<div class="select-class" id="select-class-container">
<p>Wybierz klasę:</p>
<select class="select-class" id="select-class-select">
<!-- Opcje będą ładowane dynamicznie -->
</select>
</div>
<div class="category-buttons" id="category-buttons-box">
</div>
<!-- Zakładka "Ustal punkty" -->
<div id="points" class="tab">
<h2>Ustal punkty dla kryteriów</h2>
<table>
<thead>
<tr>
<th>Kryterium</th>
<th>Punkty</th>
</tr>
</thead>
<tbody>
<!-- Wiersze dla wszystkich kryteriów -->
<tr>
<td>Frekwencja 95-100%</td>
<td><input type="number" id="frekwencja-punkty" value="30" onchange="calculateStats()"></td>
</tr>
<tr>
<td>Brak godzin nieusprawiedliwionych</td>
<td><input type="number" id="brak_godzin-punkty" value="20" onchange="calculateStats()"></td>
</tr>
<!-- Dodaj pozostałe wiersze kryteriów tutaj -->
</tbody>
</table>
</div>
<!-- Tabela uczniów --> <!-- Tabela uczniów -->
<table id="student-table"> <table id="student-table">
<thead> <thead>

View File

@ -7,63 +7,6 @@ let currentRole = "teacher"
let currentRoleCriterias = [] let currentRoleCriterias = []
const baseDate = new Date(); 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 // Funkcja do wczytywania pliku JSON
async function fetchJSONFile(filePath) { async function fetchJSONFile(filePath) {
try { try {
@ -471,48 +414,14 @@ async function generateTable(category) {
tbody.appendChild(row); 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');
//}
//});
//};