From fc98c9746d3bc14246cae42c812812f4969df89f Mon Sep 17 00:00:00 2001
From: Christian Kauer <c.kauer@krah-gruppe.de>
Date: Wed, 3 Jan 2024 16:44:17 +0100
Subject: [PATCH] end of section 4

---
 assets/cars.json                      | 32 +++++++++++++++
 components/Car/Card.vue               | 37 +++++++++++-------
 components/Car/Cards.vue              |  6 ++-
 components/Car/Detail/Attributes.vue  | 16 ++++++--
 components/Car/Detail/Description.vue | 10 ++++-
 components/Car/Detail/Hero.vue        | 35 ++++++++++-------
 components/Car/Hero.vue               |  6 ++-
 components/Car/SideBar.vue            | 56 +++++++++++++++++++++------
 composables/useCars.ts                |  7 ++++
 composables/useTest.ts                |  3 --
 error.vue                             | 22 +++++++++++
 pages/car/[name]-[id].vue             | 26 ++++++++++---
 pages/city/[city]/car.vue             | 14 ++++++-
 13 files changed, 215 insertions(+), 55 deletions(-)
 create mode 100644 assets/cars.json
 create mode 100644 composables/useCars.ts
 delete mode 100644 composables/useTest.ts
 create mode 100644 error.vue

diff --git a/assets/cars.json b/assets/cars.json
new file mode 100644
index 0000000..b120374
--- /dev/null
+++ b/assets/cars.json
@@ -0,0 +1,32 @@
+[
+    {
+      "id": 1,
+      "name": "Range Rover Sport",
+      "price": "84,777",
+      "url": "https://www.carhelpcanada.com/wp-content/uploads/2019/12/2020-Range-Rover-Evoque-2.jpg",
+      "seats": 5,
+      "miles": "14,666",
+      "features": ["No Accidents", "Low KM", "Vehicle Detailed", "Leather Interior"],
+      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis odio et laboriosam!"
+    },
+    {
+      "id": 2,
+      "name": "Rolls Royce Ghost",
+      "price": "455,000",
+      "url": "https://robbreport.com/wp-content/uploads/2021/03/1-5.jpg?w=1000",
+      "seats": 5,
+      "miles": "53,666",
+      "features": ["No Accidents", "Low KM", "Vehicle Detailed", "Leather Interior"],
+      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis odio et laboriosam! Numquam ut rem, blanditiis est rerum tenetur maxime delectus"
+    },
+    {
+      "id": 4,
+      "name": "Porsche Taycan",
+      "price": "180,434",
+      "url": "https://www.topgear.com/sites/default/files/cars-car/carousel/2021/02/pcgb20_1441_fine.jpg",
+      "seats": 5,
+      "miles": "0",
+      "features": ["No Accidents", "Low KM", "Vehicle Detailed", "Leather Interior"],
+      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis odio et"
+    }
+  ]
\ No newline at end of file
diff --git a/components/Car/Card.vue b/components/Car/Card.vue
index b6db33f..c71faf0 100644
--- a/components/Car/Card.vue
+++ b/components/Car/Card.vue
@@ -1,16 +1,27 @@
+<script setup>
+  const props = defineProps({
+    car : Object
+  });
+
+  const handleClick = (car) => {    
+    navigateTo(`/car/${car.name}-${car.id}`);
+  }
+</script>
+
 <template>
-    <div class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]">
-              <div class="flex h-full">
-                <img 
-                  class="w-[300px] h-full"
-                  src="data:image/jpeg;base64,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" alt=""/>
-                <div class="p-4 flex flex-col">
-                  <div>
-                    <h1 class="text-2xl text-blue-700">Mustang x1</h1>
-                    <p class="text-gray-700">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>                  
-                  </div>
-                  <h1 class="mt-auto text-xl">$39,555</h1>
-                </div>
-              </div>
+    <div 
+      class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
+      @click="handleClick(car)">
+        <div class="flex h-full">
+          
+          <img :src="car.url" alt=""/>
+          <div class="p-4 flex flex-col">
+            <div>
+              <h1 class="text-2xl text-blue-700">{{car.name}}</h1>
+              <p class="text-gray-700">{{car.description}}</p>                  
             </div>
+            <h1 class="mt-auto text-xl">$39,555</h1>
+          </div>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/components/Car/Cards.vue b/components/Car/Cards.vue
index a472e49..82926ab 100644
--- a/components/Car/Cards.vue
+++ b/components/Car/Cards.vue
@@ -1,5 +1,9 @@
+<script setup>
+    const {cars} = useCars();
+</script>
+
 <template>
     <div class="w-full">
-        <CarCard/>
+        <CarCard v-for="car in cars" :key="car.id" :car="car" />
     </div>
 </template>
