From 351f9f8d79bbd21cfb149414fe6d85903abe7976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20R=C3=B8skaft?= <haakoero@stud.ntnu.no>
Date: Fri, 29 Apr 2022 08:54:30 +0200
Subject: [PATCH] Added the baseline for a item info page view
---
.../CommunityComponents/CommunityHome.vue | 10 +-
.../RentingComponents/ImageCarousel.vue | 123 +++++++++---------
src/components/RentingComponents/ItemInfo.vue | 61 +++++++++
src/router/index.js | 5 +
src/utils/apiutil.js | 12 ++
src/views/RentingViews/ItemInfoPageView.vue | 15 +++
tailwind.config.js | 12 +-
7 files changed, 173 insertions(+), 65 deletions(-)
create mode 100644 src/components/RentingComponents/ItemInfo.vue
create mode 100644 src/views/RentingViews/ItemInfoPageView.vue
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 1d973af..32c1966 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -27,7 +27,7 @@
<div class="absolute inset-x-0 px-6 py-3 mt-4">
<div class="grid grid-cols-2">
- <ItemCard v-for="item in searchedItems" :key="item" :item="item" />
+ <ItemCard v-for="item in searchedItems" :key="item" :item="item" @click="goToItemInfoPage(item)"/>
</div>
</div>
</section>
@@ -42,6 +42,12 @@ export default {
ItemCard,
},
+ methods: {
+ goToItemInfoPage(item) {
+ this.$router.push("/itempage/" + item.listingID);
+ }
+ },
+
computed: {
searchedItems() {
let filteredItems = [];
@@ -66,7 +72,7 @@ export default {
data() {
return {
items: [
- { img: "", adresse: "Oslo", title: "Dyson", price: 1000 },
+ { img: "", adresse: "Oslo", title: "Dyson", price: 1000 , listingID: 999},
{ img: "", adresse: "Trondheim", title: "Gressklipper", price: 500 },
diff --git a/src/components/RentingComponents/ImageCarousel.vue b/src/components/RentingComponents/ImageCarousel.vue
index 704c83c..aef0e65 100644
--- a/src/components/RentingComponents/ImageCarousel.vue
+++ b/src/components/RentingComponents/ImageCarousel.vue
@@ -1,71 +1,78 @@
<template>
- <div id="carouselIndicators" class="carousel slide relative" data-bs-ride="carousel">
- <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
- <button
- v-for="(image, i) in images"
- :key="i"
- type="button"
- data-bs-target="#carouselIndicators"
- :data-bs-slide-to="i"
- :class="{'active': i === 0}"
- :aria-current="i === 0 ? 'true' : 'false'"
- :aria-label="'Slide ' + (i+1)"
- ></button>
- </div>
- <div class="carousel-inner relative w-full overflow-hidden">
- <div v-for="(image, i) in images" :key="i" :class="'carousel-item float-left w-full'+ (i == 0 ? ' active' : '')" >
- <img
- :src="image.src"
- class="block w-full"
- :alt="image.alt"
- />
- </div>
- </div>
- <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>
- <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
+ id="carouselIndicators"
+ class="carousel slide relative"
+ data-bs-ride="carousel"
+ >
+ <div
+ class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4"
+ >
+ <button
+ v-for="(image, i) in images"
+ :key="i"
+ type="button"
+ data-bs-target="#carouselIndicators"
+ :data-bs-slide-to="i"
+ :class="{ active: i === 0 }"
+ :aria-current="i === 0 ? 'true' : 'false'"
+ :aria-label="'Slide ' + (i + 1)"
+ ></button>
</div>
+ <div class="carousel-inner relative w-full overflow-hidden">
+ <div
+ v-for="(image, i) in images"
+ :key="i"
+ :class="'carousel-item float-left w-full' + (i == 0 ? ' active' : '')"
+ >
+ <img :src="image.src" class="block w-full" :alt="image.alt" />
+ </div>
+ </div>
+ <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>
+ <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>
</template>
<script>
-
/*
{
src: "imageURL",
alt: "IMAGE ALT TEXT"
}
*/
- import 'tw-elements';
- export default {
- props: {
- images: {
- type: Array,
- required: true,
- },
- },
- data() {
- return {
-
- }
- }
- }
+import "tw-elements";
+export default {
+ props: {
+ images: {
+ type: Array,
+ required: true,
+ },
+ },
+ data() {
+ return {};
+ },
+};
</script>
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/components/RentingComponents/ItemInfo.vue b/src/components/RentingComponents/ItemInfo.vue
new file mode 100644
index 0000000..59e4bfc
--- /dev/null
+++ b/src/components/RentingComponents/ItemInfo.vue
@@ -0,0 +1,61 @@
+<template>
+ <div class="drop-shadow">HEY</div>
+ <div>
+ <div>
+ {{ item.title }}
+ </div>
+ <div>
+ Beskrivelse: {{ item.description }}
+ </div>
+ <div>
+ Adressen er: {{ item.address }}
+ </div>
+ <div>
+ Pris per dag er: {{ item.pricePerDay }}
+ </div>
+ <div>
+ <!-- Add in method for displaying user card. Use item.userID on the method -->
+ </div>
+ <div>
+ <!-- Add calculate method. Use amount of time * pricePerDay. Display this here. -->
+ <p>Totalprisen er: mye (Change with tot price from calc method)</p>
+ <button>
+ <!-- This button should send you to the rent page -->
+ Rent page
+ </button>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getItem } from "@/utils/apiutil";
+
+export default {
+ name: "ItemInfo",
+ data() {
+ return {
+ item: {
+ listingID: 0,
+ title: "",
+ description: "",
+ pricePerDay: 0,
+ address: "",
+ userID: 0,
+ categoryNames: [],
+ communityIDs: [],
+ },
+ };
+ },
+ methods: {
+ async getItem() {
+ let id = this.$router.currentRoute.value.params.id;
+ this.item = await getItem(id);
+ },
+ },
+ beforeMount() {
+ this.getItem();
+ },
+};
+</script>
+
+<style></style>
diff --git a/src/router/index.js b/src/router/index.js
index 163dc85..0ba93ad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -98,6 +98,11 @@ const routes = [
component: () => import("../views/CommunityViews/CommunityHomeView.vue"),
beforeEnter: guardRoute,
},
+ {
+ path: "/itempage/:id",
+ name: "ItemInfo",
+ component: () => import("../views/RentingViews/ItemInfoPageView.vue"),
+ },
];
const router = createRouter({
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 36cc5d9..aa10ada 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -147,3 +147,15 @@ export function getVisibleGroups() {
console.error(error);
});
}
+
+export function getItem(itemid) {
+ return axios.get(API_URL + "listing/" + itemid, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+}
diff --git a/src/views/RentingViews/ItemInfoPageView.vue b/src/views/RentingViews/ItemInfoPageView.vue
new file mode 100644
index 0000000..6c737cc
--- /dev/null
+++ b/src/views/RentingViews/ItemInfoPageView.vue
@@ -0,0 +1,15 @@
+<template>
+ <ItemInfo></ItemInfo>
+</template>
+
+<script>
+import ItemInfo from "@/components/RentingComponents/ItemInfo";
+export default {
+ name: "ItemInfoPage.vue",
+ components: {
+ ItemInfo,
+ },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index ff5434c..d92b980 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,12 @@
module.exports = {
darkMode: "class",
- content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", './node_modules/tw-elements/dist/js/**/*.js'],
+ content: [
+ "./index.html",
+ "./src/**/*.{vue,js,ts,jsx,tsx}",
+ "./node_modules/tw-elements/dist/js/**/*.js",
+ ],
theme: {
extend: {},
},
- plugins: [
- require('tw-elements/dist/plugin')
- ],
-};
\ No newline at end of file
+ plugins: [require("tw-elements/dist/plugin")],
+};
--
GitLab