after section 6
This commit is contained in:
Christian Kauer
parent
5652603b58
commit
7fe09e6cd5
|
|
@ -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"
|
||||
]
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
<script setup>
|
||||
const {makes} = useCars();
|
||||
|
||||
const modal = ref({
|
||||
make: false,
|
||||
location: false,
|
||||
|
|
@ -6,8 +8,28 @@
|
|||
});
|
||||
|
||||
const city = ref("");
|
||||
const route = useRoute();
|
||||
const priceRange = ref({
|
||||
min:"",
|
||||
max:""
|
||||
});
|
||||
|
||||
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) => {
|
||||
modal.value[key] = !modal.value[key];
|
||||
};
|
||||
|
|
@ -27,38 +49,72 @@
|
|||
navigateTo(`/city/${city.value}/car/${route.params.make}`);
|
||||
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>
|
||||
|
||||
<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 @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 @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 class="p-5 flex justify-between relative cursor-pointer border-b">
|
||||
<h3>Price</h3>
|
||||
<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 class="shadow border w-64 mr-10 z-30 h-[190px]">
|
||||
<!-- LOCATION START -->
|
||||
<div class="p-5 flex justify-between relative cursor-pointer border-b">
|
||||
<h3>Location</h3>
|
||||
<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>
|
||||
<!-- LOCATION END -->
|
||||
|
||||
<!-- MAKES START -->
|
||||
<div class="p-5 flex justify-between relative cursor-pointer border-b">
|
||||
<h3>Make</h3>
|
||||
<h3 @click="updateModal('make')" class="text-blue-400 capitalize">{{ route.params.make || "Any" }}</h3>
|
||||
<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">
|
||||
<h4 v-for="make in makes" :key="make" class="w-1/3"
|
||||
@click="onChangeMake(make)"
|
||||
>{{ make }}</h4>
|
||||
<!-- <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>
|
||||
<!-- MAKES END -->
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import cars from "@/assets/cars.json"
|
||||
import makes from "@/assets/makes.json"
|
||||
|
||||
export const useCars = () => {
|
||||
return {
|
||||
cars,
|
||||
makes
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue