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) => {
-
-    return(
-        <div className="filters-container">
-            <div className="filters-content">
-            {
-                data1.map(item => {
           index += 1;
-                    return(
+          return (
-                        <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
+            <Checkbox key={index} item={item} objekat={{ data, setData }} />
-                    )
+          );
-                })
+        })}
-            }
-            </div>
-            <div className="checkbox-content">
-            {
-                CheckBox.map(item => {
-                    index += 1;
-                    return(
-                        <Checkbox key={index} title={item} data={{filters, setFilters}}/>
-                    )
-                })
-            }
       </div>
 
-            <div style={{marginTop: 50}}>
+      <div style={{ marginTop: 50 }}>
-                <Link to="/location">
+        <Link to='/location'>
-                    <TitleBtn title="Dalje" />
+          <TitleBtn title='Dalje' />
         </Link>
       </div>
     </div>
-    )
+  );
-}
+};
 
-export default AdvancedFilters
+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) => {
-    const {setFilters} = props.data
+    setData((prevData) => ({
-    const [isChecked, setIsChecked] = useState(true)
-
-
-    const changeHandler = ( event ) => {
-        setFilters(prevData => ({
       ...prevData,
-            [event.target.name]: isChecked
+      Filteri: {
-        }))
+        ...prevData.Filteri,
-    }
+        [event.target.name]: !isChecked,
+      },
+    }));
+  };
 
-    return(
+  return (
-        <div className="checkbox-div">
+    <div className='checkbox-div'>
-            <label className="checkbox-title" htmlFor={`${props.title}`}>{props.title}</label>
+      <label className='checkbox-title' htmlFor={`${item.title}`}>
-            <input type="checkbox" name={props.title} className="checkbox" id={`${props.title}`} onChange={(e) => {changeHandler(e); setIsChecked(!isChecked)}}/>
+        {item.title}
+      </label>
+      <input
+        type='checkbox'
+        name={item.variable}
+        checked={data.Filteri[`${item.variable}`]}
+        className='checkbox'
+        id={`${item.title}`}
+        onChange={(e) => {
+          changeHandler(e);
+          setIsChecked(!isChecked);
+        }}
+      />
     </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) => ({
-
-    const changeHandler = ( e ) => {
-        setDoubleFilterData(prevData => ({
       ...prevData,
-            [e.target.name]: e.target.value     
+      Filteri: {
-        }))
+        ...prevData.Filteri,
-    }
+        [VName]: {
-
+          ...prevData.Filteri[`${VName}`],
-    useEffect(() => {
+          [e.target.name]: e.target.value,
-        setFilters(prevData => ({
+        },
-            ...prevData,
+      },
-            [props.title]: doubleFilterData
+    }));
-        }))
+  };
-    }, [doubleFilterData])
 
   return (
-        <div className="doubleFilter-component">
+    <div className='doubleFilter-component'>
-            <label htmlFor="filters-div">{props.title}</label>
+      <label htmlFor='filters-div'>{title}</label>
-            <div className="double-filters" id="filters-div">
+      <div className='double-filters' id='filters-div'>
-                <div className="filter">
+        <div className='filter'>
-                <label htmlFor="od" className="filter-info">Od</label>
+          <label htmlFor='od' className='filter-info'>
-                <input placeholder="Unesite" id="od" name="Od" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
+            Od
+          </label>
+          <input
+            placeholder='Unesite'
+            id='od'
+            name='Od'
+            value={data.Filteri[`${VName}`].Od}
+            className='filter-number'
+            type='number'
+            min={fields.min}
+            max={fields.max}
+            onChange={(e) => changeHandler(e)}
+          />
         </div>
-                <div className="filter"> 
+        <div className='filter'>
-                <label htmlFor="do" className="filter-info">Do</label>
+          <label htmlFor='do' className='filter-info'>
-                <input placeholder="Unesite" id="do" name="Do" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
+            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) => ({
-
-    const changeHandler = ( e ) => {
-        setFilters( prevData => ({
       ...prevData,
-            [e.target.name]: e.target.value
+      Filteri: {
-        }))
+        ...prevData.Filteri,
-    }
+        [e.target.name]: e.target.value,
+      },
+    }));
+  };
 
