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

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

@ -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>

6
src/plugins/restService.js
View File

@ -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/")

36
src/views/BarView.vue
View File

@ -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)
})*/
}
}
}