222 lines
5.7 KiB
Vue
222 lines
5.7 KiB
Vue
<template>
|
|
<q-layout view="hhh Lpr lFf">
|
|
<q-header id="qheader" class="bg-white text-grey-14" elevated>
|
|
<q-toolbar class="q-pa-md">
|
|
<q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm"/>
|
|
|
|
<q-toolbar-title>
|
|
BuGa Geocaching
|
|
</q-toolbar-title>
|
|
|
|
<q-btn
|
|
flat
|
|
dense
|
|
ripple
|
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
|
aria-label="Menu"
|
|
>
|
|
<q-icon name="menu"/>
|
|
</q-btn>
|
|
<!--<div>Quasar v{{ $q.version }}</div>-->
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer
|
|
side="left"
|
|
v-model="leftDrawerOpen"
|
|
bordered
|
|
show-if-above
|
|
content-class="">
|
|
<q-list>
|
|
<q-item-label header>BuGa Geocaching</q-item-label>
|
|
<q-item
|
|
clickable
|
|
class="text-primary"
|
|
v-ripple
|
|
tag="a"
|
|
to="/"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="directions"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Startseite</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
class="text-primary"
|
|
v-ripple
|
|
tag="a"
|
|
to="/qr-scanner"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="camera"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>QR-Code Scanner</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
class="text-primary"
|
|
v-ripple
|
|
tag="a"
|
|
to="/Overview"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="map"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Caches</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
class="text-primary"
|
|
v-ripple
|
|
tag="a"
|
|
to="/ranking"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="list"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Rangliste</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
class="text-primary"
|
|
v-ripple
|
|
tag="a"
|
|
to="/Profile"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="perm_identity"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Profil</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
class="text-primary"
|
|
v-ripple
|
|
tag="a"
|
|
to="/Login"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="logout"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Login</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
class="text-primary"
|
|
v-ripple
|
|
tag="a"
|
|
to="/Register"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="assignment"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Register</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-drawer>
|
|
|
|
<q-page-container>
|
|
<router-view/>
|
|
</q-page-container>
|
|
|
|
<q-dialog v-model="dialogShow" persistent transition-show="scale" transition-hide="scale">
|
|
<q-card :class="dialogColorBg" style="min-width: 300px">
|
|
<q-card-section>
|
|
<div class="text-h6">{{ dialogTitle }}</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
{{ dialogMessage }}
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn @click="dialogClose" flat label="OK" :color="dialogColorBtn" v-close-popup/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import {openURL} from "quasar";
|
|
|
|
export default {
|
|
name: "MyLayout",
|
|
data() {
|
|
return {
|
|
// dialog: {
|
|
// color: this,
|
|
// show: true,
|
|
// message: "Hallo Fehler! Dies ist ein Beispiel Fehler."
|
|
// },
|
|
leftDrawerOpen: this.$q.platform.is.desktop,
|
|
//menuButtonVisible: !this.$q.platform.is.desktop,
|
|
//leftDrawerOpen: true,
|
|
//miniState: true
|
|
};
|
|
},
|
|
computed: {
|
|
dialogShow: {
|
|
get() {
|
|
console.log("get dialogShow: "+this.$store.state.dialog.dialog.show)
|
|
return this.$store.state.dialog.dialog.show;
|
|
},
|
|
set(val) {
|
|
console.log("set dialogShow: "+val)
|
|
this.$store.state.dialog.dialog.show = val;
|
|
}
|
|
},
|
|
dialogMessage: {
|
|
get() {
|
|
console.log("get dialogMessage: "+this.$store.state.dialog.dialog.message)
|
|
return this.$store.state.dialog.dialog.message;
|
|
},
|
|
},
|
|
dialogTitle: {
|
|
get() {
|
|
console.log("get dialogTitle: "+this.$store.state.dialog.dialog.title)
|
|
return this.$store.state.dialog.dialog.title;
|
|
},
|
|
},
|
|
dialogColorBg: {
|
|
get() {
|
|
console.log("get dialogColorBg: " + this.$store.state.dialog.dialog.colorBackground)
|
|
return this.$store.state.dialog.dialog.colorBackground;
|
|
},
|
|
},
|
|
dialogColorBtn: {
|
|
get() {
|
|
console.log("get dialogColorBtn: "+this.$store.state.dialog.dialog.colorButton)
|
|
return this.$store.state.dialog.dialog.colorButton;
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
//openURL
|
|
dialogClose() {
|
|
console.log("dialogClose(): ")
|
|
this.$store.commit('dialog/RESET_MESSAGE_DIALOG');
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|