added filters, location, email and post data service

kivi-cars/src/components/Button/StandardBtn.js

@@ -8,9 +8,7 @@ const StandardBtn = (props) => {
     const clickHandler = ( e ) => {
         setData( prevState => ({
             ...prevState,
-            "Category":{
+            "Kategorija": e.target.value
-                [e.target.name]: e.target.value
-            }
         }))
     }
 

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 (
+        <div className='standard-btn'>
+           <button name={filter} value={props.title} className={data.Slanje=== props.title ? "active" : "standardBtn"} onClick={e => clickHandler(e)}>{props.title}</button>
+        </div>
+    )
+}
+
+export default TimeBtn

kivi-cars/src/components/Button/button.css

@@ -12,6 +12,15 @@
     border: #02ADBA;
 }
 
+.active {
+    width: 300px;
+    background-color: #fff;
+    font-size: 25px;
+    padding: 7px 20px 7px 20px;
+    color: #02ADBA;
+    border: #02ADBA;
+}
+
 .standardBtn:hover {
     background-color:#3eced8 ;
     color: white;

kivi-cars/src/components/Filters/Advanced-filters.js

@@ -1,55 +1,34 @@
-import React from "react";
+import {useState} from "react";
 import "./Filters.css";
 import Filter from "./Filter/Filter";
 import TitleBtn from "../Button/TitleBtn";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
-import Color from '../../data/color';
-import AirCondition from "../../data/air-condition";
-import Seats from "../../data/seats";
-import Sensors from "../../data/sensors";
-import Gearbox from "../../data/gearbox";
-import Lights from "../../data/lights";
 import Checkbox from "./Filter/Checkbox";
 import CheckBox from "../../data/checkbox";
 
-
 const AdvancedFilters = (props) => {
+  const { data, setData } = props.data.data;
+  const [gradovi, setGradovi] = useState(data.Lokacija.gradovi)
+  let index = 0;
 
-    const {filters, setFilters} = props.data
+  return (
-    const data1 = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
+    <div className='filters-container'>
-    let index = 0
+      <div className='checkbox-content'>
+        {CheckBox.map((item) => {
+          index += 1;
+          return (
+            <Checkbox key={index} item={item} objekat={{ data, setData }} />
+          );
+        })}
+      </div>
 
+      <div style={{ marginTop: 50 }}>
+        <Link to='/location'>
+          <TitleBtn title='Dalje' />
+        </Link>
+      </div>
+    </div>
+  );
+};
 
-    return(
+export default AdvancedFilters;
-        <div className="filters-container">
-            <div className="filters-content">
-            {
-                data1.map(item => {
-                    index += 1;
-                    return(
-                        <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
-                    )
-                })
-            }
-            </div>
-            <div className="checkbox-content">
-            {
-                CheckBox.map(item => {
-                    index += 1;
-                    return(
-                        <Checkbox key={index} title={item} data={{filters, setFilters}}/>
-                    )
-                })
-            }
-            </div>
-
-            <div style={{marginTop: 50}}>
-                <Link to="/location">
-                    <TitleBtn title="Dalje" />
-                </Link>
-            </div>
-        </div>
-    )
-}
-
-export default AdvancedFilters

kivi-cars/src/components/Filters/Filter/Checkbox.js

@@ -1,26 +1,38 @@
 import React, { useState } from "react";
-import './css/Checkbox.css';
+import "./css/Checkbox.css";
 
-const Checkbox = (props) => {
+const Checkbox = ({ objekat, item }) => {
+  const { data, setData } = objekat;
+  const [isChecked, setIsChecked] = useState(data.Filteri[`${item.value}`]);
 
+  const changeHandler = (event) => {
+    setData((prevData) => ({
+      ...prevData,
+      Filteri: {
+        ...prevData.Filteri,
+        [event.target.name]: !isChecked,
+      },
+    }));
+  };
 
-    const {setFilters} = props.data
+  return (
-    const [isChecked, setIsChecked] = useState(true)
+    <div className='checkbox-div'>
-
+      <label className='checkbox-title' htmlFor={`${item.title}`}>
-
+        {item.title}
-    const changeHandler = ( event ) => {
+      </label>
-        setFilters(prevData => ({
+      <input
-            ...prevData,
+        type='checkbox'
-            [event.target.name]: isChecked
+        name={item.variable}
-        }))
+        checked={data.Filteri[`${item.variable}`]}
-    }
+        className='checkbox'
-
+        id={`${item.title}`}
-    return(
+        onChange={(e) => {
-        <div className="checkbox-div">
+          changeHandler(e);
-            <label className="checkbox-title" htmlFor={`${props.title}`}>{props.title}</label>
+          setIsChecked(!isChecked);
-            <input type="checkbox" name={props.title} className="checkbox" id={`${props.title}`} onChange={(e) => {changeHandler(e); setIsChecked(!isChecked)}}/>
+        }}
-        </div>
+      />
-    )
+    </div>
-}
+  );
+};
 
 export default Checkbox;

kivi-cars/src/components/Filters/Filter/DoubleFilter.js

@@ -1,40 +1,62 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import "./css/DoubleFilter.css";
 
 const DoubleFilter = (props) => {
+  const { data, setData } = props.data;
+  const { title, fields, VName } = props.item;
 
-    const {setFilters} = props.data
+  const changeHandler = (e) => {
-    const [doubleFilterData, setDoubleFilterData] = useState({})
+    setData((prevData) => ({
+      ...prevData,
+      Filteri: {
+        ...prevData.Filteri,
+        [VName]: {
+          ...prevData.Filteri[`${VName}`],
+          [e.target.name]: e.target.value,
+        },
+      },
+    }));
+  };
 
-    const changeHandler = ( e ) => {
+  return (
-        setDoubleFilterData(prevData => ({
+    <div className='doubleFilter-component'>
-            ...prevData,
+      <label htmlFor='filters-div'>{title}</label>
-            [e.target.name]: e.target.value     
+      <div className='double-filters' id='filters-div'>
-        }))
+        <div className='filter'>
-    }
+          <label htmlFor='od' className='filter-info'>
-
+            Od
-    useEffect(() => {
+          </label>
-        setFilters(prevData => ({
+          <input
-            ...prevData,
+            placeholder='Unesite'
-            [props.title]: doubleFilterData
+            id='od'
-        }))
+            name='Od'
-    }, [doubleFilterData])
+            value={data.Filteri[`${VName}`].Od}
-
+            className='filter-number'
-    return (
+            type='number'
-        <div className="doubleFilter-component">
+            min={fields.min}
-            <label htmlFor="filters-div">{props.title}</label>
+            max={fields.max}
-            <div className="double-filters" id="filters-div">
+            onChange={(e) => changeHandler(e)}
-                <div className="filter">
+          />
-                <label htmlFor="od" className="filter-info">Od</label>
-                <input placeholder="Unesite" id="od" name="Od" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
-                </div>
-                <div className="filter"> 
-                <label htmlFor="do" className="filter-info">Do</label>
-                <input placeholder="Unesite" id="do" name="Do" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
-                </div>
-            </div>
         </div>
-    )
+        <div className='filter'>
-}
+          <label htmlFor='do' className='filter-info'>
+            Do
+          </label>
+          <input
+            placeholder='Unesite'
+            id='do'
+            name='Do'
+            value={data.Filteri[`${VName}`].Do}
+            className='filter-number'
+            type='number'
+            min={fields.min}
+            max={fields.max}
+            onChange={(e) => changeHandler(e)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default DoubleFilter;

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 changeHandler = (e) => {
-    const [filtersData, setFiltersData] = useState({})
+    setData((prevData) => ({
+      ...prevData,
+      Filteri: {
+        ...prevData.Filteri,
+        [e.target.name]: e.target.value,
+      },
+    }));
+  };
 
-    const changeHandler = ( e ) => {
+  return (
-        setFilters( prevData => ({
+    <div className='filter-component'>
-            ...prevData,
+      <label htmlFor={VName} className='filter-name'>
-            [e.target.name]: e.target.value
+        {ime}
-        }))
+      </label>
-    }
+      <select
-
+        className='dropdown-list'
-    return(
+        name={VName}
-        <div className="filter-component">
+        id={VName}
-            <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
+        value={data.Filteri[`${VName}`]}
-            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(e) => changeHandler(e)}>
+        onChange={(e) => changeHandler(e)}
-                {props.tipovi.map((tip, i) => {
+      >
-                    return (
+        {tipovi.map((tip, i) => {
-                        <option key={i} value={tip} name={tip}>{tip}</option>
+          return (
-                    )
+            <option key={i} value={tip} name={tip}>
-                })}
+              {tip}
-            </select>
+            </option>
-        </div>
+          );
-    )
+        })}
-}
+      </select>
+    </div>
+  );
+};
 
 export default Filter;

