flaschengeist-frontend/src/components/TitleBar.vue

95 lines
2.4 KiB
Vue

<template>
<div>
<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 <span class="caption">v1.0.1</span></v-toolbar-title>
<v-spacer/>
<v-btn icon v-if="getRouteName == 'resetPassword'" @click="goTo('login')">
<v-icon>
mdi-home
</v-icon>
</v-btn>
<v-btn icon v-if="getRouteName == 'priceListNoLogin'" @click="goBack()">
<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" @click="goTo('gastroPricelist')">
<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>
<ConnectionError/>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import {
mdiCurrencyEur,
mdiGlassCocktail,
mdiAccount,
mdiFileMultiple,
mdiFoodForkDrink,
mdiArrowLeftBoldCircle
} from '@mdi/js'
import ConnectionError from "@/components/ConnectionError";
export default {
name: 'TitleBar',
components: {ConnectionError},
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})
},
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push({name: 'main'})
},
}
}
</script>
<style scoped></style>