Files
lucia-frontend/src/components/Header.vue
2023-10-17 15:52:38 +08:00

64 lines
1.7 KiB
Vue

<template>
<div class="mx-auto px-4 h-14">
<div class="flex justify-between items-center h-full">
<figure>
<DspLogo />
</figure>
<div class="flex justify-between items-center" v-show="showMember">
<button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
Logout
</button>
<!-- <figure>
<router-link :to="'/member-area'">
<IconMember class="w-8 h-8 fill-neutral-500"/>
</router-link>
</figure> -->
</div>
</div>
</div>
</template>
<script>
import { storeToRefs } from 'pinia';
import loginStore from '@/stores/login.js';
import DspLogo from '@/components/icons/DspLogo.vue';
import IconMember from '@/components/icons/IconMember.vue';
import AllMapDataStore from '@/stores/allMapData.js';
import { logoutLeave } from '@/module/alertModal.js';
export default {
data() {
return {
showMember: false,
}
},
setup() {
const store = loginStore();
const { logOut } = store;
const allMapDataStore = AllMapDataStore();
const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
return { logOut, temporaryData, tempFilterId, postRuleData, ruleData, allMapDataStore}
},
components: {
DspLogo,
IconMember
},
methods: {
logOutButton() {
if (this.$route.name === 'Map' && this.$route.params.type === 'log') {
this.tempFilterId = null;
this.temporaryData = [];
this.postRuleData = [];
this.ruleData = [];
};
this.logOut();
},
},
mounted() {
this.$route.name === 'Login' || this.$route.name === 'NotFound404' ? this.showMember = false : this.showMember = true;
}
}
</script>