From fa923d2f0ac5e613b5b0525a29aaab09a06b75ff Mon Sep 17 00:00:00 2001
From: "jmeno.prijmeni" <jmeno.prijmeni@odbornaskola.cz>
Date: Wed, 29 Sep 2021 09:38:02 +0200
Subject: [PATCH] =?UTF-8?q?ko=C5=A1=C3=ADk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jsconfig.json |  5 +++++
 src/App.vue   | 40 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 jsconfig.json

diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..1e4efe0
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,5 @@
+{
+    "include": [
+        "./src/**/*"
+    ]
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index b6f8afd..9a1016f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,10 +12,19 @@
       </div>
     </div>
     
-    <div v-for="obj, i in seznam" :key="i">
-      {{ obj.popisek }}
+    <p class="cena">
+      Celková cena: {{ cena }} Kč
+    </p>
+    <p>
+      <button v-on:click="seznam = []">vyprázdnit košík</button>
+    </p>
+
+    <div v-for="obj, i in seznam" :key="i" class="seznam-grid">
+      <div><img :src="obj.obrazek" alt=""></div>
+      <div>{{ obj.popisek }}</div>
+      <div>{{ obj.cena }},-</div>
+      <div><button>odebrat</button></div>
     </div>
-    
   </div>
 </template>
 
@@ -25,7 +34,6 @@ export default {
   name: 'App',
   data: () => {
     return {
-      stav: false,
       menu: [
         {
           obrazek: "/img/caj.jpg",
@@ -75,6 +83,15 @@ export default {
     sirka: function() {
       return this.menu.length * 240 + this.menu.length * 10 + this.menu.length * 2
     },
+    cena: function() {
+      let celkem = 0
+      for (let index = 0; index < this.seznam.length; index++) {
+        const element = this.seznam[index];
+        celkem += element.cena
+      }
+
+      return celkem
+    },
   },
 }
 </script>
@@ -107,4 +124,19 @@ export default {
     width: 50%;
     overflow-x: scroll;
   }
+
+  .seznam-grid {
+    width: 30%;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 2fr 3fr 1fr 1fr;
+  }
+
+  .seznam-grid div {
+    align-self: center;
+  }
+
+  .seznam-grid img {
+    width: 100%;
+  }
 </style>