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

# Conflicts:
#	BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/repositories/MatchedWishlistRecordRepository.java
#	FrontendFolder/switch-room/src/App.vue
#	FrontendFolder/switch-room/src/components/AppHeader.vue
#	FrontendFolder/switch-room/src/components/WishlistPage.vue
#	FrontendFolder/switch-room/src/router/index.ts

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/MatchedOfferController.java

+package vt.CS5934.SwitchRoom.controllers;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.*;
+import vt.CS5934.SwitchRoom.models.ResponseModel;
+import vt.CS5934.SwitchRoom.models.UserOfferModel;
+import vt.CS5934.SwitchRoom.services.OfferPageService;
+import vt.CS5934.SwitchRoom.services.WishlistPageService;
+
+/**
+ * The "@MatchedController" made the class into rest handle class
+ * The "@RequestMapping("matched")" on the class level make it only react to url ".../example/..."
+ */
+@CrossOrigin(
+        allowCredentials = "true",
+        origins = {"http://localhost:8080/"}
+)
+@RestController
+@RequestMapping("matchedOffer")
+public class MatchedOfferController {
+
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    OfferPageService offerPageService;
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(UserController.class);
+
+    /**
+     * This function will handle the post function and change the JSON body into data class
+     */
+    @GetMapping("/{offerId}")
+    public ResponseModel getOffer(@PathVariable long offerId) {
+        logger.info("You reached the getOffer() function.");
+        System.out.println(offerId);
+        try{
+            UserOfferModel offer =  offerPageService.getUserOfferInfo(offerId);
+//            List<MatchedWishlistRecordModel> offerNotifications = matchedWishlistRecordService.getOfferListWithIDFromDB(userId);
+//            List<ExampleModel> exampleModels = exampleService.getAllExampleModelsFromDB();
+            return new ResponseModel(
+                    "This this a offer String response",
+                    HttpStatus.OK,
+                    offer);
+        }catch (Exception e){
+            return new ResponseModel(
+                    "Error occur on get All ExampleModels, Error info is: " + e,
+                    HttpStatus.OK,
+                    null);
+        }
+    }
+}
\ No newline at end of file

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/MatchedWishListController.java

