From da80f5598f08e03181c45cab5145ab7fbd97b9f6 Mon Sep 17 00:00:00 2001
From: dspwithaheart <aayush1312@live.com>
Date: Thu, 14 May 2020 00:28:01 +0200
Subject: [PATCH] Added Einkaufszettel

---
 src/App.vue               |  93 ++++++++++++++++++--------------
 src/components/Dialog.vue | 108 ++++++++++++++++++++++++++++++++++++++
 src/store/index.js        |  20 +++++++
 src/views/About.vue       |   4 +-
 src/views/Home.vue        |  97 ++++++++++++++++++++++++++++++----
 5 files changed, 270 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Dialog.vue

diff --git a/src/App.vue b/src/App.vue
index 5fd3823..ee4d3e9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,7 +72,7 @@
             :to="item.href"
           >
             <v-list-item-action>
-              <v-icon @click.stop="fuckOff">{{ item.icon }}</v-icon>
+              <v-icon >{{ item.icon }}</v-icon>
             </v-list-item-action>
             <v-list-item-content>
               <v-list-item-title>
@@ -91,12 +91,12 @@
       dark
     >
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
-      <!-- <v-toolbar-title
+      <v-toolbar-title
         style="width: 300px"
         class="ml-0 pl-4"
       >
-        <span class="hidden-sm-and-down">Google Contacts</span>
-      </v-toolbar-title> -->
+        <span >Bio Einkauszettel</span>
+      </v-toolbar-title>
       
       <!-- <v-spacer></v-spacer>
       <v-btn icon>
@@ -130,14 +130,29 @@
                 </v-row>
             </v-container>
     </v-content>
+    <v-btn
+      bottom
+      color="pink"
+      dark
+      fab
+      fixed
+      right
+      @click="addItems"
+    >
+      <v-icon>mdi-plus</v-icon>
+    </v-btn>
+
+    <Dialog/>
+
+
   </v-app>
 </template>
 
 <script>
