flaschengeist-frontend/src/App.vue

<template>
  <v-app>
    <TitleBar />
    <router-view />
    <v-footer app>
      <span class="px-4 d-none d-sm-flex"
        >&copy; {{ new Date().getFullYear() }}
        <v-btn x-small text class="text-none subtitle-1" href="https://wu5.de">
          Studentenclub Wu5 e.V.
        </v-btn>
      </span>
      <span>
        <v-btn text x-small href="https://wu5.de/impressum">
          Impressum
        </v-btn>
        <v-btn text x-small href="https://wu5.de/datenschutz">
          Datenschutzerklärung
        </v-btn>
        <v-btn
          text
          x-small
          v-if="isLoggedIn"
          href="https://groeger-clan.duckdns.org/redmine/projects/geruecht/issues/new"
        >
          Bugs?
        </v-btn>
      </span>
      <v-spacer />
      <div v-if="isLoggedIn && !change" :key="render">
        <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>
        <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>
            <v-combobox
              solo
              :items="lifeTimes"
              item-text="text"
              item-value="value"
              v-model="selectLifetime"
              return-object
            />
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <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>
  </v-app>
</template>

<script>
import TitleBar from './components/TitleBar'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'App',
  components: { TitleBar },
  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'
      }
    },
    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)
  }
}
</script>