+package vt.CS5934.SwitchRoom.controllers;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.*;
+import vt.CS5934.SwitchRoom.models.ResponseModel;
+import vt.CS5934.SwitchRoom.models.WishlistItemModel;
+import vt.CS5934.SwitchRoom.services.WishlistPageService;
+
+
+/**
+ * The "@MatchedController" made the class into rest handle class
+ * The "@RequestMapping("matched")" on the class level make it only react to url ".../example/..."
+ */
+@CrossOrigin(
+        allowCredentials = "true",
+        origins = {"http://localhost:8080/"}
+)
+@RestController
+@RequestMapping("matchedWishList")
+public class MatchedWishListController {
+
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    WishlistPageService wishlistPageService;
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(UserController.class);
+
+    /**
+     * This function will handle the post function and change the JSON body into data class
+     */
+    @GetMapping("/{wishlistId}")
+    public ResponseModel getWishList(@PathVariable long wishlistId) {
+        logger.info("You reached the getWishList() function.");
+        System.out.println(wishlistId);
+        try{
+            WishlistItemModel wishlist = wishlistPageService.getWishlistItemInfo(wishlistId);
+            return new ResponseModel(
+                    "This this a offer String response",
+                    HttpStatus.OK,
+                    wishlist);
+        }catch (Exception e){
+            return new ResponseModel(
+                    "Error occur on get All ExampleModels, Error info is: " + e,
+                    HttpStatus.OK,
+                    null);
+        }
+    }
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/controllers/NotificationController.java

+package vt.CS5934.SwitchRoom.controllers;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.*;
+import vt.CS5934.SwitchRoom.models.*;
+import vt.CS5934.SwitchRoom.services.DealWithWishlist;
+import vt.CS5934.SwitchRoom.services.MatchedWishlistRecordService;
+import vt.CS5934.SwitchRoom.services.OfferWishlistLookUpService;
+import vt.CS5934.SwitchRoom.services.UserService;
+
+import java.util.List;
+
+
+/**
+ * The "@RestController" made the class into rest handle class
+ * The "@RequestMapping("example")" on the class level make it only react to url ".../example/..."
+ */
+@CrossOrigin(
+        allowCredentials = "true",
+        origins = {"http://localhost:8080/"}
+)
+@RestController
+@RequestMapping("notification")
+public class NotificationController {
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    MatchedWishlistRecordService matchedWishlistRecordService;
+
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    OfferWishlistLookUpService offerWishlistLookUpService;
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    DealWithWishlist dealWithWishlist;
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(UserController.class);
+
+    /**
+     * This function will handle the post function and change the JSON body into data class
+     */
+    @CrossOrigin
+    @GetMapping("/{userId}")
+    public ResponseModel getNotification(@PathVariable long userId) {
+        logger.info("You reached the getNotification() function.");
+//        System.out.println(userId);
+        try{
+            List<MatchedWishlistRecordModel> offerNotifications = matchedWishlistRecordService.getOfferListWithIDFromDB(userId);
+//            System.out.println(offerNotifications);
+//            List<ExampleModel> exampleModels = exampleService.getAllExampleModelsFromDB();
+            return new ResponseModel(
+                    "This this a notification String response",
+                    HttpStatus.OK,
+                    offerNotifications);
+        }catch (Exception e){
+            return new ResponseModel(
+                    "Error occur on get All ExampleModels, Error info is: " + e,
+                    HttpStatus.OK,
+                    null);
+        }
+    }
+
+    /**
+     * This function will handle the post function and change the JSON body into data class
+     */
+    @CrossOrigin(
+            allowCredentials = "true",
+            origins = {"http://localhost:8080/"}
+    )
+    @GetMapping("/wish/{userId}")
+    public ResponseModel getNotificationwish(@PathVariable long userId) {
+        logger.info("You reached the getNotificationwish() function.");
+//        System.out.println(userId);
+        try{
+            List<UserOfferWishlistLookUpModel> lookup = offerWishlistLookUpService.getOfferWishlistLookUpWithIDFromDB(userId);
+            System.out.println(lookup);
+            List<MatchedWishlistRecordModel> wishlists = dealWithWishlist.getMatchedWishlist(lookup);
+//            List<MatchedWishlistRecordModel> offerNotifications = matchedWishlistRecordService.getOfferListWithIDFromDB(userId);
+//            List<ExampleModel> exampleModels = exampleService.getAllExampleModelsFromDB();
+            return new ResponseModel(
+                    "This this a notification String response",
+                    HttpStatus.OK,
+                    wishlists);
+        }catch (Exception e){
+            return new ResponseModel(
+                    "Error occur on get All ExampleModels, Error info is: " + e,
+                    HttpStatus.OK,
+                    null);
+        }
+    }
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/repositories/MatchedWishlistRecordRepository.java

@@ -7,7 +7,21 @@ import vt.CS5934.SwitchRoom.models.MatchedWishlistRecordModel;
 import java.util.List;
 
 public interface MatchedWishlistRecordRepository extends JpaRepository<MatchedWishlistRecordModel, MatchedRecordIdModel> {
+    /**
+     * The function name is the SQL query:
+     *  findByIdAndName(long inputId, String inputName) == "SELETE * FROM table WHERE Id==inputId" AND name == inputName;
+     * This is an example of how to declare a SQL command, those will be use in service class
+     * @param offerId the id in table you are looking for
+     * @return ExampleModel object
+     */
     List<MatchedWishlistRecordModel> findAllByOfferId(Long offerId);
+    /**
+     * The function name is the SQL query:
+     *  findByIdAndName(long inputId, String inputName) == "SELETE * FROM table WHERE Id==inputId" AND name == inputName;
+     * This is an example of how to declare a SQL command, those will be use in service class
+     * @param wishlistItemId the id in table you are looking for
+     * @return ExampleModel object
+     */
     List<MatchedWishlistRecordModel> findAllByWishlistItemId(Long wishlistItemId);
 
     void deleteAllByOfferId(Long offerId);

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/DealWithWishlist.java

+package vt.CS5934.SwitchRoom.services;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import vt.CS5934.SwitchRoom.models.MatchedWishlistRecordModel;
+import vt.CS5934.SwitchRoom.models.UserOfferWishlistLookUpModel;
+import vt.CS5934.SwitchRoom.repositories.MatchedWishlistRecordRepository;
+import vt.CS5934.SwitchRoom.repositories.UserOfferWishlistLookUpRepository;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@Service
+public class DealWithWishlist {
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(ExampleService.class);
+
+    @Autowired
+    MatchedWishlistRecordRepository matchedWishlistRecordRepository;
+
+    public List<MatchedWishlistRecordModel> getMatchedWishlist(List<UserOfferWishlistLookUpModel> list) {
+        logger.info("Reached get finalAns");
+        List<MatchedWishlistRecordModel> finalAns = new ArrayList<>();
+        for(int i = 0; i < list.size(); i++) {
+            System.out.println(list.get(i).getWishlistItemId());
+            List<MatchedWishlistRecordModel> ans = matchedWishlistRecordRepository.findByWishlistItemId(list.get(i).getWishlistItemId());
+            System.out.println(ans);
+            finalAns.addAll(ans);
+        }
+        return finalAns;
+    }
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/MatchedWishlistRecordService.java

+package vt.CS5934.SwitchRoom.services;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import vt.CS5934.SwitchRoom.models.MatchedWishlistRecordModel;
+import vt.CS5934.SwitchRoom.repositories.MatchedWishlistRecordRepository;
+
+import java.util.List;
+
+@Service
+public class MatchedWishlistRecordService {
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(MatchedWishlistRecordService.class);
+
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    MatchedWishlistRecordRepository matchedWishlistRecordRepository;
+
+    public List<MatchedWishlistRecordModel> getOfferListWithIDFromDB(long id){
+        logger.info("Reached getOfferListIDFromDB()");
+        return matchedWishlistRecordRepository.findByOfferId(id);
+    }
+}

BackendFolder/SwitchRoom/src/main/java/vt/CS5934/SwitchRoom/services/OfferWishlistLookUpService.java

+package vt.CS5934.SwitchRoom.services;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import vt.CS5934.SwitchRoom.models.ExampleModel;
+import vt.CS5934.SwitchRoom.models.MatchedWishlistRecordModel;
+import vt.CS5934.SwitchRoom.models.UserOfferWishlistLookUpModel;
+import vt.CS5934.SwitchRoom.repositories.MatchedWishlistRecordRepository;
+import vt.CS5934.SwitchRoom.repositories.UserOfferWishlistLookUpRepository;
+
+import java.util.*;
+
+@Service
+public class OfferWishlistLookUpService {
+
+    /**
+     * You can use logger.[trace,debug,info,warn,error]("messages") to log into file
+     */
+    private final Logger logger = LoggerFactory.getLogger(ExampleService.class);
+
+    /**
+     * Autowired is a Spring feature that it will create or looking for the existing object in memory.
+     * It usually uses on Repository class, Service class, or some globe object in the class.
+     */
+    @Autowired
+    UserOfferWishlistLookUpRepository userOfferWishlistLookUpRepository;
+
+    public List<UserOfferWishlistLookUpModel> getOfferWishlistLookUpWithIDFromDB(long id){
+        logger.info("Reached getWishlistLookUpWithIDFromDB()");
+        return userOfferWishlistLookUpRepository.findAllByUserId(id);
+    }
+}

FrontendFolder/switch-room/package-lock.json

@@ -14,6 +14,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.2.0",
         "@fortawesome/vue-fontawesome": "^3.0.1",
         "cookie-parser": "^1.4.6",
+        "cors": "^2.8.5",
         "element-plus": "^2.2.18",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
@@ -21,6 +22,7 @@
       },
       "devDependencies": {
         "@types/cookie-parser": "^1.4.3",
+        "@types/cors": "^2.8.12",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",
         "@vue/cli-plugin-router": "~5.0.0",
@@ -857,6 +859,12 @@
         "@types/express": "*"
       }
     },
+    "node_modules/@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
@@ -3091,6 +3099,18 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@@ -6724,7 +6744,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9320,7 +9339,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -10879,6 +10897,12 @@
         "@types/express": "*"
       }
     },
