Skip to content
Snippets Groups Projects
Commit 52fd9bbe authored by fz2907's avatar fz2907
Browse files

Merge remote-tracking branch 'origin/notification_bilibili' into sprint_2

parents 42481452 ec8cae73
No related branches found
No related tags found
2 merge requests!34Sprint 2 done,!311. add vuex
Hide whitespace changes
Inline Side-by-side
FrontendFolder/switch-room/package-lock.json
+ 1
− 0
View file @ 52fd9bbe
......@@ -8,6 +8,7 @@
"name": "switch-room",
"version": "0.1.0",
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.2.0",
"@fortawesome/free-regular-svg-icons": "^6.2.0",
......
FrontendFolder/switch-room/package.json
+ 1
− 0
View file @ 52fd9bbe
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.2.0",
"@fortawesome/free-regular-svg-icons": "^6.2.0",
......
FrontendFolder/switch-room/src/components/AppHeader.vue
+ 33
− 12
View file @ 52fd9bbe
......@@ -9,14 +9,25 @@
active-text-color="#ffd04b"
@select="handleSelect"
>
<el-menu-item index="1" v-on:click="redirect('/login-main-page')">Main</el-menu-item>
<el-menu-item index="2" v-on:click="redirect('/offer-page')">Offer Page</el-menu-item>
<el-menu-item index="3" v-on:click="redirect('/wishlist-page')">Wish List</el-menu-item>
<el-menu-item index="4" v-on:click="redirect('/flight')">Flight Ticket</el-menu-item>
<el-menu-item index="5" v-on:click="redirect('/profile')">Profile</el-menu-item>
<notification></notification>
<el-menu-item index="6" class="dock-right" @click="hanldeLogOut()">Log Out</el-menu-item>
<el-menu-item index="1" v-on:click="redirect('/login-main-page')"
>Main</el-menu-item
>
<el-menu-item index="2" v-on:click="redirect('/offer-page')"
>Offer Page</el-menu-item
>
<el-menu-item index="3" v-on:click="redirect('/wishlist-page')"
>Wish List</el-menu-item
>
<el-menu-item index="4" v-on:click="redirect('/flight')"
>Flight Ticket</el-menu-item
>
<el-menu-item index="5" v-on:click="redirect('/profile')"
>Profile</el-menu-item
>
<notification class="position"></notification>
<el-menu-item index="6" class="dock-right" @click="hanldeLogOut()"
>Log Out</el-menu-item
>
</el-menu>
</template>
......@@ -30,7 +41,7 @@ export default defineComponent({
props: ["offers"],
data() {
return {
hasToken: document.cookie.length > 0
hasToken: document.cookie.length > 0,
};
},
name: "LoginMainPage",
......@@ -42,9 +53,11 @@ export default defineComponent({
logOut: "logOutApi",
}),
hanldeLogOut() {
this.logOut()
document.cookie = 'userId=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
document.cookie = 'token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
this.logOut();
document.cookie =
"userId=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
document.cookie =
"token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
this.$router.push("/");
},
},
......@@ -52,7 +65,15 @@ export default defineComponent({
</script>
<style scoped>
.h-6 {
display: flex;
}
.el-menu-demo > .el-menu-item.dock-right {
margin-left: auto;
}
.position {
margin-top: 12px;
margin-left: auto;
}
</style>
FrontendFolder/switch-room/src/components/Notification.vue
+ 84
− 23
View file @ 52fd9bbe
<template>
<el-dropdown class="notification">
<el-button type="primary">
<font-awesome-icon icon="fa-solid fa-envelope" />
Notification<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<el-row>
<el-button type="info" :icon="Message" circle>
<div class="text-length">{{ length1 + length2 }}</div>
<!-- notification-->
<!-- <font-awesome-icon icon="fa-solid fa-envelope" />-->
<!-- Notification<el-icon class="el-icon--right"><arrow-down /></el-icon>-->
</el-button>
</el-row>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="offer in offers" :key="offer.offerId">
<router-link
:to="
'/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
"
>
You have a offer matched (click to check details)
</router-link>
<a>
<router-link
:to="
'/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
"
style="color: blue"
>
<div class="offer-match">
<div class="offer-text"></div>
<font-awesome-icon icon="fa-solid fa-circle-info" />
Offer Matched
</div>
</router-link>
</a>
</el-dropdown-item>
<el-dropdown-item v-for="offer in offers2" :key="offer.offerId">
<router-link
:to="
'/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
"
>
You have a wishlist matched (click to check details)
</router-link>
<el-dropdown-item
type="primary"
v-for="offer in offers2"
:key="offer.offerId"
>
<a
><router-link
:to="
'/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
"
style="color: blue"
>
<div class="offer-match">
<font-awesome-icon icon="fa-solid fa-circle-info" />
WishList Matched
</div>
</router-link>
</a>
</el-dropdown-item>
</el-dropdown-menu>
</template>
......@@ -35,6 +56,7 @@ import { OfferNotification } from "@/models/OfferNotification";
import * as NotificationService from "@/services/NotificationService";
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import { Message } from "@element-plus/icons-vue";
const route = useRoute();
......@@ -46,6 +68,9 @@ function getCookie(userId: string) {
const offers = ref([] as OfferNotification[]);
const offers2 = ref([] as OfferNotification[]);
const length1 = ref(-1);
const length2 = ref(-1);
async function fetchNotification(userId: number) {
const response = await NotificationService.getNotificationFromServerWithID(
userId
......@@ -54,6 +79,7 @@ async function fetchNotification(userId: number) {
// await NotificationService.getNotificationwishFromServerWithID(userId);
// console.log(response2);
offers.value = response.data;
length1.value = response.data.length;
// offers2.value = response2.data;
}
......@@ -61,6 +87,7 @@ async function fetchNotificationwish(userId: number) {
const response2 =
await NotificationService.getNotificationwishFromServerWithID(userId);
offers2.value = response2.data;
length2.value = response2.data.length;
}
watch(
......@@ -76,10 +103,6 @@ watch(
</script>
<style scoped>
.notification {
margin: auto;
justify-content: space-between;
}
.example-showcase .el-dropdown + .el-dropdown {
margin-left: 15px;
}
......@@ -89,4 +112,42 @@ watch(
display: flex;
align-items: center;
}
.offer-match {
display: flex;
margin-right: 2px;
}
.offer-text {
font-size: 25px;
font-family: "Apple Symbols";
color: #1e5be6;
margin-left: 2px;
}
.text-length {
font-size: 20px;
color: white;
height: 20px;
width: 20px;
background-color: #cc0000;
border-radius: 50%;
display: inline-block;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment