vip/new-zoz
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Fabian Kowalski 2025-02-12 14:05:01 +01:00
commit eb6585bb6e
9 changed files with 367 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
backend/node_modules
backend/package-lock.json

42
backend/dane.json Normal file
View File

@ -0,0 +1,42 @@
{
"1A": [
{
"uczen": {
"imie": "Jan",
"nazwisko": "Kowalski",
"Zadanie domowe": 10,
"Aktywność": 3,
"Sprawdzian": 4
}
},
{
"uczen": {
"imie": "Anna",
"nazwisko": "Nowak",
"Zadanie domowe": 2,
"Aktywność": 1,
"Sprawdzian": 0
}
}
],
"2B": [
{
"uczen": {
"imie": "Piotr",
"nazwisko": "Wiśniewski",
"Zadanie domowe": 10,
"Aktywność": 0,
"Sprawdzian": 0
}
},
{
"uczen": {
"imie": "Maria",
"nazwisko": "Kowalczyk",
"Zadanie domowe": 3,
"Aktywność": 2,
"Sprawdzian": 1
}
}
]
}

5
backend/kryteria.json Normal file
View File

@ -0,0 +1,5 @@
[
"Zadanie domowe",
"Aktywność",
"Sprawdzian"
]

8
backend/package.json Normal file
View File

@ -0,0 +1,8 @@
{
"dependencies": {
"cors": "^2.8.5",
"express": "^4.21.2",
"fs": "^0.0.1-security",
"path": "^0.12.7"
}
}

67
backend/server.js Normal file
View File

@ -0,0 +1,67 @@
const express = require("express");
const fs = require("fs");
const path = require("path");
const cors = require("cors");
const app = express();
const PORT = 4000;
// Ścieżki do plików JSON
const UCZNIOWIE_FILE = path.join(__dirname, "uczniowie.json");
const KRYTERIA_FILE = path.join(__dirname, "kryteria.json");
const DANE_FILE = path.join(__dirname, "dane.json");
// Middleware do obsługi JSON i CORS
app.use(express.json());
app.use(cors());
// Endpoint do pobierania listy uczniów
app.get("/uczniowie", (req, res) => {
fs.readFile(UCZNIOWIE_FILE, "utf8", (err, data) => {
if (err) {
console.error("Błąd odczytu uczniów:", err);
return res.status(500).send("Błąd odczytu uczniów.");
}
res.json(JSON.parse(data));
});
});
// Endpoint do pobierania listy kryteriów
app.get("/kryteria", (req, res) => {
fs.readFile(KRYTERIA_FILE, "utf8", (err, data) => {
if (err) {
console.error("Błąd odczytu kryteriów:", err);
return res.status(500).send("Błąd odczytu kryteriów.");
}
res.json(JSON.parse(data));
});
});
// Endpoint do pobierania danych uczniów
app.get("/dane", (req, res) => {
fs.readFile(DANE_FILE, "utf8", (err, data) => {
if (err) {
console.error("Błąd odczytu danych:", err);
return res.status(500).send("Błąd odczytu danych.");
}
res.json(JSON.parse(data));
});
});
// Endpoint do zapisywania danych uczniów
app.post("/dane", (req, res) => {
const newData = req.body;
fs.writeFile(DANE_FILE, JSON.stringify(newData, null, 2), err => {
if (err) {
console.error("Błąd zapisywania danych:", err);
return res.status(500).send("Błąd zapisywania danych.");
}
res.send("Dane zapisane pomyślnie.");
});
});
// Uruchomienie serwera
app.listen(PORT, () => {
console.log(`Serwer API działa na http://localhost:${PORT}`);
});

12
backend/uczniowie.json Normal file
View File

@ -0,0 +1,12 @@
{
"klasy": {
"1A": [
{ "imie": "Jan", "nazwisko": "Kowalski" },
{ "imie": "Anna", "nazwisko": "Nowak" }
],
"2B": [
{ "imie": "Piotr", "nazwisko": "Wiśniewski" },
{ "imie": "Maria", "nazwisko": "Kowalczyk" }
]
}
}

26
index.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zarządzanie Uczniami</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Zarządzanie Uczniami</h1>
<!-- Wybór klasy -->
<label for="class-select">Wybierz klasę:</label>
<select id="class-select"></select>
<!-- Lista uczniów -->
<div id="students-list"></div>
<!-- Przycisk do zapisywania danych -->
<button id="save-button">Zapisz dane</button>
</div>
<script src="script.js"></script>
</body>
</html>

121
script.js Normal file
View File

@ -0,0 +1,121 @@
let uczniowie = {};
let kryteria = [];
let dane = {};
document.addEventListener("DOMContentLoaded", () => {
const classSelect = document.getElementById("class-select");
const studentsList = document.getElementById("students-list");
const saveButton = document.getElementById("save-button");
// Ł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())
])
.then(([uczniowieData, kryteriaData, daneData]) => {
uczniowie = uczniowieData.klasy;
kryteria = kryteriaData;
dane = daneData;
populateClassSelect();
})
.catch(error => console.error("Błąd ładowania danych:", error));
// Wypełnij listę klas
function populateClassSelect() {
Object.keys(uczniowie).forEach(klasa => {
const option = document.createElement("option");
option.value = klasa;
option.textContent = klasa;
classSelect.appendChild(option);
});
// Wyświetl pierwszą klasę domyślnie
if (classSelect.options.length > 0) {
classSelect.value = classSelect.options[0].value;
renderStudents(classSelect.value);
}
}
// Aktualizuj listę uczniów po wyborze klasy
classSelect.addEventListener("change", () => {
const selectedClass = classSelect.value;
renderStudents(selectedClass);
});
// Renderuj uczniów
function renderStudents(className) {
studentsList.innerHTML = "";
const students = uczniowie[className];
students.forEach(student => {
const studentKey = `${className}-${student.imie}-${student.nazwisko}`;
const details = document.createElement("details");
const summary = document.createElement("summary");
summary.textContent = `${student.imie} ${student.nazwisko}`;
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;
const input = document.createElement("input");
input.type = "number";
input.min = "0";
// Wyszukaj dane ucznia w pliku `dane.json`
const savedStudent = dane[className]?.find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);
input.value = savedStudent?.uczen[criteria] || 0;
input.addEventListener("input", () => {
if (!savedStudent) {
dane[className] = dane[className] || [];
dane[className].push({
uczen: {
imie: student.imie,
nazwisko: student.nazwisko
}
});
}
const currentStudent = dane[className].find(s => s.uczen.imie === student.imie && s.uczen.nazwisko === student.nazwisko);
currentStudent.uczen[criteria] = parseInt(input.value) || 0;
});
criteriaItem.appendChild(label);
criteriaItem.appendChild(input);
criteriaList.appendChild(criteriaItem);
});
details.appendChild(criteriaList);
studentsList.appendChild(details);
});
}
// 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));
});
});

84
style.css Normal file
View File

@ -0,0 +1,84 @@
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f9;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
label {
display: block;
margin-top: 20px;
font-weight: bold;
}
select {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
#students-list {
margin-top: 20px;
}
details {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
summary {
font-weight: bold;
cursor: pointer;
outline: none;
}
.criteria-list {
margin-left: 20px;
}
.criteria-item {
display: flex;
align-items: center;
margin: 5px 0;
}
.criteria-item input {
width: 50px;
margin-left: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}