diff --git a/src/components/InputComponents/DatepickerRange/MonthSelector.vue b/src/components/InputComponents/DatepickerRange/MonthSelector.vue
deleted file mode 100644
index bb6f60e3f6c6350a4e6ea30305c1c889a12c3b0a..0000000000000000000000000000000000000000
--- a/src/components/InputComponents/DatepickerRange/MonthSelector.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
- <div class="container-c main">
- <div class="button" v-on:click="back">
- <button>
- <span>
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7"></path></svg>
- </span>
- </button>
- </div>
- <div class="container-c text">
- <div class="date">
- {{monthShort}}
- </div>
- <div class="date">
- {{year}}
- </div>
- </div>
- <div class="button" v-on:click="forward">
- <button>
- <span>
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7"></path></svg>
- </span>
- </button>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- props: {
- month: {
- type: Date,
- required: true,
- },
- type: {
- type: String,
- required: true
- }
- },
- computed: {
- monthDate() {
- return new Date(this.month);
- },
- monthShort() {
- return this.monthDate.toLocaleString('default', { month: 'short' }).toUpperCase();
- },
- year() {
- return this.monthDate.getFullYear();
- },
- }, methods: {
- back() {
- this.$emit('back', this.type);
- },
- forward() {
- console.log(this.type)
- this.$emit('forward', this.type);
- },
-
- }
-}
-</script>
-
-<style>
- .container-c {
- display: flex;
- }
-
- .container-c.main {
- justify-content: space-between;
- border: 1px solid black;
- padding: 5px;
- border-radius: 5px;
- max-width: 400px;
- }
-
- .text {
- justify-content: space-between;
- width: 50%;
- text-align: center;
- }
-
- .date {
- width: 50%;
- text-align: center;
- }
-
- .button {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-</style>
\ No newline at end of file
diff --git a/src/components/RentingComponents/.gitkeep b/src/components/RentingComponents/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/RentingComponents/ItemInfo.vue b/src/components/RentingComponents/ItemInfo.vue
index 67615ef31cef5ef2a0af600ab1d1816f56685e7e..b57d14e89431d0bc7f5f7675913032a8b0f7a869 100644
--- a/src/components/RentingComponents/ItemInfo.vue
+++ b/src/components/RentingComponents/ItemInfo.vue
@@ -2,7 +2,10 @@
<div>
<div>
<div
- v-bind:class="{'grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center': noPicture}"
+ v-bind:class="{
+ 'grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center':
+ noPicture,
+ }"
>
<ImageCarousel :images="pictures"></ImageCarousel>
</div>
@@ -37,6 +40,7 @@
<div>
<p class="text-sm text-gray-900">
(placeholder skal byttes ut med date-picker)
+ <DatepickerRange @value="setDate"></DatepickerRange>
</p>
</div>
</div>
@@ -63,6 +67,7 @@
<div class="mt-2 space-y-2">
<p class="text-xl font-medium text-gray-900">
mye (Change with tot price from calc method)
+ {{ totPrice }} kr
</p>
<button>
<!-- This button should send you to the rent page -->
@@ -81,6 +86,7 @@ import { getItemPictures } from "@/utils/apiutil";
import { getUser } 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";
export default {
name: "ItemInfo",
@@ -105,45 +111,60 @@ export default {
pictures: [],
noPicture: true,
userForId: Object,
+ rentingStartDate: new Date(Number.MAX_VALUE),
+ rentingEndDate: null,
+ totPrice: 0,
};
},
components: {
ImageCarousel,
UserListItemCard,
+ DatepickerRange,
},
methods: {
async getItem() {
let id = this.$router.currentRoute.value.params.id;
this.item = await getItem(id);
- console.log(this.item);
- console.log("This is the user id " + this.item.userID);
+ this.totPrice = this.item.pricePerDay;
},
async getItemPictures() {
let id = this.$router.currentRoute.value.params.id;
this.images = await getItemPictures(id);
-
- if(this.images.length < 1) {
- let noImage = {
- src: require('@/assets/default-product.png'),
- alt: "No image found",
- };
- this.pictures.push(noImage);
+
+ if (this.images.length < 1) {
+ let noImage = {
+ src: require("@/assets/default-product.png"),
+ alt: "No image found",
+ };
+ this.pictures.push(noImage);
} else {
this.noPicture = false;
for (let i = 0; i < this.images.length; i++) {
- let oneImage = {
- src: this.images[i].picture,
- //How do i make this accurate to the image?
- alt: "An image",
- };
- this.pictures.push(oneImage);
+ let oneImage = {
+ src: this.images[i].picture,
+ //How do i make this accurate to the image?
+ alt: "An image",
+ };
+ this.pictures.push(oneImage);
}
}
//TODO fixs so each image get a correct alt text.
},
async getUser(userId) {
- this.userForId = await getUser(userId);
- console.log(this.userForId);
+ this.userForId = await getUser(userId);
+ console.log(this.userForId);
+ },
+ setDate(dateOfsomthing) {
+ this.rentingStartDate = dateOfsomthing.startDate;
+ this.rentingEndDate = dateOfsomthing.endDate;
+ console.log("This is the two dates " + this.rentingStartDate + " " + this.rentingEndDate);
+ this.calculateTotPrice();
+ },
+ calculateTotPrice() {
+ let amountOfDays = this.rentingEndDate - this.rentingStartDate;
+ amountOfDays = amountOfDays / 86400000;
+ console.log("This is the difference in days " + amountOfDays);
+ this.totPrice = this.item.pricePerDay * amountOfDays;
}
},
async beforeMount() {
@@ -154,4 +175,4 @@ export default {
};
</script>
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/src/components/InputComponents/DatepickerRange/CalendarComponent.vue b/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
similarity index 89%
rename from src/components/InputComponents/DatepickerRange/CalendarComponent.vue
rename to src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
index ebcf3a1f2342f548f2490316e31fa0a32d5e41a8..5279dc8265d9273154150ff7398a40912bcae196 100644
--- a/src/components/InputComponents/DatepickerRange/CalendarComponent.vue
+++ b/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
@@ -1,13 +1,7 @@
<template>
<div class="calendar">
<div
- class="
- grid grid-cols-7
- py-2
- mt-0.5
- border-b border-black border-opacity-10
- dark:border-litepie-secondary-700 dark:border-opacity-100
- "
+ class="grid grid-cols-7 py-2 mt-0.5 border-b border-black border-opacity-10 dark:border-litepie-secondary-700 dark:border-opacity-100"
>
<div class="months" v-for="day in days" :key="day">{{ day }}</div>
</div>
@@ -98,22 +92,28 @@ export default {
if (blockedDay.length === 2) {
const start = new Date(blockedDay[0]);
const end = new Date(blockedDay[1]);
-
+
// Check if the start or end dates range ends in the current month or after the current month
- if(start.getMonth() <= this.monthDate.getMonth() && end.getMonth() >= this.monthDate.getMonth()) {
- if(start.getMonth() < this.monthDate.getMonth() && end.getMonth() > this.monthDate.getMonth()) {
+ if (
+ start.getMonth() <= this.monthDate.getMonth() &&
+ end.getMonth() >= this.monthDate.getMonth()
+ ) {
+ if (
+ start.getMonth() < this.monthDate.getMonth() &&
+ end.getMonth() > this.monthDate.getMonth()
+ ) {
// Add all days of month to the list
- for(let i = 1; i <= this.daysInMonth; i++) {
+ for (let i = 1; i <= this.daysInMonth; i++) {
blockedDays.push(i);
}
- } else if(start.getMonth() === this.monthDate.getMonth()) {
+ } else if (start.getMonth() === this.monthDate.getMonth()) {
// Add all days of start month to the list
- for(let i = start.getDate(); i <= this.daysInMonth; i++) {
+ for (let i = start.getDate(); i <= this.daysInMonth; i++) {
blockedDays.push(i);
}
- } else if(end.getMonth() === this.monthDate.getMonth()) {
+ } else if (end.getMonth() === this.monthDate.getMonth()) {
// Add all days of end month to the list
- for(let i = 1; i <= end.getDate(); i++) {
+ for (let i = 1; i <= end.getDate(); i++) {
blockedDays.push(i);
}
}
@@ -310,4 +310,4 @@ button {
.overlay {
z-index: -1;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/InputComponents/DatepickerRange/DatepickerRange.vue b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
similarity index 88%
rename from src/components/InputComponents/DatepickerRange/DatepickerRange.vue
rename to src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
index 4f882026f2257dd341820fe7a8a3f1e92b1ac4bb..d14ecea2098e0c72ea7ab98393e78de25e6626dd 100644
--- a/src/components/InputComponents/DatepickerRange/DatepickerRange.vue
+++ b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
@@ -2,7 +2,11 @@
<div>
<div class="input" v-on:click="openCalendar()">
<label>
- <input type="text" v-model="value" placeholder="Date Input (click to open)">
+ <input
+ type="text"
+ v-model="value"
+ placeholder="Date Input (click to open)"
+ />
</label>
</div>
<div class="picker" :style="style">
@@ -40,7 +44,7 @@
</div>
</div>
<div class="footer">
- <p v-if="error" class="error"> {{ errorMessage }} </p>
+ <p v-if="error" class="error">{{ errorMessage }}</p>
<div v-else></div>
<div class="buttons">
<button class="btn btn-gray" v-on:click="reset()">RESET</button>
@@ -61,13 +65,13 @@ export default {
},
props: {
range: {
- type: Boolean,
+ type: Boolean,
default: true,
},
blockedDaysRange: {
type: Array,
default: () => [],
- }
+ },
},
data() {
return {
@@ -99,7 +103,7 @@ export default {
this.error = false;
},
complete() {
- if(this.error) return;
+ if (this.error) return;
this.open = false;
this.style = {
display: "none",
@@ -107,10 +111,10 @@ export default {
// Set value to the start and end date
this.value = `${this.startDate.toLocaleDateString()} - ${this.endDate.toLocaleDateString()}`;
- this.$emit('value', {
+ this.$emit("value", {
startDate: this.startDate,
- endDate: this.endDate
- })
+ endDate: this.endDate,
+ });
},
selectDate(date) {
const day = date.getDate();
@@ -124,19 +128,25 @@ export default {
}
if (this.range) {
- this.value = `${this.startDate?.toLocaleDateString()} - ${this.endDate?.toLocaleDateString() || ""}`;
+ this.value = `${this.startDate?.toLocaleDateString()} - ${
+ this.endDate?.toLocaleDateString() || ""
+ }`;
} else {
this.value = `${this.startDate.toLocaleDateString()}`;
}
// Check if start and end check if any days in range is blocked
- for(let i = new Date(this.startDate.toUTCString()); i <= this.endDate; i.setDate(i.getDate() + 1)) {
+ for (
+ let i = new Date(this.startDate.toUTCString());
+ i <= this.endDate;
+ i.setDate(i.getDate() + 1)
+ ) {
if (this.isBlocked(i.getDate(), i.getMonth(), i.getFullYear())) {
this.error = true;
return;
}
}
- if(this.error) this.error = false;
+ if (this.error) this.error = false;
},
isBlocked(day, month, year) {
return this.blockedDaysRange.some(([start, end]) => {
@@ -149,8 +159,8 @@ export default {
return true;
}
return (
- (start <= new Date(year, month, day) &&
- new Date(year, month, day) <= end)
+ start <= new Date(year, month, day) &&
+ new Date(year, month, day) <= end
);
});
},
@@ -220,9 +230,9 @@ export default {
width: auto;
max-width: 700px;
overflow: auto;
- -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 14px 5px rgba(0,0,0,0);
- box-shadow: 0px 10px 13px -7px #000000, 5px 5px 14px 5px rgba(0,0,0,0);
-
+ -webkit-box-shadow: 0px 10px 13px -7px #000000,
+ 5px 5px 14px 5px rgba(0, 0, 0, 0);
+ box-shadow: 0px 10px 13px -7px #000000, 5px 5px 14px 5px rgba(0, 0, 0, 0);
}
.split {
border-left: 2px solid black;
@@ -271,6 +281,5 @@ export default {
}
.btn-gray:hover {
@apply bg-gray-300;
-
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/TimepickerComponents/DatepickerRange/MonthSelector.vue b/src/components/TimepickerComponents/DatepickerRange/MonthSelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a16a3b840b9efd770d970b0f7313f5e1d0198ec9
--- /dev/null
+++ b/src/components/TimepickerComponents/DatepickerRange/MonthSelector.vue
@@ -0,0 +1,120 @@
+<template>
+ <div class="container-c main">
+ <div class="button" v-on:click="back">
+ <button>
+ <span>
+ <svg
+ class="w-5 h-5"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="1.5"
+ d="M15 19l-7-7 7-7"
+ ></path>
+ </svg>
+ </span>
+ </button>
+ </div>
+ <div class="container-c text">
+ <div class="date">
+ {{ monthShort }}
+ </div>
+ <div class="date">
+ {{ year }}
+ </div>
+ </div>
+ <div class="button" v-on:click="forward">
+ <button>
+ <span>
+ <svg
+ class="w-5 h-5"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="1.5"
+ d="M9 5l7 7-7 7"
+ ></path>
+ </svg>
+ </span>
+ </button>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ month: {
+ type: Date,
+ required: true,
+ },
+ type: {
+ type: String,
+ required: true,
+ },
+ },
+ computed: {
+ monthDate() {
+ return new Date(this.month);
+ },
+ monthShort() {
+ return this.monthDate
+ .toLocaleString("default", { month: "short" })
+ .toUpperCase();
+ },
+ year() {
+ return this.monthDate.getFullYear();
+ },
+ },
+ methods: {
+ back() {
+ this.$emit("back", this.type);
+ },
+ forward() {
+ console.log(this.type);
+ this.$emit("forward", this.type);
+ },
+ },
+};
+</script>
+
+<style>
+.container-c {
+ display: flex;
+}
+
+.container-c.main {
+ justify-content: space-between;
+ border: 1px solid black;
+ padding: 5px;
+ border-radius: 5px;
+ max-width: 400px;
+}
+
+.text {
+ justify-content: space-between;
+ width: 50%;
+ text-align: center;
+}
+
+.date {
+ width: 50%;
+ text-align: center;
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+</style>