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