+    "@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "8.4.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
@@ -12566,6 +12590,15 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@@ -15266,8 +15299,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.12.2",
@@ -17138,8 +17170,7 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "vue": {
       "version": "3.2.41",

FrontendFolder/switch-room/package.json

@@ -14,6 +14,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
     "element-plus": "^2.2.18",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
@@ -21,6 +22,7 @@
   },
   "devDependencies": {
     "@types/cookie-parser": "^1.4.3",
+    "@types/cors": "^2.8.12",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-router": "~5.0.0",

FrontendFolder/switch-room/src/components/AppHeader.vue

@@ -15,6 +15,7 @@
     <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>
 </template>
@@ -22,7 +23,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { mapActions, mapGetters } from "vuex";
+import Notification from "@/components/Notification.vue";
+import { OfferNotification } from "@/models/OfferNotification";
 export default defineComponent({
+  components: { Notification },
+  props: ["offers"],
   data() {
     return {
       hasToken: document.cookie.length > 0
@@ -48,6 +53,6 @@ export default defineComponent({
 
 <style scoped>
 .el-menu-demo > .el-menu-item.dock-right {
-  margin-left: auto
+  margin-left: auto;
 }
 </style>

FrontendFolder/switch-room/src/components/MainPage.vue

@@ -27,25 +27,25 @@
              Username
           </label>
           <input
-              id="user-name"
-              v-model="username"
-              class="form-content"
-              type="text"
-              name="username"
-              autocomplete="on"
-              required
+            id="user-name"
+            v-model="username"
+            class="form-content"
+            type="text"
+            name="username"
+            autocomplete="on"
+            required
           />
           <div class="form-border"></div>
           <label for="user-password" style="padding-top: 22px"
-          >&nbsp;Password
+            >&nbsp;Password
           </label>
           <input
-              id="user-password"
-              v-model="password"
-              class="form-content"
-              type="password"
-              name="password"
-              required
+            id="user-password"
+            v-model="password"
+            class="form-content"
+            type="password"
+            name="password"
+            required
           />
           <div class="form-border"></div>
           <a href="#">
@@ -66,7 +66,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { mapActions, mapGetters } from "vuex";
-import {checkLoginSession} from "../services/UserService";
+import { checkLoginSession } from "../services/UserService";
 
 export default defineComponent({
   data() {
@@ -85,14 +85,13 @@ export default defineComponent({
       actionLoginApi: "loginApi",
     }),
     async handleCreated() {
-      await checkLoginSession()
-      .then((result) => {
+      await checkLoginSession().then((result) => {
         if (result.status == "OK") {
-          this.$router.push({name: 'LoginMainPage'});
+          this.$router.push({ name: "LoginMainPage" });
         } else {
-          this.$router.push({name: 'home'})
+          this.$router.push({ name: "home" });
         }
-      })
+      });
     },
     async handleLogin() {
       const payload = {
@@ -100,17 +99,15 @@ export default defineComponent({
         password: this.password,
       };
       await this.actionLoginApi(payload);
-      if (this.getLoginStatus){
-        this.$router.push({name: 'LoginMainPage'});
+      if (this.getLoginStatus) {
+        this.$router.push({ name: "LoginMainPage" });
       }
     },
   },
-  created: function(){
-    this.handleCreated()
-  }
+  created: function () {
+    this.handleCreated();
+  },
 });
-
-
 </script>
 
 <style scoped>

FrontendFolder/switch-room/src/components/MatchOffer.vue

+<template>
+  <div class="offerSide">
+    <div class="card">
+      <div class="container">
+        <h4><b>Matched Offer Information</b></h4>
+        <p>Space Located City: {{ offer.spaceLocateCity }}</p>
+        <p>Space Located State: {{ offer.state }}</p>
+        <p>Available Time start: {{ offer.availableTimeStart }}</p>
+        <p>Available Time end: {{ offer.availableTimeEnd }}</p>
+        <p>Max People: {{ offer.maxNumberOfPeople }}</p>
+        <p v-if="offer.offering">It is offering now</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import { OfferFormModel } from "@/models/OfferFormModel";
+
+const props = defineProps<{
+  offer: OfferFormModel;
+}>();
+</script>
+
+<style scoped>
+.offerSide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  width: 40%;
+  text-align: center;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.container {
+  padding: 2px 16px;
+}
+</style>

FrontendFolder/switch-room/src/components/MatchWishList.vue

+<template>
+  <div class="wishlistSide">
+    <div class="card">
+      <div class="container">
+        <h4><b>Matched required space Information</b></h4>
+        <p>required city: {{ wishlist.cityName }}</p>
+        <p>required state: {{ wishlist.state }}</p>
+        <p>required start time: {{ wishlist.startTime }}</p>
+        <p>required end time: {{ wishlist.endTime }}</p>
+        <p>required details: {{ wishlist.details }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import { WishlistItemModel } from "@/models/WishlistItemModel";
+
+const props = defineProps<{
+  wishlist: WishlistItemModel;
+}>();
+</script>
+
+<style scoped>
+.wishlistSide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  width: 40%;
+  text-align: center;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.container {
+  padding: 2px 16px;
+}
+</style>

FrontendFolder/switch-room/src/components/Notification.vue

+<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>
+    <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>
+        </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>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { OfferNotification } from "@/models/OfferNotification";
+import * as NotificationService from "@/services/NotificationService";
+import { useRoute } from "vue-router";
+import { onMounted } from "vue";
+
+const route = useRoute();
+
+function getCookie(userId: string) {
+  const value = `; ${document.cookie}`;
+  const parts: string[] = value.split(`; ${userId}=`);
+  if (parts.length === 2) return parts?.pop()?.split(";").shift();
+}
+
+const offers = ref([] as OfferNotification[]);
+const offers2 = ref([] as OfferNotification[]);
+async function fetchNotification(userId: number) {
+  const response = await NotificationService.getNotificationFromServerWithID(
+    userId
+  );
+  // const response2 =
+  //   await NotificationService.getNotificationwishFromServerWithID(userId);
+  // console.log(response2);
+  offers.value = response.data;
+  // offers2.value = response2.data;
+}
+
+async function fetchNotificationwish(userId: number) {
+  const response2 =
+    await NotificationService.getNotificationwishFromServerWithID(userId);
+  offers2.value = response2.data;
+}
+
+watch(
+  () => route.name,
+  (values) => {
+    const userIdString: string = getCookie("userId");
+    let userIdNumber = +userIdString;
+    fetchNotification(userIdNumber);
+    fetchNotificationwish(userIdNumber);
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.notification {
+  margin: auto;
+  justify-content: space-between;
+}
+.example-showcase .el-dropdown + .el-dropdown {
+  margin-left: 15px;
+}
+.example-showcase .el-dropdown-link {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+}
+</style>

FrontendFolder/switch-room/src/components/WishlistPage.vue

@@ -152,7 +152,6 @@
           </el-container>
         </div>
       </el-card>
-
     </el-col>
     <el-col :span="2"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
@@ -320,7 +319,7 @@ const updateForm = async (formEl: FormInstance | undefined) =>{
           wishlistList.value[selectedIdx] = data["data"];
           buttonState.value = "edit";
         }
-      })
+      )
       console.log("submit!");
     } else {
       console.log("error submit!", fields);

FrontendFolder/switch-room/src/models/OfferNotification.ts

+export class OfferNotification {
+  public offerId: number;
+  public wishlistItemId: number;
+  public modifyDate: Date;
+  public offerResult: number;
+  public wishlistResult: number;
+
+  constructor(
+    offerId = -1,
+    wishlistItemId = -1,
+    modifyDate = new Date(),
+    offerResult = -1,
+    wishlistResult = -1
+  ) {
+    this.offerId = offerId;
+    this.wishlistItemId = wishlistItemId;
+    this.modifyDate = modifyDate;
+    this.offerResult = offerResult;
+    this.wishlistResult = wishlistResult;
+  }
+}

FrontendFolder/switch-room/src/router/index.ts

@@ -3,6 +3,7 @@ import HomeView from "../views/HomeView.vue";
 import RegisterView from "../views/RegisterView.vue";
 import ResetPasswordView from "../views/ResetPasswordView.vue";
 import ProfileView from "../views/ProfileView.vue";
+import MatchedView from "../views/MatchedView.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -79,9 +80,14 @@ const routes: Array<RouteRecordRaw> = [
       requiresAuth: true,
       hideHeader: false,
     },
-    component: () =>
-      import("../views/LoginMainPageView.vue"),
-  }
+    component: () => import("../views/LoginMainPageView.vue"),
+  },
+
+  {
+    path: "/matched-result/:offerId/:wishlistId",
+    name: "MatchResultPage",
+    component: MatchedView,
+  },
 ];
 
 const router = createRouter({
@@ -90,15 +96,15 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  if (to.matched.some(record => record.meta.requiresAuth)) {
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!document.cookie) {
-      next({ name: 'home' })
+      next({ name: "home" });
     } else {
-      next()
+      next();
     }
   } else {
-    next()
+    next();
   }
-})
+});
 
 export default router;

FrontendFolder/switch-room/src/services/Constans.ts

@@ -3,14 +3,69 @@
  */
 
 const SEVER_IP = location.hostname;
+
 const SERVER_PORT = 8081;
 const Server_URL =
   location.protocol + "//" + SEVER_IP + ":" + SERVER_PORT + "/";
 
-const USA_STATE_INITAL_LIST = ['AL', 'AK', 'AS', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'GU', 'HI',
-    'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
-    'NM', 'NY', 'NC', 'ND', 'MP', 'OH', 'OK', 'OR', 'PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'VI',
-    'WA', 'WV', 'WI', 'WY']
+const USA_STATE_INITAL_LIST = [
+  "AL",
+  "AK",
+  "AS",
+  "AZ",
+  "AR",
+  "CA",
+  "CO",
+  "CT",
+  "DE",
+  "DC",
+  "FL",
+  "GA",
+  "GU",
+  "HI",
+  "ID",
+  "IL",
+  "IN",
+  "IA",
+  "KS",
+  "KY",
+  "LA",
+  "ME",
+  "MD",
+  "MA",
+  "MI",
+  "MN",
+  "MS",
+  "MO",
+  "MT",
+  "NE",
+  "NV",
+  "NH",
+  "NJ",
+  "NM",
+  "NY",
+  "NC",
+  "ND",
+  "MP",
+  "OH",
+  "OK",
+  "OR",
+  "PA",
+  "PR",
+  "RI",
+  "SC",
+  "SD",
+  "TN",
+  "TX",
+  "UT",
+  "VT",
+  "VA",
+  "VI",
+  "WA",
+  "WV",
+  "WI",
+  "WY",
+];
 
 export { SEVER_IP, SERVER_PORT, Server_URL, USA_STATE_INITAL_LIST };
 

FrontendFolder/switch-room/src/services/FetchOfferService.ts

+import * as serverHttpService from "./ServerHttpService";
+
+const baseUrl = "matchedOffer";
+
+function getOffersFromServerWithID(offerId: number) {
+  const urlPath = "/" + offerId;
+  return serverHttpService.Get(baseUrl + urlPath);
+}
+
+export { getOffersFromServerWithID };

FrontendFolder/switch-room/src/services/FetchWishListService.ts

+import * as serverHttpService from "./ServerHttpService";
+
+const baseUrl = "matchedWishList";
+
+function getWishListFromServerWithID(wishListId: number) {
+  const urlPath = "/" + wishListId;
+  return serverHttpService.Get(baseUrl + urlPath);
+}
+
+export { getWishListFromServerWithID };