flaschengeist-frontend/src/App.vue

233 lines
5.8 KiB
Vue
Raw Normal View History

2019-12-20 12:45:37 +00:00
<template>
2019-12-21 07:20:25 +00:00
<v-app>
2020-01-17 00:01:10 +00:00
<TitleBar />
2020-01-14 21:01:24 +00:00
<router-view />
<v-footer app>
<span class="px-4 d-none d-sm-flex"
>&copy; {{ new Date().getFullYear() }}
2020-07-27 06:31:16 +00:00
<v-btn x-small text class="text-none subtitle-1" href="https://wu5.de">
Studentenclub Wu5 e.V.
</v-btn>
</span>
2020-06-27 11:10:57 +00:00
<span>
2020-07-27 06:31:16 +00:00
<v-btn text x-small href="https://wu5.de/impressum">
2020-06-27 11:10:57 +00:00
Impressum
</v-btn>
2020-07-27 06:31:16 +00:00
<v-btn text x-small href="https://wu5.de/datenschutz">
2020-06-27 11:10:57 +00:00
Datenschutzerklärung
</v-btn>
<v-btn
text
x-small
v-if="isLoggedIn"
href="https://groeger-clan.duckdns.org/redmine/projects/geruecht/issues/new"
>
2020-06-27 11:10:57 +00:00
Bugs?
</v-btn>
</span>
<v-spacer />
<div v-if="isLoggedIn && !change" :key="render">
2020-06-27 11:10:57 +00:00
<v-hover
v-slot:default="{ hover }"
open-delay="200"
close-delay="200"
class="d-none d-sm-flex"
>
<v-sheet
:elevation="hover ? 16 : 0"
color="#f5f5f5"
@click="change = !change"
>{{ calcTime }}</v-sheet
>
</v-hover>
2020-06-27 11:10:57 +00:00
<v-hover
v-slot:default="{ hover }"
open-delay="200"
close-delay="200"
class="d-flex d-sm-none"
>
<v-sheet
:elevation="hover ? 16 : 0"
color="#f5f5f5"
@click="change = !change"
>{{ calcTimeLittle }}</v-sheet
>
</v-hover>
</div>
<v-dialog v-model="change" max-width="300">
<v-card>
<v-card-title>
Zeit bis zum Logout ändern
</v-card-title>
<v-card-text>
2020-06-27 11:10:57 +00:00
<v-combobox
solo
:items="lifeTimes"
item-text="text"
item-value="value"
v-model="selectLifeTime"
return-object
/>
</v-card-text>
<v-card-actions>
<v-spacer />
2020-06-27 11:10:57 +00:00
<v-btn text @click="change = false">Abbrechen</v-btn>
<v-btn color="primary" text @click="save()">Speichern</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-footer>
2019-12-21 07:20:25 +00:00
</v-app>
2019-12-20 12:45:37 +00:00
</template>
2019-12-21 07:20:25 +00:00
<script>
2020-01-17 00:01:10 +00:00
import TitleBar from './components/TitleBar'
import { mapGetters, mapActions } from 'vuex'
2019-12-21 07:20:25 +00:00
export default {
name: 'App',
2020-07-27 07:13:06 +00:00
components: { TitleBar },
2019-12-21 07:20:25 +00:00
data: () => ({
render: 0,
timer: null,
change: false,
selectLifeTime: { text: '30 Minuten', value: 1800 },
lifeTimes: [
{
text: '5 Minuten',
value: 300
},
{
text: '10 Minuten',
value: 600
},
{
text: '15 Minuten',
value: 900
},
{
text: '30 Minuten',
value: 1800
},
{
text: '1 Stunde',
value: 3600
},
{
text: '2 Stunden',
value: 7200
},
{
text: '3 Stunden',
value: 10800
},
{
text: '1 Tag',
value: 86400
},
{
text: '2 Tage',
value: 172800
},
{
text: '1 Woche',
value: 604800
},
{
text: '1 Monat',
value: 2678400
}
]
}),
created() {
if (this.isLoggedIn) {
this.getLifeTime()
}
this.timer = setInterval(this.test, 1000)
},
methods: {
...mapActions(['setLifeTime', 'saveLifeTime', 'logout', 'getLifeTime']),
test() {
if (this.isLoggedIn) {
if (this.lifeTime == 0) this.logout()
this.setLifeTime(this.lifeTime - 1)
}
},
save() {
this.saveLifeTime(this.selectLifeTime.value)
this.change = false
}
},
computed: {
...mapGetters(['isLoggedIn', 'lifeTime', 'getMinute', 'getSeconds']),
calcTime() {
var minutes = this.lifeTime / 60
var seconds = this.lifeTime % 60
var minutesString =
minutes < 10 ? '0' + Math.floor(minutes % 60) : Math.floor(minutes % 60)
var secondsString =
seconds < 10 ? '0' + Math.floor(seconds) : Math.floor(seconds)
if (minutes > 60) {
var hours = minutes / 60
if (hours > 24) {
var days = hours / 24
var now = new Date()
var dayMonth = new Date(
now.getFullYear(),
now.getMonth() + 1,
0
).getDate()
if (days >= dayMonth) {
return Math.floor(days / dayMonth) + ' Monate bis zum Logout'
} else {
return Math.floor(days) + ' Tage bis zum Logout'
}
} else {
return (
Math.floor(hours) +
':' +
minutesString +
':' +
secondsString +
' Stunden bis zum Logout'
)
}
} else {
return minutesString + ':' + secondsString + ' Minuten bis zum Logout'
}
2020-06-27 11:10:57 +00:00
},
calcTimeLittle() {
var minutes = this.lifeTime / 60
var seconds = this.lifeTime % 60
var minutesString =
minutes < 10 ? '0' + Math.floor(minutes % 60) : Math.floor(minutes % 60)
var secondsString =
seconds < 10 ? '0' + Math.floor(seconds) : Math.floor(seconds)
if (minutes > 60) {
var hours = minutes / 60
if (hours > 24) {
var days = hours / 24
var now = new Date()
var dayMonth = new Date(
now.getFullYear(),
now.getMonth() + 1,
0
).getDate()
if (days >= dayMonth) {
return Math.floor(days / dayMonth) + 'M'
} else {
return Math.floor(days) + 'D'
}
} else {
return Math.floor(hours) + ':' + minutesString + ':' + secondsString
}
} else {
return minutesString + ':' + secondsString
}
}
},
beforeDestroy() {
clearInterval(this.timer)
}
2020-01-14 21:01:24 +00:00
}
2019-12-21 07:20:25 +00:00
</script>