diff --git a/FrontendFolder/switch-room/package-lock.json b/FrontendFolder/switch-room/package-lock.json
index c33372e1981d042a399da2b6906faf730dbc37d7..5cb332da9a1a3b8cab8520589f498a9bcd0fb03c 100644
--- a/FrontendFolder/switch-room/package-lock.json
+++ b/FrontendFolder/switch-room/package-lock.json
@@ -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",
diff --git a/FrontendFolder/switch-room/package.json b/FrontendFolder/switch-room/package.json
index c89c1d112c44eeca159474caac5bbf0ed794eeee..5aae0f5286b2181ae467a9d73df91c57b97335b1 100644
--- a/FrontendFolder/switch-room/package.json
+++ b/FrontendFolder/switch-room/package.json
@@ -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",
diff --git a/FrontendFolder/switch-room/src/components/AppHeader.vue b/FrontendFolder/switch-room/src/components/AppHeader.vue
index cd6b1832051d60f740cda68882b3f88e995db012..97d1133ca1a01e4efd4d460b541d07a39da080c2 100644
--- a/FrontendFolder/switch-room/src/components/AppHeader.vue
+++ b/FrontendFolder/switch-room/src/components/AppHeader.vue
@@ -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>
diff --git a/FrontendFolder/switch-room/src/components/Notification.vue b/FrontendFolder/switch-room/src/components/Notification.vue
index cd25dd5532c25d51e510457281c44d1884e29393..f6d35a6340720b4772fa2416918ff17cd77eff67 100644
--- a/FrontendFolder/switch-room/src/components/Notification.vue
+++ b/FrontendFolder/switch-room/src/components/Notification.vue
@@ -1,28 +1,49 @@
<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>