\ No newline at end of file
diff --git a/components/Car/Detail/Attributes.vue b/components/Car/Detail/Attributes.vue
index 038e538..11bd8b8 100644
--- a/components/Car/Detail/Attributes.vue
+++ b/components/Car/Detail/Attributes.vue
@@ -1,8 +1,16 @@
+<script setup>
+  const props = defineProps({
+    features : Array
+  });
+
+</script>
+
+
 <template>
-            <div class="mr-10 mt-5 border-b pb-5">
-          <div class="flex text-lg mt-2">
+      <div class="mr-10 mt-5 border-b pb-5">
+          <div class="flex text-lg mt-2" v-for="feat in features" :key="feat">
             <p class="rounded text-lime-800 mr-3">X</p>
-            <p>leather Interior</p>
+            <p>{{feat}}</p>
           </div>
-        </div>
+      </div>
 </template>
\ No newline at end of file
diff --git a/components/Car/Detail/Description.vue b/components/Car/Detail/Description.vue
index 2e6d62b..66581ae 100644
--- a/components/Car/Detail/Description.vue
+++ b/components/Car/Detail/Description.vue
@@ -1,5 +1,13 @@
+<script setup>
+  const props = defineProps({
+    description : String
+  });
+
+</script>
+
+
 <template>
     <div class="mt-5">
-          <p class="mb-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, quaerat. Dignissimos, esse!</p>
+          <p class="mb-10">{{  description }}</p>
         </div>
 </template>
\ No newline at end of file
diff --git a/components/Car/Detail/Hero.vue b/components/Car/Detail/Hero.vue
index d5f3952..3ca4c0f 100644
--- a/components/Car/Detail/Hero.vue
+++ b/components/Car/Detail/Hero.vue
@@ -1,19 +1,26 @@
+<script setup>
+  const props = defineProps({
+    car : Object
+  });
+
+</script>
+
 <template>
 
-<div class="mt-10">
-            <img class="w-full" src="data:image/jpeg;base64,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" alt="" />
-            <h1 class="mt-10 text-4xl">Volvo Xt3</h1>
-            <div class="text-slate-500 flex text-lg mt-3 border-b pb-5 justify-between">
-              <div class="flex">
-                <p class="mr-2">5 seats</p>
-                <p class="mr-2">|</p>
-                <p class="mr-2">67,444 miles</p>
-              </div>
-              <div>
-                <p class="font-bold text-2xl">$35,556</p>
-              </div>
-            </div>
-          </div>
+  <div class="mt-10">
+      <img class="w-full" :src="car.url" alt="" />
+      <h1 class="mt-10 text-4xl">{{car.name}}</h1>
+      <div class="text-slate-500 flex text-lg mt-3 border-b pb-5 justify-between">
+        <div class="flex">
+          <p class="mr-2">{{ car.seats }} seats</p>
+          <p class="mr-2">|</p>
+          <p class="mr-2">{{ car.miles}} miles</p>
+        </div>
+        <div>
+          <p class="font-bold text-2xl">${{car.price}}</p>
+        </div>
+      </div>
+  </div>
 
           
 </template>
\ No newline at end of file
diff --git a/components/Car/Hero.vue b/components/Car/Hero.vue
index f47b668..5428f8a 100644
--- a/components/Car/Hero.vue
+++ b/components/Car/Hero.vue
@@ -1,3 +1,7 @@
+<script setup>
+  
+</script>
+
 <template>
 
 <!-- HOME HERO -->
@@ -12,7 +16,7 @@
       </div>
          
 
-    </div>
+  </div>
     <!-- HOME HERO -->
 
 </template>
\ No newline at end of file
diff --git a/components/Car/SideBar.vue b/components/Car/SideBar.vue
index b508cd1..cf5c4a2 100644
--- a/components/Car/SideBar.vue
+++ b/components/Car/SideBar.vue
@@ -1,29 +1,63 @@
+<script setup>
+  const modal = ref({
+    make: false,
+    location: true,
+    price: false,
+  });
+
+  const city = ref("");
+  const route = useRoute();
+
+  const updateModal = (key) => {
+    modal.value[key] = !modal.value[key];
+  };
+
+  const onChangeLocation = () => {
+    if (!city.value) {
+      return;
+    }
+
+    if (!isNaN(parseInt(city.value))) {
+      throw createError({
+        statusCode:400,
+        message:"invalid city"
+      });
+    }
+    updateModal('location');
+    navigateTo(`/city/${city.value}/car/${route.params.make}`);
+    city.value = "";
+  };
+</script>
+
 <template>
 
 <div class="shadow border w-64 mr-10 z-30 h-[190px]">
             <div class="p-5 flex justify-between relative cursor-pointer border-b">
               <h3>Location</h3>
