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