Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

design baruser

This commit is contained in:
Tim Gröger 2019-12-21 12:22:21 +01:00
parent d53f17ef3b
commit e59429ddd6
3 changed files with 116 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/baruser/CreditLists.vue
View File

@ -1,47 +1,69 @@
<template> <template>
<v-content> <v-content>
<v-container> <v-container>
<v-card raised shaped> <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-container>
<v-row> <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-col align-self="center">
<v-container> <v-container>
<v-btn>Col 1</v-btn>
</v-container>
</v-col>
<v-row>
<v-col>
<v-row> <v-row>
<v-container> <v-container>
<v-btn>Col 2.1.1</v-btn> <v-list-item-action-text class="title">{{(user.amount/100).toFixed(2)}} €</v-list-item-action-text>
</v-container> </v-container>
</v-row> </v-row>
<v-row>
<v-container>
<v-btn>Col 2.1.2</v-btn>
</v-container> </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-col>
</v-row> </v-row>
<v-col><v-btn>Col 3</v-btn></v-col> </v-list-item-content>
</v-row> </v-list-item>
</v-container>
</v-card> </v-card>
</v-container> </v-container>
</v-content> </v-content>
@ -49,7 +71,20 @@
<script> <script>
export default { 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> </script>

6
src/plugins/restService.js
View File

@ -11,6 +11,12 @@ class Service {
login(loginData) { login(loginData) {
return axios.post(this.url+'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/") const httpClient = new Service("http://192.168.5.118:5000/")

36
src/views/BarView.vue
View File

@ -1,33 +1,61 @@
<template> <template>
<div> <div>
<TitleBar/> <TitleBar/>
<CreditLists></CreditLists> <CreditLists v-bind:users="users" @add:amount="addAmount"></CreditLists>
</div> </div>
</template> </template>
<script> <script>
import TitleBar from "@/components/TitleBar"; import TitleBar from "@/components/TitleBar";
import axios from 'axios'
import CreditLists from "@/components/baruser/CreditLists"; import CreditLists from "@/components/baruser/CreditLists";
import httpClient from "../plugins/restService";
import axios from "axios";
export default { export default {
name: "BarView", name: "BarView",
components: {CreditLists, TitleBar}, components: {CreditLists, TitleBar},
created() { created() {
this.getUser() this.getUser()
}, },
data () {
return {
users: []
}
},
methods: { methods: {
getUser() { getUser() {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(this.$store.getters.getToken) httpClient.getUserBar(this.$store.getters.getToken)
axios.get("http://localhost:5000/bar", {headers: {Token: this.$store.getters.getToken}})
.then(response => { .then(response => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(response.data) 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 => { .catch(error => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(error) 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)
})*/
} }
} }
} }