VueJS lekcja 1

Lekcja_05/static/pages/index2.html

@@ -0,0 +1,72 @@
+<!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>