košík a toast

public/index.html

@@ -13,6 +13,7 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

@@ -1,8 +1,4 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/kosik">Košík</router-link>
-  </div>
   <router-view/>
 </template>
 

src/views/Home.vue

@@ -1,5 +1,33 @@
 <template>
     <div>
+        <div class="modal fade" id="kosikModal" tabindex="-1" aria-labelledby="kosikModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-fullscreen">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="kosikModalLabel">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">
+                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Přejít k platbě</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="toast" class="muj-toast alert alert-info">
+            <div class="d-flex">
+                <div class="toast-body">
+                    Hello, world! This is a toast message.
+                </div>
+                <button v-on:click="toast = false" type="button" class="btn-close me-2 m-auto" aria-label="Close"></button>
+            </div>
+        </div>
         <div class="card">
             <div class="card-header">Služby</div>
             <div class="card-body">
@@ -47,13 +75,9 @@
             </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>
+        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kosikModal">
+            Přejít do košíku
+        </button>
     </div>
 </template>
 
@@ -87,6 +111,7 @@ export default {
             strom: null,
             stromPocet: 1,
             kosik: [],
+            toast: false,
         };
     },
     methods: {
@@ -96,6 +121,8 @@ export default {
                 polozka: "počet metrů: " + this.posekaniZahrady,
                 cena: this.posekaniZahrady * this.aktivniSluzba.cenaMetr,
             })
+            this.toast = true
+            this.aktivniSluzba = null
         },
         kosikVysaditStrom: function() {
             this.kosik.push({
@@ -103,8 +130,20 @@ export default {
                 polozka: "strom: " + this.strom.nazev + ", počet: " + this.stromPocet,
                 cena: this.strom.cena * this.stromPocet,
             })
+            this.toast = true
+            this.aktivniSluzba = null
         },
+        zavritToast: function() {
+            this.toast = false
+        }
     },
+    watch: {
+        toast: function() {
+            if (this.toast == true) {
+                setTimeout(this.zavritToast, 3000)
+            }
+        },
+    }
 };
 </script>