498 lines
15 KiB
Vue
498 lines
15 KiB
Vue
<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 && user.autoLock) {
|
|
if ((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 (( 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.user.autoLock) {
|
|
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.user.autoLock) {
|
|
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>
|