jmeno.prijmeni
/
zahradnictvi
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

router

master
Jméno Příjmení 3 years ago
parent
8c85ef3370
commit
5ecb75110f
7 changed files with 166 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      package-lock.json
  2. 4
      package.json
  3. 113
      src/App.vue
  4. 3
      src/main.js
  5. 25
      src/router/index.js
  6. 112
      src/views/Home.vue
  7. 5
      src/views/Kosik.vue

13
package-lock.json
View File

@ -1908,6 +1908,11 @@
}
}
},
"@vue/devtools-api": {
"version": "6.0.0-beta.20.1",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz",
"integrity": "sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q=="
},
"@vue/preload-webpack-plugin": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@ -11301,6 +11306,14 @@
}
}
},
"vue-router": {
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
"integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
"requires": {
"@vue/devtools-api": "^6.0.0-beta.18"
}
},
"vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

4
package.json
View File

@ -9,11 +9,13 @@
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "^4.5.15",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",

113
src/App.vue
View File

@ -1,112 +1,11 @@
<template>
<div>
<div class="card">
<div class="card-header">Služby</div>
<div class="card-body">
<div class="list-group list-group-flush">
<a v-on:click="aktivniSluzba = sluzba" v-for="sluzba, i in sluzby" :key="i" href="#" class="list-group-item list-group-item-action">{{ sluzba.nazev }}</a>
</div>
</div>
</div>
<div v-if="aktivniSluzba" class="card">
<div class="card-header d-flex justify-content-between">
<div>Možnosti: {{ aktivniSluzba.nazev }}</div>
<div><button v-on:click="aktivniSluzba = null" class="btn btn-sm btn-secondary">&times;</button></div>
</div>
<div class="card-body">
<div v-if="aktivniSluzba.akce == 1">
<p>
Cena za metr čtvereční: {{ aktivniSluzba.cenaMetr }} Kč
</p>
<input v-model="posekaniZahrady" class="form-control" type="number" min="1" step="1">
<p>
Výsledná cena: {{ posekaniZahrady * aktivniSluzba.cenaMetr }} Kč
</p>
<p>
<button v-on:click="kosikPosekaniZahrady()" class="btn btn-primary">Do košíku</button>
</p>
</div>
<div v-else-if="aktivniSluzba.akce == 2">
<p>
Zvolte strom
</p>
<select v-model="strom" class="form-select">
<option :value="strom" v-for="strom, i in aktivniSluzba.stromy" :key="i">
{{ strom.nazev }}, {{ strom.cena }} Kč
</option>
</select>
<input v-model="stromPocet" type="number" class="form-control" step="1" min="1">
<p v-if="strom">
Výsledná cena: {{ strom.cena * stromPocet }} Kč
</p>
<p>
<button v-on:click="kosikVysaditStrom()" class="btn btn-primary">Do košíku</button>
</p>
</div>
</div>
</div>
<div v-if="kosik">
<div v-for="item, i in kosik" :key="i">
{{ item.nazev }} <br>
{{ item.polozka }} <br>
{{ item.cena }} Kč <br>
</div>
</div>
</div>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/kosik">Košík</router-link>
</div>
<router-view/>
</template>
<script>
export default {
name: "App",
data: function () {
return {
sluzby: [
{
nazev: "posekání zahrady",
akce: 1,
cenaMetr: 1.5,
},
{
nazev: "vysázení stromu",
akce: 2,
stromy: [
{ nazev: "bříza", cena: 49 },
{ nazev: "dub", cena: 89 },
],
},
{
nazev: "jezírko - čištění",
akce: 3,
cenaKubik: 22,
},
],
aktivniSluzba: null,
posekaniZahrady: 1,
strom: null,
stromPocet: 1,
kosik: [],
};
},
methods: {
kosikPosekaniZahrady: function() {
this.kosik.push({
nazev: this.aktivniSluzba.nazev,
polozka: "počet metrů: " + this.posekaniZahrady,
cena: this.posekaniZahrady * this.aktivniSluzba.cenaMetr,
})
},
kosikVysaditStrom: function() {
this.kosik.push({
nazev: this.aktivniSluzba.nazev,
polozka: "strom: " + this.strom.nazev + ", počet: " + this.stromPocet,
cena: this.strom.cena * this.stromPocet,
})
},
},
};
</script>
<style>
</style>

