košík

src/App.vue

@@ -11,11 +11,47 @@
 
         <div v-if="aktivniSluzba" class="card">
             <div class="card-header d-flex justify-content-between">
-                <div>Možnosti - {{ aktivniSluzba.nazev }}</div>
+                <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>
@@ -47,8 +83,28 @@ export default {
                 },
             ],
             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>