forked from extern/froscon-2023-demo
update
This commit is contained in:
sschum
parent
51024df8e8
commit
3ba0e71d12
@ -6,71 +6,39 @@
|
||||
|
||||
<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">
|
||||
<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 href="#" class="btn btn-primary" v-on:click="addCard">Add Card</a>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const MyVueApp = Vue.createApp({
|
||||
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)
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
42
src/js/page/age.js
Normal file
42
src/js/page/age.js
Normal file
@ -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
|
||||
}
|
||||
},
|
||||
}
|
||||
62
src/js/page/hello.js
Normal file
62
src/js/page/hello.js
Normal file
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
3807
src/js/vue-router.js
Normal file
3807
src/js/vue-router.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user