vit.tlusty
3 years ago
8 changed files with 659 additions and 498 deletions
File diff suppressed because it is too large
@ -1,26 +1,8 @@ |
|||||
<template> |
<template> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import HelloWorld from './components/HelloWorld.vue' |
|
||||
|
|
||||
export default { |
|
||||
name: 'App', |
|
||||
components: { |
|
||||
HelloWorld |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
<router-view/> |
||||
|
</template> |
||||
|
|
||||
<style> |
<style> |
||||
#app { |
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
text-align: center; |
|
||||
color: #2c3e50; |
|
||||
margin-top: 60px; |
|
||||
} |
|
||||
|
|
||||
</style> |
</style> |
||||
|
|||||
@ -1,4 +1,5 @@ |
|||||
import { createApp } from 'vue' |
import { createApp } from 'vue' |
||||
import App from './App.vue' |
import App from './App.vue' |
||||
|
import router from './router' |
||||
|
|
||||
createApp(App).mount('#app') |
|
||||
|
createApp(App).use(router).mount('#app') |
||||
|
|||||
@ -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 |
||||
@ -0,0 +1,152 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="muj-toast" role="alert" aria-live="assertive" aria-atomic="true"> |
||||
|
<div class="d-flex"> |
||||
|
<div v-if="toust" class="toast-body"> |
||||
|
Uspěšně jste přidaly věc do košíku |
||||
|
</div> |
||||
|
<button v-on:click="toust = false" type="button" class="btn-close me-2 m-auto" aria-label="Close"></button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="modal fade" id="kosikModal" tabindex="-1" aria-labelledby="kosikModal" aria-hidden="true"> |
||||
|
<div class="modal-dialog modal-fullscreen"> |
||||
|
<div class="modal-content"> |
||||
|
<div class="modal-header"> |
||||
|
<h5 class="modal-title" id="kosikModal">Košík</h5> |
||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
||||
|
</div> |
||||
|
<div class="modal-body"> |
||||
|
<div v-for="item, i in kosik" :key="i"> |
||||
|
{{ item.nazev }} <br> |
||||
|
{{ item.polozka }} <br> |
||||
|
{{ item.cena }} Kč <br> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="modal-footer"> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</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">×</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> |
||||
|
|
||||
|
|
||||
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target='#kosikModal'>Přejít k placení</button> |
||||
|
|
||||
|
</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: [], |
||||
|
toust: false, |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
kosikPosekaniZahrady: function() { |
||||
|
this.kosik.push({ |
||||
|
nazev: this.aktivniSluzba.nazev, |
||||
|
polozka: "počet metrů: " + this.posekaniZahrady, |
||||
|
cena: this.posekaniZahrady * this.aktivniSluzba.cenaMetr, |
||||
|
}) |
||||
|
this.toust= true |
||||
|
this.aktivniSluzba = null |
||||
|
}, |
||||
|
kosikVysaditStrom: function() { |
||||
|
this.kosik.push({ |
||||
|
nazev: this.aktivniSluzba.nazev, |
||||
|
polozka: "strom: " + this.strom.nazev + ", počet: " + this.stromPocet, |
||||
|
cena: this.strom.cena * this.stromPocet, |
||||
|
}) |
||||
|
this.toust = true |
||||
|
this.aktivniSluzba = null |
||||
|
}, |
||||
|
zavriToast: function () { |
||||
|
this.toust = false |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
toust:function () { |
||||
|
if (this.toust == true){ |
||||
|
setTimeout(this.zavriToast, 3000) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<template> |
||||
|
<div class="about"> |
||||
|
<h1>Toto je košík</h1> |
||||
|
</div> |
||||
|
</template> |
||||
Loading…
Reference in new issue