-              <h3 class="text-blue-400 capitalize">Toronto</h3>
-              <!-- <div class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
-                <input type="text" name="" id="" class="border p-1 rounded"/>
-                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
-              </div> -->
+              <h3 @click="updateModal('location')" class="text-blue-400 capitalize">
+                {{ route.params.city }}
+              </h3>
+              <div v-if="modal.location" 
+                class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+                <input type="text" name="" id="" class="border p-1 rounded" v-model="city"/>
+                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangeLocation">Apply</button>
+              </div>
             </div>
             <div class="p-5 flex justify-between relative cursor-pointer border-b">
               <h3>Make</h3>
-              <h3 class="text-blue-400 capitalize">Toyota</h3>
-              <!-- <div class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+              <h3 @click="updateModal('make')" class="text-blue-400 capitalize">Toyota</h3>
+              <div v-if="modal.make" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
                 <input type="text" name="" id="" class="border p-1 rounded"/>
                 <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
-              </div> -->
+              </div>
             </div>
             <div class="p-5 flex justify-between relative cursor-pointer border-b">
               <h3>Price</h3>
-              <h3 class="text-blue-400 capitalize">Toyota</h3>
-              <!-- <div class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+              <h3 @click="updateModal('price')" class="text-blue-400 capitalize">Toyota</h3>
+              <div v-if="modal.price" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
                 <input type="text" name="" id="" class="border p-1 rounded"/>
                 <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
-              </div> -->
+              </div>
             </div>
           </div>
 
diff --git a/composables/useCars.ts b/composables/useCars.ts
new file mode 100644
index 0000000..301d053
--- /dev/null
+++ b/composables/useCars.ts
@@ -0,0 +1,7 @@
+import cars from "@/assets/cars.json"
+
+export const useCars = () => {
+    return {
+        cars,
+    };
+};
\ No newline at end of file
diff --git a/composables/useTest.ts b/composables/useTest.ts
deleted file mode 100644
index 5cd9b21..0000000
--- a/composables/useTest.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const useTest = () => {
-    return "TEST";
-};
\ No newline at end of file
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..39704b0
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,22 @@
+<script setup>
+    const error = useError();
+
+    const handleError = () => {
+        clearError({
+            redirect: "/",
+        });
+        // navigateTo("/");
+    }
+</script>
+
+<template>
+    <div class="flex h-screen justify-center items-center flex-col" v-if="error">
+        <h1 class="text-9xl">Error {{error.statusCode}}</h1>
+        <p class="mt-7 text-4xl">{{error.message}}</p>
+        <button 
+            class="rounded mt-7 text-2xl bg-blue-400 py-4 text-white" 
+            @click="handleError"
+            >Go Back
+        </button>
+    </div>
+</template>
\ No newline at end of file
diff --git a/pages/car/[name]-[id].vue b/pages/car/[name]-[id].vue
index 5d94fac..0e5cd23 100644
--- a/pages/car/[name]-[id].vue
+++ b/pages/car/[name]-[id].vue
@@ -1,12 +1,29 @@
 <script setup>
+    import { computed } from 'vue';
 
     const route = useRoute();
     const {toTitleCase} = useUtilities();
+    const {cars} = useCars();
 
     useHead({
         title :toTitleCase(route.params.name )
     });
 
+    const car = computed(() => {
+        return cars.find((_) => {
+            return _.id === parseInt(route.params.id)
+        });
+    });
+
+
+    if (!car.value) {
+        throw createError({
+            statusCode: 404,
+            message: `Car with ID ${route.params.id} not found`
+        });
+    }
+
+
     definePageMeta({
         layout: "custom"
     });
@@ -14,11 +31,10 @@
 </script>
 
 <template>
-    <div>
-        <h1>test</h1>
-        <CarDetailHero/>        
-        <CarDetailAttributes/>
-        <CarDetailDescription/>
+    <div v-if="car">        
+        <CarDetailHero :car="car"/>        
+        <CarDetailAttributes :features="car.features"/>
+        <CarDetailDescription :description="car.description"/>
         <CarDetailContact/>              
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/city/[city]/car.vue b/pages/city/[city]/car.vue
index b6c98b4..9f95eb8 100644
--- a/pages/city/[city]/car.vue
+++ b/pages/city/[city]/car.vue
@@ -15,8 +15,18 @@
  
     
     <div class="mt-32 flex">
-        <CarSideBar/>            
-        <NuxtPage /> 
+        <NuxtErrorBoundary>
+            <CarSideBar/>            
+            <NuxtPage /> 
+            <template #error="{error}">
+                <div class="text-center  mx-auto flex flex-col">
+                    <h1 class="text-5xl text-red-600 mb-4">Sorry, something went wrong</h1>
+                    <code>{{error}}</code>
+                    <button class="text-white bg-blue-400 px-10 py-3 rounded mt-4"
+                        @click="error.value = null">go back</button>
+                </div>
+            </template>
+        </NuxtErrorBoundary>
     </div>