-    return(
-        <div className="filter-component">
-            <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
-            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(e) => changeHandler(e)}>
-                {props.tipovi.map((tip, i) => {
   return (
-                        <option key={i} value={tip} name={tip}>{tip}</option>
+    <div className='filter-component'>
-                    )
+      <label htmlFor={VName} className='filter-name'>
+        {ime}
+      </label>
+      <select
+        className='dropdown-list'
+        name={VName}
+        id={VName}
+        value={data.Filteri[`${VName}`]}
+        onChange={(e) => changeHandler(e)}
+      >
+        {tipovi.map((tip, i) => {
+          return (
+            <option key={i} value={tip} name={tip}>
+              {tip}
+            </option>
+          );
         })}
       </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
+          ),
+        ],
+      },
+    }));
+  };
+
+  const clickHandler = (e) => {
+    if (checked) {
+      return obrisiGrad(e);
+    }
+    dodajGrad(e);
+  };
+
+  // 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">
+    <div className='checkbox'>
-            <label className="checkbox-title" htmlFor={props.title}>{props.title}</label>
+      <label className='checkbox-title' htmlFor={props.title}>
-            <input className="check-box" type="checkbox" name={props.title} id={props.title} onChange={(e)=> {
+        {props.title}
-                setChecked(!checked)
+      </label>
-                changeHandler(e)
+      <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,28 +1,31 @@
 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 {data, filters, setFilters} = props.data;
   const [brandIndex, setBrandIndex] = useState(0);
   const [model, showModel] = useState(true);
   let index = 0;
@@ -44,64 +47,63 @@ const StandardFilters = (props) => {
   //     })
   // }
 
-    brands = Cars.map(brand => {
+  brands = Cars.map((brand) => {
-        return brand.brand})
+    return brand.brand;
-
+  });
 
   useEffect(() => {
-        if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka))
+    // console.log(data, setData)
-    }, [filters])
+    if (data.Filteri.Brend !== "")
-
+      setBrandIndex(brands.indexOf(data.Filteri.Brend));
-    const models = Cars[brandIndex].models
+  }, [data]);
 
+  const models = Cars[brandIndex].models;
 
   const Brands = {
-        "ime": "Marka",
+    ime: "Marka",
-        "tipovi": brands
+    VName: "Brend",
-    }
+    tipovi: brands,
+  };
 
   const Models = {
-        "ime": "Model",
+    ime: "Model",
-        "tipovi": models
+    VName: "Model",
-    }
+    tipovi: models,
+  };
 
-    const data1 = [Transmission, Drive, Condition, Doors]
+  const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats];
-    const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
+  const data1 = [Type, Condition, Transmission, Fuel, Drive, Doors, Color, AirCondition, Gearbox, Sensors];
-    const data3 = [Fuel, Type]    
 
-    return(
+  return (
-        <div className="filters-container">
+    <div className='filters-container'>
-            <Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filters, setFilters}}/>
+      <Filter item={Brands} data={{ data, setData }} />
-            {model ? (<Filter ime={Models.ime} tipovi={Models.tipovi} data={{filters, setFilters}}/>): null}
+      {model && <Filter item={Models} data={{ data, setData }} />}
 
