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