From e59429ddd63cfd56d1f909811d066ea18d4cec30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sat, 21 Dec 2019 12:22:21 +0100
Subject: [PATCH] design baruser

---
 src/components/baruser/CreditLists.vue | 121 ++++++++++++++++---------
 src/plugins/restService.js             |   6 ++
 src/views/BarView.vue                  |  36 +++++++-
 3 files changed, 116 insertions(+), 47 deletions(-)

diff --git a/src/components/baruser/CreditLists.vue b/src/components/baruser/CreditLists.vue
index 13c6980..795ee0a 100644
--- a/src/components/baruser/CreditLists.vue
+++ b/src/components/baruser/CreditLists.vue
@@ -1,55 +1,90 @@
 <template>
     <v-content>
         <v-container>
-        <v-card raised shaped>
-            <v-container>
-            <v-row>
-            <v-col align-self="center">
-                <v-container>
-                    <v-btn>Col 1</v-btn>
-                </v-container>
-            </v-col>
-            <v-row>
-                <v-col>
-                    <v-row>
-                        <v-container>
-                        <v-btn>Col 2.1.1</v-btn>
-                        </v-container>
-                    </v-row>
-                    <v-row>
-                        <v-container>
-                            <v-btn>Col 2.1.2</v-btn>
-                        </v-container>
-                    </v-row>
-                </v-col>
-                <v-col>
-                    <v-row>
-                        <v-btn>Col 2.2.1</v-btn>
-                    </v-row>
-                    <v-row>
-                        <v-btn>Col 2.2.2</v-btn>
-                    </v-row>
-                </v-col>
-                <v-col>
-                    <v-row>
-                        <v-btn>Col 2.3.1</v-btn>
-                    </v-row>
-                    <v-row>
-                        <v-btn>Col 2.3.2</v-btn>
-                    </v-row>
-                </v-col>
-            </v-row>
-            <v-col><v-btn>Col 3</v-btn></v-col>
-            </v-row>
-            </v-container>
-        </v-card>
+            <v-card v-for="user in users" :key="user.id" raised shaped>
+
+                <v-list-item three-line>
+                    <v-list-item-content>
+                        <v-list-item-title class="title">{{user.firstname}} {{user.lastname}}</v-list-item-title>
+                        <v-row>
+                            <v-spacer/>
+                            <v-row>
+                                <v-col>
+                                    <v-container>
+                                        <v-row>
+                                            <v-container>
+                                                <v-btn @click="addAmount(user.username, 200)" :color="color">2 €</v-btn>
+                                            </v-container>
+                                        </v-row>
+                                        <v-row>
+                                            <v-container>
+                                                <v-btn @click="addAmount(user.username, 100)" :color="color">1 €</v-btn>
+                                            </v-container>
+                                        </v-row>
+                                    </v-container>
+                                </v-col>
+                                <v-col>
+                                    <v-container>
+                                        <v-row>
+                                            <v-container>
+                                                <v-btn @click="addAmount(user.username, 50)" :color="color">0,50 €</v-btn>
+                                            </v-container>
+                                        </v-row>
+                                        <v-row>
+                                            <v-container>
+                                                <v-btn @click="addAmount(user.username, 40)" :color="color">0,40 €</v-btn>
+                                            </v-container>
+                                        </v-row>
+                                    </v-container>
+                                </v-col>
+                                <v-col>
+                                    <v-container>
+                                        <v-row>
+                                            <v-container>
+                                                <v-btn @click="addAmount(user.username, 20)" :color="color">0,20 €</v-btn>
+                                            </v-container>
+                                        </v-row>
+                                        <v-row>
+                                            <v-container>
+                                                <v-btn @click="addAmount(user.username, 10)" :color="color">0,10 €</v-btn>
+                                            </v-container>
+                                        </v-row>
+                                    </v-container>
+                                </v-col>
+                            </v-row>
+                            <v-col align-self="center">
+                                <v-container>
+                                    <v-row>
+                                        <v-container>
+                                            <v-list-item-action-text class="title">{{(user.amount/100).toFixed(2)}} €</v-list-item-action-text>
+                                        </v-container>
+                                    </v-row>
+                                </v-container>
+                            </v-col>
+                        </v-row>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-card>
         </v-container>
     </v-content>
 </template>
 
 <script>
     export default {
-        name: "CreditLists"
+        name: "CreditLists",
+        props: {
+            users: Array
+        },
+        data () {
+            return {
+                color: 'green accent-4'
+            }
+        },
+        methods: {
+            addAmount(username, amount) {
+                this.$emit("add:amount", username, amount)
+            }
+        }
     }
 </script>
 
diff --git a/src/plugins/restService.js b/src/plugins/restService.js
index f66b65e..15a1e01 100644
--- a/src/plugins/restService.js
+++ b/src/plugins/restService.js
@@ -11,6 +11,12 @@ class Service {
     login(loginData) {
         return axios.post(this.url+'login', {...loginData})
     }
+    getUserBar(token) {
+        return axios.get(this.url+'bar', {headers: {Token: token}})
+    }
+    addAmountBar(token, data) {
+        return axios.post(this.url+'baradd', ...data, {headers: {Token: token}})
+    }
 }
 
 const httpClient = new Service("http://192.168.5.118:5000/")
diff --git a/src/views/BarView.vue b/src/views/BarView.vue
index deb8c9b..a9cf34c 100644
--- a/src/views/BarView.vue
+++ b/src/views/BarView.vue
@@ -1,33 +1,61 @@
 <template>
     <div>
         <TitleBar/>
-        <CreditLists></CreditLists>
+        <CreditLists v-bind:users="users" @add:amount="addAmount"></CreditLists>
     </div>
 </template>
 
 <script>
     import TitleBar from "@/components/TitleBar";
-    import axios from 'axios'
     import CreditLists from "@/components/baruser/CreditLists";
+    import httpClient from "../plugins/restService";
+    import axios from "axios";
     export default {
         name: "BarView",
         components: {CreditLists, TitleBar},
         created() {
             this.getUser()
         },
+        data () {
+            return {
+                users: []
+            }
+        },
         methods: {
             getUser() {
                 // eslint-disable-next-line no-console
-                console.log(this.$store.getters.getToken)
-                axios.get("http://localhost:5000/bar", {headers: {Token: this.$store.getters.getToken}})
+                httpClient.getUserBar(this.$store.getters.getToken)
                 .then(response => {
                     // eslint-disable-next-line no-console
                     console.log(response.data)
+                    for (let user in response.data) {
+                        const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
+                        this.users.push({
+                            id: lastId + 1,
+                            username: response.data[user].username,
+                            firstname: response.data[user].firstname,
+                            lastname: response.data[user].lastname,
+                            amount: response.data[user].amount
+                        })
+                    }
                 })
                 .catch(error => {
                     // eslint-disable-next-line no-console
                     console.log(error)
+                    this.users = []
                 })
+            },
+            addAmount(username, amount) {
+                axios.post('http://192.168.5.118:5000/baradd', {userId: username, amount: amount}, {headers: {Token: this.$store.getters.getToken}})
+                //httpClient.addAmountBar(this.$store.getters.getToken, {username: username, amount: amount})
+                /*.then(response => {
+                    // eslint-disable-next-line no-console
+                    console.log("responsedata: ", response.data)
+                })
+                .catch(error => {
+                    // eslint-disable-next-line no-console
+                    console.log("error: ", error.response.data.error)
+                })*/
             }
         }
     }