3
src/main.js
View File

@ -1,4 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).mount('#app')
createApp(App).use(router).mount('#app')

25
src/router/index.js
View File

@ -0,0 +1,25 @@
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/kosik',
name: 'Košík',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Kosik.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

112
src/views/Home.vue
View File

@ -0,0 +1,112 @@
<template>
<div>
<div class="card">
<div class="card-header">Služby</div>
<div class="card-body">
<div class="list-group list-group-flush">
<a v-on:click="aktivniSluzba = sluzba" v-for="sluzba, i in sluzby" :key="i" href="#" class="list-group-item list-group-item-action">{{ sluzba.nazev }}</a>
</div>
</div>
</div>
<div v-if="aktivniSluzba" class="card">
<div class="card-header d-flex justify-content-between">
<div>Možnosti: {{ aktivniSluzba.nazev }}</div>
<div><button v-on:click="aktivniSluzba = null" class="btn btn-sm btn-secondary">&times;</button></div>
</div>
<div class="card-body">
<div v-if="aktivniSluzba.akce == 1">
<p>
Cena za metr čtvereční: {{ aktivniSluzba.cenaMetr }} Kč
</p>
<input v-model="posekaniZahrady" class="form-control" type="number" min="1" step="1">
<p>
Výsledná cena: {{ posekaniZahrady * aktivniSluzba.cenaMetr }} Kč
</p>
<p>
<button v-on:click="kosikPosekaniZahrady()" class="btn btn-primary">Do košíku</button>
</p>
</div>
<div v-else-if="aktivniSluzba.akce == 2">
<p>
Zvolte strom
</p>
<select v-model="strom" class="form-select">
<option :value="strom" v-for="strom, i in aktivniSluzba.stromy" :key="i">
{{ strom.nazev }}, {{ strom.cena }} Kč
</option>
</select>
<input v-model="stromPocet" type="number" class="form-control" step="1" min="1">
<p v-if="strom">
Výsledná cena: {{ strom.cena * stromPocet }} Kč
</p>
<p>
<button v-on:click="kosikVysaditStrom()" class="btn btn-primary">Do košíku</button>
</p>
</div>
</div>
</div>
<div v-if="kosik">
<div v-for="item, i in kosik" :key="i">
{{ item.nazev }} <br>
{{ item.polozka }} <br>
{{ item.cena }} Kč <br>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data: function () {
return {
sluzby: [
{
nazev: "posekání zahrady",
akce: 1,
cenaMetr: 1.5,
},
{
nazev: "vysázení stromu",
akce: 2,
stromy: [
{ nazev: "bříza", cena: 49 },
{ nazev: "dub", cena: 89 },
],
},
{
nazev: "jezírko - čištění",
akce: 3,
cenaKubik: 22,
},
],
aktivniSluzba: null,
posekaniZahrady: 1,
strom: null,
stromPocet: 1,
kosik: [],
};
},
methods: {
kosikPosekaniZahrady: function() {
this.kosik.push({
nazev: this.aktivniSluzba.nazev,
polozka: "počet metrů: " + this.posekaniZahrady,
cena: this.posekaniZahrady * this.aktivniSluzba.cenaMetr,
})
},
kosikVysaditStrom: function() {
this.kosik.push({
nazev: this.aktivniSluzba.nazev,
polozka: "strom: " + this.strom.nazev + ", počet: " + this.stromPocet,
cena: this.strom.cena * this.stromPocet,
})
},
},
};
</script>
<style>
</style>

5
src/views/Kosik.vue
View File

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>Toto je košík</h1>
</div>
</template>
Write Preview
Loading…
Cancel
Save