VueJS lekcja 1

Lekcja_05/static/css/style.css

@@ -0,0 +1,47 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial;
+}
+
+a {
+    display: block;
+    margin: 1rem;
+    margin-bottom: 0;
+    padding: .5rem;
+    width: fit-content;
+    background-color: cornflowerblue;
+    color: white;
+    font-weight: bold;
+    border-radius: 3px;
+    text-decoration: none;
+}
+
+a:hover {
+    background-color: violet;
+}
+
+h2 {
+    margin: 1rem;
+    color: navy;
+}
+
+select {
+    margin: 0 1rem;
+    background-color: cornflowerblue;
+    font-weight: bold;
+    border: none;
+    color: white;
+    padding: .5rem;
+    border-radius: 3px;
+}
+
+input[type="text"] {
+    background-color: cornflowerblue;
+    font-weight: bold;
+    border: none;
+    color: white;
+    padding: .5rem;
+    border-radius: 3px;
+}

Lekcja_05/static/cwiczenia/lekcja-1-directives/01 - A.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="pl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VueJS 1A</title>
+    <link rel="stylesheet" href="/style.css">
+</head>
+
+<body>
+    <script>
+        fetch("/page_list").then(r => r.json())
+            .then(function (data) {
+                console.log(data);
+
+                data.lessons.forEach(lesson => {
+                    document.querySelector("body").innerHTML += `<a href="/${lesson}" target="_blank">${lesson}</a>`;
+                });
+            })
+            .catch(e => { console.log(e); });
+    </script>
+</body>
+
+</html>

Lekcja_05/static/cwiczenia/lekcja-1-directives/02 - start.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start VueJS</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <h1>{{ title }}</h1>
+    </div>
+</body>
+
+<script>
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                title: "title"
+            }
+        }
+    }).mount("#app");
+
+    app.title += ' of film';
+
+</script>
+
+</html>

Lekcja_05/static/cwiczenia/lekcja-1-directives/03 - v-text.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start VueJS</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <h1 v-text="title"></h1>
+    </div>
+</body>
+
+<script>
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                title: "title"
+            }
+        }
+    }).mount("#app");
+
+    app.title += ' of film';
+
+</script>
+
+</html>

Lekcja_05/static/cwiczenia/lekcja-1-directives/04 - v-once.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start VueJS</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <h1 v-once>{{ title }}</h1>
+    </div>
+</body>
+
+<script>
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                title: "title"
+            }
+        }
+    }).mount("#app");
+
+    app.title += ' of film';
+
+</script>
+
+</html>

Lekcja_05/static/cwiczenia/lekcja-1-directives/05 - v-html.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start VueJS</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <h1 v-html="title"></h1>
+    </div>
+</body>
+
+<script>
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                title: "title"
+            }
+        }
+    }).mount("#app");
+
+    app.title += ' <span style="color: red;">of film</span>';
+
+</script>
+
+</html>

Lekcja_05/static/cwiczenia/lekcja-1-directives/06 - v-bind.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start VueJS</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <a :href="onet_url">ONET</a>
+        <img :src="img_src" :width="img_width" :height="img_height">
+    </div>
+</body>
+
+<script>
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                onet_url: "https://onet.pl",
+                img_width: 200,
+                img_height: 100,
+                img_src: "/google.svg"
+            }
+        }
+    }).mount("#app");
+
+    app.title += ' ';
+
+</script>
+
+</html>

Lekcja_05/static/cwiczenia/lekcja-1-directives/07 - v-model.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start VueJS</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <h2>Komunikat z pola txt: {{ message }} </h2>
+
+        <input v-model="message" type="text">
+
+        <h5>Wybrane z selecta: {{ selected }}</h5>
+
+        <select v-model="selected">
+            <option>001</option>
+            <option>002</option>
+            <option>003</option>
+        </select>
+    </div>
+</body>
+
+<script>
+
+    const app = Vue.createApp({
+        data() {
+            return {
+                message: "zawartość pola txt",
+                selected: ""
+            }
+        }
+    }).mount("#app");
+
+</script>
+
+</html>

Lekcja_05/static/cwiczenia/lekcja-2-fake/01 - fake newsy.html

@@ -0,0 +1 @@
+kierowca opla poprawnie zaparkował

Lekcja_05/static/cwiczenia/lekcja-2-fake/02 - przykladowe dane.html

