pokračování

src/App.vue

@@ -15,7 +15,43 @@
         <div><button v-on:click="aktivniSluzba = null" class="btn btn-sm btn-light">&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>
+            Vyberte 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" min="1" step="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 }} <br>
       </div>
     </div>
   </div>
@@ -52,10 +88,40 @@ export default {
           akce: 4,
           cenaObjem: 250
         },
+         {
+          nazev: "Udržování záhonů",
+          akce: 5,
+          cenaMetrctverecni: 100,
+        },
+         {
+          nazev: "Omlazování stromů",
+          akce: 6,
+          cenaStrom: 200
+        },
       ],
       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>