update

2023-07-13 15:13:07 +02:00 · 2023-07-13 15:09:26 +02:00 · 2023-07-13 15:07:40 +02:00 · 2023-07-13 15:05:34 +02:00 · 2023-07-13 15:02:53 +02:00 · 2023-07-13 14:59:45 +02:00
6 changed files with 19322 additions and 0 deletions
--- a/src/index.html
+++ b/src/index.html
@ -5,8 +5,44 @@
    <title>FrOSCon - 2023 - Demo</title>

    <link href="./css/bootstrap.min.css" rel="stylesheet">
+    <script src="./js/vue.js"></script>
+    <script src="./js/vue-router.js"></script>
+
+    <!-- "page components" -->
+    <script src="./js/page/hello.js"></script>
+    <script src="./js/page/age.js"></script>
 </head>
 <body class="container">
    <h1>Hello World</h1>
+
+    <div class="card" id="app">
+        <ul class="list-group">
+            <li class="list-group-item">
+                <router-link to="/hello">Hello Vue!</router-link>
+            </li>
+            <li class="list-group-item">
+                <router-link to="/age">Wie alt bin ich?</router-link>
+            </li>
+        </ul>
+
+        <router-view></router-view>
+    </div>
+
+    <script>
+        const router = VueRouter.createRouter({
+            history: VueRouter.createWebHashHistory(),
+            routes: [
+                { path: "/hello", component: pages['hello'] },
+                { path: "/age", component: pages['age'] },
+            ]
+        })
+
+        const MyVueApp = Vue.createApp({})
+        MyVueApp.use(router)
+    </script>
+    <script src="./js/card.js"></script>
+    <script>
+        MyVueApp.mount('#app')
+    </script>
 </body>
 </html>
--- a/src/js/card.js
+++ b/src/js/card.js
@ -0,0 +1,14 @@
+MyVueApp.component('card', {
+    props: ['cssClass'],
+    template: `
+<div class="card" v-on:click="$emit('card-click')">
+    <div :class="cssClass">
+        <div class="card-body">
+            <h5 class="card-title">
+                <slot></slot>
+            </h5>
+        </div>
+    </div>
+</div>
+    `
+})
--- a/src/js/page/age.js
+++ b/src/js/page/age.js
@ -0,0 +1,42 @@
+if(!pages) var pages = {}
+
+pages['age'] = {
+    template: `
+    <div>
+        <div class="card-body">
+            <h5 class="card-title">Wie alt bin ich?</h5>
+            <p class="card-text">
+                <input type="number" min="1" max="31" v-model="day" />
+                <input type="number" min="1" max="12" v-model="month" />
+                <input type="number" min="1900" v-model="year" />
+            </p>
+            <p>
+                <input type="number" disabled v-model="days" /> Tage
+            </p>
+        </div>
+    </div>`,
+    data() {
+        return {
+            day: 13,
+            month: 12,
+            year: 1989,
+        }
+    },
+    computed: {
+        milliseconds(){
+            return new Date().getTime() - new Date(this.year, this.month - 1, this.day).getTime()
+        },
+        seconds(){
+            return this.milliseconds / 1000
+        },
+        minutes(){
+            return this.seconds / 60
+        },
+        hours(){
+            return this.minutes / 60
+        },
+        days(){
+            return this.hours / 24
+        }
+    },
+}
--- a/src/js/page/hello.js
+++ b/src/js/page/hello.js
@ -0,0 +1,62 @@
+if(!pages) var pages = {}
+
+pages['hello'] = {
+    template: `
+    <div>
+        <div class="card-body">
+            <h5 class="card-title">{{ message }}</h5>
+            <p class="card-text">
+                <input type="text" v-model="message" />
+            </p>
+            <p>
+                Cards: {{ cards.length }}
+                Charcounter: {{ amountOfChars }}
+                Average Chars: {{ averageCharsAmount }}
+            </p>
+            <a class="btn btn-primary" v-on:click="addCard">Add Card</a>
+        </div>
+    
+        <div class="row">
+            <div class="col-6" v-for="(card, i) of cards" :key="card.id">
+                <card :css-class="i % 2 === 0 ? 'bg-primary' : 'bg-secondary'"
+                      v-on:card-click="removeCard(i)">
+                    {{ card.content }} ({{ card.id }})
+                </card>
+            </div>
+        </div>
+    </div>`,
+    data() {
+        return {
+            message: 'Hello Vue!',
+            cards: [],
+        }
+    },
+    computed: {
+        amountOfChars() {
+            if(this.cards.length === 0) return 0
+
+            return this.cards.map(c => c.content.length).reduce((pv, cv) => pv + cv)
+        },
+        averageCharsAmount() {
+            if(this.amountOfChars === 0) return 0
+
+            return this.amountOfChars / this.cards.length
+        }
+    },
+    methods: {
+        addCard() {
+            this.cards.push({
+                id: new Date().getTime(),
+                content: this.message,
+            })
+        },
+        removeCard(i) {
+            this.cards.splice(i, 1)
+        }
+    },
+    watch: {
+        message(newValue) {
+            console.log("Message changed: ", newValue)
+        }
+    }
+}
--- a/src/js/vue-router.js
+++ b/src/js/vue-router.js
--- a/src/js/vue.js
+++ b/src/js/vue.js
Author	SHA1	Message	Date
sschum	3ba0e71d12	update	2023-07-13 15:13:07 +02:00
sschum	51024df8e8	update	2023-07-13 15:09:26 +02:00
sschum	4ee9969860	update	2023-07-13 15:07:40 +02:00
sschum	03f43618ff	update	2023-07-13 15:05:34 +02:00
sschum	ad97f8c66b	update	2023-07-13 15:02:53 +02:00
sschum	6abb9bcf8d	update	2023-07-13 14:59:45 +02:00
sschum	0ad1ecbc14	update	2023-07-13 14:58:28 +02:00
sschum	d8a4bd6af4	update	2023-07-13 14:54:56 +02:00
sschum	42db27c5d0	update	2023-07-13 14:53:36 +02:00
sschum	c2ddb12140	update	2023-07-13 14:50:52 +02:00
sschum	0b840d140a	update	2023-07-13 14:48:15 +02:00
sschum	b4241566b6	update	2023-07-13 14:45:35 +02:00
sschum	4792c56eab	update	2023-07-13 14:40:46 +02:00
sschum	6008ec8c29	update	2023-07-13 14:35:07 +02:00