325 lines
13 KiB
JavaScript
325 lines
13 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const studentsList = document.getElementById("students-list");
|
|
const statsContent = document.getElementById("stats-content");
|
|
const criteriaContent = document.getElementById("criteria-content");
|
|
const saveButton = document.getElementById("save-button");
|
|
const studentsTab = document.getElementById("students-tab");
|
|
const statsTab = document.getElementById("stats-tab");
|
|
const criteriaTab = document.getElementById("criteria-tab");
|
|
const addCriteriaForm = document.getElementById("add-criteria-form");
|
|
const editCriteriaForm = document.getElementById("edit-criteria-form");
|
|
const deleteCriteriaForm = document.getElementById("delete-criteria-form");
|
|
const criteriaListDiv = document.getElementById("criteria-list");
|
|
const editCriteriaNameSelect = document.getElementById("edit-criteria-name");
|
|
const deleteCriteriaNameSelect = document.getElementById("delete-criteria-name");
|
|
let uczniowie = [];
|
|
let kryteria = [];
|
|
let dane = {};
|
|
let progiOcen = []; // Nowa zmienna na progi ocen
|
|
|
|
// Ładowanie danych z serwera
|
|
Promise.all([
|
|
fetch("http://localhost:4000/uczniowie").then(response => response.json()),
|
|
fetch("http://localhost:4000/kryteria").then(response => response.json()),
|
|
fetch("http://localhost:4000/dane").then(response => response.json()),
|
|
fetch("http://localhost:4000/oceny").then(response => response.json()) // Pobierz progi ocen
|
|
])
|
|
.then(([uczniowieData, kryteriaData, daneData, ocenyData]) => {
|
|
uczniowie = uczniowieData.uczniowie;
|
|
kryteria = kryteriaData;
|
|
dane = daneData;
|
|
progiOcen = ocenyData.progi; // Zapisz progi ocen
|
|
console.log("Uczniowie:", uczniowie);
|
|
console.log("Kryteria:", kryteria);
|
|
console.log("Dane:", dane);
|
|
console.log("Progi ocen:", progiOcen);
|
|
renderStudents();
|
|
renderStats();
|
|
renderCriteria();
|
|
})
|
|
.catch(error => console.error("Błąd ładowania danych:", error));
|
|
|
|
// Renderuj uczniów
|
|
function renderStudents() {
|
|
studentsList.innerHTML = "";
|
|
uczniowie.forEach(student => {
|
|
const studentKey = `${student.imie}-${student.nazwisko}`;
|
|
const details = document.createElement("details");
|
|
const summary = document.createElement("summary");
|
|
summary.textContent = `${student.imie} ${student.nazwisko} (${student.klasa})`;
|
|
details.appendChild(summary);
|
|
const criteriaList = document.createElement("div");
|
|
criteriaList.className = "criteria-list";
|
|
kryteria.forEach(criteria => {
|
|
const criteriaItem = document.createElement("div");
|
|
criteriaItem.className = "criteria-item";
|
|
const label = document.createElement("span");
|
|
label.textContent = criteria.nazwa;
|
|
const pointsInfo = document.createElement("span");
|
|
pointsInfo.className = "points-info";
|
|
pointsInfo.textContent = `(${criteria.punkty} pkt)`;
|
|
const input = document.createElement("input");
|
|
input.type = "number";
|
|
input.min = "0";
|
|
const savedStudent = dane[studentKey];
|
|
input.value = savedStudent?.[criteria.nazwa] || 0;
|
|
input.addEventListener("input", () => {
|
|
if (!savedStudent) {
|
|
dane[studentKey] = {};
|
|
}
|
|
dane[studentKey][criteria.nazwa] = parseInt(input.value) || 0;
|
|
renderStats();
|
|
});
|
|
criteriaItem.appendChild(label);
|
|
criteriaItem.appendChild(pointsInfo);
|
|
criteriaItem.appendChild(input);
|
|
criteriaList.appendChild(criteriaItem);
|
|
});
|
|
details.appendChild(criteriaList);
|
|
studentsList.appendChild(details);
|
|
});
|
|
}
|
|
|
|
// Renderuj statystyki
|
|
function renderStats() {
|
|
statsContent.innerHTML = "";
|
|
uczniowie.forEach(student => {
|
|
const studentKey = `${student.imie}-${student.nazwisko}`;
|
|
const savedStudent = dane[studentKey];
|
|
let totalPoints = 0;
|
|
|
|
if (savedStudent) {
|
|
kryteria.forEach(criteria => {
|
|
const count = savedStudent[criteria.nazwa] || 0;
|
|
totalPoints += count * criteria.punkty;
|
|
});
|
|
}
|
|
|
|
// Wybierz ocenę na podstawie punktów
|
|
const ocena = progiOcen.find(prog => totalPoints >= prog.min)?.ocena || 1;
|
|
|
|
// Stwórz element statystyk
|
|
const studentDiv = document.createElement("div");
|
|
studentDiv.className = "stat-item";
|
|
|
|
// Imię i nazwisko
|
|
const name = document.createElement("span");
|
|
name.className = "name";
|
|
name.textContent = `${student.imie} ${student.nazwisko}`;
|
|
|
|
// Klasa
|
|
const className = document.createElement("span");
|
|
className.className = "class";
|
|
className.textContent = `(${student.klasa})`;
|
|
|
|
// Punkty
|
|
const points = document.createElement("span");
|
|
points.className = "points";
|
|
points.textContent = `${totalPoints} pkt`;
|
|
|
|
// Ocena
|
|
const grade = document.createElement("span");
|
|
grade.className = "grade";
|
|
grade.textContent = `Ocena: ${ocena}`;
|
|
|
|
// Dodaj elementy do kontenera
|
|
studentDiv.appendChild(name);
|
|
studentDiv.appendChild(className);
|
|
studentDiv.appendChild(points);
|
|
studentDiv.appendChild(grade);
|
|
|
|
// Dodaj do zawartości statystyk
|
|
statsContent.appendChild(studentDiv);
|
|
});
|
|
|
|
// Dodaj sekcję z progami ocen
|
|
renderGradeThresholds();
|
|
}
|
|
|
|
// Renderuj progi ocen
|
|
function renderGradeThresholds() {
|
|
const thresholdsDiv = document.createElement("div");
|
|
thresholdsDiv.id = "grade-thresholds";
|
|
|
|
const title = document.createElement("h3");
|
|
title.textContent = "Progi punktowe na oceny";
|
|
thresholdsDiv.appendChild(title);
|
|
|
|
const table = document.createElement("table");
|
|
const headerRow = document.createElement("tr");
|
|
|
|
const headers = ["Ocena", "Minimalne punkty"];
|
|
headers.forEach(headerText => {
|
|
const th = document.createElement("th");
|
|
th.textContent = headerText;
|
|
headerRow.appendChild(th);
|
|
});
|
|
|
|
table.appendChild(headerRow);
|
|
|
|
progiOcen.forEach(prog => {
|
|
const row = document.createElement("tr");
|
|
|
|
const gradeCell = document.createElement("td");
|
|
gradeCell.textContent = prog.ocena;
|
|
row.appendChild(gradeCell);
|
|
|
|
const pointsCell = document.createElement("td");
|
|
pointsCell.textContent = `≥ ${prog.min} pkt`;
|
|
row.appendChild(pointsCell);
|
|
|
|
table.appendChild(row);
|
|
});
|
|
|
|
thresholdsDiv.appendChild(table);
|
|
statsContent.appendChild(thresholdsDiv);
|
|
}
|
|
|
|
// Renderuj listę kryteriów
|
|
function renderCriteria() {
|
|
criteriaListDiv.innerHTML = "";
|
|
editCriteriaNameSelect.innerHTML = "";
|
|
deleteCriteriaNameSelect.innerHTML = "";
|
|
if (!Array.isArray(kryteria) || kryteria.length === 0) {
|
|
console.warn("Brak kryteriów do wyświetlenia.");
|
|
const noCriteriaMessage = document.createElement("p");
|
|
noCriteriaMessage.textContent = "Brak dostępnych kryteriów.";
|
|
criteriaListDiv.appendChild(noCriteriaMessage);
|
|
return;
|
|
}
|
|
kryteria.forEach(criteria => {
|
|
// Wyświetl kryterium na liście
|
|
const criteriaDiv = document.createElement("div");
|
|
criteriaDiv.textContent = `${criteria.nazwa}: ${criteria.punkty} pkt`;
|
|
criteriaListDiv.appendChild(criteriaDiv);
|
|
// Dodaj opcję do edycji
|
|
const editOption = document.createElement("option");
|
|
editOption.value = criteria.nazwa;
|
|
editOption.textContent = criteria.nazwa;
|
|
editCriteriaNameSelect.appendChild(editOption);
|
|
// Dodaj opcję do usunięcia
|
|
const deleteOption = document.createElement("option");
|
|
deleteOption.value = criteria.nazwa;
|
|
deleteOption.textContent = criteria.nazwa;
|
|
deleteCriteriaNameSelect.appendChild(deleteOption);
|
|
});
|
|
}
|
|
|
|
// Przełączanie między zakładkami
|
|
studentsTab.addEventListener("click", () => {
|
|
studentsList.style.display = "block";
|
|
statsContent.style.display = "none";
|
|
criteriaContent.style.display = "none";
|
|
});
|
|
|
|
statsTab.addEventListener("click", () => {
|
|
studentsList.style.display = "none";
|
|
statsContent.style.display = "block";
|
|
criteriaContent.style.display = "none";
|
|
});
|
|
|
|
criteriaTab.addEventListener("click", () => {
|
|
studentsList.style.display = "none";
|
|
statsContent.style.display = "none";
|
|
criteriaContent.style.display = "block"; // Pokaż zakładkę "Zarządzanie kryteriami"
|
|
renderCriteria(); // Odśwież listę kryteriów
|
|
});
|
|
|
|
// Dodawanie nowego kryterium
|
|
addCriteriaForm.addEventListener("submit", event => {
|
|
event.preventDefault();
|
|
const nazwa = document.getElementById("new-criteria-name").value.trim();
|
|
const punkty = parseInt(document.getElementById("new-criteria-points").value);
|
|
if (!nazwa || isNaN(punkty)) {
|
|
alert("Wprowadź poprawne dane.");
|
|
return;
|
|
}
|
|
fetch("http://localhost:4000/kryteria", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ nazwa, punkty })
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error("Błąd dodawania kryterium.");
|
|
return response.text();
|
|
})
|
|
.then(() => {
|
|
alert("Kryterium dodane pomyślnie.");
|
|
return fetch("http://localhost:4000/kryteria").then(response => response.json());
|
|
})
|
|
.then(kryteriaData => {
|
|
kryteria = kryteriaData;
|
|
renderCriteria();
|
|
})
|
|
.catch(error => console.error(error));
|
|
});
|
|
|
|
// Edycja istniejącego kryterium
|
|
editCriteriaForm.addEventListener("submit", event => {
|
|
event.preventDefault();
|
|
const nazwa = editCriteriaNameSelect.value;
|
|
const nowaNazwa = document.getElementById("edit-criteria-new-name").value.trim();
|
|
const punkty = parseInt(document.getElementById("edit-criteria-points").value);
|
|
if (!nowaNazwa || isNaN(punkty)) {
|
|
alert("Wprowadź poprawne dane.");
|
|
return;
|
|
}
|
|
fetch(`http://localhost:4000/kryteria/${encodeURIComponent(nazwa)}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ nowaNazwa, punkty })
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error("Błąd edycji kryterium.");
|
|
return response.text();
|
|
})
|
|
.then(() => {
|
|
alert("Kryterium zaktualizowane pomyślnie.");
|
|
return fetch("http://localhost:4000/kryteria").then(response => response.json());
|
|
})
|
|
.then(kryteriaData => {
|
|
kryteria = kryteriaData;
|
|
renderCriteria();
|
|
})
|
|
.catch(error => console.error(error));
|
|
});
|
|
|
|
// Usuwanie kryterium
|
|
deleteCriteriaForm.addEventListener("submit", event => {
|
|
event.preventDefault();
|
|
const nazwa = deleteCriteriaNameSelect.value;
|
|
fetch(`http://localhost:4000/kryteria/${encodeURIComponent(nazwa)}`, {
|
|
method: "DELETE"
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error("Błąd usuwania kryterium.");
|
|
return response.text();
|
|
})
|
|
.then(() => {
|
|
alert("Kryterium usunięte pomyślnie.");
|
|
return fetch("http://localhost:4000/kryteria").then(response => response.json());
|
|
})
|
|
.then(kryteriaData => {
|
|
kryteria = kryteriaData;
|
|
renderCriteria();
|
|
})
|
|
.catch(error => console.error(error));
|
|
});
|
|
|
|
// Zapisz dane na zewnętrznym serwerze
|
|
saveButton.addEventListener("click", () => {
|
|
fetch("http://localhost:4000/dane", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(dane)
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
alert("Dane zostały zapisane!");
|
|
} else {
|
|
alert("Wystąpił błąd podczas zapisywania danych.");
|
|
}
|
|
})
|
|
.catch(error => console.error("Błąd zapisywania danych:", error));
|
|
});
|
|
}); |