diff --git a/kivi-cars/src/components/Button/StandardBtn.js b/kivi-cars/src/components/Button/StandardBtn.js
index c9a664b..72f024e 100644
--- a/kivi-cars/src/components/Button/StandardBtn.js
+++ b/kivi-cars/src/components/Button/StandardBtn.js
@@ -8,9 +8,7 @@ const StandardBtn = (props) => {
const clickHandler = ( e ) => {
setData( prevState => ({
...prevState,
- "Category":{
- [e.target.name]: e.target.value
- }
+ "Kategorija": e.target.value
}))
}
diff --git a/kivi-cars/src/components/Button/TimeBtn.js b/kivi-cars/src/components/Button/TimeBtn.js
new file mode 100644
index 0000000..ff9544f
--- /dev/null
+++ b/kivi-cars/src/components/Button/TimeBtn.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import './button.css'
+
+const TimeBtn = (props) => {
+
+ const {data, setData, filter} = props.data
+
+ const clickHandler = ( e ) => {
+ setData( prevState => ({
+ ...prevState,
+ [e.target.name]: e.target.value
+
+ }))
+ }
+
+ return (
+
-
-
+ return (
+
+ );
+};
-export default DoubleFilter;
\ No newline at end of file
+export default DoubleFilter;
diff --git a/kivi-cars/src/components/Filters/Filter/Filter.js b/kivi-cars/src/components/Filters/Filter/Filter.js
index c1e9cce..76d4b82 100644
--- a/kivi-cars/src/components/Filters/Filter/Filter.js
+++ b/kivi-cars/src/components/Filters/Filter/Filter.js
@@ -1,30 +1,42 @@
import React, { useEffect, useState } from "react";
-import './css/Filter.css';
+import "./css/Filter.css";
const Filter = (props) => {
+ const { data, setData } = props.data;
+ const { ime, VName, tipovi } = props.item;
- const {filters, setFilters} = props.data
- const [filtersData, setFiltersData] = useState({})
+ const changeHandler = (e) => {
+ setData((prevData) => ({
+ ...prevData,
+ Filteri: {
+ ...prevData.Filteri,
+ [e.target.name]: e.target.value,
+ },
+ }));
+ };
- const changeHandler = ( e ) => {
- setFilters( prevData => ({
- ...prevData,
- [e.target.name]: e.target.value
- }))
- }
+ return (
+
+
+
+
+ );
+};
- return(
-
-
-
-
- )
-}
-
-export default Filter;
\ No newline at end of file
+export default Filter;
diff --git a/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js b/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js
index 2535579..c2969d8 100644
--- a/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js
+++ b/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js
@@ -1,28 +1,96 @@
-import React, { useEffect, useState } from "react";
-import './css/LocationCheckbox.css';
+import { React, useEffect, useState } from "react";
+import "./css/LocationCheckbox.css";
const LocationCheckbox = (props) => {
+ const { data, setData } = props.data;
+ const [checked, setChecked] = useState(false);
+ const [value, setValue] = useState(false);
- const {setCheckboxStatus} = props.data;
- const [checked, setChecked] = useState(true)
+ // useEffect(() => {
+ // data.Lokacija.gradovi.forEach(grad => {
+ // if(grad === props.title){
+ // return setValue(true)
+ // }return setValue(false)
+ // })
+ // }, [data.Lokacija.gradovi])
- const changeHandler = (e) => {
- setCheckboxStatus(prevStatus => ({
- ...prevStatus,
- [e.target.name]: checked
- }))
+ // na pocetku dobijem prazan niz, ukoliko oznaci jedan grad, treba ga dodati u niz
+ // prije svakog dodavanja treba provjeriti da li je taj grad u nizu, ukoliko nije treba ga dodati
+ // brisanje gradova iz niza samo ukoliko je taj grad u nizu
+
+ const dodajGrad = (e) => {
+ console.log("dodajem", e.target.name);
+ if (!data.Lokacija.gradovi[`${e.target.name}`]) {
+ setData((prevData) => ({
+ ...prevData,
+ Lokacija: {
+ ...prevData.Lokacija,
+ gradovi: [...prevData.Lokacija.gradovi, e.target.name],
+ },
+ }));
}
+ };
+ const obrisiGrad = (e) => {
+ console.log("brisem", e.target.name);
+ setData((prevData) => ({
+ ...prevData,
+ Lokacija: {
+ ...prevData.Lokacija,
+ gradovi: [
+ ...prevData.Lokacija.gradovi.splice(
+ data.Lokacija.gradovi.indexOf(e.target.name),
+ 1
+ ),
+ ],
+ },
+ }));
+ };
- return (
-
-
- {
- setChecked(!checked)
- changeHandler(e)
- }}/>
-
- )
-}
+ const clickHandler = (e) => {
+ if (checked) {
+ return obrisiGrad(e);
+ }
+ dodajGrad(e);
+ };
-export default LocationCheckbox;
\ No newline at end of file
+ // const isChecked = () => {
+ // if(data.Lokacija.gradovi[0]){
+ // console.log("true")
+ // return true
+ // } return false
+ // }
+
+ // const checkHandler = (item) => {
+ // data.Lokacija.gradovi.map( grad => {
+ // if(grad === item){
+ // return false
+ // } return true
+ // })
+ // }
+
+ // popraviti bug koji ima (checkboxi koji su oznaceni,
+ // nakon ponovnog prikaza komponente se ne prikazuju)
+ // nakon promjene kantona gradovi ostaju
+
+ return (
+
+
+ {
+ clickHandler(e);
+ setChecked(!checked);
+ }}
+ />
+
+ );
+};
+
+export default LocationCheckbox;
diff --git a/kivi-cars/src/components/Filters/Standard-filters.js b/kivi-cars/src/components/Filters/Standard-filters.js
index fd4d4f2..f369c6d 100644
--- a/kivi-cars/src/components/Filters/Standard-filters.js
+++ b/kivi-cars/src/components/Filters/Standard-filters.js
@@ -1,107 +1,109 @@
import React, { useEffect, useState } from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
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 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 Color from "../../data/color";
+import AirCondition from "../../data/air-condition";
+import Drive from "../../data/drive";
+import Doors from "../../data/doors";
+import Sensors from "../../data/sensors";
+import Gearbox from "../../data/gearbox";
const StandardFilters = (props) => {
+ const { data, setData } = props.data.data;
+ const [brandIndex, setBrandIndex] = useState(0);
+ const [model, showModel] = useState(true);
+ let index = 0;
+ let brands;
- const {data, filters, setFilters} = props.data;
- const [brandIndex, setBrandIndex] = useState(0);
- const [model, showModel] = useState(true);
- let index = 0;
- let brands;
+ // if(data.Category.Vozilo === "Auto"){
+ // showModel(true)
+ // return
+ // })
- // if(data.Category.Vozilo === "Auto"){
- // showModel(true)
- // return
- // })
+ // }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
+ // })
+ // }
- // }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;
+ });
- brands = Cars.map(brand => {
- return brand.brand})
+ useEffect(() => {
+ // console.log(data, setData)
+ if (data.Filteri.Brend !== "")
+ setBrandIndex(brands.indexOf(data.Filteri.Brend));
+ }, [data]);
+ const models = Cars[brandIndex].models;
- useEffect(() => {
- if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka))
- }, [filters])
+ const Brands = {
+ ime: "Marka",
+ VName: "Brend",
+ tipovi: brands,
+ };
- const models = Cars[brandIndex].models
-
+ const Models = {
+ ime: "Model",
+ VName: "Model",
+ tipovi: models,
+ };
- const Brands = {
- "ime": "Marka",
- "tipovi": brands
- }
+ const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats];
+ const data1 = [Type, Condition, Transmission, Fuel, Drive, Doors, Color, AirCondition, Gearbox, Sensors];
- const Models = {
- "ime": "Model",
- "tipovi": models
- }
+ return (
+
+
+ {model &&
}
- const data1 = [Transmission, Drive, Condition, Doors]
- const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
- const data3 = [Fuel, Type]
+ {data1.map((item) => {
+ index += 1;
+ return
;
+ })}
- return(
-
-
- {model ? (
): null}
+ {data2.map((item) => {
+ index += 1;
+ return (
+
+ );
+ })}
- {data3.map(item => {
- index += 1;
- return(
-
- )
- })}
+
+
+
+
+
+
+ );
+};
- {data2.map(item => {
- index += 1;
- return(
-
- )
- })}
-
- {data1.map(item => {
- index += 1;
- return(
-
- )
- })}
-
-
-
-
-
-
-
- )
-}
-
-export default StandardFilters
\ No newline at end of file
+export default StandardFilters;
diff --git a/kivi-cars/src/components/FiltersNavbar/FiltersNav.css b/kivi-cars/src/components/FiltersNavbar/FiltersNav.css
index 0adfff3..ee18bd6 100644
--- a/kivi-cars/src/components/FiltersNavbar/FiltersNav.css
+++ b/kivi-cars/src/components/FiltersNavbar/FiltersNav.css
@@ -1,55 +1,54 @@
-*{
- margin: 0;
- padding: 0;
+* {
+ margin: 0;
+ padding: 0;
}
/* color:#02adba */
.links-container ul li {
- display: inline-block;
+ display: inline-block;
}
.active {
- border-bottom: 3px solid #02adba;
+ border-bottom: 3px solid #02adba;
}
-.links-container{
- background-color: #fff;
- position: sticky;
- top: 0;
+.links-container {
+ background-color: #fff;
+ position: sticky;
+ top: 0;
}
-.filters-links{
- display: flex;
- justify-content: space-around;
- padding: 1em;
- box-sizing: border-box;
- text-align: center;
+.filters-links {
+ display: flex;
+ justify-content: space-around;
+ padding: 1em;
+ box-sizing: border-box;
+ text-align: center;
}
-.filters-link{
- padding: 0.5em 2.5em;
- white-space: none;
- flex-grow: 1;
- cursor: pointer;
+.filters-link {
+ padding: 0.5em 2.5em;
+ white-space: none;
+ flex-grow: 1;
+ cursor: pointer;
}
-@media only screen and (min-width: 541px){
- .filters-link {
- line-height: 54px;
- font-size: 26px;
- }
+@media only screen and (min-width: 541px) {
+ .filters-link {
+ line-height: 54px;
+ font-size: 26px;
+ }
}
-@media only screen and (min-width: 921px){
- .filters-link {
- line-height: 54px;
- font-size: 24px;
+@media only screen and (min-width: 921px) {
+ .filters-link {
+ line-height: 54px;
+ font-size: 24px;
+ }
- }
-
- .filters-links {
- width: 90%;
- margin: auto;
- }
-}
\ No newline at end of file
+ .filters-links {
+ width: 90%;
+ margin: auto;
+ }
+}
diff --git a/kivi-cars/src/components/Location/LocationFilter.js b/kivi-cars/src/components/Location/LocationFilter.js
index 1695769..a0dee34 100644
--- a/kivi-cars/src/components/Location/LocationFilter.js
+++ b/kivi-cars/src/components/Location/LocationFilter.js
@@ -4,20 +4,23 @@ import Location from "../../data/location";
const LocationFilter = (props) => {
- const {setLocationData} = props.data;
+ const {data, setData} = props.data;
const clickHandler = (e) => {
- setLocationData( prevData => ( {
- ...prevData,
+ setData( prevData => ({
+ ...prevData,
+ Lokacija: {
+ ...prevData.Lokacija,
"kanton": e.target.value
- }))
+ }
+ }))
}
return (
-