-            {data3.map(item => {
+      {data1.map((item) => {
         index += 1;
-                return(
+        return <Filter key={index} item={item} data={{ data, setData }} />;
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
-                )
       })}
 
-            {data2.map(item => {
+      {data2.map((item) => {
         index += 1;
-                return(
+        return (
-                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{filters, setFilters}}/>
+          <DoubleFilter
-                )
+            key={index}
+            item={item}
+            title={item.title}
+            fields={item.fields}
+            data={{ data, setData }}
+          />
+        );
       })}
 
-            {data1.map(item => {
+      <div style={{ marginTop: 50 }}>
-                index += 1;
+        <Link to='/location'>
-                return(
+          <TitleBtn title='Dalje' />
-                    <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
+export default StandardFilters;

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

@@ -1,4 +1,4 @@
-*{
+* {
   margin: 0;
   padding: 0;
 }
@@ -13,13 +13,13 @@
   border-bottom: 3px solid #02adba;
 }
 
-.links-container{
+.links-container {
   background-color: #fff;
   position: sticky;
   top: 0;
 }
 
-.filters-links{
+.filters-links {
   display: flex;
   justify-content: space-around;
   padding: 1em;
@@ -27,25 +27,24 @@
   text-align: center;
 }
 
-.filters-link{
+.filters-link {
   padding: 0.5em 2.5em;
   white-space: none;
   flex-grow: 1;
   cursor: pointer;
 }
 
-@media only screen and (min-width: 541px){
+@media only screen and (min-width: 541px) {
   .filters-link {
     line-height: 54px;
     font-size: 26px;
   }
 }
 
-@media only screen and (min-width: 921px){
+@media only screen and (min-width: 921px) {
   .filters-link {
     line-height: 54px;
     font-size: 24px;
-
   }
 
   .filters-links {

kivi-cars/src/components/Location/LocationFilter.js

@@ -4,12 +4,15 @@ 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,
+            Lokacija: {
+                ...prevData.Lokacija,
                 "kanton": e.target.value
+            }
         }))
     }
 
@@ -17,7 +20,7 @@ const LocationFilter = (props) => {
     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,19 +1,18 @@
-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'>
-          <CategoryBtns data={{data, setData}}/>
+        <CategoryBtns data={{ data, setData }} />
       </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'>
-              <h2 className='h2'>ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.</h2>
+          <h2 className='h2'>
+            ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.
+          </h2>
         </div>
         <div className='second-paragh'>
-              <h2 className='h2'>Svi rezultati će u najkraćem roku biti poslani na vašu adresu.</h2>
+          <h2 className='h2'>
+            Svi rezultati će u najkraćem roku biti poslani na vašu adresu.
+          </h2>
         </div>
         <div className='third-paragh'>
           <h1 className='h1'>Ako želite novu pretragu idete na</h1>
         </div>
 
         <Link to='/'>
-            <TitleBtn title={btnTitle}/>
+          <TitleBtn title={btnTitle} />
         </Link>
-          
       </div>
     </div>
   );

kivi-cars/src/containers/EmailPage.js

@@ -1,95 +1,106 @@
-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 {data, setData} = props.data
+  const [error, setError] = useState(false);
-    const [error, setError] = useState(false)
+  const [toggleButtons, setToggle] = useState(true);
-
 
   const [state, setState] = useState({
     email: "",
-        confirmEmail: ""
+    confirmEmail: "",
-    })
+  });
 
   const header = "SLANJE OBAVJEŠTENJA";
-    let title1 = 'Odmah';
+  let title1 = "Odmah";
-    let title2 = 'Dnevno';
+  let title2 = "Dnevno";
-    let title3 = 'ZAVRŠI';
+  let title3 = "ZAVRŠI";
-    let errmsg = 'Email does not match!';
+  let errmsg = "Email does not match!";
-    let filter = 'Slanje'
+  let filter = "Slanje";
-
 
   const emailCheck = (e, ec) => {
-        if(e !== "" && e === ec){
+    if (e !== "" && e === ec) {
-            setError(false)
+      setError(false);
-            setData(prevData => ({
+      setData((prevData) => ({
         ...prevData,
-                "Email": state.email
+        Email: state.email,
-            }))
+      }));
-            return error
+      return error;
-        }else {
+    } else {
-            setError(true)
+      setError(true);
-            return error
+      return error;
-        }
     }
+  };
 
   const updateInput = (event) => {
-        setState(prevState => ({
+    setState((prevState) => ({
       ...prevState,
-            [event.target.name]: event.target.value
+      [event.target.name]: event.target.value,
-        }))
+    }));
-    }
+  };
 
   useEffect(() => {
-        emailCheck(state.email, state.confirmEmail)
+    emailCheck(state.email, state.confirmEmail);
-    }, [state])
+  }, [state]);
 
   return (
     <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>
       </div>
       <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 className='form'>
-                <form method="POST" id="form-email">
+        <form method='POST' id='form-email'>
           <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'
+              name='email'
+              placeholder='vas.email@mail.com'
+              required
+              size='250'
+              onChange={updateInput}
+            />
+            <input
+              type='email'
+              id='confirmEmail'
+              name='confirmEmail'
+              placeholder='potvrdite.email@mail.com'
+              required
+              size='250'
+              onChange={updateInput}
+            />
+            <p style={{ color: "red" }}>{error ? errmsg : null}</p>
           </div>
-
         </form>
       </div>
       <div>
-                <h3 className='h3-2'>*U svakom trenutku možete prekinuti slanje objava kroz
+        <h3 className='h3-2'>
-                    link u vašem emailu
+          *U svakom trenutku možete prekinuti slanje objava kroz link u vašem
+          emailu
         </h3>
       </div>
       <div>
-                {error ? (<TitleBtn title={title3} /> ) : (
+        {error ? (
-                <Link to="/congrats">
+          <TitleBtn title={title3} />
+        ) : (
+          <Link to='/congrats' onClick={() => postData(data)}>
             <TitleBtn title={title3} />
           </Link>
         )}
       </div>
     </div>
-        
-
-        
-
-
   );
 }
 

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 {data, setData} = props.data
+  const [gradovi, setGradovi] = useState([]);
-    const [locationData, setLocationData] = useState({})
+  const naslov = "Dodajte lokaciju";
-    const [locationInfo, setLocationInfo] = useState({"gradovi": []})
-    const [checkboxStatus, setCheckboxStatus] = useState({})
-    const [location, setLocation] = useState({});
-    const naslov = "Dodajte lokaciju"
 
   let id = 0;
 
   useEffect(() => {
-        if(locationData.kanton){
+    if (data.Lokacija.kanton) {
-            Location.entiteti.map(entity => {
+      Location.entiteti.map((entity) => {
-                return entity.kantoni.map(kantony => {
+        return entity.kantoni.map((kantony) => {
-                    if(locationData.kanton === kantony.kanton){
+          if (data.Lokacija.kanton === "Distrikt Brčko") {
-                        return setLocationInfo({
+            setGradovi([]);
-                            "entitet": entity.entitet,
+            return setData((prevData) => ({
-                            "kanton": kantony.kanton,
+              ...prevData,
-                            "gradovi": kantony.gradovi
+              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,
+              },
+            }));
           }
-                })
+        });
-            })
+      });
-        }setCheckboxStatus({})
+    }
-            console.log("locationInfo", locationInfo)
+  }, [data.Lokacija.kanton]);
-    }, [locationData])
 
   useEffect(() => {
-        if(locationData.kanton === 'Distrikt Brcko'){
+    console.log("parent object", gradovi);
-            setLocation(
+  }, [data.Lokacija.gradovi]);
-                {
-                "entitet": "Distrikt Brcko",
-                "kanton": "Distrikt Brcko",
-                "gradovi": "Brcko"
-                }
-            )
-        }else{
-            setLocation( prevData => ({
-                ...prevData,
-                "entitet": locationInfo.entitet,
-                "kanton": locationInfo.kanton,
-                "gradovi": checkboxStatus
-            }))}
-            console.log("location", location)
-    }, [checkboxStatus])
-
-    useEffect(() => {
-        setData( prevData => ({
-            ...prevData,
-            "Location": location
-        }))
-        console.log("data", data)
-    }, [location])
-
 
   return (
     <div className='location-div'>
-            <Header header={naslov}/>
+      <Header header={naslov} />
-            <ButtonsToolbar routes={props.routes}/>
+      <ButtonsToolbar routes={props.routes} />
-            <LocationFilter data={{setLocationData}}/>
+      <LocationFilter data={{ data, setData }} />
       <div className='checkbox-div'>
-                {locationInfo.gradovi.map((grad) => {
+        {gradovi.map((grad) => {
-                    id += 1
+          id += 1;
-                    return(
+          return (
-                        <LocationCheckbox key={id} title={grad} data={{checkboxStatus, setCheckboxStatus}}/>
+            <LocationCheckbox key={id} title={grad} data={{ data, setData }} />
-                    )
+          );
         })}
       </div>
-            <Link to="/email">
+      <Link to='/email'>
-                <TitleBtn title="Naredna stranica"/>
+        <TitleBtn title='Naredna stranica' />
       </Link>
     </div>
   );
-}
+};
 
-export default LocationPage
+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,23 +1,26 @@
 const Location = {
-    "ime": "Lokacija",
+  ime: "Lokacija",
-    "entiteti": [
+  entiteti: [
-        {"entitet":"Federacija BiH",
+    {
-            "kantoni": [
+      entitet: "Federacija BiH",
-                {"kanton": "Sarajevo",
+      kantoni: [
-                    "gradovi": [
+        {
+          kanton: "Sarajevo",
+          gradovi: [
             "Hadžići",
             "Ilidža",
             "Ilijaš",
-                        "Sarajevo - Centar",                       
+            "Sarajevo-Centar",
             "Sarajevo-Novi Grad",
             "Sarajevo-Novo Sarajevo",
             "Sarajevo-Stari Grad",
             "Trnovo",
-                        "Vogošća"
+            "Vogošća",
-                    ]
+          ],
         },
-                {"kanton":"Unsko-sanski",
+        {
-                    "gradovi": [
+          kanton: "Unsko-sanski",
+          gradovi: [
             "Bihać",
             "Bosanska Krupa",
             "Bosanski Petrovac",
@@ -25,19 +28,16 @@ const Location = {
             "Cazin",
             "Ključ",
             "Sanski Most",
-                        "Velika Kladuša"
+            "Velika Kladuša",
-                    ]
+          ],
         },
-                {"kanton": "Posavski",
+        {
-                    "gradovi": [
+          kanton: "Posavski",
-                        "Domaljevac",
+          gradovi: ["Domaljevac", "Odžak", "Orašje", "Šamac"],
-                        "Odžak",                       
-                        "Orašje",                       
-                        "Šamac"
-                    ]
         },
-                {"kanton":"Tuzlanski",
+        {
-                    "gradovi": [
+          kanton: "Tuzlanski",
+          gradovi: [
             "Banovići",
             "Doboj-Istok",
             "Gradačac",
@@ -50,11 +50,12 @@ const Location = {
             "Teočak",
             "Tuzla",
             "Čelić",
-                        "Živinice"
+            "Živinice",
-                    ]
+          ],
         },
-                {"kanton":"Zeničko-dobojski",
+        {
-                    "gradovi": [
+          kanton: "Zeničko-dobojski",
+          gradovi: [
             "Breza",
             "Doboj-Jug",
             "Kakanj",
@@ -66,18 +67,13 @@ const Location = {
             "Visoko",
             "Zavidovići",
             "Zenica",
-                        "Žepče"
+            "Žepče",
-                    ]
+          ],
         },
-                {"kanton":"Bosansko-podrinjski",
+        { kanton: "Bosansko-podrinjski", gradovi: ["Foča", "Goražde", "Pale"] },
-                    "gradovi": [
+        {
-                        "Foča",
+          kanton: "Srednjobosanski",
-                        "Goražde",                       
+          gradovi: [
-                        "Pale"
-                    ]
-                },
-                {"kanton":"Srednjobosanski",
-                    "gradovi": [
             "Bugojno",
             "Busovača",
             "Dobretići",
@@ -89,11 +85,12 @@ const Location = {
             "Kreševo",
             "Novi Travnik",
             "Travnik",
-                        "Vitez"
+            "Vitez",
-                    ]
+          ],
         },
-                {"kanton":"Hercegovačko-neretvanski",
+        {
-                    "gradovi": [
+          kanton: "Hercegovačko-neretvanski",
+          gradovi: [
             "Grad Mostar",
             "Jablanica",
             "Konjic",
@@ -102,33 +99,32 @@ const Location = {
             "Ravno",
             "Stolac",
             "Čapljina",
-                        "Čitluk"
+            "Čitluk",
-                    ]
+          ],
         },
-                {"kanton":"Zapadno-hercegovački",
+        {
-                    "gradovi": [
+          kanton: "Zapadno-hercegovački",
-                        "Grude",
+          gradovi: ["Grude", "Ljubuški", "Posušje", "Široki Brijeg"],
-                        "Ljubuški",                       
-                        "Posušje",                       
-                        "Široki Brijeg"
-                    ]
         },
-                {"kanton":"Livanjski",
+        {
-                    "gradovi": [
+          kanton: "Livanjski",
+          gradovi: [
             "Bosansko Grahovo",
             "Drvar",
             "Glamoč",
             "Kupres",
             "Livno",
-                        "Tomislavgrad"
+            "Tomislavgrad",
-                    ]
+          ],
-                }
-            ]
         },
-        {"entitet":"Republika Srpska",
+      ],
-            "kantoni": [
+    },
-                {"kanton":"Banjalučka",
+    {
-                    "gradovi": [
+      entitet: "Republika Srpska",
+      kantoni: [
+        {
+          kanton: "Banjalučka",
+          gradovi: [
             "Banja Luka",
             "Gradiška",
             "Istočni Drvar",
@@ -149,11 +145,12 @@ const Location = {
             "Ribnik",
             "Srbac",
             "Čelinac",
-                        "Šipovo"
+            "Šipovo",
-                    ]
+          ],
         },
-                {"kanton":"Dobojsko-Bijeljinska",
+        {
-                    "gradovi": [
+          kanton: "Dobojsko-Bijeljinska",
+          gradovi: [
             "Bijeljina",
             "Brod",
             "Derventa",
@@ -170,11 +167,12 @@ const Location = {
             "Tuzla",
             "Ugljevik",
             "Vukosavlje",
-                        "Šamac"
+            "Šamac",
-                    ]
+          ],
         },
-                {"kanton":"Sarajevsko-Zvornička",
+        {
-                    "gradovi": [
+          kanton: "Sarajevsko-Zvornička",
+          gradovi: [
             "Bratunac",
             "Han Pijesak",
             "Ilijaš",
@@ -197,11 +195,12 @@ const Location = {
             "Vlasenica",
             "Zvornik",
             "Šekovići",
-                        "Žepa"
+            "Žepa",
-                    ]
+          ],
         },
-                {"kanton":"Trebinjsko-Fočanska",
+        {
-                    "gradovi": [
+          kanton: "Trebinjsko-Fočanska",
+          gradovi: [
             "Berkovići",
             "Bileća",
             "Foča",
@@ -211,21 +210,16 @@ const Location = {
             "Ljubinje",
             "Nevesinje",
             "Trebinje",
-                        "Čajniče"
+            "Čajniče",
-                    ]
+          ],
-                }
-            ]
         },
-        {"entitet":"Distrikt Brcko",
+      ],
-            "kantoni": [
+    },
-                {"kanton": "Distrikt Brcko",
+    {
-                    "gradovi":[
+      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;