senaduka/old-kivi-za-auta-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add next button in filters

Browse Source
This commit is contained in:
ismailsosic
2022-04-18 07:11:23 +02:00
parent 9c12612b86
commit e3add5878b
4 changed files with 71 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
kivi-cars/src/components/Filters/Filter/Filter.js
View File

@@ -1,10 +1,9 @@
import React, { useEffect, useState } from "react";
import React from "react";
import './css/Filter.css';
const Filter = (props) => {
const {filters, setFilters} = props.data
const [filtersData, setFiltersData] = useState({})
const {setFilters} = props.data
const changeHandler = ( e ) => {
setFilters( prevData => ({

8
kivi-cars/src/components/Filters/Filters.css
View File

@@ -9,7 +9,7 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
}
.filters-content{
@@ -36,9 +36,11 @@
padding: 2em 5em;
}
.checkbox-content{
/* .checkbox-content{
width: ;
}
} */
}

71
kivi-cars/src/components/Filters/Standard-filters.js
View File

@@ -4,94 +4,51 @@ import "./Filters.css";
import Filter from "./Filter/Filter";
import DoubleFilter from "./Filter/DoubleFilter";
import TitleBtn from "../Button/TitleBtn";
import Cars from "../../data/cars-brands";
import Trucks from "../../data/trucks-brands";
import Motors from "../../data/motors-brands"
import Cubes from "../../data/cubes";
import Type from "../../data/type";
import Fuel from "../../data/fuel";
import Transmission from "../../data/transmission";
import Drive from "../../data/drive";
import Condition from "../../data/condition";
import Doors from "../../data/doors";
import Year from "../../data/year";
import Price from "../../data/price";
import HorsePower from "../../data/horsepower";
import Kilowats from "../../data/kilowats";
import Kilometers from "../../data/kilometers";
import vehicleService from "../../services/vehicle-service";
const StandardFilters = (props) => {
const {data, filters, setFilters} = props.data;
const [brandIndex, setBrandIndex] = useState(0);
const [model, showModel] = useState(true);
let index = 0;
let brands;
let details, marke;
// if(data.Category.Vozilo === "Auto"){
// showModel(true)
// return
// })
details = vehicleService(data.Category.Vozilo);
const {show, brands, data1, data2, data3} = details;
// }else if(data.Category.Vozilo === "Motor"){
// showModel(false)
// return brands = Motors.map(brand => {
// return brand.brand
// })
// }else if(data.Category.Vozilo === "Teretno vozilo"){
// return brands = Trucks.map(brand => {
// return brand.brand
// })
// }
brands = Cars.map(brand => {
return brand.brand})
const [model, setModel] = useState(show);
useEffect(() => {
if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka))
if(filters.Marka)setBrandIndex(marke.indexOf(filters.Marka))
}, [filters])
const models = Cars[brandIndex].models
const Brands = {
"ime": "Marka",
"tipovi": brands
}
const Models = {
"ime": "Model",
"tipovi": models
}
const data1 = [Transmission, Drive, Condition, Doors]
const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
const data3 = [Fuel, Type]
marke = brands.map(marka => {return marka.brand})
return(
<div className="filters-container">
<Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filters, setFilters}}/>
{model ? (<Filter ime={Models.ime} tipovi={Models.tipovi} data={{filters, setFilters}}/>): null}
<Filter ime={"Marka"} tipovi={marke} data={{data, filters, setFilters}}/>
{model ? (<Filter ime={"Model"} tipovi={brands[brandIndex].models} data={{data, filters, setFilters}}/>): null}
{data3.map(item => {
{data1.map(item => {
index += 1;
return(
<Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
<Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
)
})}
{data2.map(item => {
index += 1;
return(
<DoubleFilter key={index} title={item.title} fields={item.fields} data={{filters, setFilters}}/>
<DoubleFilter key={index} title={item.title} fields={item.fields} data={{data, filters, setFilters}}/>
)
})}
{data1.map(item => {
{data3.map(item => {
index += 1;
return(
<Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
<Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
)
})}

50
kivi-cars/src/services/vehicle-service.js Normal file
View File

@@ -0,0 +1,50 @@
import Cars from "../data/cars-brands";
import Trucks from "../data/trucks-brands";
import Motors from "../data/motors-brands"
import Cubes from "../data/cubes";
import Type from "../data/type";
import Fuel from "../data/fuel";
import Transmission from "../data/transmission";
import Drive from "../data/drive";
import Condition from "../data/condition";
import Doors from "../data/doors";
import Year from "../data/year";
import Price from "../data/price";
import HorsePower from "../data/horsepower";
import Kilowats from "../data/kilowats";
import Kilometers from "../data/kilometers";
const vehicleService = (vehicle) => {
let data1, data2, data3, brands, show;
if(vehicle === "Auto"){
show = true;
data1 = [Fuel, Type]
data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
data3 = [Transmission, Drive, Condition, Doors]
brands = Cars.map(brand => {
return brand})
}
else if(vehicle === "Motor"){
show = false;
data1 = [Condition]
data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
data3 = []
brands = Motors.map(brand => {
return brand
})
}
else if(vehicle === "Teretno vozilo"){
show = false;
data1 = [Condition, Fuel]
data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
data3 = []
brands = Trucks.map(brand => {
return brand
})
}
return {"show": show, "brands": brands, "data1": data1, "data2": data2, "data3": data3}
}
export default vehicleService;