Added the baseline for a item info page view

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 },
 

src/components/RentingComponents/ImageCarousel.vue

 <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>

src/components/RentingComponents/ItemInfo.vue

+<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>

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({

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);
+  });
+}

src/views/RentingViews/ItemInfoPageView.vue

+<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

tailwind.config.js

 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")],
+};