flaschengeist-frontend/src/components/TitleBar.vue

<template>
  <v-app-bar
    app
    clipped-left
    clipped-right
    color="blue accent-4"
    class="elevation-4"
    dark
    dense
  >
    <v-btn icon @click="reload()">
      <v-img src="@/assets/logo-64.png" contain height="40"></v-img>
    </v-btn>
    <v-toolbar-title>Flaschengeist</v-toolbar-title>
    <v-spacer />
    <v-btn icon v-if="getRouteName == 'priceListNoLogin'" @click="goHome()">
      <v-icon>
        {{ back }}
      </v-icon>
    </v-btn>
    <v-btn icon v-if="isFinanzer" :disabled="locked" @click="goTo('overview')">
      <v-icon>{{ attach_money }}</v-icon>
    </v-btn>
    <v-btn icon v-if="isGastro" :disabled="locked">
      <v-icon>{{ gastro }}</v-icon>
    </v-btn>
    <v-btn icon v-if="isBar" @click="goTo('geruecht')">
      <v-icon>{{ local_bar }}</v-icon>
    </v-btn>
    <v-btn icon v-if="isUser" :disabled="locked" @click="goTo('add')">
      <v-icon>{{ person }}</v-icon>
    </v-btn>
    <v-btn icon @click="goTo('priceListNoLogin')">
      <v-icon>{{ list }}</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import {
  mdiCurrencyEur,
  mdiGlassCocktail,
  mdiAccount,
  mdiFileMultiple,
  mdiFoodForkDrink,
  mdiArrowLeftBoldCircle
} from '@mdi/js'

export default {
  name: 'TitleBar',
  data() {
    return {
      attach_money: mdiCurrencyEur,
      local_bar: mdiGlassCocktail,
      person: mdiAccount,
      list: mdiFileMultiple,
      gastro: mdiFoodForkDrink,
      back: mdiArrowLeftBoldCircle
    }
  },
  computed: {
    ...mapGetters(['isBar', 'isFinanzer', 'isUser', 'isLoggedIn', 'isGastro']),
    ...mapGetters({locked: 'barUsers/locked'}),
    getRouteName() {
      return this.$route.name
    }
  },
  methods: {
    ...mapActions(['logout']),
    reload() {
      location.reload()
    },
    goTo(name) {
      this.$router.push({name: name})
    },
    goHome() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push({name: 'main'})
    }
  }
}
</script>

<style scoped></style>