Compare commits
No commits in common. "5bb646fa542084518d8f09fa41c01642d0074fc3" and "e69ad1407564d7f76cb298dd6c8143e2a4c5052c" have entirely different histories.
5bb646fa54
...
e69ad14075
|
|
@ -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%;
|
||||||
|
|
|
||||||
108
index.html
108
index.html
|
|
@ -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>
|
||||||
|
|
|
||||||
111
js/script.js
111
js/script.js
|
|
@ -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');
|
||||||
|
//}
|
||||||
|
//});
|
||||||
|
//};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue