diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue
index 0ea59b7ccf360f9745e9e87c7b407eeb61df68ed..8508efd202f46350266f1c198b5f7419aca8aac3 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 6a50c984e7a45dd97e0ec59efb5868d2466546ff..2cdea77c04ab9adfae8fe0148911d1d2d6955d04 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 66ed22a77802f3692469386a125f79f7e06ae123..ddbd39e772852f30709e2bf7bdf433ab9b3f2761 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 7ff418c29bec9efc5c40b2d424c1c0751563cd42..c5a762c6b3acb70dd830926d8e7f25e179f7f349 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 49fd65dc1249dc57add5e7c73d69a60bca2a1736..ced2a33dcaebbd5d9b86aed8474fa8fe8940476a 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 44b6159bdec5a16ca2f6893037ac792fa66f751c..857f3468edaa2cb0f71912ae98ee0c2fa757a11a 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 86b911d547006c86e8c1fece8cc0b7ba0b3be32a..e37af44a4f4aa6723f8e97857746bf162075052f 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);
+ });
+}