72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VueJS 1B</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<h2>Wybierz lekcję</h2>
|
|
<select name="lekcja" id="lekcja">
|
|
<option value="" selected>Wszystkie</option>
|
|
</select>
|
|
<input type="text" name="nazwa" id="nazwa" placeholder="Wyszukaj po nazwie...">
|
|
|
|
<div id="widok"></div>
|
|
</body>
|
|
|
|
<script>
|
|
fetch("/page_list").then(r => r.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
|
|
data.folders.forEach(folder => {
|
|
document.getElementById("lekcja").innerHTML += `<option>${folder}</option>`;
|
|
})
|
|
|
|
for (let i = 0; i < data.folders.length; i++) {
|
|
document.getElementById("widok").innerHTML += `<div class="grupa-lekcji" id="${data.folders[i]}"><h2>${data.folders[i]}</h2></div>`;
|
|
|
|
data.lessons[i].forEach(lesson => {
|
|
document.getElementById(data.folders[i]).innerHTML += `<a href="/${data.folders[i]}/${lesson}" target="_blank">${lesson}</a>`;
|
|
})
|
|
}
|
|
})
|
|
.catch(e => { console.log(e); });
|
|
|
|
document.getElementById("lekcja").addEventListener("change", function () {
|
|
const lessons = document.getElementById("widok");
|
|
|
|
if (document.getElementById("lekcja").value == '') {
|
|
for (const child of lessons.children) { child.style.display = 'block'; }
|
|
} else {
|
|
for (const child of lessons.children) {
|
|
if (child.id == document.getElementById("lekcja").value) {
|
|
child.style.display = 'block';
|
|
} else {
|
|
child.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
document.getElementById("nazwa").addEventListener("change", function () {
|
|
const lessons = document.getElementById("widok");
|
|
|
|
for (const child of lessons.children) {
|
|
for (const link of child.children) {
|
|
if (link.tagName == 'A') {
|
|
if (link.innerHTML.includes(document.getElementById("nazwa").value)) {
|
|
link.style.display = 'block';
|
|
} else {
|
|
link.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |