flaschengeist-frontend/src/components/baruser/CreditLists.vue

<template>
    <div>
        <div v-for="user in users" :key="users.indexOf(user)">
            <v-container>
                <v-card>
                    <v-list-item>
                        <v-list-item-title class="title">{{user.firstname}} {{user.lastname}}</v-list-item-title>
                    </v-list-item>
                    <v-card-text>
                        <v-row>
                            <v-col cols="10">
                                <v-row>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 200)"
                                               :color="color" :disabled="user.locked">2 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 100)"
                                               :color="color" :disabled="user.locked">1 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 50)"
                                               :color="color" :disabled="user.locked">
                                            0,50 €
                                        </v-btn>
                                    </v-col>
                                </v-row>
                                <v-row>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 40)"
                                               :color="color" :disabled="user.locked">
                                            0,40 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 20)"
                                               :color="color" :disabled="user.locked">
                                            0,20 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 10)"
                                               :color="color" :disabled="user.locked">
                                            0,10 €
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-col>
                            <v-col align-self="center">
                                <v-row>
                                    <v-list-item>
                                        <v-list-item-action-text :class="getColor(user.type)">
                                            {{(user.amount/100).toFixed(2)}} €
                                        </v-list-item-action-text>
                                    </v-list-item>
                                </v-row>
                            </v-col>
                        </v-row>
                        <v-alert v-if="user.locked" type="error">Gesperrt</v-alert>
                    </v-card-text>
                </v-card>
            </v-container>
        </div>
    </div>
</template>

<script>

    export default {
        name: "CreditLists",
        props: {
            users: Array
        },
        data () {
            return {
                color: 'green accent-4'
            }
        },
        created() {
            // eslint-disable-next-line no-console
            console.log(this.users)
        },
        methods: {
            addAmount(username, amount) {
                this.$emit("add:amount", username, amount)
            },
            getColor(type) {
                return type === 'credit' ? 'title green--text' : 'title red--text'
            }

        },
        computed: {

        }
    }
</script>

<style scoped>
    .creditBtn {
        margin: 2px;
    }
</style>