diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b87edb4807e6d9184ac29665cbce894e9d30f6d5..8f82a7bf6cbf805cc53490fc82626f08f7257734 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,13 +4,13 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
- <list default="true" id="b729e076-3c33-49b4-9d1d-ab622bea054d" name="Changes" comment="Change service to ts">
- <change afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/OfferPageService.ts" afterDir="false" />
- <change afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/WishlistService.ts" afterDir="false" />
+ <list default="true" id="b729e076-3c33-49b4-9d1d-ab622bea054d" name="Changes" comment="WishListPage and OfferPage service done. Now move to backend service.">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/OfferPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/OfferPage.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/WishlistPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/components/WishlistPage.vue" afterDir="false" />
- <change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/models/OfferFormModel.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/models/OfferFormModel.ts" afterDir="false" />
+ <change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/OfferPageService.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/OfferPageService.ts" afterDir="false" />
+ <change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/ServerHttpService.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/ServerHttpService.ts" afterDir="false" />
+ <change beforePath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/WishlistService.ts" beforeDir="false" afterPath="$PROJECT_DIR$/FrontendFolder/switch-room/src/services/WishlistService.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -142,7 +142,14 @@
<option name="project" value="LOCAL" />
<updated>1666222640794</updated>
</task>
- <option name="localTasksCounter" value="6" />
+ <task id="LOCAL-00006" summary="WishListPage and OfferPage UI done. But ref<FormInstance> has problem, need to check.">
+ <created>1666242778588</created>
+ <option name="number" value="00006" />
+ <option name="presentableId" value="LOCAL-00006" />
+ <option name="project" value="LOCAL" />
+ <updated>1666242778588</updated>
+ </task>
+ <option name="localTasksCounter" value="7" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -170,7 +177,9 @@
<MESSAGE value="WishListPage router done" />
<MESSAGE value="WishListPage side list UI done" />
<MESSAGE value="WishListPage whole UI done." />
- <option name="LAST_COMMIT_MESSAGE" value="WishListPage whole UI done." />
+ <MESSAGE value="WishListPage and OfferPage UI done. But ref<FormInstance> has problem, need to check." />
+ <MESSAGE value="WishListPage and OfferPage service done. Now move to backend service." />
+ <option name="LAST_COMMIT_MESSAGE" value="WishListPage and OfferPage service done. Now move to backend service." />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />
diff --git a/FrontendFolder/switch-room/src/components/OfferPage.vue b/FrontendFolder/switch-room/src/components/OfferPage.vue
index 2e4fd7519d82e41a3b386d720177ec42435f669a..f4722e7fdf72469c50ef0522f657b34119452ec3 100644
--- a/FrontendFolder/switch-room/src/components/OfferPage.vue
+++ b/FrontendFolder/switch-room/src/components/OfferPage.vue
@@ -28,32 +28,37 @@
<el-input v-model="ruleForm.zipCode" placeholder="24061.." />
</el-col>
</el-form-item>
- <el-form-item label="Space Type" prop="spaceType">
- <el-select
- v-model="ruleForm.spaceType"
- placeholder="Please select your Space Type"
- >
- <el-option label="Apartment (No Roommates)" value="apt-single" />
- <el-option
- label="Apartment (Shared with Roommates)"
- value="apt-share"
- />
- <el-option label="Townhouse (No Roommates)" value="th-single" />
- <el-option
- label="Townhouse (Shared with Roommates)"
- value="th-share"
- />
- <el-option
- label="Single Family House (No Roommates)"
- value="sfh-single"
- />
- <el-option
- label="Single Family House (Shared with Roommates)"
- value="sfh-share"
- />
- <el-option label="Other" value="other" />
- </el-select>
- </el-form-item>
+ <el-col :span="24">
+ <el-form-item label="Space Type" prop="spaceType">
+ <el-select
+ v-model="ruleForm.spaceType"
+ placeholder="Please select your Space Type"
+ >
+ <el-option
+ label="Apartment (No Roommates)"
+ value="apt-single"
+ />
+ <el-option
+ label="Apartment (Shared with Roommates)"
+ value="apt-share"
+ />
+ <el-option label="Townhouse (No Roommates)" value="th-single" />
+ <el-option
+ label="Townhouse (Shared with Roommates)"
+ value="th-share"
+ />
+ <el-option
+ label="Single Family House (No Roommates)"
+ value="sfh-single"
+ />
+ <el-option
+ label="Single Family House (Shared with Roommates)"
+ value="sfh-share"
+ />
+ <el-option label="Other" value="other" />
+ </el-select>
+ </el-form-item>
+ </el-col>
<el-form-item
label="Other Type"
v-if="ruleForm.spaceType === 'other'"
@@ -91,7 +96,7 @@
<span class="text-gray-500"> To </span>
</el-col>
<el-col :span="7">
- <el-form-item prop="availableTimeEnd">
+ <el-form-item prop="_availableTimeEnd">
<el-date-picker
v-model="ruleForm.availableTimeEnd"
label="Pick a time"
@@ -105,7 +110,7 @@
label="Max Number of People"
:required="ruleForm.offering"
v-if="ruleForm.offering"
- prop="maxNumberOfPeople"
+ prop="_maxNumberOfPeople"
>
<el-col :span="4">
<el-input v-model="ruleForm.maxNumberOfPeople" />
@@ -140,13 +145,15 @@
</el-row>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { OfferFormModel } from "@/models/OfferFormModel";
-import { defineComponent } from "vue";
-
import * as OfferPageService from "@/services/OfferPageService";
+
+// Form verification relate field
+const formSize = ref("default");
+const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
spaceLocateCity: [
{
@@ -171,35 +178,52 @@ const rules = reactive<FormRules>({
},
],
});
+// TODO: uncomment it when API connection ready
+const userId = -1;
+//const ruleForm = reactive(OfferPageService.getUserOfferInfoFromServer(-1));
+const ruleForm = reactive(new OfferFormModel());
-const currentUserId = -1;
-const ruleFormRef = ref<FormInstance>();
-const formSize = ref("default");
+const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ let result = OfferPageService.createNewUserOffer(userId, ruleForm);
+ // TODO: Check the return result
+ console.log("submit!");
+ } else {
+ console.log("error submit!", fields);
+ }
+ console.log(ruleForm);
+ });
+};
-export default defineComponent({
- data() {
- return {
- ruleForm: new OfferFormModel(),
- rules,
- ruleFormRef,
- //ruleForm: OfferPageService.getUserOfferInfoFromServer(currentUserId),
- };
- },
- methods: {
- async submitForm(formEl: FormInstance | undefined) {
- if (!formEl) return;
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log("submitted!", fields);
- } else {
- console.log("error submit!", fields);
- }
- });
- },
- resetForm(formEl: FormInstance | undefined) {
- if (!formEl) return;
- formEl.resetFields();
- },
- },
-});
+const updateFrom = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ let result = OfferPageService.updateOffer(userId, ruleForm);
+ // TODO: Check the return result
+ console.log("update submit!");
+ } else {
+ console.log("error submit!", fields);
+ }
+ console.log(ruleForm);
+ });
+};
+
+const deleteFrom = () => {
+ // TODO: Check the return result
+ let result = OfferPageService.deleteOffer(userId, ruleForm.offerId);
+ console.log("Record deleted");
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.resetFields();
+};
+
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+ value: `${idx + 1}`,
+ label: `${idx + 1}`,
+}));
</script>
diff --git a/FrontendFolder/switch-room/src/components/WishlistPage.vue b/FrontendFolder/switch-room/src/components/WishlistPage.vue
index 2b8dfca323b835539f22624e0fc979c0792b3286..9f391e6b03f35ac4dbfecea7961e07eb9ab8fc10 100644
--- a/FrontendFolder/switch-room/src/components/WishlistPage.vue
+++ b/FrontendFolder/switch-room/src/components/WishlistPage.vue
@@ -22,7 +22,9 @@
>
<span>{{ item.cityName }}</span>
<div class="bottom">
- <time class="time">"2077-7-77 to 2077-7-77"</time>
+ <time class="time"
+ >"{{ item.startTime }} to {{ item.endTime }}"</time
+ >
</div>
</el-card>
<el-card
@@ -106,7 +108,7 @@
</el-row>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { WishlistItemModel } from "@/models/WishlistItemModel";
@@ -114,30 +116,6 @@ import { defineComponent } from "vue";
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
-
-let wishlistList = [
- {
- wishlistId: 1,
- userId: 1,
- cityName: "Example City Name1",
- state: "Example State",
- stateCode: 51,
- startTime: "date1",
- endTime: "date2",
- details: "Plans",
- },
- {
- wishlistId: 2,
- userId: 1,
- cityName: "Example City Name2",
- state: "Example State",
- stateCode: 51,
- startTime: "date1",
- endTime: "date2",
- details: "Plans",
- },
-];
-
const rules = reactive<FormRules>({
cityName: [
{
@@ -172,39 +150,97 @@ const rules = reactive<FormRules>({
],
});
-export default defineComponent({
- data() {
- return {
- wishlistItem: new WishlistItemModel(),
- wishlistList,
- rules,
- };
+// TODO: when API ready, change to service
+const wishlistList = reactive([
+ {
+ wishlistId: 1,
+ userId: 1,
+ cityName: "Example City Name1",
+ state: "Example State",
+ stateCode: 51,
+ startTime: "date1",
+ endTime: "date2",
+ details: "Plans",
},
- methods: {
- selectItem(idx: number) {
- console.log("Selected wishlist Item: " + idx);
- this.wishlistItem = wishlistList[idx];
- },
- addNewWishlistItem() {
- console.log("addNewWishlistItem");
- this.wishlistItem = new WishlistItemModel();
- },
- async submitForm(formEl: FormInstance | undefined) {
- if (!formEl) return;
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log("submit!");
- } else {
- console.log("error submit!", fields);
- }
- });
- },
- resetForm(formEl: FormInstance | undefined) {
- if (!formEl) return;
- formEl.resetFields();
- },
+ {
+ wishlistId: 2,
+ userId: 1,
+ cityName: "Example City Name2",
+ state: "Example State",
+ stateCode: 51,
+ startTime: "date1",
+ endTime: "date2",
+ details: "Plans",
},
-});
+]);
+
+// TODO: when API ready, change to service
+const wishlistItem = ref(new WishlistItemModel());
+
+function selectItem(idx: number) {
+ console.log("Selected wishlist Item: " + idx);
+ wishlistItem.value = reactive(wishlistList[idx]);
+}
+
+function addNewWishlistItem() {
+ console.log("addNewWishlistItem");
+ wishlistItem.value = new WishlistItemModel();
+}
+const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log("submit!");
+ } else {
+ console.log("error submit!", fields);
+ }
+ console.log(wishlistItem.value);
+ });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.resetFields();
+};
+
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+ value: `${idx + 1}`,
+ label: `${idx + 1}`,
+}));
+
+// export default defineComponent({
+// data() {
+// return {
+// wishlistItem: new WishlistItemModel(),
+// wishlistList,
+// rules,
+// };
+// },
+// methods: {
+// selectItem(idx: number) {
+// console.log("Selected wishlist Item: " + idx);
+// this.wishlistItem = wishlistList[idx];
+// },
+// addNewWishlistItem() {
+// console.log("addNewWishlistItem");
+// this.wishlistItem = new WishlistItemModel();
+// },
+// async submitForm(formEl: FormInstance | undefined) {
+// if (!formEl) return;
+// await formEl.validate((valid, fields) => {
+// if (valid) {
+// console.log("submit!");
+// } else {
+// console.log("error submit!", fields);
+// }
+// });
+// },
+// resetForm(formEl: FormInstance | undefined) {
+// if (!formEl) return;
+// formEl.resetFields();
+// },
+// },
+// });
</script>
<style scoped>
diff --git a/FrontendFolder/switch-room/src/services/OfferPageService.ts b/FrontendFolder/switch-room/src/services/OfferPageService.ts
index e586611aaaa063b8e90e0d97005531f049b4174d..d6123ee4fb76abbad05374d1ca949953ea22cc63 100644
--- a/FrontendFolder/switch-room/src/services/OfferPageService.ts
+++ b/FrontendFolder/switch-room/src/services/OfferPageService.ts
@@ -1,5 +1,5 @@
/**
- * This calss will fatch and send user offer data from back end
+ * This class will fetch and send user offer data from back end
*/
import * as serverHttpService from "./ServerHttpService";
@@ -39,7 +39,13 @@ export function updateOffer(userId: number, offerForm: OfferFormModel) {
* @param offerId form id
*/
export function deleteOffer(userId: number, offerId: number) {
- return serverHttpService.Delete(
- baseUrl + "/deleteOffer" + userId + "/" + offerId
- );
+ const urlPath = baseUrl + "/deleteOffer/" + userId + "?offerId=" + offerId;
+ return serverHttpService.Delete(urlPath);
}
+
+/*
+Change logs:
+Date | Author | Description
+2022-10-20 | Fangzheng Zhang | create class and init
+
+ */
diff --git a/FrontendFolder/switch-room/src/services/ServerHttpService.ts b/FrontendFolder/switch-room/src/services/ServerHttpService.ts
index 26c67906ddbc47ff2a1504f33fa7db4edf3f1a2f..c0730e849fd1178128c6012ded65ee69a162671c 100644
--- a/FrontendFolder/switch-room/src/services/ServerHttpService.ts
+++ b/FrontendFolder/switch-room/src/services/ServerHttpService.ts
@@ -6,91 +6,90 @@
import * as Constants from "./Constans";
function Get(path: string) {
- const url = Constants.Server_URL + path;
- console.log("GET from: " + url);
+ const url = encodeURIComponent(Constants.Server_URL + path);
+ console.log("GET from: " + url);
- return fetch(url, {
- method: "GET",
+ return fetch(url, {
+ method: "GET",
+ })
+ .then((response) => {
+ if (response.ok) {
+ return response.json();
+ }
+ throw new Error(
+ "Unable to receive GET request from server with url:" + url
+ );
})
- .then((response) => {
- if (response.ok) {
- return response.json();
- }
- throw new Error(
- "Unable to receive GET request from server with url:" + url
- );
- })
- .catch((reason) => {
- console.log("Error on GET request", reason);
- });
+ .catch((reason) => {
+ console.log("Error on GET request", reason);
+ });
}
function Post(path: string, bodyData: any) {
- const url = Constants.Server_URL + path;
- console.log("POST from: " + url);
- return fetch(url, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(bodyData),
+ const url = encodeURIComponent(Constants.Server_URL + path);
+ console.log("POST from: " + url);
+ return fetch(url, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(bodyData),
+ })
+ .then((response) => {
+ if (response.ok) {
+ return response.json();
+ }
+ throw new Error(
+ "Unable to receive POST request from server with url:" + url
+ );
})
- .then((response) => {
- if (response.ok) {
- return response.json();
- }
- throw new Error(
- "Unable to receive POST request from server with url:" + url
- );
- })
- .catch((reason) => {
- console.log("Error on POST request", reason);
- });
+ .catch((reason) => {
+ console.log("Error on POST request", reason);
+ });
}
function Put(path: string, bodyData: any) {
- const url = Constants.Server_URL + path;
- console.log("PUT from: " + url);
- return fetch(url, {
- method: "PUT",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(bodyData),
+ const url = encodeURIComponent(Constants.Server_URL + path);
+ console.log("PUT from: " + url);
+ return fetch(url, {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(bodyData),
+ })
+ .then((response) => {
+ if (response.ok) {
+ return response.json();
+ }
+ throw new Error(
+ "Unable to receive PUT request from server with url:" + url
+ );
})
- .then((response) => {
- if (response.ok) {
- return response.json();
- }
- throw new Error(
- "Unable to receive PUT request from server with url:" + url
- );
- })
- .catch((reason) => {
- console.log("Error on PUT request", reason);
- });
+ .catch((reason) => {
+ console.log("Error on PUT request", reason);
+ });
}
function Delete(path: string) {
- const url = Constants.Server_URL + path;
- console.log("Delete from: " + url);
- return fetch(url, {
- method: "Delete",
+ const url = encodeURIComponent(Constants.Server_URL + path);
+ console.log("Delete from: " + url);
+ return fetch(url, {
+ method: "Delete",
+ })
+ .then((response) => {
+ if (response.ok) {
+ return response.json();
+ }
+ throw new Error(
+ "Unable to receive DELETE request from server with url:" + url
+ );
})
- .then((response) => {
- if (response.ok) {
- return response.json();
- }
- throw new Error(
- "Unable to receive DELETE request from server with url:" + url
- );
- })
- .catch((reason) => {
- console.log("Error on DELETE request", reason);
- });
+ .catch((reason) => {
+ console.log("Error on DELETE request", reason);
+ });
}
-
export { Get, Post, Put, Delete };
/*
diff --git a/FrontendFolder/switch-room/src/services/WishlistService.ts b/FrontendFolder/switch-room/src/services/WishlistService.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..45447279739e62c2fff0f14d5ed79bd4ebf2a09c 100644
--- a/FrontendFolder/switch-room/src/services/WishlistService.ts
+++ b/FrontendFolder/switch-room/src/services/WishlistService.ts
@@ -0,0 +1,62 @@
+/**
+ * This class will fetch and send user wishlist data from back end
+ */
+
+import * as serverHttpService from "./ServerHttpService";
+import { WishlistItemModel } from "@/models/WishlistItemModel";
+
+const baseUrl = "wishlist";
+
+/**
+ * This function will fetch users wishlist item list
+ * @param userId user's id
+ */
+export function getUserWishlistInfo(userId: number) {
+ return serverHttpService.Get(baseUrl + "/" + userId);
+}
+
+/**
+ * Send new wishlistItem information to server to create new record
+ * @param userId user's id
+ * @param wishlistItem new wishlistItem
+ */
+export function createNewWishlistItem(
+ userId: number,
+ wishlistItem: WishlistItemModel
+) {
+ return serverHttpService.Post(baseUrl + "/newWishlistItem", wishlistItem);
+}
+
+/**
+ * Update an sexist wishlistItem
+ * @param userId user's id
+ * @param wishlistItem changed wishlistItem
+ */
+export function updateWishlistItem(
+ userId: number,
+ wishlistItem: WishlistItemModel
+) {
+ return serverHttpService.Post(baseUrl + "/updateWishlistItem", wishlistItem);
+}
+
+/**
+ * Remove one of user's wishlistItem from DB
+ * @param userId user's id
+ * @param wishlistItemId wishlist Item's Id
+ */
+export function deleteWishlistItem(userId: number, wishlistItemId: number) {
+ const urlPath =
+ baseUrl +
+ "/deleteWishlistItem/" +
+ userId +
+ "?wishlistItemId=" +
+ wishlistItemId;
+ return serverHttpService.Delete(urlPath);
+}
+
+/*
+Change logs:
+Date | Author | Description
+2022-10-20 | Fangzheng Zhang | create class and init
+
+ */