From 83a5d309c4d8f596204a31da1126448aa371cd1e Mon Sep 17 00:00:00 2001
From: domx4q <ev3dom@gmx.de>
Date: Sat, 15 Apr 2023 22:22:50 +0200
Subject: [PATCH] added current examples

---
 src/components/examples/Dynamic Button.vue | 36 +++++++++++
 src/components/examples/HTML_Template.vue  | 63 +++++++++++++++++++
 src/components/examples/StaticButton.vue   | 26 ++++++++
 src/router/index.js                        | 11 ++--
 src/views/extra/ExampleView.vue            | 72 ++++++++++++++++++++++
 5 files changed, 203 insertions(+), 5 deletions(-)
 create mode 100644 src/components/examples/Dynamic Button.vue
 create mode 100644 src/components/examples/HTML_Template.vue
 create mode 100644 src/components/examples/StaticButton.vue
 create mode 100644 src/views/extra/ExampleView.vue

diff --git a/src/components/examples/Dynamic Button.vue b/src/components/examples/Dynamic Button.vue
new file mode 100644
index 00000000..cd831293
--- /dev/null
+++ b/src/components/examples/Dynamic Button.vue	
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <button class="btn btn-primary" @click="$emit('clicked')">{{ text }}</button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "DynamicButton",
+  props: {
+    text: {
+      type: String,
+      default: "Beispiel Button"
+    },
+    color: {
+      type: String,
+      default: "green"
+    }
+  },
+}
+</script>
+
+<style scoped>
+button {
+    background-color: v-bind(color);
+    border: none;
+    border-radius: 10px;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/components/examples/HTML_Template.vue b/src/components/examples/HTML_Template.vue
new file mode 100644
index 00000000..cb4a9800
--- /dev/null
+++ b/src/components/examples/HTML_Template.vue
@@ -0,0 +1,63 @@
+<template>
+  <div id="content">
+    <p>
+      Die Nachricht lautet: <b>{{ message }}</b>
+    </p>
+    <DynamicButton color="orange" text="Text ändern" @clicked="changeText()" />
+    <hr>
+    <p>Ein Element kann auch durch html Templates wiederholt werden.</p>
+    <span v-for="n in 5" :key="n">Wiederholung: {{ n }}<br></span>
+      <hr>
+      <p>Nun noch ein kleines Beispiel mit "v-model" und if statements<br>
+      Durch diese kann man nicht nur den Text ersetzen, wonach es hier eventuell aussieht, sondern ganze bereiche ersetzen.</p>
+      <input type="checkbox" v-model="ifTest" name="IF"/>
+      <label for="IF">Zum ändern der zu überprüfenden Variable</label><br>
+      <p style="color: #008200" v-if="ifTest">Dieser Text wird angezeigt, wenn die Checkbox <b><u>an</u></b> ist.</p>
+      <p style="color: #ff0000" v-else>Dieser Text wird angezeigt, wenn die Checkbox <b><u>aus</u></b> ist.</p>
+  </div>
+</template>
+
+<script>
+import DynamicButton from "@/components/examples/Dynamic Button.vue";
+
+export default {
+  name: "HTML_Template",
+  components: {
+    DynamicButton,
+  },
+  data() {
+    return {
+      message: "Das ist der Inhalt einer Variable",
+
+      currentIndex: 0,
+      ifTest: true,
+    };
+  },
+  methods: {
+    changeText() {
+      let options = [
+        "Das ist der Inhalt einer Variable",
+        "Das ist ein Beispiel Text",
+        "Platzhalter",
+        "Lorem Ipsum",
+      ];
+      let randomIndex = Math.floor(Math.random() * options.length);
+      if (randomIndex === this.currentIndex) {
+        randomIndex = (randomIndex + 1) % options.length;
+      }
+      this.currentIndex = randomIndex;
+      this.message = options[randomIndex];
+    },
+  },
+};
+</script>
+
+<style scoped>
+#content {
+  margin-top: 10px;
+  padding: 5px 20px 20px;
+  background-color: #bee2ee; /* light blue */
+  border-radius: 10px;
+  width: fit-content;
+}
+</style>
diff --git a/src/components/examples/StaticButton.vue b/src/components/examples/StaticButton.vue
new file mode 100644
index 00000000..b1fd91cc
--- /dev/null
+++ b/src/components/examples/StaticButton.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <button class="btn btn-primary" @click="$emit('clicked')">Beispiel Button</button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "StaticButton",
+}
+</script>
+
+<style scoped>
+button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    border-radius: 10px;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 2723734d..7aec795e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,10 +8,6 @@ const routes = [
     component: HomeView
   },
   {
-    // create a sub route folder so
-    // /easter/clock
-    // /easter/snake
-
     path: "/easter",
     name: "easter",
     redirect: {name: "home"},
@@ -58,7 +54,12 @@ const routes = [
           path: "stars",
           name: "stars",
           component: () => import("../views/extra/StarsView.vue")
-        }
+        },
+        {
+          path: "example",
+          name: "example",
+          component: () => import("../views/extra/ExampleView.vue"),
+        },
     ]
   }
 ]
diff --git a/src/views/extra/ExampleView.vue b/src/views/extra/ExampleView.vue
new file mode 100644
index 00000000..a3466f4c
--- /dev/null
+++ b/src/views/extra/ExampleView.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="content">
+        <p>Hier kommt der HTML Template Code rein</p><hr class="maxWidth bold">
+        <p>Das sind statische Buttons, diese bleiben immer gleich</p>
+        <div class="inline">
+            <StaticButton @clicked="test('Static Button clicked')"/>
+            <StaticButton @clicked="test('Static Button clicked')"/>
+        </div>
+        <p>Das sind dynamische Buttons, diese kann man durch einfache Parameter verändern.<br>
+        So kann ich Beispielsweise die Farbe, oder den Text ändern.</p>
+        <div class="inline">
+            <DynamicButton color="darkblue" text="Dieser Text ist variabel" @clicked="test('Dynamic Button clicked')"/>
+            <DynamicButton color="tomato" :text="'Counter: ' + counter" @clicked="counter++"/>
+        </div>
+        <hr>
+        Der folgende Inhalt ist aus dem HTML Template Beispiel
+        <HTML_Template/>
+    </div>
+</template>
+
+<script>
+// Hier findet die Logik statt
+import StaticButton from "@/components/examples/StaticButton.vue";
+import DynamicButton from "@/components/examples/Dynamic Button.vue";
+import HTML_Template from "@/components/examples/HTML_Template.vue";
+
+export default {
+    name: 'ExampleView',
+    components: {
+        StaticButton,
+        DynamicButton,
+        HTML_Template
+    },
+    data() {
+        return {
+            counter: 0
+        }
+    },
+    methods: {
+        test(message) {
+            alert(message)
+        }
+    },
+    computed: {},
+    mounted() {
+    },
+    watch: {},
+}
+</script>
+
+<style scoped>
+/* Hier kommt der CSS Code rein, also die Styles */
+.content {
+    padding: 5px 20px 20px;
+    background-color: #fff;
+
+    height: 100vh;
+    width: 100vw;
+}
+hr.maxWidth {
+    width: 100vw;
+    margin-left: -20px;
+    margin-bottom: 15px;
+}
+hr.bold {
+    border-top: 2px solid #000;
+}
+div.inline {
+    display: inline-flex;
+    gap: 10px;
+}
+</style>