<template>
<v-container>
<v-dialog v-model="checkValidate" max-width="290">
<v-card>
<v-card-title>
Willst du wirklich??
</v-card-title>
<v-card-text v-if="stornoMessage">
Willst du wirklich den Betrag
{{ (stornoMessage.amount / 100).toFixed(2) }}€ von
{{ stornoMessage.user.firstname }}
{{ stornoMessage.user.lastname }} stornieren?
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn text @click="cancelStorno">Abbrechen</v-btn>
<v-btn text @click="acceptStorno">Stornieren</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline"
>Transaktion ist länger als 15 Sekunden her!</v-card-title
>
<v-card-text>
Da die Transaktion länger als 15 Sekunden her ist, kann eine
Stornierung nicht durchgeführt werden. Wende dich bitte an den
Finanzer.
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn text @click="dialog = false">
Verstanden
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-if="overLimitUser"
v-model="overLimitUser"
max-width="290"
persistent
>
<v-card>
<v-card-title>Warnung</v-card-title>
<v-card-text>
{{ overLimitUser.firstname }} {{ overLimitUser.lastname }} übersteigt
das Anschreibelimit von
{{ (overLimitUser.limit / 100).toFixed(2) }} €. Danach kann dieses
Mitglied nichts mehr anschreiben. Will er das wirklich?
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn text @click="cancel()">Abbrechen</v-btn>
<v-btn text @click="continueAdd(overLimitUser)">Anschreiben</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-if="overOverLimit" v-model="overOverLimit" max-width="290" persistent>
<v-card>
<v-card-title>Anschreiben nicht möglich</v-card-title>
<v-card-text>
{{ overOverLimit.firstname }}
{{ overOverLimit.lastname }} überschreitet das Anschreibelimit zuviel.
Das Anschreiben wurde daher gestoppt und zurückgesetzt.
</v-card-text>
<v-card-actions>
<v-btn text @click="overOverLimit = null">Verstanden</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<AddAmountSkeleton v-if="loading" />
<v-navigation-drawer v-model="menu" right app clipped>
<v-list-item-group :key="componentRenderer">
<v-list-item inactive>
<v-list-item-title class="headline">
Verlauf
</v-list-item-title>
</v-list-item>
<v-divider />
<div
v-for="message in messages"
three-line
:key="messages.indexOf(message)"
>
<div v-if="message">
<v-list-item three-line inactive @click="storno(message)">
<v-list-item-content>
<v-progress-linear indeterminate v-if="message.loading" />
<v-list-item-title>{{ now(message.date) }}</v-list-item-title>
<v-list-item-subtitle>
{{ createSum(message) }} {{ createMessage(message) }}
</v-list-item-subtitle>
<v-list-item-subtitle class="red--text" v-if="message.storno"
>STORNIERT!!!
</v-list-item-subtitle>
<v-list-item-subtitle class="red--text" v-else-if="message.error">
ERROR!
</v-list-item-subtitle>
<v-list-item-action-text v-if="under5minutes(message.date) && !message.error"
>Klicken um zu Stornieren
</v-list-item-action-text>
</v-list-item-content>
</v-list-item>
</div>
</div>
</v-list-item-group>
</v-navigation-drawer>
<v-card v-if="!loading" :loading="addLoading">
<v-card-title>
{{ user.firstname }} {{ user.lastname }}
<v-spacer />
<v-btn @click="menu = !menu" icon>
<v-icon>{{ menuIcon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-subtitle v-if="user.limit + getAllSum() > 0">
Nur noch {{ ((user.limit + getAllSum()) / 100).toFixed(2) }} €
übrig!!
</v-card-subtitle>
<v-card-text>
<v-row>
<v-col cols="10">
<v-row>
<v-col cols="6" sm="4">
<v-btn
class="creditBtn"
block
@click="addingAmount(200)"
:color="color"
:disabled="user.locked"
>2 €</v-btn
>
</v-col>
<v-col cols="6" sm="4">
<v-btn
class="creditBtn"
block
@click="addingAmount(100)"
:color="color"
:disabled="user.locked"
>1 €</v-btn
>
</v-col>
<v-col cols="6" sm="4">
<v-btn
class="creditBtn"
block
@click="addingAmount(50)"
:color="color"
:disabled="user.locked"
>0,50 €</v-btn
>
</v-col>
<v-col cols="6" sm="4">
<v-btn
class="creditBtn"
block
@click="addingAmount(40)"
:color="color"
:disabled="user.locked"
>0,40 €</v-btn
>
</v-col>
<v-col cols="6" sm="4">
<v-btn
class="creditBtn"
block
@click="addingAmount(20)"
:color="color"
:disabled="user.locked"
>0,20 €</v-btn
>
</v-col>
<v-col cols="6" sm="4">
<v-btn
class="creditBtn"
block
@click="addingAmount(10)"
:color="color"
:disabled="user.locked"
>0,10 €</v-btn
>
</v-col>
<v-col cols="8">
<v-text-field
outlined
type="number"
v-model="value"
label="Benutzerdefinierter Betrag"
:disabled="user.locked"
></v-text-field>
</v-col>
<v-col cols="4">
<v-btn
fab
:color="color"
@click="addAmountMore()"
:disabled="user.locked"
>
<v-icon>{{ plus }}</v-icon>
</v-btn>
</v-col>
</v-row>
</v-col>
<v-col align-self="center">
<v-row>
<v-list-item>
<v-list-item-content class="text-center">
<v-list-item-action-text :class="getColor(getAllSum())"
>{{ (getAllSum() / 100).toFixed(2) }}
€
</v-list-item-action-text>
<v-list-item-action-text v-if="toSetAmount">
- {{ (toSetAmount / 100).toFixed(2) }}
</v-list-item-action-text>
</v-list-item-content>
</v-list-item>
</v-row>
</v-col>
</v-row>
<v-alert v-if="user.locked" type="error"
>{{ user.firstname }} darf nicht mehr anschreiben.
{{ user.firstname }} sollte sich lieber mal beim Finanzer
melden.</v-alert
>
</v-card-text>
</v-card>
<v-snackbar
v-for="message in messages"
:key="messages.indexOf(message)"
:color="message.error ? 'error' : 'success'"
bottom
:timeout="0"
:multi-line="true"
v-model="message.visible"
vertical
>
<div class="title">
<p style="font-size: 5em; margin: 20px">{{ createSum(message) }}</p>
{{ createMessage(message) }}
</div>
<div>
{{ now(message.date) }}
</div>
<v-btn color="white" icon @click="message.visible = false">
<v-icon>
{{ close }}
</v-icon>
</v-btn>
</v-snackbar>
<ConnectionError/>
</v-container>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { mdiMenu, mdiPlus, mdiClose } from '@mdi/js'
import AddAmountSkeleton from './Skeleton/AddAmountSkeleton'
import ConnectionError from "@/components/ConnectionError";
export default {
name: 'AddAmount',
components: {ConnectionError, AddAmountSkeleton },
data() {
return {
color: 'green accent-4',
value: null,
plus: mdiPlus,
menu: false,
dialog: false,
componentRenderer: 0,
timer: '',
menuIcon: mdiMenu,
close: mdiClose,
checkValidate: false,
stornoMessage: null,
timeout: null,
toSetAmount: null,
overLimitUser: null,
overOverLimit: null,
}
},
created() {
this.timer = setInterval(this.forceRender, 1000)
},
methods: {
...mapActions({
addAmount: 'user/addAmount',
commitStorno: 'user/storno'
}),
continueAdd(user) {
this.overLimitUser = null
user.checkedOverLimit = true
if (this.value) {
this.addAmount(Math.round(Math.abs(this.value * 100)))
setTimeout(() => {
this.value = null
this.toSetAmount = null
}, 300)
} else {
user.timeout = setTimeout(() => {
this.addAmount(this.toSetAmount)
setTimeout(() => {
this.toSetAmount = null
}, 300)
}, 2000)
}
},
cancel() {
this.toSetAmount = null
this.value = null
this.overLimitUser = null
},
checkOverLimitIsValid(user) {
if (this.toSetAmount) {
if (Math.abs(this.getAllSum() - Number.parseInt(this.toSetAmount)) > user.limit + 500) {
this.overOverLimit = user
this.toSetAmount = null
this.value = null
return false
}
}
return true
},
checkOverLimit(user) {
if (this.toSetAmount) {
if (Math.abs( this.getAllSum() - this.toSetAmount) > user.limit) {
return user.checkedOverLimit ? false : true
}
}
return false
},
addingAmount(amount) {
clearTimeout(this.timeout)
this.toSetAmount = this.toSetAmount ? this.toSetAmount + amount : amount
if (this.checkOverLimitIsValid(this.user)) {
if (this.checkOverLimit(this.user)) {
this.overLimitUser = this.user
} else {
this.timeout = setTimeout(() => {
this.addAmount(this.toSetAmount)
setTimeout(() => {
this.toSetAmount = null
}, 300)
}, 2000)
}
}
},
forceRender() {
this.componentRenderer += 1
},
getColor(value) {
return value >= 0 ? 'title green--text' : 'title red--text'
},
getAllSum() {
if (this.user)
return (
this.user.creditList[this.year][2].sum +
this.user.creditList[this.year][1].last
)
return 0
},
storno(message) {
if (!message.error) {
if (!this.under5minutes(message.date)) this.dialog = true
else {
this.checkValidate = true
this.stornoMessage = message
}
}
},
acceptStorno() {
this.commitStorno({
amount: this.stornoMessage.amount,
date: this.stornoMessage.date
})
setTimeout(() => {
this.cancelStorno()
}, 300)
},
cancelStorno() {
this.stornoMessage = null
this.checkValidate = null
},
addAmountMore() {
this.toSetAmount = this.toSetAmount
? this.toSetAmount + Math.round(Math.abs(this.value * 100))
: Math.round(Math.abs(this.value * 100))
if (this.checkOverLimitIsValid(this.user)) {
if (this.checkOverLimit(this.user)) {
this.overLimitUser = this.user
}
else {
this.addAmount(Math.abs(this.value * 100))
setTimeout(() => {
this.value = null
}, 300)
}
}
},
createSum(message) {
var text = '' + (message.amount / 100).toFixed(2) + '€'
return text
},
createMessage(message) {
var text = ''
if (message.error) {
text =
' konnten nicht zu ' +
message.user.firstname +
' ' +
message.user.lastname +
' hinzufügen.'
} else {
text =
' wurde zu ' +
message.user.firstname +
' ' +
message.user.lastname +
' hinzugefügt.'
}
return text
}
},
computed: {
...mapGetters({
user: 'user/user',
year: 'user/year',
loading: 'user/loading',
addLoading: 'user/addLoading',
messages: 'user/messages'
}),
under5minutes() {
return now => {
var actual = new Date()
return actual - now < 15000
}
},
now() {
return now => {
var actual = new Date()
var zero = new Date(0)
var date = new Date(actual - now)
if (date.getFullYear() === zero.getFullYear()) {
if (date.getMonth() === zero.getMonth()) {
if (date.getDate() === zero.getDate()) {
if (date.getHours() === zero.getDate()) {
if (date.getMinutes() < 1) {
return 'vor ' + date.getSeconds() + ' Sekunden'
} else if (date.getMinutes() < 10) {
return 'vor ' + date.getMinutes() + ' Minuten'
} else {
return (
(now.getHours() < 10 ? '0' : '') +
now.getHours() +
':' +
(now.getMinutes() < 10 ? '0' : '') +
now.getMinutes()
)
}
} else {
return (
(now.getHours() < 10 ? '0' : '') +
now.getHours() +
':' +
(now.getMinutes() < 10 ? '0' : '') +
now.getMinutes()
)
}
}
}
}
return (
now.getDate() +
'.' +
now.getMonth() +
'.' +
now.getFullYear() +
' ' +
(now.getHours() < 10 ? '0' : '') +
now.getHours() +
':' +
(now.getMinutes() < 10 ? '0' : '') +
now.getMinutes()
)
}
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>
<style scoped></style>