chk
/
car_trader
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases Wiki Activity

after section 6

This commit is contained in:
Christian Kauer 2024-01-04 08:28:48 +01:00
parent 5652603b58
commit 7fe09e6cd5
3 changed files with 142 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/makes.json Normal file
View File

@ -0,0 +1,54 @@
[
"Acura",
"Alfa Romeo",
"Aston Martin",
"Audi",
"Bentley",
"BMW",
"Buick",
"Cadillac",
"Chevrolet",
"Chrysler",
"Dodge",
"Dodge or Ram",
"Ferrari",
"Fiat",
"Ford",
"Genesis",
"GMC",
"Honda",
"Hummer",
"Hyundai",
"Infiniti",
"Jaguar",
"Jeep",
"Kia",
"Land Rover",
"Lexus",
"Lincoln",
"Maserati",
"Mazda",
"McLaren",
"Mercedes-AMG",
"Mercedes-Benz",
"MINI",
"Mitsubishi",
"Nissan",
"Oldsmobile",
"Plymouth",
"Pontiac",
"Porsche",
"Ram",
"Rolls-Royce",
"Saab",
"Saturn",
"Scion",
"Smart",
"Subaru",
"Suzuki",
"Tesla",
"Toyota",
"Triumph",
"Volkswagen",
"Volvo"
]

114
components/Car/SideBar.vue
View File

@ -1,4 +1,6 @@
<script setup> <script setup>
const {makes} = useCars();
const modal = ref({ const modal = ref({
make: false, make: false,
location: false, location: false,
@ -6,7 +8,27 @@
}); });
const city = ref(""); const city = ref("");
const priceRange = ref({
min:"",
max:""
});
const route = useRoute(); const route = useRoute();
const router = useRouter();
const priceRangeText = computed(() => {
const minPrice = route.query.minPrice;
const maxPrice = route.query.maxPrice;
if(!minPrice && !maxPrice) {
return "Any";
} else if(!minPrice && maxPrice)
return `< ${maxPrice}`
else if (minPrice && !maxPrice)
return `> ${minPrice}`
else
return `$${minPrice} - $${maxPrice}`
});
const updateModal = (key) => { const updateModal = (key) => {
modal.value[key] = !modal.value[key]; modal.value[key] = !modal.value[key];
@ -27,38 +49,72 @@
navigateTo(`/city/${city.value}/car/${route.params.make}`); navigateTo(`/city/${city.value}/car/${route.params.make}`);
city.value = ""; city.value = "";
}; };
const onChangeMake = (make) => {
updateModal("make");
navigateTo(`/city/${route.params.city}/car/${make}`)
};
const onChangePrice = () => {
updateModal("price");
if (priceRangeText.value.max && priceRange.value.min) {
if (priceRangeText.min > priceRange.value.max)
return;
}
// navigateTo(`/city/${route.params.city}/car/${route.params.make}?minPrice=${minPrice}&maxPrice=${maxPrice}`)
router.push({
query: {
minPrice : priceRange.value.min,
maxPrice : priceRange.value.max,
}
});
};
</script> </script>
<template> <template>
<div class="shadow border w-64 mr-10 z-30 h-[190px]"> <div class="shadow border w-64 mr-10 z-30 h-[190px]">
<div class="p-5 flex justify-between relative cursor-pointer border-b"> <!-- LOCATION START -->
<h3>Location</h3> <div class="p-5 flex justify-between relative cursor-pointer border-b">
<h3 @click="updateModal('location')" class="text-blue-400 capitalize"> <h3>Location</h3>
{{ route.params.city }} <h3 @click="updateModal('location')" class="text-blue-400 capitalize">
</h3> {{ route.params.city }}
<div v-if="modal.location" </h3>
class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white"> <div v-if="modal.location"
<input type="text" name="" id="" class="border p-1 rounded" v-model="city"/> class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
<button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangeLocation">Apply</button> <input type="text" name="" id="" class="border p-1 rounded" v-model="city"/>
</div> <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"> </div>
<h3>Make</h3> <!-- LOCATION END -->
<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"> <!-- MAKES START -->
<input type="text" name="" id="" class="border p-1 rounded"/> <div class="p-5 flex justify-between relative cursor-pointer border-b">
<button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button> <h3>Make</h3>
</div> <h3 @click="updateModal('make')" class="text-blue-400 capitalize">{{ route.params.make || "Any" }}</h3>
</div> <div v-if="modal.make" class="absolute border shadow left-56 p-5 top-1 -m-1 w-[600px] flex justify-between flex-wrap bg-white">
<div class="p-5 flex justify-between relative cursor-pointer border-b"> <h4 v-for="make in makes" :key="make" class="w-1/3"
<h3>Price</h3> @click="onChangeMake(make)"
<h3 @click="updateModal('price')" class="text-blue-400 capitalize">Toyota</h3> >{{ make }}</h4>
<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"/>
<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> -->
<button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button> </div>
</div> </div>
</div> <!-- MAKES END -->
</div>
<!-- START PRICE -->
<div class="p-5 flex justify-between relative cursor-pointer border-b">
<h3>Price</h3>
<h3 @click="updateModal('price')" class="text-blue-400 capitalize">{{priceRangeText}}</h3>
<div v-if="modal.price" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
<input type="number" name="" id="" class="border p-1 rounded" placeholder="Min" v-model="priceRange.min"/>
<input type="number" name="" id="" class="border p-1 rounded" placeholder="Max" v-model="priceRange.max"/>
<button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangePrice()">Apply</button>
</div>
</div>
<!-- END PRICE -->
</div>
</template> </template>

2
composables/useCars.ts
View File

@ -1,7 +1,9 @@
import cars from "@/assets/cars.json" import cars from "@/assets/cars.json"
import makes from "@/assets/makes.json"
export const useCars = () => { export const useCars = () => {
return { return {
cars, cars,
makes
}; };
}; };