Merge branch 'next_button' into 'main'

add next button in filters

See merge request saburly/marketalarm/kivi-za-auta-react!23

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

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

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

@@ -1,23 +0,0 @@
-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,15 +12,6 @@
     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,34 +1,55 @@
-import {useState} from "react";
+import React 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;
 
-  return (
+    const {filters, setFilters} = props.data
-    <div className='filters-container'>
+    const data1 = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
-      <div className='checkbox-content'>
+    let index = 0
-        {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>
-  );
-};
 
-export default AdvancedFilters;
+    return(
+        <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,38 +1,26 @@
 import React, { useState } from "react";
-import "./css/Checkbox.css";
+import './css/Checkbox.css';
 
-const Checkbox = ({ objekat, item }) => {
+const Checkbox = (props) => {
-  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,
-      },
-    }));
-  };
 
-  return (
+    const {setFilters} = props.data
-    <div className='checkbox-div'>
+    const [isChecked, setIsChecked] = useState(true)
-      <label className='checkbox-title' htmlFor={`${item.title}`}>
+
-        {item.title}
+
-      </label>
+    const changeHandler = ( event ) => {
-      <input
+        setFilters(prevData => ({
-        type='checkbox'
+            ...prevData,
-        name={item.variable}
+            [event.target.name]: isChecked
-        checked={data.Filteri[`${item.variable}`]}
+        }))
-        className='checkbox'
+    }
-        id={`${item.title}`}
+
-        onChange={(e) => {
+    return(
-          changeHandler(e);
+        <div className="checkbox-div">
-          setIsChecked(!isChecked);
+            <label className="checkbox-title" htmlFor={`${props.title}`}>{props.title}</label>
-        }}
+            <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,62 +1,40 @@
-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 changeHandler = (e) => {
+    const {setFilters} = props.data
-    setData((prevData) => ({
+    const [doubleFilterData, setDoubleFilterData] = useState({})
-      ...prevData,
-      Filteri: {
-        ...prevData.Filteri,
-        [VName]: {
-          ...prevData.Filteri[`${VName}`],
-          [e.target.name]: e.target.value,
-        },
-      },
-    }));
-  };
 
-  return (
+    const changeHandler = ( e ) => {
-    <div className='doubleFilter-component'>
+        setDoubleFilterData(prevData => ({
-      <label htmlFor='filters-div'>{title}</label>
+            ...prevData,
-      <div className='double-filters' id='filters-div'>
+            [e.target.name]: e.target.value     
-        <div className='filter'>
+        }))
-          <label htmlFor='od' className='filter-info'>
+    }
-            Od
+
-          </label>
+    useEffect(() => {
-          <input
+        setFilters(prevData => ({
-            placeholder='Unesite'
+            ...prevData,
-            id='od'
+            [props.title]: doubleFilterData
-            name='Od'
+        }))
-            value={data.Filteri[`${VName}`].Od}
+    }, [doubleFilterData])
-            className='filter-number'
+
-            type='number'
+    return (
-            min={fields.min}
+        <div className="doubleFilter-component">
-            max={fields.max}
+            <label htmlFor="filters-div">{props.title}</label>
-            onChange={(e) => changeHandler(e)}
+            <div className="double-filters" id="filters-div">
-          />
+                <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,42 +1,29 @@
-import React, { useEffect, useState } from "react";
+import React 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 changeHandler = (e) => {
+    const {setFilters} = props.data
-    setData((prevData) => ({
-      ...prevData,
-      Filteri: {
-        ...prevData.Filteri,
-        [e.target.name]: e.target.value,
-      },
-    }));
-  };
 
-  return (
+    const changeHandler = ( e ) => {
-    <div className='filter-component'>
+        setFilters( prevData => ({
-      <label htmlFor={VName} className='filter-name'>
+            ...prevData,
-        {ime}
+            [e.target.name]: e.target.value
-      </label>
+        }))
-      <select
+    }
-        className='dropdown-list'
+
-        name={VName}
+    return(
-        id={VName}
+        <div className="filter-component">
-        value={data.Filteri[`${VName}`]}
+            <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
-        onChange={(e) => changeHandler(e)}
+            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(e) => changeHandler(e)}>
-      >
+                {props.tipovi.map((tip, i) => {
-        {tipovi.map((tip, i) => {
+                    return (
-          return (
+                        <option key={i} value={tip} name={tip}>{tip}</option>
-            <option key={i} value={tip} name={tip}>
+                    )
-              {tip}
+                })}
-            </option>
+            </select>
-          );
+        </div>
-        })}
+    )
-      </select>
+}
-    </div>
-  );
-};
 
 export default Filter;

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

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

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

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

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

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

@@ -1,54 +1,55 @@
-* {
+*{
-  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%;
+
-    margin: auto;
+    .filters-links {
-  }
+        width: 90%;
+        margin: auto;
+    }
 }

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

@@ -4,23 +4,20 @@ import Location from "../../data/location";
 
 const LocationFilter = (props) => {
 
-    const {data, setData} = props.data;
+    const {setLocationData} = props.data;
 
     const clickHandler = (e) => {
-        setData( prevData => ({
+        setLocationData( 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} value={data.Lokacija.kanton} id={Location.ime} onChange={(e) => clickHandler(e) }>
+            <select name={Location.ime} 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,142 +1,37 @@
-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
+          <Route path='category' element={<CategoryPage data={{data, setData}} routes={LinkR.category} />}/>
-            path='category'
+          <Route path='filters' element={<FiltersPage data={{data, setData}} routes={LinkR.filters}/>}/>
-            element={
+          <Route path='location' element={<LocationPage data={{data, setData}} routes={LinkR.location}/>}/>
-              <CategoryPage data={{ data, setData }} routes={LinkR.category} />
+          <Route path='email' element={<EmailPage data={{data, setData}} routes={LinkR.email} />}/>
-            }
+          <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,20 @@
-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 naslov = "IZABERITE KATEGORIJU";
+  const {data, setData} = props.data
+
+  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,33 +1,31 @@
-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 btnTitle = "NOVA PRETRAGA";
+  const naslov = 'ČESTITAMO!'
+  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'>
+              <h2 className='h2'>ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.</h2>
-            ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.
+          </div>
-          </h2>
+          <div className='second-paragh'>
-        </div>
+              <h2 className='h2'>Svi rezultati će u najkraćem roku biti poslani na vašu adresu.</h2>
-        <div className='second-paragh'>
+          </div>
-          <h2 className='h2'>
+          <div className='third-paragh'>
-            Svi rezultati će u najkraćem roku biti poslani na vašu adresu.
+              <h1 className='h1'>Ako želite novu pretragu idete na</h1>
-          </h2>
+          </div>
-        </div>
+          
-        <div className='third-paragh'>
+          <Link to='/'>
-          <h1 className='h1'>Ako želite novu pretragu idete na</h1>
+            <TitleBtn title={btnTitle}/>
-        </div>
+          </Link>
           
-        <Link to='/'>
-          <TitleBtn title={btnTitle} />
-        </Link>
       </div>
     </div>
   );

kivi-cars/src/containers/EmailPage.js

@@ -1,107 +1,96 @@
-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 TimeBtn from "../components/Button/TimeBtn";
+import StandardBtn from '../components/Button/StandardBtn';
-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 [state, setState] = useState({
+    const {data, setData} = props.data
-    email: "",
+    const [error, setError] = useState(false)
-    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 emailCheck = (e, ec) => {
+    const [state, setState] = useState({
-    if (e !== "" && e === ec) {
+        email: "",
-      setError(false);
+        confirmEmail: ""
-      setData((prevData) => ({
+    })
-        ...prevData,
+
-        Email: state.email,
+    const header = "SLANJE OBAVJEŠTENJA";
-      }));
+    let title1 = 'Odmah';
-      return error;
+    let title2 = 'Dnevno';
-    } else {
+    let title3 = 'ZAVRŠI';
-      setError(true);
+    let errmsg = 'Email does not match!';
-      return error;
+    let filter = 'Slanje'
+
+
+    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'>
-        <TimeBtn data={{ data, setData, filter }} title={title1} />
+                <StandardBtn data={{data, setData, filter}} title={title1}/>
-        <TimeBtn data={{ data, setData, filter }} title={title2} />
+                <StandardBtn 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
+                        <input type="email" id="email" name='email' placeholder='vas.email@mail.com' required size='250' onChange={updateInput} />
-              type='email'
+                        <input type="email" id="confirmEmail" name='confirmEmail' placeholder='potvrdite.email@mail.com' required size='250' onChange={updateInput} />
-              id='email'
+                        <p style={{color: "red"}} >{error ? errmsg : null}</p>
-              name='email'
+                    </div>
-              placeholder='vas.email@mail.com'
+
-              required
+                </form>
-              size='250'
+            </div>
-              onChange={updateInput}
+            <div>
-            />
+                <h3 className='h3-2'>*U svakom trenutku možete prekinuti slanje objava kroz
-            <input
+                    link u vašem emailu
-              type='email'
+                </h3>
-              id='confirmEmail'
+            </div>
-              name='confirmEmail'
+            <div>
-              placeholder='potvrdite.email@mail.com'
+                {error ? (<TitleBtn title={title3} /> ) : (
-              required
+                <Link to="/congrats">
-              size='250'
+                    <TitleBtn title={title3} />    
-              onChange={updateInput}
+                </Link>
-            />
+                )}      
-            <p style={{ color: "red" }}>{error ? errmsg : null}</p>
+            </div>
-          </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,22 +6,32 @@ import FiltersNav from '../components/FiltersNavbar/FiltersNav';
 import StandardFilters from "../components/Filters/Standard-filters";
 import AdvancedFilters from "../components/Filters/Advanced-filters";
 
-const FiltersPage = ({routes, data, setData}) => {
+const FiltersPage = (props) => {
 
     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, setData}}/>
+            return <StandardFilters data={{data, filters, setFilters}}/>
         }
-        return <AdvancedFilters data={{data, setData}}/>;
+        return <AdvancedFilters data={{data, filters, setFilters}}/>;
     }
 
     return(
         <div className="FiltersPage">
             <Header header={naslov}/>
-            <ButtonsToolbar routes={routes}/> 
+            <ButtonsToolbar routes={props.routes}/> 
             <FiltersNav toggle={{toggle, setToggle}}/>
             {showFilters(toggle)}
         </div>

kivi-cars/src/containers/LocationPage.js

@@ -1,71 +1,87 @@
-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";
 
-  let id = 0;
+    const {data, setData} = props.data
+    const [locationData, setLocationData] = useState({})
+    const [locationInfo, setLocationInfo] = useState({"gradovi": []})
+    const [checkboxStatus, setCheckboxStatus] = useState({})
+    const [location, setLocation] = useState({});
+    const naslov = "Dodajte lokaciju"
 
-  useEffect(() => {
+    let id = 0;
-    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(() => {
-    console.log("parent object", gradovi);
+        if(locationData.kanton){
-  }, [data.Lokacija.gradovi]);
+            Location.entiteti.map(entity => {
+                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])
 
-  return (
+    useEffect(() => {
-    <div className='location-div'>
+        if(locationData.kanton === 'Distrikt Brcko'){
-      <Header header={naslov} />
+            setLocation(
-      <ButtonsToolbar routes={props.routes} />
+                {
-      <LocationFilter data={{ data, setData }} />
+                "entitet": "Distrikt Brcko",
-      <div className='checkbox-div'>
+                "kanton": "Distrikt Brcko",
-        {gradovi.map((grad) => {
+                "gradovi": "Brcko"
-          id += 1;
+                }
-          return (
+            )
-            <LocationCheckbox key={id} title={grad} data={{ data, setData }} />
+        }else{
-          );
+            setLocation( prevData => ({
-        })}
+                ...prevData,
-      </div>
+                "entitet": locationInfo.entitet,
-      <Link to='/email'>
+                "kanton": locationInfo.kanton,
-        <TitleBtn title='Naredna stranica' />
+                "gradovi": checkboxStatus
-      </Link>
+            }))}
-    </div>
+            console.log("location", location)
-  );
+    }, [checkboxStatus])
-};
 
-export default LocationPage;
+    useEffect(() => {
+        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,6 +15,5 @@
     .checkbox-div{
         flex-direction: row;
         justify-content: space-around;
-        margin-bottom: 50px;
     }
 }

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

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

kivi-cars/src/data/checkbox.js

@@ -1,179 +1,38 @@
 const CheckBox = [
-  {
+    "ABS",
-    title: "ABS",
+    "ESP",
-    value: false,
+    "Tempomat",
-    variable: "ABS",
+    "Alarm",
-  },
+    "Airbag",
-  {
+    "Šiber",
-    title: "ESP",
+    "Servo volan",
-    value: false,
+    "Koža",
-    variable: "ESP",
+    "Klima",
-  },
+    "Centralna brava",
-  {
+    "Daljinsko zaključavanje",
-    title: "Alarm",
+    "ISOFIX",
-    value: false,
+    "Registrovan",
-    variable: "Alarm",
+    "Xenon",
-  },
+    "LED",
-  {
+    "Laser",
-    title: "Airbag",
+    "Električni podizači stakala",
-    value: false,
+    "Naslon za ruke", 
-    variable: "Airbag",
+    "Električni retrovizor",
-  },
+    "Start/Stop",
-  {
+    "Turbo",
-    title: "Šiber",
+    "Stranac",   
-    value: false,
+    "Pakring assistent",
-    variable: "Siber",
+    "Senzor mrtvog ugla",
-  },
+    "Servisna knjiga",
-  {
+    "Komande na volanu",
-    title: "Servo volan",
+    "Navigacija",
-    value: false,
+    "Grijanje sjedišta",
-    variable: "ServoVolan",
+    "Masažna sjedišta",
-  },
+    "Memorija sjedišta",
-  {
+    "Panorama",
-    title: "Koža",
+    "Ocarinjen",
-    value: false,
+    "Udaren",
-    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,6 +1,5 @@
 const Color = {
     "ime": "Boja",
-    "VName": "Boja",
     "tipovi": [
         "Odaberite",
         "Bež",

kivi-cars/src/data/condition.js

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

kivi-cars/src/data/cubes.js

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

kivi-cars/src/data/doors.js

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

kivi-cars/src/data/drive.js

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

kivi-cars/src/data/fuel.js

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

kivi-cars/src/data/gearbox.js

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

kivi-cars/src/data/horsepower.js

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

kivi-cars/src/data/kilometers.js

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

kivi-cars/src/data/kilowats.js

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

kivi-cars/src/data/lights.js

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

kivi-cars/src/data/location.js

@@ -1,225 +1,231 @@
 const Location = {
-  ime: "Lokacija",
+    "ime": "Lokacija",
-  entiteti: [
+    "entiteti": [
-    {
+        {"entitet":"Federacija BiH",
-      entitet: "Federacija BiH",
+            "kantoni": [
-      kantoni: [
+                {"kanton": "Sarajevo",
-        {
+                    "gradovi": [
-          kanton: "Sarajevo",
+                        "Hadžići",
-          gradovi: [
+                        "Ilidža",                       
-            "Hadžići",
+                        "Ilijaš",                       
-            "Ilidža",
+                        "Sarajevo - Centar",                       
-            "Ilijaš",
+                        "Sarajevo-Novi Grad",                       
-            "Sarajevo-Centar",
+                        "Sarajevo-Novo Sarajevo",                       
-            "Sarajevo-Novi Grad",
+                        "Sarajevo-Stari Grad",                       
-            "Sarajevo-Novo Sarajevo",
+                        "Trnovo",                       
-            "Sarajevo-Stari Grad",
+                        "Vogošća"
-            "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",
-          kanton: "Unsko-sanski",
+            "kantoni": [
-          gradovi: [
+                {"kanton":"Banjalučka",
-            "Bihać",
+                    "gradovi": [
-            "Bosanska Krupa",
+                        "Banja Luka",
-            "Bosanski Petrovac",
+                        "Gradiška",                       
-            "Bužim",
+                        "Istočni Drvar",                       
-            "Cazin",
+                        "Jezero",                       
-            "Ključ",
+                        "Kneževo",                       
-            "Sanski Most",
+                        "Kostajnica",                       
-            "Velika Kladuša",
+                        "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 Brcko",
-          kanton: "Posavski",
+            "kantoni": [
-          gradovi: ["Domaljevac", "Odžak", "Orašje", "Šamac"],
+                {"kanton": "Distrikt Brcko",
-        },
+                    "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,6 +1,5 @@
 const Price = {
     "title": "Cijena",
-    "VName": "Cijena",
     "fields": {
         "min": 0,
         "max": 1000000,

kivi-cars/src/data/seats.js

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

kivi-cars/src/data/sensors.js

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

kivi-cars/src/data/transmission.js

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

kivi-cars/src/data/type.js

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

kivi-cars/src/data/year.js

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

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

@@ -1,18 +0,0 @@
-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;

kivi-cars/src/services/vehicle-service.js

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