-// import HelloWorld from './components/HelloWorld.vue'
+import Dialog from './components/Dialog.vue'
   export default {
     components: {
-      // HelloWorld
+      Dialog
     },
     props: {
       source: String,
@@ -145,7 +160,7 @@
     data: () => ({
       // App Drawer properties
       dialog: false,
-      drawer: null,
+      drawer: false,
       right: false,
       permanent: false,
       miniVariant: false,
@@ -154,36 +169,36 @@
       absolute: false,
       // Items in the App Drawer
       items: [
-        { icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' },
-        { icon: 'mdi-history', text: 'Frequently contacted' },
-        { icon: 'mdi-content-copy', text: 'Duplicates' },
-        {
-          icon: 'mdi-chevron-up',
-          'icon-alt': 'mdi-chevron-down',
-          text: 'Labels',
-          model: true,
-          children: [
-            { icon: 'mdi-plus', text: 'Create label' },
-          ],
-        },
-        {
-          icon: 'mdi-chevron-up',
-          'icon-alt': 'mdi-chevron-down',
-          text: 'More',
-          model: false,
-          children: [
-            { text: 'Import' },
-            { text: 'Export' },
-            { text: 'Print' },
-            { text: 'Undo changes' },
-            { text: 'Other contacts' },
-          ],
-        },
-        { icon: 'mdi-settings', text: 'Settings' },
-        { icon: 'mdi-message', text: 'Send feedback' },
-        { icon: 'mdi-help-circle', text: 'Help' },
-        { icon: 'mdi-cellphone-link', text: 'App downloads' },
-        { icon: 'mdi-keyboard', text: 'Go to the old version' },
+        // { icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' },
+        // { icon: 'mdi-history', text: 'Frequently contacted' },
+        // { icon: 'mdi-content-copy', text: 'Duplicates' },
+        // {
+        //   icon: 'mdi-chevron-up',
+        //   'icon-alt': 'mdi-chevron-down',
+        //   text: 'Labels',
+        //   model: true,
+        //   children: [
+        //     { icon: 'mdi-plus', text: 'Create label' },
+        //   ],
+        // },
+        // {
+        //   icon: 'mdi-chevron-up',
+        //   'icon-alt': 'mdi-chevron-down',
+        //   text: 'More',
+        //   model: false,
+        //   children: [
+        //     { text: 'Import' },
+        //     { text: 'Export' },
+        //     { text: 'Print' },
+        //     { text: 'Undo changes' },
+        //     { text: 'Other contacts' },
+        //   ],
+        // },
+        // { icon: 'mdi-settings', text: 'Settings' },
+        // { icon: 'mdi-message', text: 'Send feedback' },
+        // { icon: 'mdi-help-circle', text: 'Help' },
+        // { icon: 'mdi-cellphone-link', text: 'App downloads' },
+        // { icon: 'mdi-keyboard', text: 'Go to the old version' },
       ],
     }),
     computed: {
@@ -192,8 +207,8 @@
       },
     },
     methods: {
-      fuckOff() {
-        alert('fuckOff')
+      addItems() {
+        this.$store.state.dialog = !this.$store.state.dialog 
       },
       toggleTheme() {
         this.$vuetify.theme.dark = !this.$vuetify.theme.dark;      
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
new file mode 100644
index 0000000..2dfe6c5
--- /dev/null
+++ b/src/components/Dialog.vue
@@ -0,0 +1,108 @@
+<template>
+    <v-dialog
+      v-model="dialog"
+      width="400px"
+    >
+      <v-card>
+        <v-card-title class="grey darken-2">
+          Add Item
+        </v-card-title>
+        <v-container>
+          <v-row class="mx-2">
+            <v-col
+              class="align-center justify-space-between"
+              cols="12"
+            >
+              <v-row
+                align="center"
+                class="mr-0"
+              >
+                
+              </v-row>
+            </v-col>            
+            <v-col cols="12">
+              <v-text-field
+                v-model="title"
+                prepend-icon="mdi-pizza"
+                placeholder="Item"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12">
+              <v-text-field
+                v-model="amount"
+                prepend-icon="mdi-hamburger"
+                placeholder="Amount"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12">
+              <v-text-field
+                v-model="src"
+                prepend-icon="mdi-image"
+                placeholder="Image"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+        </v-container>
+        <v-card-actions align="center">
+          <v-spacer></v-spacer>
+          <v-btn
+            x-large
+            color="error"
+            @click="cancel"
+          >Cancel</v-btn>
+          
+          <v-btn
+            x-large
+            color="primary"
+            @click="addItem"
+          >Add</v-btn>
+          
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'Dialog',
+    computed: {
+      dialog () {
+        return this.$store.state.dialog
+      }
+    },
+    data: () => ({
+      src: '',
+      title: '',
+      amount: '',
+      // count: this.$store.state.count,
+      // items: store.state.items,
+      // items: [
+      //   {
+      //     color: '#1F7087',
+      //     src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
+      //     title: 'Supermodel',
+      //     artist: 'Foster the People',
+      //   },
+      //   {
+      //     color: '#952175',
+      //     src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png',
+      //     title: 'Halcyon Days',
+      //     artist: 'Ellie Goulding',
+      //   },
+      // ],
+    }),
+    methods: {
+      addItem() {
+        var item = {
+          src: this.src,
+          title: this.title,
+          amount: this.amount,
+        }
+        this.$store.commit('appendItem', item)
+      },
+      cancel() {
+        this.$store.state.dialog = false
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 332b916..2b15556 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,8 +5,28 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    dialog: false,
+    items: [
+      {
+        src: 'https://images-na.ssl-images-amazon.com/images/I/81Dl5GdAVkL.png',
+        title: 'Apple',
+        amount: '1',
+      },
+      {
+        src: 'https://5.imimg.com/data5/PW/ND/MY-46595757/fresh-pineapple-281kg-29-500x500.png',
+        title: 'Pineapple',
+        amount: '2',
+      },
+      { "src": "https://www.thermofisher.com/blog/food/wp-content/uploads/sites/5/2015/08/single_strawberry__isolated_on_a_white_background.jpg", 
+      "title": "Strawberry", 
+      "amount": "5"
+      }
+    ]
   },
   mutations: {
+    appendItem(store, item) {
+      store.items.push(item)
+    }
   },
   actions: {
   },
diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa2807..b7b18b1 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,3 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+      <iframe frameborder="0" style="width:100%;height:100%" src="https://vuetifyjs.com"></iframe>
 </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7879429..b52ca9b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,17 +1,94 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-  </div>
+  <v-container>
+    <v-row dense>
+      <v-col v-for="(item, i) in items" :key="i" cols="12">
+        <v-card class="mx-auto my-12" max-width="500">
+          <div class="d-flex flex-no-wrap justify-space-between">
+            <div>
+              <v-card-title class="headline" v-text="item.title"></v-card-title>
+
+              <v-card-subtitle v-text="item.amount"></v-card-subtitle>
+              <v-btn class="mx-2" fab dark small color="pink" @click="increment">
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+              <v-btn class="mx-2" fab dark  small color="pink" @click="decreament">
+                <v-icon>mdi-minus</v-icon>
+              </v-btn>
+            </div>
+            <v-avatar class="ma-3" size="125" tile>
+              <v-img :src="item.src"></v-img>
+            </v-avatar>
+          </div>
+          <!-- Nutrion Distribution
+          <v-sparkline
+              :labels="labels"
+              :fill="fill"
+              :gradient="gradient"
+              :line-width="width"
+              :padding="padding"
+              :smooth="radius || false"
+              :value="value"
+              auto-draw
+              style="top: -10px; position:relative"
+          ></v-sparkline>-->
+          <v-divider class="mx-4"></v-divider>
+          <v-card-actions>
+            <v-btn color="deep-purple lighten-2" text @click="reserve">Edit</v-btn>
+            <v-btn color="deep-purple lighten-2" text @click="reserve">Remove</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+    <!-- //###################################################################################################### -->
+  </v-container>
 </template>
 
 <script>
-// @ is an alias to /src
-// import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
-  name: 'Home',
-  components: {
-    // HelloWorld
+  name: "Home",
+  computed: {
+    items() {
+      return this.$store.state.items;
+    }
+  },
+  data: () => ({
+    gradients: [
+      ["#222"],
+      ["#42b3f4"],
+      ["red", "orange", "yellow"],
+      ["purple", "violet"],
+      ["#00c6ff", "#F0F", "#FF0"],
+      ["#f72047", "#ffd200", "#1feaea"]
+    ],
+    fill: false,
+    gradient: ["#00c6ff", "#F0F", "#FF0"],
+    radius: 5,
+    labels: [" ", "Protein", "Fat", "Carbohydrate", "Water", "Vitamins"],
+    value: [200, 675, 410, 390, 310, 460]
+    // count: this.$store.state.count,
+    // items: store.state.items,
+    // items: [
+    //   {
+    //     color: '#1F7087',
+    //     src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
+    //     title: 'Supermodel',
+    //     artist: 'Foster the People',
+    //   },
+    //   {
+    //     color: '#952175',
+    //     src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png',
+    //     title: 'Halcyon Days',
+    //     artist: 'Ellie Goulding',
+    //   },
+    // ],
+  }),
+  methods: {
+    increament() {
+       this.$store.commit('increament')
+    },
+    decreament() {
+      this.$store.commit('decreament')
+    }
   }
-}
+};
 </script>