new update

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);
+        }
+    }
+}

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/WishlistPage.vue

@@ -63,10 +63,14 @@
 
                   <el-form-item label="State:" prop="state">
                     <el-select
-                        v-model="wishlistItem.state"
-                        placeholder="Please select state">
-                      <el-option v-for="(state_item, index) in USA_STATE_INITAL_LIST"
-                                 :label="state_item" :value="state_item" />
+                      v-model="wishlistItem.state"
+                      placeholder="Please select state"
+                    >
+                      <el-option
+                        v-for="(state_item, index) in USA_STATE_INITAL_LIST"
+                        :label="state_item"
+                        :value="state_item"
+                      />
                     </el-select>
                   </el-form-item>
 
@@ -135,7 +139,7 @@ const rules = reactive<FormRules>({
     },
     { min: 0, max: 20, message: "Length should be 0 to 20", trigger: "blur" },
   ],
-  zipCode:[
+  zipCode: [
     {
       required: true,
       message: "Please give the stat of the city located.",
@@ -169,24 +173,21 @@ const rules = reactive<FormRules>({
 
 // TODO: uncomment it when API connection ready
 const userId = 233;
-const wishlistList = reactive({value:[]});
+const wishlistList = reactive({ value: [] });
 const wishlistItem = ref(new WishlistItemModel());
 wishlistItem.value.wishlistItemId = null;
 
 onMounted(() => {
-  WishlistService.getUserWishlistInfo(userId).then((data)=>{
+  WishlistService.getUserWishlistInfo(userId).then((data) => {
     console.log("Receiving wishlist list data", data);
-    if(data["data"] === null){
+    if (data["data"] === null) {
       wishlistList.value = [];
-    }else{
-      wishlistList.value
+    } else {
+      wishlistList.value;
       wishlistList.value = data["data"];
     }
-  })
-
-})
-
-
+  });
+});
 
 function selectItem(idx: number) {
   console.log("Selected wishlist Item: " + idx);
@@ -203,15 +204,17 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      WishlistService.createNewWishlistItem( userId, wishlistItem.value).then((data)=>{
-        console.log("Receiving create wishlist item data", data);
-        if(data["data"] === null){
-          // TODO: create failed, handle it later
-        }else{
-          wishlistItem.value = data["data"];
-          wishlistList.value.push(data["data"]);
+      WishlistService.createNewWishlistItem(userId, wishlistItem.value).then(
+        (data) => {
+          console.log("Receiving create wishlist item data", data);
+          if (data["data"] === null) {
+            // TODO: create failed, handle it later
+          } else {
+            wishlistItem.value = data["data"];
+            wishlistList.value.push(data["data"]);
+          }
         }
-      })
+      );
       console.log("submit!");
     } else {
       console.log("error submit!", fields);
@@ -224,18 +227,20 @@ const resetForm = (formEl: FormInstance | undefined) => {
   // TODO: make it delete to testing, need to change it back
   // if (!formEl) return;
   // formEl.resetFields();
-  if(wishlistItem.value.wishlistItemId !== null){
-    WishlistService.deleteWishlistItem(userId, wishlistItem.value.wishlistItemId).then((data)=>{
+  if (wishlistItem.value.wishlistItemId !== null) {
+    WishlistService.deleteWishlistItem(
+      userId,
+      wishlistItem.value.wishlistItemId
+    ).then((data) => {
       console.log("Delete wishlist item", data);
-      if(data["data"] === null){
+      if (data["data"] === null) {
         // TODO: delete failed or something wrong
-      }else{
-        wishlistList.value=data["data"];
+      } else {
+        wishlistList.value = data["data"];
         addNewWishlistItem();
       }
-    })
+    });
   }
-
 };
 
 const options = Array.from({ length: 10000 }).map((_, idx) => ({

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

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import RegisterView from "../views/RegisterView.vue";
 import ResetPasswordView from "../views/ResetPasswordView.vue";
+import MatchedView from "../views/MatchedView.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -57,6 +58,12 @@ const routes: Array<RouteRecordRaw> = [
     },
     component: () => import("../views/LoginMainPageView.vue"),
   },
+
+  {
+    path: "/matched-result/:offerId/:wishlistId",
+    name: "MatchResultPage",
+    component: MatchedView,
+  },
 ];
 
 const router = createRouter({

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 };

FrontendFolder/switch-room/src/views/MatchedView.vue

+<template>
+  <app-header></app-header>
+  <div class="match-view">
+    <p>This is the matched result page</p>
+    <match-offer :offer="offer"></match-offer>
+    <match-wish-list :wishlist="wishlist"></match-wish-list>
+    <button>Sign Agreement Documentation</button>
+    <button>It is not suitable</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import * as FetchOfferService from "@/services/FetchOfferService";
+import * as FetchWishListService from "@/services/FetchWishListService";
+import { OfferFormModel } from "@/models/OfferFormModel";
+import { WishlistItemModel } from "@/models/WishlistItemModel";
+import MatchOffer from "@/components/MatchOffer.vue";
+import MatchWishList from "@/components/MatchWishList.vue";
+import AppHeader from "@/components/AppHeader.vue";
+
+const route = useRoute();
+const offer = ref(OfferFormModel);
+const wishlist = ref(WishlistItemModel);
+
+async function fetchOffer(offerId: number) {
+  const response = await FetchOfferService.getOffersFromServerWithID(offerId);
+  console.log(response.data);
+  offer.value = response.data;
+}
+
+async function fetchWishList(wishlistId: number) {
+  const response = await FetchWishListService.getWishListFromServerWithID(
+    wishlistId
+  );
+  console.log(response.data);
+  wishlist.value = response.data;
+}
+
+watch(
+  () => route.name,
+  (values) => {
+    const offerIdName = route.params.offerId;
+    const offerIdNumber = +offerIdName;
+    const wishlistIdName = route.params.wishlistId;
+    const wishlistIdNumber = +wishlistIdName;
+    fetchOffer(offerIdNumber);
+    fetchWishList(wishlistIdNumber);
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.match-view {
+  display: block;
+  text-align: center;
+}
+
+.button1 {
+  margin-top: 2%;
+  margin-left: 2%;
+}
+
+button,
+button::after {
+  margin-top: 2%;
+  margin-left: 2%;
+  width: 300px;
+  height: 86px;
+  font-size: 36px;
+  font-family: "Bebas Neue", cursive;
+  background: #1e5be6;
+  border: 0;
+  color: #fff;
+  letter-spacing: 3px;
+  line-height: 88px;
+  box-shadow: 6px 0px 0px #00e6f6;
+  outline: transparent;
+  position: relative;
+}
+
+button::after {
+  --slice-0: inset(50% 50% 50% 50%);
+  --slice-1: inset(80% -6px 0 0);
+  --slice-2: inset(50% -6px 30% 0);
+  --slice-3: inset(10% -6px 85% 0);
+  --slice-4: inset(40% -6px 43% 0);
+  --slice-5: inset(80% -6px 5% 0);
+
+  content: "AVAILABLE NOW";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    45deg,
+    transparent 3%,
+    #00e6f6 3%,
+    #00e6f6 5%,
+    #ff013c 5%
+  );
+  text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
+  clip-path: var(--slice-0);
+}
+
+button:hover::after {
+  animation: 1s glitch;
+  animation-timing-function: steps(2, end);
+}
+
+@keyframes glitch {
+  0% {
+    clip-path: var(--slice-1);
+    transform: translate(-20px, -10px);
+  }
+  10% {
+    clip-path: var(--slice-3);
+    transform: translate(10px, 10px);
+  }
+  20% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 10px);
+  }
+  30% {
+    clip-path: var(--slice-3);
+    transform: translate(0px, 5px);
+  }
+  40% {
+    clip-path: var(--slice-2);
+    transform: translate(-5px, 0px);
+  }
+  50% {
+    clip-path: var(--slice-3);
+    transform: translate(5px, 0px);
+  }
+  60% {
+    clip-path: var(--slice-4);
+    transform: translate(5px, 10px);
+  }
+  70% {
+    clip-path: var(--slice-2);
+    transform: translate(-10px, 10px);
+  }
+  80% {
+    clip-path: var(--slice-5);
+    transform: translate(20px, -10px);
+  }
+  90% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 0px);
+  }
+  100% {
+    clip-path: var(--slice-1);
+    transform: translate(0);
+  }
+}
+</style>