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> |
|||
<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> |
|||
#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> |
|||
|
|||
@ -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') |
|||
|
|||
@ -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