From 7c4d071ed8210b5280330de4d6e8794d7d244c55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20R=C3=B8skaft?= <haakoero@stud.ntnu.no> Date: Thu, 5 May 2022 16:00:32 +0200 Subject: [PATCH] Datepicker now correctly displayes non availible dates --- .../CommunityRequestForm.vue | 8 ++-- .../RentingComponents/ImageCarousel.vue | 48 +++++++++---------- src/components/RentingComponents/ItemInfo.vue | 25 ++++++++-- .../DatepickerRange/CalendarComponent.vue | 6 ++- .../DatepickerRange/DatepickerRange.vue | 5 +- src/services/user.service.js | 6 +-- src/utils/apiutil.js | 10 ++++ 7 files changed, 72 insertions(+), 36 deletions(-) diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue index 0ea59b7..8508efd 100644 --- a/src/components/CommunityComponents/CommunityRequestForm.vue +++ b/src/components/CommunityComponents/CommunityRequestForm.vue @@ -43,10 +43,10 @@ </div> <notification-modal - @click="routeToHome" - :visible="sendRequestClicked" - :title="'Vellykket'" - :message="'Forespørsel sendt!'" + @click="routeToHome" + :visible="sendRequestClicked" + :title="'Vellykket'" + :message="'Forespørsel sendt!'" > </notification-modal> </div> diff --git a/src/components/RentingComponents/ImageCarousel.vue b/src/components/RentingComponents/ImageCarousel.vue index 6a50c98..2cdea77 100644 --- a/src/components/RentingComponents/ImageCarousel.vue +++ b/src/components/RentingComponents/ImageCarousel.vue @@ -30,31 +30,31 @@ </div> <div v-if="setButtons"> <button - class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0" - type="button" - data-bs-target="#carouselIndicators" - data-bs-slide="prev" - > - <span - class="carousel-control-prev-icon inline-block bg-no-repeat" - aria-hidden="true" - ></span> - <span class="visually-hidden">Previous</span> - </button> + class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0" + type="button" + data-bs-target="#carouselIndicators" + data-bs-slide="prev" + > + <span + class="carousel-control-prev-icon inline-block bg-no-repeat" + aria-hidden="true" + ></span> + <span class="visually-hidden">Previous</span> + </button> </div> <div v-if="setButtons"> <button - class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0" - type="button" - data-bs-target="#carouselIndicators" - data-bs-slide="next" - > - <span - class="carousel-control-next-icon inline-block bg-no-repeat" - aria-hidden="true" - ></span> - <span class="visually-hidden">Next</span> - </button> + class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0" + type="button" + data-bs-target="#carouselIndicators" + data-bs-slide="next" + > + <span + class="carousel-control-next-icon inline-block bg-no-repeat" + aria-hidden="true" + ></span> + <span class="visually-hidden">Next</span> + </button> </div> </div> </template> @@ -79,11 +79,11 @@ export default { }, computed: { setButtons() { - if(this.images.length > 1) { + if (this.images.length > 1) { return true; } return false; - } + }, }, }; </script> diff --git a/src/components/RentingComponents/ItemInfo.vue b/src/components/RentingComponents/ItemInfo.vue index 66ed22a..ddbd39e 100644 --- a/src/components/RentingComponents/ItemInfo.vue +++ b/src/components/RentingComponents/ItemInfo.vue @@ -5,7 +5,10 @@ <div v-if="!confirm"> <div> <div v-if="noPicture" class="md:grid md:place-items-center md:h-screen"> - <img :src="require('@/assets/default-product.png')" alt="No image found"> + <img + :src="require('@/assets/default-product.png')" + alt="No image found" + /> </div> <div v-else> <ImageCarousel :images="pictures"></ImageCarousel> @@ -62,6 +65,7 @@ <DatepickerRange @value="setDate" :messageOnDisplay="dateMessage" + :blockedDaysRange="nonAvailibleTimes" ></DatepickerRange> </p> </div> @@ -88,7 +92,7 @@ <script> import NewRent from "@/components/RentingComponents/NewRent.vue"; -import { getItem, getItemPictures } from "@/utils/apiutil"; +import { getItem, getItemPictures, getAvailibleTimesForListing } from "@/utils/apiutil"; import ImageCarousel from "@/components/RentingComponents/ImageCarousel.vue"; import UserListItemCard from "@/components/UserProfileComponents/UserListItemCard.vue"; import DatepickerRange from "@/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue"; @@ -131,6 +135,7 @@ export default { totPrice: 0, dateMessage: "Venligst velg dato for leieperioden", allowForRent: false, + nonAvailibleTimes: [], }; }, components: { @@ -173,12 +178,25 @@ export default { }; this.pictures.push(oneImage); } - } + } //TODO fixs so each image get a correct alt text. }, async getUser(userId) { this.userForId = await UserService.getUserFromId(userId); }, + async getAvailibleTimesForListing() { + let datesTakenInMilliseconds = await getAvailibleTimesForListing(this.item.listingID); + for(var i = 0; i < datesTakenInMilliseconds.length; i++) { + let oneArray = datesTakenInMilliseconds[i]; + let bigArray = []; + let startDate = new Date(oneArray[0]); + let endDate = new Date(oneArray[1]); + bigArray.push(startDate); + bigArray.push(endDate); + this.nonAvailibleTimes.push(bigArray); + } + console.log(this.nonAvailibleTimes); + }, setDate(dateOfsomthing) { if (dateOfsomthing.startDate == null || dateOfsomthing.endDate == null) { this.totPrice = this.item.pricePerDay; @@ -200,6 +218,7 @@ export default { await this.getItemPictures(); await this.getItem(); await this.getUser(this.item.userID); + await this.getAvailibleTimesForListing(); }, }; </script> diff --git a/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue b/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue index 7ff418c..c5a762c 100644 --- a/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue +++ b/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue @@ -98,7 +98,11 @@ export default { start.getMonth() <= this.monthDate.getMonth() && end.getMonth() >= this.monthDate.getMonth() ) { - if ( + if(start.getMonth() === this.monthDate.getMonth() && end.getMonth() === this.monthDate.getMonth()) { + for(let i = start.getDate(); i <= end.getDate(); i++) { + blockedDays.push(i); + } + } else if ( start.getMonth() < this.monthDate.getMonth() && end.getMonth() > this.monthDate.getMonth() ) { diff --git a/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue index 49fd65d..ced2a33 100644 --- a/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue +++ b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue @@ -54,7 +54,10 @@ export default { }, blockedDaysRange: { type: Array, - default: () => [], + default: () => [ + new Date(1651528800000), + new Date(1651701600000), + ], }, messageOnDisplay: String, }, diff --git a/src/services/user.service.js b/src/services/user.service.js index 44b6159..857f346 100644 --- a/src/services/user.service.js +++ b/src/services/user.service.js @@ -29,14 +29,14 @@ class UserService { async setListingToDeleted(listingId) { return await axios .delete(API_URL + "listing/" + listingId, { - headers: tokenHeader() + headers: tokenHeader(), }) .then((res) => { return res.data; }) .catch((err) => { - console.error(err); - }) + console.error(err); + }); } async getRenterHistory() { diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js index 86b911d..e37af44 100644 --- a/src/utils/apiutil.js +++ b/src/utils/apiutil.js @@ -353,3 +353,13 @@ export function PostImagesArrayToListing(imagesArray) { return error; }); } + +export function getAvailibleTimesForListing(listingId) { + return axios.get(API_URL + "listing/" + listingId + "/availability", { + headers: tokenHeader(), + }).then((response) => { + return response.data; + }).catch((error) => { + console.error(error); + }); +} -- GitLab