<template>
<div>
<v-card v-if="user" :loading="loading" style="margin-top: 3px">
<v-card-title>{{ user.firstname }} {{ user.lastname }}</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Vornamen"
:placeholder="user.firstname"
v-model="firstname"
readonly
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Nachname"
:placeholder="user.lastname"
v-model="lastname"
readonly
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Benutzername"
:placeholder="user.username"
v-model="username"
readonly
></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
ref="mail"
outlined
label="E-Mail"
:placeholder="user.mail"
v-model="mail"
readonly
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Password"
type="password"
v-model="password"
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
ref="password"
v-model="controlPassword"
outlined
label="Password bestätigen"
type="password"
:disabled="!password"
:rules="[equal_password]"
/>
</v-col>
</v-row>
<v-divider />
<v-row>
<v-col cols="12" sm="4">
<v-text-field
outlined
label="Sperrlimit"
readonly
:value="(user.limit / 100).toFixed(2).toString() + '€'"
/>
</v-col>
<v-col cols="12" sm="4">
<v-combobox
outlined
label="Sperrstatus"
v-model="lock"
append-icon
readonly
>
<template v-slot:selection="data">
<v-chip :color="lockColor">
{{ data.item }}
</v-chip>
</template>
</v-combobox>
</v-col>
<v-col cols="12" sm="4">
<v-combobox
outlined
label="Autosperre"
v-model="autoLock"
readonly
append-icon
>
<template v-slot:selection="data">
<v-chip :color="autoLockColor">
{{ data.item }}
</v-chip>
</template>
</v-combobox>
</v-col>
</v-row>
<v-row>
<v-col v-bind:class="{ fulllineText: isFulllineText }">
<v-combobox
outlined
multiple
label="Gruppen"
readonly
v-model="user.group"
append-icon
>
<template v-slot:selection="data">
<v-icon class="ma-2">{{
data.item === 'user'
? person
: data.item === 'bar'
? bar
: data.item === 'moneymaster'
? finanzer
: data.item === 'gastro'
? gastro
: ''
}}</v-icon>
</template>
</v-combobox>
</v-col>
<v-col v-bind:class="{ fulllineText: isFulllineText }">
<v-text-field
outlined
:value="computeStatus"
readonly
label="Mitgliedsstatus"
/>
</v-col>
<v-col v-bind:class="{ fulllineText: isFulllineText }">
<v-text-field
outlined
:value="user.voting ? 'ja' : 'nein'"
readonly
label="Stimmrecht"
/>
</v-col>
</v-row>
<v-row>
<v-col v-bind:class="{ fulllineText: isFulllineText }">
<v-combobox
chips
outlined
multiple
label="Arbeitsgruppen"
readonly
v-model="user.workgroups"
item-value="id"
item-text="name"
append-icon
>
<template v-slot:selection="data">
<v-chip>{{ data.item.name }}</v-chip>
</template>
</v-combobox>
</v-col>
</v-row>
<div class="subtitle-1">
Gespeicherte Sessions
</div>
<v-card v-for="token in tokens" :key="token.id" outlined>
<v-card-text>
<v-row>
<v-col
>OS:
<v-icon>
{{
token.platform === 'macos' || token.platform === 'iphone'
? apple
: token.platform === 'windows'
? windows
: token.platfrom === 'android'
? android
: token.platform
}}
</v-icon>
<v-icon
v-if="
token.platform === 'macos' || token.platform === 'iphone'
"
>
{{ token.platform === 'macos' ? mac : iphone }}
</v-icon>
</v-col>
<v-col>
Browser:
<v-icon>
{{
token.browser === 'chrome'
? chrome
: token.browser === 'firefox'
? firefox
: token.browser === 'opera'
? opera
: token.browser === 'safari'
? safari
: token.browser
}}
</v-icon>
</v-col>
<v-col>
Letzter Aktualisierung: {{ token.timestamp.day }}.{{
token.timestamp.month
}}.{{ token.timestamp.year }} um
{{
10 > token.timestamp.hour
? '0' + String(token.timestamp.hour)
: token.timestamp.hour
}}:{{
10 > token.timestamp.minute
? '0' + String(token.timestamp.minute)
: token.timestamp.minute
}}:{{
10 > token.timestamp.second
? '0' + String(token.timestamp.second)
: token.timestamp.second
}}
</v-col>
<v-col>Lebenszeit: {{ calcLifefime(token.lifetime) }}</v-col>
<v-col>
<v-btn icon @click="deleteToken(token)">
<v-icon>
{{trashCan}}
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="save">Speicherns</v-btn>
</v-card-actions>
<v-expand-transition>
<v-alert type="error" v-if="error">{{ error }}</v-alert>
</v-expand-transition>
</v-card>
</div>
</template>
<script>
import {
mdiAccount,
mdiGlassCocktail,
mdiCurrencyEur,
mdiFoodForkDrink,
mdiApple,
mdiGoogleChrome,
mdiFirefox,
mdiOpera,
mdiInternetExplorer,
mdiAppleSafari,
mdiLaptopMac,
mdiCellphoneIphone,
mdiTrashCan,
mdiAndroid,
mdiWindows
} from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'Config',
data() {
return {
apple: mdiApple,
mac: mdiLaptopMac,
iphone: mdiCellphoneIphone,
android: mdiAndroid,
mdiWindows: mdiWindows,
chrome: mdiGoogleChrome,
firefox: mdiFirefox,
opera: mdiOpera,
ie: mdiInternetExplorer,
safari: mdiAppleSafari,
person: mdiAccount,
bar: mdiGlassCocktail,
finanzer: mdiCurrencyEur,
gastro: mdiFoodForkDrink,
username: null,
mail: null,
firstname: null,
lastname: null,
password: null,
controlPassword: null,
trashCan: mdiTrashCan,
isFulllineText: false,
equal_password: value =>
this.password === value || 'Passwörter sind nicht identisch.',
email: value => {
if (value.length > 0) {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return pattern.test(value) || 'keine gültige E-Mail'
}
return true
}
}
},
mounted() {
this.$nextTick(function() {
window.addEventListener('resize', this.getWindowWidth)
this.getWindowWidth()
})
},
methods: {
...mapActions({
saveConfig: 'user/saveConfig',
getStatus: 'user/getStatus',
getTokens: 'user/getTokens',
deleteToken: 'user/deleteToken'
}),
getWindowWidth() {
this.isFulllineText = document.documentElement.clientWidth <= 600
},
save() {
let user = {}
if (this.firstname) user.firstname = this.firstname
if (this.lastname) user.lastname = this.lastname
if (this.username) user.username = this.username
if (this.$refs.mail.validate()) {
if (this.mail) user.mail = this.mail
}
if (this.$refs.password.validate()) {
if (this.password) user.password = this.password
}
this.saveConfig({ oldUsername: user.username, ...user })
this.password = null
this.controlPassword = null
},
calcLifefime(time) {
if (time < 60) return String(time) + 'Sekunden'
time = Math.round(time / 60)
if (time < 60) return String(time) + 'Minuten'
time = Math.round(time / 60)
if (time < 24) return String(time) + 'Stunden'
time = Math.round(time / 24)
if (time < 7) return String(time) + 'Tage'
time = Math.round(time / 7)
if (time < 30) return String(time) + 'Wochen'
time = Math.round(time / 30)
if (time < 12) return String(time) + 'Monate'
time = Math.round(time / 12)
return String(time) + 'Jahre'
}
},
computed: {
...mapGetters({
user: 'user/user',
error: 'user/error',
loading: 'user/loading',
status: 'user/status',
tokens: 'user/tokens'
}),
lock() {
return this.user.locked ? 'gesperrt' : 'nicht gesperrt'
},
lockColor() {
return this.user.locked ? 'red' : 'green'
},
autoLock() {
return this.user.autoLock ? 'aktiviert' : 'deaktiviert'
},
autoLockColor() {
return this.user.autoLock ? 'green' : 'red'
},
computeStatus() {
try {
return this.status.find(a => a.id == this.user.statusgroup).name
} catch (e) {
return null
}
}
},
created() {
this.getStatus()
this.getTokens()
}
}
</script>
<style scoped>
.fulllineText {
flex-basis: unset;
}
</style>