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