From 83562a046fae0572d4409d19502dd1e5118d328b Mon Sep 17 00:00:00 2001
From: Frank Zhang <fz2907@vt.edu>
Date: Thu, 24 Nov 2022 19:19:14 -0500
Subject: [PATCH] history main body started
---
.../src/components/AgreedMatchPage.vue | 208 ++++++++++++++++--
1 file changed, 186 insertions(+), 22 deletions(-)
diff --git a/FrontendFolder/switch-room/src/components/AgreedMatchPage.vue b/FrontendFolder/switch-room/src/components/AgreedMatchPage.vue
index 3656e71e..02debb66 100644
--- a/FrontendFolder/switch-room/src/components/AgreedMatchPage.vue
+++ b/FrontendFolder/switch-room/src/components/AgreedMatchPage.vue
@@ -25,7 +25,100 @@
</el-card>
</el-space>
</el-aside>
- <el-main>Main</el-main>
+ <el-main>
+ <!-- This is the main body part -->
+ <el-card shadow="never" class="main-card">
+ <span>{{displayPage}} Matched Record Detail</span>
+ <el-form
+ ref="ruleFormRef"
+ :model="agreedRecord"
+ :rules="rules"
+ label-width="120px"
+ :label-position="'left'"
+ class="demo-ruleForm"
+ :size="formSize"
+ status-icon
+ >
+ <el-form-item></el-form-item>
+
+ <el-form-item label="City Name:" prop="city">
+ <el-input v-model="agreedRecord.city" :readonly="true" />
+ </el-form-item>
+
+ <el-form-item label="State:" prop="state">
+ <el-select
+ v-model="agreedRecord.state"
+ placeholder="Please select state"
+ :disabled="true"
+ >
+ <el-option v-for="(state_item, index) in USA_STATE_INITAL_LIST"
+ :label="state_item" :value="state_item" />
+ </el-select>
+ </el-form-item>
+
+ <el-form-item label="Trip Start Time">
+ <el-form-item prop="startTime">
+ <el-date-picker
+ v-model="agreedRecord.startTime"
+ type="date"
+ label="Pick a date"
+ placeholder="Pick a date"
+ style="width: 100%"
+ :readonly="true"
+ />
+ </el-form-item>
+ </el-form-item>
+
+ <el-form-item label="Trip End Time">
+ <el-form-item prop="endTime">
+ <el-date-picker
+ v-model="agreedRecord.endTime"
+ type="date"
+ label="Pick a date"
+ placeholder="Pick a date"
+ style="width: 100%"
+ :readonly="true"
+ />
+ </el-form-item>
+ </el-form-item>
+
+ <!-- Rating and comment when the agreement is due -->
+ <el-form-item label="Rate Your Visitor:" prop="toVisitorStar"
+ v-if="!agreedRecord.onGoing && displayPage==='Offer'" >
+ <el-rate
+ v-model="agreedRecord.toVisitorStar"
+ :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+ show-text
+ />
+ </el-form-item>
+
+ <el-form-item label="Leave Comment:" prop="toVisitorComment"
+ v-if="!agreedRecord.onGoing && displayPage==='Offer'">
+
+ </el-form-item>
+
+ <el-form-item label="Rate Your Host:" prop="toOfferStar"
+ v-if="!agreedRecord.onGoing && displayPage==='Wishlist'">
+ <el-rate
+ v-model="agreedRecord.toOfferStar"
+ :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+ show-text
+ />
+ </el-form-item>
+
+ <el-form-item label="Leave Comment:" prop="toOfferComment"
+ v-if="!agreedRecord.onGoing && displayPage==='Wishlist'" >
+
+ </el-form-item>
+
+
+ <el-button type="primary" v-if="buttonState === 'edit'" @click="onEdit()"
+ >Edit Comment</el-button>
+ <el-button type="success" v-if="buttonState === 'update'" @click="updateForm(ruleFormRef)"
+ >Save</el-button>
+ </el-form>
+ </el-card>
+ </el-main>
</el-container>
</el-container>
</div>
@@ -37,16 +130,20 @@ import { Calendar } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from "vue";
import {AgreedRecordModel} from "@/models/AgreedRecordModel";
import * as AgreedRecordService from "@/services/AgreedMatchService";
+import type { FormInstance, FormRules } from "element-plus";
+import { USA_STATE_INITAL_LIST } from "@/services/Constans";
-let displayPage = null;
+let displayPage = ref("");
const sideList = reactive({value:[]});
const agreedRecord = ref(new AgreedRecordModel());
+const buttonState = ref("edit");
-const selectItem = (listIdx) => {
- agreedRecord.value = sideList[listIdx];
+const selectItem = (listIdx:number) => {
+ agreedRecord.value = sideList.value[listIdx];
+ console.log("You selected index: " + listIdx+" , and data is: ", agreedRecord.value)
}
-const handleTabClick = (tabIdx) => {
+const handleTabClick = (tabIdx: number) => {
if(tabIdx == 0){
clickOnOfferTab();
}else if(tabIdx == 1){
@@ -56,7 +153,7 @@ const handleTabClick = (tabIdx) => {
const clickOnOfferTab = async() =>{
// Load agreed offers from backend
- displayPage = "offer";
+ displayPage.value = "Offer";
await AgreedRecordService.getAgreedOfferRecord().then((response)=>{
console.log("Receiving offer records from backend: ", response);
if(response["data"]!== null){
@@ -69,11 +166,10 @@ const clickOnOfferTab = async() =>{
const clickOnWishlistTab = async() =>{
// Load agreed Wishlist from backend
- displayPage = "wishlist";
- await AgreedRecordService.getAgreedWishlistRecord().then((response)=>{
- console.log("Receiving wishlist records from backend: ", response);
- // remove it when done
- let testData = {
+ displayPage.value = "Wishlist";
+
+ // remove it when done
+ let testData = {
"message": "Success",
"status": "OK",
"data": [
@@ -95,22 +191,90 @@ const clickOnWishlistTab = async() =>{
}
]
}
- if(response === undefined){
- sideList.value = testData["data"]
- }
- // remove it when done
- if(response["data"]!== null){
- sideList.value = response["data"];
- }else{
- // TODO: display empty page
- }
- })
+
+ sideList.value = testData.data
+
+
+ // await AgreedRecordService.getAgreedWishlistRecord().then((response)=>{
+ // console.log("Receiving wishlist records from backend: ", response);
+ // if(response["data"]!== null){
+ // sideList.value = response["data"];
+ // }else{
+ // // TODO: display empty page
+ // }
+ // })
}
-const formatDate = (dateString) => {
+const formatDate = (dateString: string) => {
const date = new Date(dateString);
return new Intl.DateTimeFormat('en-US').format(date);
}
+
+const rules = reactive<FormRules>({
+ cityName: [
+ {
+ required: true,
+ message: "Please give which city you want to visit.",
+ trigger: "blur",
+ },
+ { min: 0, max: 20, message: "Length should be 0 to 20", trigger: "blur" },
+ ],
+ zipCode:[
+ {
+ required: true,
+ message: "Please give the stat of the city located.",
+ trigger: "blur",
+ },
+ ],
+ state: [
+ {
+ required: true,
+ message: "Please give the stat of the city located.",
+ trigger: "blur",
+ },
+ ],
+ startTime: [
+ {
+ type: "date",
+ required: true,
+ message: "Please pick a date",
+ trigger: "change",
+ },
+ ],
+ endTime: [
+ {
+ type: "date",
+ required: true,
+ message: "Please pick a time",
+ trigger: "change",
+ },
+ ],
+});
+
+const onEdit = () =>{
+ buttonState.value = "update";
+}
+
+const updateForm = async (formEl: FormInstance | undefined) =>{
+ if (!formEl) return;
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ AgreedRecordService.updateRatingInformation( agreedRecord.value).then((response)=>{
+ console.log("Receiving wishlist item data", response);
+ if(response["data"] === null){
+ // TODO: create failed, handle it later
+ }else{
+ buttonState.value = "edit";
+ }
+ console.log("submit!");
+ })
+ } else {
+ console.log("error submit!", fields);
+ }
+ console.log(agreedRecord.value);
+ });
+}
+
</script>
<style>
--
GitLab