kivi-cars/src/components/Filters/Filter/LocationCheckbox.js

@@ -1,28 +1,96 @@
-import React, { useEffect, useState } from "react";
+import { React, useEffect, useState } from "react";
-import './css/LocationCheckbox.css';
+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;
+  // useEffect(() => {
-    const [checked, setChecked] = useState(true)
+  //     data.Lokacija.gradovi.forEach(grad => {
+  //         if(grad === props.title){
+  //             return setValue(true)
+  //         }return setValue(false)
+  //     })
+  // }, [data.Lokacija.gradovi])
 
-    const changeHandler = (e) => {
+  // na pocetku dobijem prazan niz, ukoliko oznaci jedan grad, treba ga dodati u niz
-        setCheckboxStatus(prevStatus => ({
+  // prije svakog dodavanja treba provjeriti da li je taj grad u nizu, ukoliko nije treba ga dodati
-            ...prevStatus,
+  // brisanje gradova iz niza samo ukoliko je taj grad u nizu
-            [e.target.name]: checked
+
-        }))
+  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 (
+  const clickHandler = (e) => {
-        <div className="checkbox">
+    if (checked) {
-            <label className="checkbox-title" htmlFor={props.title}>{props.title}</label>
+      return obrisiGrad(e);
-            <input className="check-box" type="checkbox" name={props.title} id={props.title} onChange={(e)=> {
+    }
-                setChecked(!checked)
+    dodajGrad(e);
-                changeHandler(e)
+  };
-                }}/>
+
-        </div>
+  // 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 (
+    <div className='checkbox'>
+      <label className='checkbox-title' htmlFor={props.title}>
+        {props.title}
+      </label>
+      <input
+        className='check-box'
+        checked={checked}
+        type='checkbox'
+        name={props.title}
+        id={props.title}
+        onChange={(e) => {
+          clickHandler(e);
+          setChecked(!checked);
+        }}
+      />
+    </div>
+  );
+};
 
 export default LocationCheckbox;

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;
+  // if(data.Category.Vozilo === "Auto"){
-    const [brandIndex, setBrandIndex] = useState(0);
+  //     showModel(true)
-    const [model, showModel] = useState(true);
+  //     return
-    let index = 0;
+  //     })
-    let brands;
 
-    // if(data.Category.Vozilo === "Auto"){
+  // }else if(data.Category.Vozilo === "Motor"){
-    //     showModel(true)
+  //     showModel(false)
-    //     return 
+  //     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"){
+  brands = Cars.map((brand) => {
-    //     showModel(false)
+    return brand.brand;
-    //     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 => {
+  useEffect(() => {
-        return brand.brand})
+    // console.log(data, setData)
+    if (data.Filteri.Brend !== "")
+      setBrandIndex(brands.indexOf(data.Filteri.Brend));
+  }, [data]);
 
+  const models = Cars[brandIndex].models;
 
-    useEffect(() => {
+  const Brands = {
-        if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka))
+    ime: "Marka",
-    }, [filters])
+    VName: "Brend",
+    tipovi: brands,
+  };
 
-    const models = Cars[brandIndex].models
+  const Models = {
+    ime: "Model",
+    VName: "Model",
+    tipovi: models,
+  };
 
+  const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats];
+  const data1 = [Type, Condition, Transmission, Fuel, Drive, Doors, Color, AirCondition, Gearbox, Sensors];
 
-    const Brands = {
+  return (
-        "ime": "Marka",
+    <div className='filters-container'>
-        "tipovi": brands
+      <Filter item={Brands} data={{ data, setData }} />
-    }
+      {model && <Filter item={Models} data={{ data, setData }} />}
 
-    const Models = {
+      {data1.map((item) => {
-        "ime": "Model",
+        index += 1;
-        "tipovi": models
+        return <Filter key={index} item={item} data={{ data, setData }} />;
-    }
+      })}
 
-    const data1 = [Transmission, Drive, Condition, Doors]
+      {data2.map((item) => {
-    const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
+        index += 1;
-    const data3 = [Fuel, Type]    
+        return (
+          <DoubleFilter
+            key={index}
+            item={item}
+            title={item.title}
+            fields={item.fields}
+            data={{ data, setData }}
+          />
+        );
+      })}
 
-    return(
+      <div style={{ marginTop: 50 }}>
-        <div className="filters-container">
+        <Link to='/location'>
-            <Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filters, setFilters}}/>
+          <TitleBtn title='Dalje' />
-            {model ? (<Filter ime={Models.ime} tipovi={Models.tipovi} data={{filters, setFilters}}/>): null}
+        </Link>
+      </div>
+    </div>
+  );
+};
 
-            {data3.map(item => {
+export default StandardFilters;
-                index += 1;
-                return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
-                )
-            })}
-
-            {data2.map(item => {
-                index += 1;
-                return(
-                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{filters, setFilters}}/>
-                )
-            })}
-            
-            {data1.map(item => {
-                index += 1;
-                return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
-                )
-            })}
-
-            <div style={{marginTop: 50}}>
-                <Link to="/location">
-                    <TitleBtn title="Dalje" />
-                </Link>
-            </div>
-        </div>
-    )
-}
-
-export default StandardFilters

kivi-cars/src/components/FiltersNavbar/FiltersNav.css