@@ -0,0 +1 @@
+przykladowe dane

Lekcja_05/static/gfx/google.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="lnXdpd"
+   aria-label="Google"
+   height="81.589996"
+   role="img"
+   viewBox="0 0 269.59 81.589996"
+   width="269.59"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="Google_logo_2026.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     id="namedview16"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="3.7941176"
+     inkscape:cx="231.54264"
+     inkscape:cy="46.124031"
+     inkscape:window-width="1366"
+     inkscape:window-height="683"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14" />
+  <path
+     d="M 31.32,63.35 C 48.97,63.52 60.99,51.67 60.99,33.43 Q 61,31.14 60.56,28.35 H 31.2 v 8.76 H 51.8 C 50.7,48.58 42.62,54.55 31.53,54.55 19.09,54.55 9.57,45.2 9.57,31.61 9.57,18.2 18.67,8.84 31.53,8.84 c 6.48,0 11.26,2 16.04,6.9 L 53.71,9.31 C 48.33,3.01 40.55,0 31.41,0 13.7,0 0,13.29 0,31.48 c 0,17.4 13.25,31.7 31.32,31.87"
+     fill="#3186ff"
+     id="path2" />
+  <path
+     d="m 88.2,63.35 c 13.2,0 22.77,-9.69 22.77,-23.15 0,-13.2 -9.35,-22.98 -22.77,-22.98 -12.7,0 -22.68,9.02 -22.68,22.98 0,13.33 9.43,23.15 22.68,23.15 m 0,-8.04 c -8.04,0 -13.67,-6.6 -13.67,-15.1 0,-8.5 5.93,-14.95 13.67,-14.95 8.17,0 13.67,6.6 13.67,14.94 0,8.64 -5.63,15.11 -13.67,15.11"
+     fill="#fc413d"
+     id="path4" />
+  <path
+     d="m 137.42,63.35 c 13.29,0 22.77,-9.73 22.77,-23.15 0,-13.2 -9.35,-22.98 -22.77,-22.98 -12.7,0 -22.68,9.02 -22.68,22.98 0,13.33 9.43,23.15 22.68,23.15 m 0,-8.04 c -8.04,0 -13.67,-6.6 -13.67,-15.1 0,-8.5 5.93,-14.95 13.67,-14.95 8.17,0 13.67,6.6 13.67,14.94 0,8.64 -5.63,15.11 -13.67,15.11"
+     fill="#ffbe00"
+     id="path6" />
+  <path
+     d="m 185.37,81.59 q 21.51,0 21.5,-24.63 V 18.79 h -8.8 v 5.37 h -0.17 c -2.75,-4.27 -7.96,-6.68 -13.84,-6.68 -12.7,0 -20.44,9.69 -20.44,22.6 0,12.86 7.53,22.34 20.78,22.34 6.52,0 11.34,-3.72 13.37,-6.77 h 0.3 v 3.94 c 0,8.67 -4.49,13.8 -12.82,13.8 -5.46,0 -9.1,-3.01 -11.77,-8.05 l -7.96,3.52 c 4.2,8.84 10.16,12.73 19.85,12.73 m 0,-27.55 c -7.74,0 -12.7,-5.71 -12.7,-14.22 0,-8.2 4.92,-14.13 12.75,-14.13 7.83,0 12.65,5.5 12.65,14.09 0,8.68 -5.08,14.26 -12.7,14.26"
+     fill="#3186ff"
+     id="path8" />
+  <path
+     d="m 222.91,1.35 h -9.22 v 60.6 h 9.22 z"
+     fill="#00af57"
+     id="path10" />
+  <path
+     d="m 250.17,63.27 a 22.1,22.1 0 0 0 19,-10.54 l -6.86,-4.49 c -3,4.2 -7.1,6.6 -11.72,6.6 a 13.6,13.6 0 0 1 -11.93,-7.23 l 30.93,-13.12 a 20,20 0 0 0 -0.84,-3.22 c -3.69,-9.48 -10.12,-13.8 -18.8,-13.8 -13.24,0 -22.25,9.66 -22.25,23.03 0,13.67 9.47,22.77 22.47,22.77 m -13.5,-22.81 v -0.51 c 0,-8.76 5.03,-14.64 12.95,-14.64 3.76,0 7.15,1.69 9.44,5.67 z"
+     fill="#fc413d"
+     id="path12" />
+</svg>

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>