@@ -1,55 +1,54 @@
-*{
+* {
-    margin: 0;
+  margin: 0;
-    padding: 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{
+.links-container {
-    background-color: #fff;
+  background-color: #fff;
-    position: sticky;
+  position: sticky;
-    top: 0;
+  top: 0;
 }
 
-.filters-links{
+.filters-links {
-    display: flex;
+  display: flex;
-    justify-content: space-around;
+  justify-content: space-around;
-    padding: 1em;
+  padding: 1em;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    text-align: center;
+  text-align: center;
 }
 
-.filters-link{
+.filters-link {
-    padding: 0.5em 2.5em;
+  padding: 0.5em 2.5em;
-    white-space: none;
+  white-space: none;
-    flex-grow: 1;
+  flex-grow: 1;
-    cursor: pointer;
+  cursor: pointer;
 }
 
-@media only screen and (min-width: 541px){
+@media only screen and (min-width: 541px) {
-    .filters-link {
+  .filters-link {
-        line-height: 54px;
+    line-height: 54px;
-        font-size: 26px;
+    font-size: 26px;
-    }
+  }
 }
 
-@media only screen and (min-width: 921px){
+@media only screen and (min-width: 921px) {
-    .filters-link {
+  .filters-link {
-        line-height: 54px;
+    line-height: 54px;
-        font-size: 24px;
+    font-size: 24px;
+  }
 
-    }
+  .filters-links {
-
+    width: 90%;
-    .filters-links {
+    margin: auto;
-        width: 90%;
+  }
-        margin: auto;
-    }
 }

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 => ( {
+        setData( prevData => ({
-                ...prevData,
+            ...prevData,
+            Lokacija: {
+                ...prevData.Lokacija,
                 "kanton": e.target.value
-            }))
+            }
+        }))
     }
 
 
     return (
         <div className="locationFilter-div">
             <label className="location-title" htmlFor={Location.ime}>Izaberite lokaciju:</label>
-            <select name={Location.ime} id={Location.ime} onChange={(e) => clickHandler(e) }>
+            <select name={Location.ime} value={data.Lokacija.kanton} id={Location.ime} onChange={(e) => clickHandler(e) }>
                 <option value="Svi">Svi</option>
                 <optgroup label={Location.entiteti[0].entitet}>
                     {Location.entiteti[0].kantoni.map((kanton, i) => {

kivi-cars/src/containers/App.js

@@ -1,37 +1,142 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import './css/App.css';
+import "./css/App.css";
-import { React, useEffect, useState } from 'react';
+import { React, useEffect, useState } from "react";
-import CategoryPage from './CategoryPage';
+import CategoryPage from "./CategoryPage";
-import LandingPage from './LandingPage';
+import LandingPage from "./LandingPage";
-import FiltersPage from './FiltersPage';
+import FiltersPage from "./FiltersPage";
-import LocationPage from './LocationPage';
+import LocationPage from "./LocationPage";
-import EmailPage from './EmailPage';
+import EmailPage from "./EmailPage";
-import CongratsPage from './CongratsPage';
+import CongratsPage from "./CongratsPage";
-import LinkR from '../data/routes';
+import LinkR from "../data/routes";
-  
 
 function App() {
-
   // const info = 'Dobrodosli na stranicu kivi!'
-  const [data, setData] = useState({})
+  const [data, setData] = useState({
+    Kategorija: "",
+    Email: "",
+    NapredniFilteri: false,
+    Filteri: {
+      Brend: "",
+      Model: "",
+      ABS: false,
+      Airbag: false,
+      Alarm: false,
+      AutoKuka: false,
+      CentralnaBrava: false,
+      DaljinskoZakljucavanje: false,
+      ESP: false,
+      ElektricniPodizaciStakala: false,
+      ElektricniRetrovizori: false,
+      GrijanjeSjedista: false,
+      HladjenjeSjedista: false,
+      ISOFIX: false,
+      KomandeNaVolanu: false,
+      Koza: false,
+      LED: false,
+      Laser: false,
+      Xenon: false,
+      MasaznaSjedista: false,
+      MemorijaSjedista: false,
+      Metalik: false,
+      NaslonZaRuku: false,
+      Navigacija: false,
+      ParkingAssistent: false,
+      Panorama: false,
+      PosjedujeKlimu: false,
+      Registrovan: false,
+      SenzorMrtvogUgla: false,
+      ServisnaKnjiga: false,
+      ServoVolan: false,
+      Siber: false,
+      StartStop: false,
+      Tempomat: false,
+      Turbo: false,
+      RoloZavjese: false,
+      DPFFAP: false,
+      Stanje: "",
+      Gorivo: "",
+      BrojVrata: "",
+      TipVozila: "",
+      Pogon: "",
+      EmisioniStandard: "",
+      VelicinaFelgi: "",
+      Transmisija: "",
+      BrojStepenihPrijenosa: "",
+      Boja: "",
+      TipKlime: "",
+      ParkingSenzori: "",
+      Cijena: {
+        Od: "",
+        Do: "",
+      },
+      Godiste: {
+        Od: "",
+        Do: "",
+      },
+      Kilometraza: {
+        Od: "",
+        Do: "",
+      },
+      Kilovata: {
+        Od: "",
+        Do: "",
+      },
+      KonjskihSnaga: {
+        Od: "",
+        Do: "",
+      },
+      Kubikaza: {
+        Od: "",
+        Do: "",
+      },
+    },
+    Lokacija: {
+      entitet: "Svi",
+      kanton: "Svi",
+      gradovi: [],
+    },
+    Slanje: "Odmah",
+  });
 
   useEffect(() => {
-    console.log(data)
+    console.log(data);
-  }, [data])
+  }, [data]);
-
 
   return (
-    <div className="App">
+    <div className='App'>
       <Router>
         <Routes>
-        
           <Route path='/' element={<LandingPage />} />
-          <Route path='category' element={<CategoryPage data={{data, setData}} routes={LinkR.category} />}/>
+          <Route
-          <Route path='filters' element={<FiltersPage data={{data, setData}} routes={LinkR.filters}/>}/>
+            path='category'
-          <Route path='location' element={<LocationPage data={{data, setData}} routes={LinkR.location}/>}/>
+            element={
-          <Route path='email' element={<EmailPage data={{data, setData}} routes={LinkR.email} />}/>
+              <CategoryPage data={{ data, setData }} routes={LinkR.category} />
-          <Route path='congrats' element={<CongratsPage data={{data, setData}} routes={LinkR.congrats} />}/>
+            }
-        
+          />
+          <Route
+            path='filters'
+            element={
+              <FiltersPage data={{ data, setData }} routes={LinkR.filters} />
+            }
+          />
+          <Route
+            path='location'
+            element={
+              <LocationPage data={{ data, setData }} routes={LinkR.location} />
+            }
+          />
+          <Route
+            path='email'
+            element={
+              <EmailPage data={{ data, setData }} routes={LinkR.email} />
+            }
+          />
+          <Route
+            path='congrats'
+            element={
+              <CongratsPage data={{ data, setData }} routes={LinkR.congrats} />
+            }
+          />
         </Routes>
       </Router>
     </div>

kivi-cars/src/containers/CategoryPage.js

@@ -1,20 +1,19 @@
-import Header from '../components/Header/Header';
+import Header from "../components/Header/Header";
-import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
-import CategoryBtns from '../components/CategoryBtns/categorybtns'
+import CategoryBtns from "../components/CategoryBtns/categorybtns";
-import './css/CategoryPage.css'
+import "./css/CategoryPage.css";
 
 function CategoryPage(props) {
+  const { data, setData } = props.data;
 
-  const {data, setData} = props.data
+  const naslov = "IZABERITE KATEGORIJU";
-
-  const naslov = 'IZABERITE KATEGORIJU'
   return (
-    <div className="category">
+    <div className='category'>
-        <Header header={naslov}/>
+      <Header header={naslov} />
-        <ButtonsToolbar routes={props.routes}/>
+      <ButtonsToolbar routes={props.routes} />
-        <div className='category-buttons'>
+      <div className='category-buttons'>
-          <CategoryBtns data={{data, setData}}/>
+        <CategoryBtns data={{ data, setData }} />
-        </div>
+      </div>
     </div>
   );
 }

kivi-cars/src/containers/CongratsPage.js

@@ -1,31 +1,33 @@
-import Header from '../components/Header/Header';
+import Header from "../components/Header/Header";
-import TitleBtn from '../components/Button/TitleBtn';
+import TitleBtn from "../components/Button/TitleBtn";
-import './css/CongratsPage.css'
+import "./css/CongratsPage.css";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 function CongratsPage() {
-
+  const naslov = "ČESTITAMO!";
-  const naslov = 'ČESTITAMO!'
+  const btnTitle = "NOVA PRETRAGA";
-  const btnTitle = 'NOVA PRETRAGA'
 
   return (
-    <div className="congrats-page">
+    <div className='congrats-page'>
-      <Header header={naslov}/>
+      <Header header={naslov} />
       <div className='paragh-div'>
-          <div className='first-paragh'>
+        <div className='first-paragh'>
-              <h2 className='h2'>ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.</h2>
+          <h2 className='h2'>
-          </div>
+            ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.
-          <div className='second-paragh'>
+          </h2>
-              <h2 className='h2'>Svi rezultati će u najkraćem roku biti poslani na vašu adresu.</h2>
+        </div>
-          </div>
+        <div className='second-paragh'>
-          <div className='third-paragh'>
+          <h2 className='h2'>
-              <h1 className='h1'>Ako želite novu pretragu idete na</h1>
+            Svi rezultati će u najkraćem roku biti poslani na vašu adresu.
-          </div>
+          </h2>
-          
+        </div>
-          <Link to='/'>
+        <div className='third-paragh'>
-            <TitleBtn title={btnTitle}/>
+          <h1 className='h1'>Ako želite novu pretragu idete na</h1>
-          </Link>
+        </div>
 
+        <Link to='/'>
+          <TitleBtn title={btnTitle} />
+        </Link>
       </div>
     </div>
   );

kivi-cars/src/containers/EmailPage.js

@@ -1,96 +1,107 @@
-import { useState, useEffect} from 'react';
+import { useState, useEffect } from "react";
-import './css/EmailPage.css'
+import "./css/EmailPage.css";
-import Header from '../components/Header/Header';
+import Header from "../components/Header/Header";
-import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
-import StandardBtn from '../components/Button/StandardBtn';
+import TimeBtn from "../components/Button/TimeBtn";
-import TitleBtn from '../components/Button/TitleBtn';
+import TitleBtn from "../components/Button/TitleBtn";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-
+import postData from "../services/search-post-service";
 
 function EmailPage(props) {
+  const { data, setData } = props.data;
+  const [error, setError] = useState(false);
+  const [toggleButtons, setToggle] = useState(true);
 
-    const {data, setData} = props.data
+  const [state, setState] = useState({
-    const [error, setError] = useState(false)
+    email: "",
+    confirmEmail: "",
+  });
 
+  const header = "SLANJE OBAVJEŠTENJA";
+  let title1 = "Odmah";
+  let title2 = "Dnevno";
+  let title3 = "ZAVRŠI";
+  let errmsg = "Email does not match!";
+  let filter = "Slanje";
 
-    const [state, setState] = useState({
+  const emailCheck = (e, ec) => {
-        email: "",
+    if (e !== "" && e === ec) {
-        confirmEmail: ""
+      setError(false);
-    })
+      setData((prevData) => ({
-
+        ...prevData,
-    const header = "SLANJE OBAVJEŠTENJA";
+        Email: state.email,
-    let title1 = 'Odmah';
+      }));
-    let title2 = 'Dnevno';
+      return error;
-    let title3 = 'ZAVRŠI';
+    } else {
-    let errmsg = 'Email does not match!';
+      setError(true);
-    let filter = 'Slanje'
+      return error;
-
-
-    const emailCheck = (e, ec) => {
-        if(e !== "" && e === ec){
-            setError(false)
-            setData(prevData => ({
-                ...prevData,
-                "Email": state.email
-            }))
-            return error
-        }else {
-            setError(true)
-            return error
-        }
     }
+  };
 
-    const updateInput = (event) => {
+  const updateInput = (event) => {
-        setState(prevState => ({
+    setState((prevState) => ({
-            ...prevState,
+      ...prevState,
-            [event.target.name]: event.target.value
+      [event.target.name]: event.target.value,
-        }))
+    }));
-    }
+  };
 
-    useEffect(() => {
+  useEffect(() => {
-        emailCheck(state.email, state.confirmEmail)
+    emailCheck(state.email, state.confirmEmail);
-    }, [state])
+  }, [state]);
 
-    return ( 
+  return (
-        <div>
+    <div>
-            <Header header={header}/>
+      <Header header={header} />
-            <ButtonsToolbar routes={props.routes}/>
+      <ButtonsToolbar routes={props.routes} />
-            <div className="info">
+      <div className='info'>
-                <h2 className='h2'>Slanje obavještenja</h2>
+        <h2 className='h2'>Slanje obavještenja</h2>
-            </div>
+      </div>
-            <div className='buttons-container'>
+      <div className='buttons-container'>
-                <StandardBtn data={{data, setData, filter}} title={title1}/>
+        <TimeBtn data={{ data, setData, filter }} title={title1} />
-                <StandardBtn data={{data, setData, filter}} title={title2}/>
+        <TimeBtn data={{ data, setData, filter }} title={title2} />
-            </div>
+      </div>
-            <div className='form'>
+      <div className='form'>
-                <form method="POST" id="form-email">
+        <form method='POST' id='form-email'>
-                    <div className='email-div'>
+          <div className='email-div'>
-                        <input type="email" id="email" name='email' placeholder='vas.email@mail.com' required size='250' onChange={updateInput} />
+            <input
-                        <input type="email" id="confirmEmail" name='confirmEmail' placeholder='potvrdite.email@mail.com' required size='250' onChange={updateInput} />
+              type='email'
-                        <p style={{color: "red"}} >{error ? errmsg : null}</p>
+              id='email'
-                    </div>
+              name='email'
-
+              placeholder='vas.email@mail.com'
-                </form>
+              required
-            </div>
+              size='250'
-            <div>
+              onChange={updateInput}
-                <h3 className='h3-2'>*U svakom trenutku možete prekinuti slanje objava kroz
+            />
-                    link u vašem emailu
+            <input
-                </h3>
+              type='email'
-            </div>
+              id='confirmEmail'
-            <div>
+              name='confirmEmail'
-                {error ? (<TitleBtn title={title3} /> ) : (
+              placeholder='potvrdite.email@mail.com'
-                <Link to="/congrats">
+              required
-                    <TitleBtn title={title3} />    
+              size='250'
-                </Link>
+              onChange={updateInput}
-                )}      
+            />
-            </div>
+            <p style={{ color: "red" }}>{error ? errmsg : null}</p>
-        </div>
+          </div>
-        
+        </form>
-
+      </div>
-        
+      <div>
-
+        <h3 className='h3-2'>
-
+          *U svakom trenutku možete prekinuti slanje objava kroz link u vašem
-     );
+          emailu
+        </h3>
+      </div>
+      <div>
+        {error ? (
+          <TitleBtn title={title3} />
+        ) : (
+          <Link to='/congrats' onClick={() => postData(data)}>
+            <TitleBtn title={title3} />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
 }
 
 export default EmailPage;

kivi-cars/src/containers/FiltersPage.js

@@ -6,32 +6,22 @@ import FiltersNav from '../components/FiltersNavbar/FiltersNav';
 import StandardFilters from "../components/Filters/Standard-filters";
 import AdvancedFilters from "../components/Filters/Advanced-filters";
 
-const FiltersPage = (props) => {
+const FiltersPage = ({routes, data, setData}) => {
 
     const naslov = "Filteri za pretrazivanje"
     const [toggle, setToggle] = useState(true)
-    const [filters, setFilters] = useState({});
-    const {data, setData} = props.data
-    
-
-    useEffect(() => {
-        setData( prevData => ({
-            ...prevData,
-            "Filters": filters
-        }))
-    }, [filters])
 
     const showFilters = (toggle) => {
         if(toggle){
-            return <StandardFilters data={{data, filters, setFilters}}/>
+            return <StandardFilters data={{data, setData}}/>
         }
-        return <AdvancedFilters data={{data, filters, setFilters}}/>;
+        return <AdvancedFilters data={{data, setData}}/>;
     }
 
     return(
         <div className="FiltersPage">
             <Header header={naslov}/>
-            <ButtonsToolbar routes={props.routes}/> 
+            <ButtonsToolbar routes={routes}/> 
             <FiltersNav toggle={{toggle, setToggle}}/>
             {showFilters(toggle)}
         </div>

kivi-cars/src/containers/LocationPage.js

@@ -1,87 +1,71 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import './css/LocationPage.css';
+import "./css/LocationPage.css";
 import Header from "../components/Header/Header";
-import Location from '../data/location';
+import Location from "../data/location";
-import LocationFilter from '../components/Location/LocationFilter';
+import LocationFilter from "../components/Location/LocationFilter";
-import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
-import LocationCheckbox from '../components/Filters/Filter/LocationCheckbox';
+import LocationCheckbox from "../components/Filters/Filter/LocationCheckbox";
-import TitleBtn from '../components/Button/TitleBtn';
+import TitleBtn from "../components/Button/TitleBtn";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 const LocationPage = (props) => {
+  const { data, setData } = props.data;
+  const [gradovi, setGradovi] = useState([]);
+  const naslov = "Dodajte lokaciju";
 
-    const {data, setData} = props.data
+  let id = 0;
-    const [locationData, setLocationData] = useState({})
-    const [locationInfo, setLocationInfo] = useState({"gradovi": []})
-    const [checkboxStatus, setCheckboxStatus] = useState({})
-    const [location, setLocation] = useState({});
-    const naslov = "Dodajte lokaciju"
 
-    let id = 0;
+  useEffect(() => {
+    if (data.Lokacija.kanton) {
+      Location.entiteti.map((entity) => {
+        return entity.kantoni.map((kantony) => {
+          if (data.Lokacija.kanton === "Distrikt Brčko") {
+            setGradovi([]);
+            return setData((prevData) => ({
+              ...prevData,
+              Lokacija: {
+                ...prevData.Lokacija,
+                entitet: entity.entitet,
+                gradovi: ["Brčko"],
+              },
+            }));
+          } else if (data.Lokacija.kanton === kantony.kanton) {
+            setGradovi(kantony.gradovi);
+            return setData((prevData) => ({
+              ...prevData,
+              Lokacija: {
+                ...prevData.Lokacija,
+                entitet: entity.entitet,
+              },
+            }));
+          }
+        });
+      });
+    }
+  }, [data.Lokacija.kanton]);
 
-    useEffect(() => {
+  useEffect(() => {
-        if(locationData.kanton){
+    console.log("parent object", gradovi);
-            Location.entiteti.map(entity => {
+  }, [data.Lokacija.gradovi]);
-                return entity.kantoni.map(kantony => {
-                    if(locationData.kanton === kantony.kanton){
-                        return setLocationInfo({
-                            "entitet": entity.entitet,
-                            "kanton": kantony.kanton,
-                            "gradovi": kantony.gradovi
-                        })
-                    }
-                })
-            })
-        }setCheckboxStatus({})
-            console.log("locationInfo", locationInfo)
-    }, [locationData])
 
-    useEffect(() => {
+  return (
-        if(locationData.kanton === 'Distrikt Brcko'){
+    <div className='location-div'>
-            setLocation(
+      <Header header={naslov} />
-                {
+      <ButtonsToolbar routes={props.routes} />
-                "entitet": "Distrikt Brcko",
+      <LocationFilter data={{ data, setData }} />
-                "kanton": "Distrikt Brcko",
+      <div className='checkbox-div'>
-                "gradovi": "Brcko"
+        {gradovi.map((grad) => {
-                }
+          id += 1;
-            )
+          return (
-        }else{
+            <LocationCheckbox key={id} title={grad} data={{ data, setData }} />
-            setLocation( prevData => ({
+          );
-                ...prevData,
+        })}
-                "entitet": locationInfo.entitet,
+      </div>
-                "kanton": locationInfo.kanton,
+      <Link to='/email'>
-                "gradovi": checkboxStatus
+        <TitleBtn title='Naredna stranica' />
-            }))}
+      </Link>
-            console.log("location", location)
+    </div>
-    }, [checkboxStatus])
+  );
+};
 
-    useEffect(() => {
+export default LocationPage;
-        setData( prevData => ({
-            ...prevData,
-            "Location": location
-        }))
-        console.log("data", data)
-    }, [location])
-
-    
-    return (
-        <div className='location-div'>
-            <Header header={naslov}/>
-            <ButtonsToolbar routes={props.routes}/>
-            <LocationFilter data={{setLocationData}}/>
-            <div className='checkbox-div'>
-                {locationInfo.gradovi.map((grad) => {
-                    id += 1
-                    return(
-                        <LocationCheckbox key={id} title={grad} data={{checkboxStatus, setCheckboxStatus}}/>
-                    )
-                })}
-            </div>
-            <Link to="/email">
-                <TitleBtn title="Naredna stranica"/>
-            </Link>
-        </div>
-    );
-}
-
-export default LocationPage

kivi-cars/src/containers/css/LocationPage.css

@@ -15,5 +15,6 @@
     .checkbox-div{
         flex-direction: row;
         justify-content: space-around;
+        margin-bottom: 50px;
     }
 }

kivi-cars/src/data/air-condition.js

@@ -1,5 +1,6 @@
 const AirCondition = {
     "ime" : "Klima",
+    "VName": "TipKlime",
     "tipovi" : [
         "Odaberite",
         "Jednozonska",

kivi-cars/src/data/checkbox.js

@@ -1,38 +1,179 @@
 const CheckBox = [
-    "ABS",
+  {
-    "ESP",
+    title: "ABS",
-    "Tempomat",
+    value: false,
-    "Alarm",
+    variable: "ABS",
-    "Airbag",
+  },
-    "Šiber",
+  {
-    "Servo volan",
+    title: "ESP",
-    "Koža",
+    value: false,
-    "Klima",
+    variable: "ESP",
-    "Centralna brava",
+  },
-    "Daljinsko zaključavanje",
+  {
-    "ISOFIX",
+    title: "Alarm",
-    "Registrovan",
+    value: false,
-    "Xenon",
+    variable: "Alarm",
-    "LED",
+  },
-    "Laser",
+  {
-    "Električni podizači stakala",
+    title: "Airbag",
-    "Naslon za ruke", 
+    value: false,
-    "Električni retrovizor",
+    variable: "Airbag",
-    "Start/Stop",
+  },
-    "Turbo",
+  {
-    "Stranac",   
+    title: "Šiber",
-    "Pakring assistent",
+    value: false,
-    "Senzor mrtvog ugla",
+    variable: "Siber",
-    "Servisna knjiga",
+  },
-    "Komande na volanu",
+  {
-    "Navigacija",
+    title: "Servo volan",
-    "Grijanje sjedišta",
+    value: false,
-    "Masažna sjedišta",
+    variable: "ServoVolan",
-    "Memorija sjedišta",
+  },
-    "Panorama",
+  {
-    "Ocarinjen",
+    title: "Koža",
-    "Udaren",
+    value: false,
-    
+    variable: "Koza",
-]
+  },
+  {
+    title: "Klima",
+    value: false,
+    variable: "PosjedujeKlimu",
+  },
+  {
+    title: "Centralna brava",
+    value: false,
+    variable: "CentralnaBrava",
+  },
+  {
+    title: "Daljinsko zaključavanje",
+    value: false,
+    variable: "DaljinskoZakljucavanje",
+  },
+  {
+    title: "Kuka",
+    value: false,
+    variable: "AutoKuka",
+  },
+  {
+    title: "ISOFIX",
+    value: false,
+    variable: "ISOFIX",
+  },
+  {
+    title: "Registrovan",
+    value: false,
+    variable: "Registrovan",
+  },
+  {
+    title: "Xenon",
+    value: false,
+    variable: "Xenon",
+  },
+  {
+    title: "LED",
+    value: false,
+    variable: "LED",
+  },
+  {
+    title: "Laser",
+    value: false,
+    variable: "Laser",
+  },
+  {
+    title: "Električni podizači stakala",
+    value: false,
+    variable: "ElektricniPodizaciStakala",
+  },
+  {
+    title: "Naslon za ruku",
+    value: false,
+    variable: "NaslonZaRuku",
+  },
+  {
+    title: "Električni retrovizor",
+    value: false,
+    variable: "ElektricniRetrovizori",
+  },
+  {
+    title: "Start/Stop",
+    value: false,
+    variable: "StartStop",
+  },
+  {
+    title: "Tempomat",
+    value: false,
+    variable: "Tempomat",
+  },
+  {
+    title: "Turbo",
+    value: false,
+    variable: "Turbo",
+  },
+  {
+    title: "DPF/FAP",
+    value: false,
+    variable: "DPFFAP",
+  },
+  {
+    title: "Pakring assistent",
+    value: false,
+    variable: "ParkingAssistent",
+  },
+  {
+    title: "Senzor mrtvog ugla",
+    value: false,
+    variable: "SenzorMrtvogUgla",
+  },
+  {
+    title: "Servisna knjiga",
+    value: false,
+    variable: "ServisnaKnjiga",
+  },
+  {
+    title: "Komande na volanu",
+    value: false,
+    variable: "KomandeNaVolanu",
+  },
+  {
+    title: "Navigacija",
+    value: false,
+    variable: "Navigacija",
+  },
+  {
+    title: "Grijanje sjedišta",
+    value: false,
+    variable: "GrijanjeSjedista",
+  },
+  {
+    title: "Hlađenje sjedišta",
+    value: false,
+    variable: "HladjenjeSjedista",
+  },
+  {
+    title: "Masažna sjedišta",
+    value: false,
+    variable: "MasaznaSjedista",
+  },
+  {
+    title: "Memorija sjedišta",
+    value: false,
+    variable: "MemorijaSjedista",
+  },
+  {
+    title: "Panorama",
+    value: false,
+    variable: "Panorama",
+  },
+  {
+    title: "Rolo zavjese",
+    value: false,
+    variable: "RoloZavjese",
+  },
+  {
+    title: "Metalik",
+    value: false,
+    variable: "Metalik",
+  },
+];
 
 export default CheckBox;

kivi-cars/src/data/color.js

@@ -1,5 +1,6 @@
 const Color = {
     "ime": "Boja",
+    "VName": "Boja",
     "tipovi": [
         "Odaberite",
         "Bež",

kivi-cars/src/data/condition.js

@@ -1,5 +1,6 @@
 const Condition = {
     "ime": "Stanje",
+    "VName": "Stanje",
     "tipovi": [
         "Odaberite",
         "Novo",

kivi-cars/src/data/cubes.js

@@ -1,5 +1,6 @@
 const Cubes = {
     "title": "Kubikaza",
+    "VName": "Kubikaza",
     "fields": {
         "min": 0.8,
         "max": 6.2,

kivi-cars/src/data/doors.js

@@ -1,5 +1,6 @@
 const Doors = {
     "ime": "Broj vrata",
+    "VName": "BrojVrata",
     "tipovi" : [
         "Odaberite",
         "2/3",

kivi-cars/src/data/drive.js

@@ -1,5 +1,6 @@
 const Drive = {
     "ime" : "Pogon",
+    "VName": "Pogon",
     "tipovi": [
         "Odaberite",
         "Prednji",

kivi-cars/src/data/fuel.js

@@ -1,10 +1,11 @@
 const Fuel = {
     "ime": "Gorivo",
+    "VName": "Gorivo",
     "tipovi": [
         "Odaberite",
         "Dizel",
         "Benzin",
-        "Benzin/Plin",
+        "Plin",
         "Cng",
         "Hybrid",
         "Elektro"

kivi-cars/src/data/gearbox.js

@@ -1,5 +1,6 @@
 const Gearbox = {
     "ime": "Broj brzina",
+    "VName": "BrojStepenihPrijenosa",
     "tipovi": [
         "Odaberite",
         "3+R",

kivi-cars/src/data/horsepower.js

@@ -1,5 +1,6 @@
 const HorsePower = {
     "title": "Konjskih snaga",
+    "VName": "KonjskihSnaga",
     "fields": {
         "min": 0,
         "max": 2000,

kivi-cars/src/data/kilometers.js

@@ -1,5 +1,6 @@
 const Kilometers = {
     "title": "Kilometraza",
+    "VName": "Kilometraza",
     "fields": {
         "min": 0,
         "max": 1000000,

kivi-cars/src/data/kilowats.js

@@ -1,5 +1,6 @@
 const Kilowats = {
     "title": "Kilovata",
+    "VName": "Kilovata",
     "fields": {
         "min": 0,
         "max": 1000,

kivi-cars/src/data/lights.js

@@ -1,13 +0,0 @@
-const Lights = {
-    "ime": "Svjetla",
-    "tipovi": [
-        "Odaberite",
-        "Halogena",
-        "Xenon",
-        "Led",
-        "Laser",
-        "Ostalo"
-    ]
-}
-
-export default Lights;

kivi-cars/src/data/location.js

@@ -1,231 +1,225 @@
 const Location = {
-    "ime": "Lokacija",
+  ime: "Lokacija",
-    "entiteti": [
+  entiteti: [
-        {"entitet":"Federacija BiH",
+    {
-            "kantoni": [
+      entitet: "Federacija BiH",
-                {"kanton": "Sarajevo",
+      kantoni: [
-                    "gradovi": [
+        {
-                        "Hadžići",
+          kanton: "Sarajevo",
-                        "Ilidža",                       
+          gradovi: [
-                        "Ilijaš",                       
+            "Hadžići",
-                        "Sarajevo - Centar",                       
+            "Ilidža",
-                        "Sarajevo-Novi Grad",                       
+            "Ilijaš",
-                        "Sarajevo-Novo Sarajevo",                       
+            "Sarajevo-Centar",
-                        "Sarajevo-Stari Grad",                       
+            "Sarajevo-Novi Grad",
-                        "Trnovo",                       
+            "Sarajevo-Novo Sarajevo",
-                        "Vogošća"
+            "Sarajevo-Stari Grad",
-                    ]
+            "Trnovo",
-                },
+            "Vogošća",
-                {"kanton":"Unsko-sanski",
+          ],
-                    "gradovi": [
-                        "Bihać",
-                        "Bosanska Krupa",                       
-                        "Bosanski Petrovac",                       
-                        "Bužim",                       
-                        "Cazin",                       
-                        "Ključ",                       
-                        "Sanski Most",                       
-                        "Velika Kladuša"
-                    ]
-                },
-                {"kanton": "Posavski",
-                    "gradovi": [
-                        "Domaljevac",
-                        "Odžak",                       
-                        "Orašje",                       
-                        "Šamac"
-                    ]
-                },                
-                {"kanton":"Tuzlanski",
-                    "gradovi": [
-                        "Banovići",
-                        "Doboj-Istok",                       
-                        "Gradačac",                       
-                        "Gračanica",                       
-                        "Kalesija",                       
-                        "Kladanj",                                        
-                        "Lukavac",                       
-                        "Sapna",
-                        "Srebrenik",                       
-                        "Teočak",                       
-                        "Tuzla",                       
-                        "Čelić",                       
-                        "Živinice"
-                    ]
-                },
-                {"kanton":"Zeničko-dobojski",
-                    "gradovi": [
-                        "Breza",
-                        "Doboj-Jug",                       
-                        "Kakanj",                       
-                        "Maglaj",                       
-                        "Olovo",                       
-                        "Tešanj",                       
-                        "Usora",                       
-                        "Vareš",                       
-                        "Visoko",                       
-                        "Zavidovići",                       
-                        "Zenica",                       
-                        "Žepče"
-                    ]
-                },
-                {"kanton":"Bosansko-podrinjski",
-                    "gradovi": [
-                        "Foča",
-                        "Goražde",                       
-                        "Pale"
-                    ]
-                },
-                {"kanton":"Srednjobosanski",
-                    "gradovi": [
-                        "Bugojno",
-                        "Busovača",                       
-                        "Dobretići",                       
-                        "Donji Vakuf",                       
-                        "Fojnica",                       
-                        "Gornji Vakuf - Uskoplje",                       
-                        "Jajce",                       
-                        "Kiseljak",                       
-                        "Kreševo",                       
-                        "Novi Travnik",                       
-                        "Travnik",                       
-                        "Vitez"
-                    ]
-                },
-                {"kanton":"Hercegovačko-neretvanski",
-                    "gradovi": [
-                        "Grad Mostar",
-                        "Jablanica",                       
-                        "Konjic",                       
-                        "Neum",                       
-                        "Prozor",                       
-                        "Ravno",                       
-                        "Stolac",                       
-                        "Čapljina",                       
-                        "Čitluk"
-                    ]
-                },
-                {"kanton":"Zapadno-hercegovački",
-                    "gradovi": [
-                        "Grude",
-                        "Ljubuški",                       
-                        "Posušje",                       
-                        "Široki Brijeg"
-                    ]
-                },
-                {"kanton":"Livanjski",
-                    "gradovi": [
-                        "Bosansko Grahovo",
-                        "Drvar",                       
-                        "Glamoč",                       
-                        "Kupres",                       
-                        "Livno",                       
-                        "Tomislavgrad"
-                    ]
-                }
-            ]
         },
-        {"entitet":"Republika Srpska",
+        {
-            "kantoni": [
+          kanton: "Unsko-sanski",
-                {"kanton":"Banjalučka",
+          gradovi: [
-                    "gradovi": [
+            "Bihać",
-                        "Banja Luka",
+            "Bosanska Krupa",
-                        "Gradiška",                       
+            "Bosanski Petrovac",
-                        "Istočni Drvar",                       
+            "Bužim",
-                        "Jezero",                       
+            "Cazin",
-                        "Kneževo",                       
+            "Ključ",
-                        "Kostajnica",                       
+            "Sanski Most",
-                        "Kotor Varoš",                       
+            "Velika Kladuša",
-                        "Kozarska Dubica",                       
+          ],
-                        "Krupa na uni",                       
-                        "Kupres",                       
-                        "Laktaši",                       
-                        "Mrkonjić Grad",                       
-                        "Novi Grad",                       
-                        "Oštra Luka",                                               
-                        "Petrovac",                       
-                        "Prijedor",                       
-                        "Prnjavor",                       
-                        "Ribnik",                       
-                        "Srbac",                       
-                        "Čelinac",                       
-                        "Šipovo"
-                    ]
-                },
-                {"kanton":"Dobojsko-Bijeljinska",
-                    "gradovi": [
-                        "Bijeljina",
-                        "Brod",                       
-                        "Derventa",                       
-                        "Doboj",                       
-                        "Donji Žabar",                       
-                        "Lopare",                       
-                        "Lukavac",                       
-                        "Modriča",                       
-                        "Pelagićevo",                       
-                        "Petrovo",                       
-                        "Stanari",                       
-                        "Teslić",                       
-                        "Tešanj",                       
-                        "Tuzla",                      
-                        "Ugljevik",                       
-                        "Vukosavlje",                       
-                        "Šamac"
-                    ]
-                },
-                {"kanton":"Sarajevsko-Zvornička",
-                    "gradovi": [
-                        "Bratunac",
-                        "Han Pijesak",                       
-                        "Ilijaš",                       
-                        "Istočni Stari Grad",                       
-                        "Kasindo",                       
-                        "Kladanj",                       
-                        "Lukavica",                       
-                        "Milići",                       
-                        "Olovo",                       
-                        "Osmaci",                       
-                        "Pale",                       
-                        "Rogatica",                       
-                        "Rudo",                       
-                        "Sarajevo-Novi Grad",                       
-                        "Sokolac",                       
-                        "Srebrenica",                       
-                        "Trnovo",                       
-                        "Ustiprača",                       
-                        "Višegrad",                       
-                        "Vlasenica",                       
-                        "Zvornik",                       
-                        "Šekovići",                       
-                        "Žepa"
-                    ]
-                },
-                {"kanton":"Trebinjsko-Fočanska",
-                    "gradovi": [
-                        "Berkovići",
-                        "Bileća",                       
-                        "Foča",                       
-                        "Gacko",                       
-                        "Istočni Mostar",                       
-                        "Kalinovik",                       
-                        "Ljubinje",                       
-                        "Nevesinje",                       
-                        "Trebinje",                       
-                        "Čajniče"
-                    ]
-                }
-            ]
         },
-        {"entitet":"Distrikt Brcko",
+        {
-            "kantoni": [
+          kanton: "Posavski",
-                {"kanton": "Distrikt Brcko",
+          gradovi: ["Domaljevac", "Odžak", "Orašje", "Šamac"],
-                    "gradovi":[
+        },
-                        
+        {
-                    ]
+          kanton: "Tuzlanski",
-                }
+          gradovi: [
-            ]
+            "Banovići",
-        }
+            "Doboj-Istok",
-    ]
+            "Gradačac",
-}
+            "Gračanica",
+            "Kalesija",
+            "Kladanj",
+            "Lukavac",
+            "Sapna",
+            "Srebrenik",
+            "Teočak",
+            "Tuzla",
+            "Čelić",
+            "Živinice",
+          ],
+        },
+        {
+          kanton: "Zeničko-dobojski",
+          gradovi: [
+            "Breza",
+            "Doboj-Jug",
+            "Kakanj",
+            "Maglaj",
+            "Olovo",
+            "Tešanj",
+            "Usora",
+            "Vareš",
+            "Visoko",
+            "Zavidovići",
+            "Zenica",
+            "Žepče",
+          ],
+        },
+        { kanton: "Bosansko-podrinjski", gradovi: ["Foča", "Goražde", "Pale"] },
+        {
+          kanton: "Srednjobosanski",
+          gradovi: [
+            "Bugojno",
+            "Busovača",
+            "Dobretići",
+            "Donji Vakuf",
+            "Fojnica",
+            "Gornji Vakuf - Uskoplje",
+            "Jajce",
+            "Kiseljak",
+            "Kreševo",
+            "Novi Travnik",
+            "Travnik",
+            "Vitez",
+          ],
+        },
+        {
+          kanton: "Hercegovačko-neretvanski",
+          gradovi: [
+            "Grad Mostar",
+            "Jablanica",
+            "Konjic",
+            "Neum",
+            "Prozor",
+            "Ravno",
+            "Stolac",
+            "Čapljina",
+            "Čitluk",
+          ],
+        },
+        {
+          kanton: "Zapadno-hercegovački",
+          gradovi: ["Grude", "Ljubuški", "Posušje", "Široki Brijeg"],
+        },
+        {
+          kanton: "Livanjski",
+          gradovi: [
+            "Bosansko Grahovo",
+            "Drvar",
+            "Glamoč",
+            "Kupres",
+            "Livno",
+            "Tomislavgrad",
+          ],
+        },
+      ],
+    },
+    {
+      entitet: "Republika Srpska",
+      kantoni: [
+        {
+          kanton: "Banjalučka",
+          gradovi: [
+            "Banja Luka",
+            "Gradiška",
+            "Istočni Drvar",
+            "Jezero",
+            "Kneževo",
+            "Kostajnica",
+            "Kotor Varoš",
+            "Kozarska Dubica",
+            "Krupa na uni",
+            "Kupres",
+            "Laktaši",
+            "Mrkonjić Grad",
+            "Novi Grad",
+            "Oštra Luka",
+            "Petrovac",
+            "Prijedor",
+            "Prnjavor",
+            "Ribnik",
+            "Srbac",
+            "Čelinac",
+            "Šipovo",
+          ],
+        },
+        {
+          kanton: "Dobojsko-Bijeljinska",
+          gradovi: [
+            "Bijeljina",
+            "Brod",
+            "Derventa",
+            "Doboj",
+            "Donji Žabar",
+            "Lopare",
+            "Lukavac",
+            "Modriča",
+            "Pelagićevo",
+            "Petrovo",
+            "Stanari",
+            "Teslić",
+            "Tešanj",
+            "Tuzla",
+            "Ugljevik",
+            "Vukosavlje",
+            "Šamac",
+          ],
+        },
+        {
+          kanton: "Sarajevsko-Zvornička",
+          gradovi: [
+            "Bratunac",
+            "Han Pijesak",
+            "Ilijaš",
+            "Istočni Stari Grad",
+            "Kasindo",
+            "Kladanj",
+            "Lukavica",
+            "Milići",
+            "Olovo",
+            "Osmaci",
+            "Pale",
+            "Rogatica",
+            "Rudo",
+            "Sarajevo-Novi Grad",
+            "Sokolac",
+            "Srebrenica",
+            "Trnovo",
+            "Ustiprača",
+            "Višegrad",
+            "Vlasenica",
+            "Zvornik",
+            "Šekovići",
+            "Žepa",
+          ],
+        },
+        {
+          kanton: "Trebinjsko-Fočanska",
+          gradovi: [
+            "Berkovići",
+            "Bileća",
+            "Foča",
+            "Gacko",
+            "Istočni Mostar",
+            "Kalinovik",
+            "Ljubinje",
+            "Nevesinje",
+            "Trebinje",
+            "Čajniče",
+          ],
+        },
+      ],
+    },
+    {
+      entitet: "Distrikt Brčko",
+      kantoni: [{ kanton: "Distrikt Brčko", gradovi: ["Brčko"] }],
+    },
+  ],
+};
 
 export default Location;

kivi-cars/src/data/price.js

@@ -1,5 +1,6 @@
 const Price = {
     "title": "Cijena",
+    "VName": "Cijena",
     "fields": {
         "min": 0,
         "max": 1000000,

kivi-cars/src/data/seats.js

@@ -1,5 +1,6 @@
 const Seats = {
     "ime": "Sjedišta",
+    "VName": "BrojSjedista",
     "tipovi": [
         "Odaberite",
         "1",

kivi-cars/src/data/sensors.js

@@ -1,5 +1,6 @@
 const Sensors = {
     "ime": "Senzori",
+    "VName": "ParkingSenzori",
     "tipovi": [
         "Odaberite",
         "naprijed",

kivi-cars/src/data/transmission.js

@@ -1,5 +1,6 @@
 const Transmission = {
     "ime": "Transmisija",
+    "VName": "Transmisija",
     "tipovi": [
         "Odaberite",
         "Automatski mjenjač",

kivi-cars/src/data/type.js

@@ -1,5 +1,6 @@
 const Type = {
     "ime": "Vrsta vozila",
+    "VName": "TipVozila",
     "tipovi": [
         "Odaberite",
         "Karavan",

kivi-cars/src/data/year.js

@@ -1,5 +1,6 @@
 const Year = {
     "title": "Godiste",
+    "VName": "Godiste",
     "fields": {
         "min": 1960,
         "max": new Date().getFullYear(),

kivi-cars/src/services/search-post-service.js

@@ -0,0 +1,18 @@
+async function postData(data) {
+  // Default options are marked with *
+  const response = await fetch("http://localhost:8000/search/", {
+    method: "POST", // *GET, POST, PUT, DELETE, etc.
+    mode: "cors", // no-cors, *cors, same-origin
+    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: "same-origin", // include, *same-origin, omit
+    headers: {
+      "Content-Type": "application/json",
+    },
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return console.log(response);
+}
+
+export default postData;