added filters, location, email and post data service

add vehicle brands

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

kivi-cars/package.json

@@ -6,9 +6,9 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "nouislider": "^15.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

kivi-cars/public/manifest.json

@@ -1,23 +1,23 @@
 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
+  // "icons": [
-    {
+  //   {
-      "src": "favicon.ico",
+  //     "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+  //     "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+  //     "type": "image/x-icon"
-    },
+  //   },
-    {
+  //   {
-      "src": "logo192.png",
+  //     "src": "logo192.png",
-      "type": "image/png",
+  //     "type": "image/png",
-      "sizes": "192x192"
+  //     "sizes": "192x192"
-    },
+  //   },
-    {
+  //   {
-      "src": "logo512.png",
+  //     "src": "logo512.png",
-      "type": "image/png",
+  //     "type": "image/png",
-      "sizes": "512x512"
+  //     "sizes": "512x512"
-    }
+  //   }
-  ],
+  // ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

kivi-cars/src/assets/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chevron-left</title>
+<path d="M11 16l13-13v-3l-16 16 16 16v-3l-13-13z"></path>
+</svg>

kivi-cars/src/assets/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chevron-right</title>
+<path d="M21 16l-13 13v3l16-16-16-16v3l13 13z"></path>
+</svg>

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import './button.css'
+
+const StandardBtn = (props) => {
+
+    const {setData, filter} = props.data
+
+    const clickHandler = ( e ) => {
+        setData( prevState => ({
+            ...prevState,
+            "Kategorija": e.target.value
+        }))
+    }
+
+    return (
+        <div className='standard-btn'>
+           <button name={filter} value={props.title} className='standardBtn' onClick={e => clickHandler(e)}>{props.title}</button>
+        </div>
+    )
+}
+
+export default StandardBtn

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/TitleBtn.js

@@ -0,0 +1,13 @@
+import './button.css'
+
+const StandardBtn = (props) => {
+
+    return (
+        <div className='standard-btn'>
+
+           <button value={props.title} className='standardBtn'>{props.title}</button>
+        </div>
+    )
+}
+
+export default StandardBtn

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

@@ -0,0 +1,76 @@
+.standard-btn {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.standardBtn {
+    width: 300px;
+    background-color: #02ADBA;
+    font-size: 25px;
+    padding: 7px 20px 7px 20px;
+    color: white;
+    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;
+}
+
+.left-button {
+    padding: 5px;
+}
+.left-button:hover {
+    background-color:#9eedf3; 
+}
+
+.right-button {
+    padding: 5px;
+}
+.right-button:hover {
+    background-color:#9eedf3;
+}
+
+@media screen and (max-width: 900px) {
+    .standardBtn {
+        width: 250px;
+        background-color: #02ADBA;
+        font-size: 20px;
+        padding: 7px 20px 7px 20px;
+        color: white;
+        border: #02ADBA;
+    }
+  }
+
+@media screen and (max-width: 700px) {
+    .standardBtn {
+        width: 170px;
+        background-color: #02ADBA;
+        font-size: 20px;
+        padding: 7px 20px 7px 20px;
+        color: white;
+        border: #02ADBA;
+    }
+  }
+
+  
+
+  @media screen and (max-width: 420px) {
+    .standardBtn {
+        width: 150px;
+        background-color: #02ADBA;
+        font-size: 15px;
+        padding: 7px 20px 7px 20px;
+        color: white;
+        border: #02ADBA;
+    }
+  }  

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

@@ -0,0 +1,12 @@
+import './button.css'
+import { ReactComponent as ArrowLeft } from '../../assets/arrow-left.svg';
+
+const leftBtn = (props) => {
+    return ( 
+        <div className='left-button'>
+            <ArrowLeft/>
+        </div>
+     );
+}
+
+export default leftBtn

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

@@ -0,0 +1,13 @@
+import './button.css'
+import { ReactComponent as ArrowRight } from '../../assets/arrow-right.svg';
+
+const rightBtn = (props) => {
+    return ( 
+        <div className='right-button'>
+            <ArrowRight/>
+        </div>
+        
+     );
+}
+
+export default rightBtn

kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.css

@@ -0,0 +1,22 @@
+.buttons-toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.left-group {
+    padding-left: 10px;
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+}
+
+.right-group {
+    padding-right: 10px;
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+}
+
+
+
+

kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js

@@ -0,0 +1,28 @@
+import './ButtonsToolbar.css';
+import { Link } from 'react-router-dom'
+import ArrowLeft from '../Button/leftBtn';
+// import ArrowRigh from '../Button/rightBtn';
+
+
+const ButtonsToolbar = (props) => {
+    return (
+        <div className='buttons-toolbar'>
+            <div className='left-group'>
+                <Link to={`${props.routes.prev}`}>
+                    <ArrowLeft />
+                </Link>
+            </div>
+            {/* <div className='right-group'>
+                <Link to={`${props.routes.next}`}>
+                    <ArrowRigh/>
+                </Link>
+                
+            </div> */}
+        </div>
+    )
+} 
+
+export default ButtonsToolbar
+
+
+

kivi-cars/src/components/CategoryBtns/categorybtns.css

@@ -0,0 +1,3 @@
+.category-btns {
+    margin-top: 50px;
+}

kivi-cars/src/components/CategoryBtns/categorybtns.js

@@ -0,0 +1,33 @@
+import './categorybtns.css'
+import StandardBtn from '../Button/StandardBtn'
+import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+
+
+const CategoryBtns = (props) => {
+
+    let auto = 'Auto';
+    let motor = 'Motor';
+    let kamion = 'Teretno vozilo';
+    let filter = 'Vozilo';
+
+    const {data, setData} = props.data;
+
+    return ( 
+        <div className='category-btns'>
+            <Link to='/filters'>
+                <StandardBtn title={auto} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={motor} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={kamion} data={{data, setData, filter}}/>
+            </Link>
+            
+        </div>
+    )
+
+}
+
+export default CategoryBtns

kivi-cars/src/components/EmailField/EmailField.js

@@ -0,0 +1,36 @@
+import React, { useRef, useState } from 'react';
+import validator from 'validator';
+import './EmailField.css';
+
+const EmailField = (props) => {
+    
+    const [emailError, setEmailError] = useState('')
+    const validateEmail = (e) => {
+        var email = e.target.value
+    
+        if (validator.isEmail(email)) {
+        setEmailError('Valid Email :)')
+        } else {
+        setEmailError('Enter valid Email!')
+        }
+    }
+    
+    return (
+
+        <div>
+            <hr/>
+            <div>
+                <h2>Unesite VAS Email</h2>
+               
+                <input type='text' id='userid' onChange={(e) => validateEmail(e)}></input>
+
+            </div>
+
+        </div>
+
+    );
+    }
+    
+    
+    
+export default EmailField;

kivi-cars/src/components/Filters.css

@@ -1,83 +0,0 @@
-*{
-    margin: 0;
-    padding: 0;
-}
-
-nav {
-    width: 100%;
-    background-color: #02adba;
-    color: #fff;
-    height: 54px;
-    line-height: 54px;
-    text-align: center;
-}
-
-
-@media only screen and (min-width: 601px) {
-    nav {
-        text-align: center;
-        width: 100%;
-        background-color: #02adba;
-        color: #fff;
-        height: 64px;
-        line-height: 64px;
-    }
-
-    .container {
-        width: 80%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: auto;
-    }
-
-    .filters-tab {
-        width: 100%;
-        height: 48;
-    }
-
-    .filters-links{
-        margin-top: 2rem;
-        width: 100%;
-        display: flex;
-        flex-grow: 1;
-        flex-wrap: nowrap;
-        justify-content: space-evenly;
-        list-style-type: none;
-    }
-
-    .filters-links li {
-        text-align: center;
-        width: 7rem;
-        flex-grow: 1;
-        flex-wrap: nowrap;
-
-    }
-
-    .filters {
-        display: inline-block;
-        border-bottom: 2px solid #02adba;
-        width: 5rem;
-        padding: 1rem 10rem;
-        white-space: nowrap;
-        margin-left: auto;
-        font-size: 22px;
-    }
-
-    .filters a{
-        text-decoration: none;
-        color: #02adba;
-    }
-
-    .filters a:visited {
-        color: #02adba;
-    }
-
-    .cars-brands-models {
-        border: 2px solid blue;
-        width: 100%;
-    }
-
-}
-
-

kivi-cars/src/components/Filters.js

@@ -1,46 +0,0 @@
-import React from "react";
-import "./Filters.css";
-import Cars from "./cars";
-
-const Filters = () => {
-
-    const unsortedCars = Cars
-    const cars = unsortedCars.sort(unsortedCars.brand)
-
-
-
-    return(
-        <div>
-            <nav>
-                <h3 className="title">Filteri za pretrazivanje</h3>
-            </nav>
-            <div className="container">
-                <div className="filters-tabs">
-                    <ul className="filters-links">
-                        <li className="filters">
-                            <a id="standard-filters" href="#">Filteri</a>
-                        </li> 
-                        <li className="filters">
-                            <a id="advanced-filters" href="#">Napredni filteri</a>
-                        </li>
-                    </ul>
-                </div>
-                <div className="container-standard">
-                    <div className="cars-brands-models">
-                        <label>Marka: </label>
-                        <select name="brands" id="brands">
-                            {cars.map(car => <option className="option-field" value={car.brand}>{car.brand}</option>)}
-                        </select>
-                    </div>
-                </div>
-                <div className="container-advanced">
-                    
-                </div>
-            </div>
-
-
-        </div>
-    )
-}
-
-export default Filters

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

@@ -0,0 +1,34 @@
+import {useState} from "react";
+import "./Filters.css";
+import Filter from "./Filter/Filter";
+import TitleBtn from "../Button/TitleBtn";
+import { Link } from "react-router-dom";
+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 (
+    <div className='filters-container'>
+      <div className='checkbox-content'>
+        {CheckBox.map((item) => {
+          index += 1;
+          return (
+            <Checkbox key={index} item={item} objekat={{ data, setData }} />
+          );
+        })}
+      </div>
+
+      <div style={{ marginTop: 50 }}>
+        <Link to='/location'>
+          <TitleBtn title='Dalje' />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default AdvancedFilters;

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

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import "./css/Checkbox.css";
+
+const Checkbox = ({ objekat, item }) => {
+  const { data, setData } = objekat;
+  const [isChecked, setIsChecked] = useState(data.Filteri[`${item.value}`]);
+
+  const changeHandler = (event) => {
+    setData((prevData) => ({
+      ...prevData,
+      Filteri: {
+        ...prevData.Filteri,
+        [event.target.name]: !isChecked,
+      },
+    }));
+  };
+
+  return (
+    <div className='checkbox-div'>
+      <label className='checkbox-title' htmlFor={`${item.title}`}>
+        {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

@@ -0,0 +1,62 @@
+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) => {
+    setData((prevData) => ({
+      ...prevData,
+      Filteri: {
+        ...prevData.Filteri,
+        [VName]: {
+          ...prevData.Filteri[`${VName}`],
+          [e.target.name]: e.target.value,
+        },
+      },
+    }));
+  };
+
+  return (
+    <div className='doubleFilter-component'>
+      <label htmlFor='filters-div'>{title}</label>
+      <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'
+            value={data.Filteri[`${VName}`].Od}
+            className='filter-number'
+            type='number'
+            min={fields.min}
+            max={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'
+            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

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import "./css/Filter.css";
+
+const Filter = (props) => {
+  const { data, setData } = props.data;
+  const { ime, VName, tipovi } = props.item;
+
+  const changeHandler = (e) => {
+    setData((prevData) => ({
+      ...prevData,
+      Filteri: {
+        ...prevData.Filteri,
+        [e.target.name]: e.target.value,
+      },
+    }));
+  };
+
+  return (
+    <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

@@ -0,0 +1,96 @@
+import { React, useEffect, useState } from "react";
+import "./css/LocationCheckbox.css";
+
+const LocationCheckbox = (props) => {
+  const { data, setData } = props.data;
+  const [checked, setChecked] = useState(false);
+  const [value, setValue] = useState(false);
+
+  // useEffect(() => {
+  //     data.Lokacija.gradovi.forEach(grad => {
+  //         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
+  // prije svakog dodavanja treba provjeriti da li je taj grad u nizu, ukoliko nije treba ga dodati
+  // brisanje gradova iz niza samo ukoliko je taj grad u nizu
+
+  const dodajGrad = (e) => {
+    console.log("dodajem", e.target.name);
+    if (!data.Lokacija.gradovi[`${e.target.name}`]) {
+      setData((prevData) => ({
+        ...prevData,
+        Lokacija: {
+          ...prevData.Lokacija,
+          gradovi: [...prevData.Lokacija.gradovi, e.target.name],
+        },
+      }));
+    }
+  };
+
+  const obrisiGrad = (e) => {
+    console.log("brisem", e.target.name);
+    setData((prevData) => ({
+      ...prevData,
+      Lokacija: {
+        ...prevData.Lokacija,
+        gradovi: [
+          ...prevData.Lokacija.gradovi.splice(
+            data.Lokacija.gradovi.indexOf(e.target.name),
+            1
+          ),
+        ],
+      },
+    }));
+  };
+
+  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'>
+      <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/Filter/css/Checkbox.css

@@ -0,0 +1,24 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox-div{
+    padding: 0.5em;
+    text-align: center;
+}
+
+.checkbox-title{
+    margin-right: 0.5em
+}
+
+.checkbox{
+    width: 20px;
+    height: 20px;
+}
+
+@media only screen and (min-width: 541px){
+    .checkbox-div{
+        font-size: 1.5em;
+    }
+}

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

@@ -0,0 +1,48 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.doubleFilter-component{
+    padding: 0.5em;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+label{
+    width: 100%;
+
+}
+
+.double-filters{
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+}
+
+.filter{
+    padding: 0.5em;
+}
+
+.filter input{
+    width: 6em;
+    height: 2em;
+    text-align: center;
+    border: 2px solid #02adba;
+    background-color: #fff;
+    border-radius: 5px;
+    margin-left: 0.5em;
+}
+
+@media only screen and (min-width: 541px) {
+    .doubleFilter-component{
+        font-size: 24px;
+    }
+
+    .filter input{
+        font-size: 20px;
+    }
+}

kivi-cars/src/components/Filters/Filter/css/Filter.css

@@ -0,0 +1,32 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.filter-component{
+    padding: 0.5em;
+    width: 50%;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.dropdown-list{
+    width: 10em;
+    height: 2em;
+    text-align: center;
+    border: 2px solid #02adba;
+    background-color: #fff;
+    border-radius: 5px;
+    margin-top: 0.25em;
+}
+
+@media only screen and (min-width: 541px) {
+    .filter-component{
+        font-size: 24px;
+    }
+
+    .dropdown-list{
+        margin-left: 1em;
+        font-size: 20px;
+    }
+}

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

@@ -0,0 +1,47 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox{
+    margin-top: 1em;
+    min-width: 60%;
+    height: 2em;
+    line-height: 1.5em;
+}
+
+.checkbox-title{
+    font-size: 16px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.check-box{
+    zoom: 1.5;
+    position: relative;
+    top: 3px;
+}
+
+
+
+@media only screen and (min-width: 541px){
+    .checkbox{
+        min-width: 40%;
+        max-width: 50%;
+    }
+
+    .checkbox-title{
+        font-size: 18px;
+    }
+
+}
+
+@media only screen and (min-width: 921px){
+    .checkbox{
+        min-width: 30%;
+        max-width: 35%;
+    }
+
+    .checkbox-title{
+        font-size: 20px;
+    }
+}

kivi-cars/src/components/Filters/Filters.css

@@ -0,0 +1,47 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.filters-container{
+    width: 90%;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.filters-content{
+    padding: 2em;
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    border-bottom: 2px solid #02adba;
+}
+
+.checkbox-content{
+    padding: 2em 0.5em;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+@media only screen and (min-width: 541px){
+    .filters-content{
+        padding: 2em 5em;
+    }
+
+    .checkbox-content{
+        width: ;
+    }
+
+
+}
+
+
+

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

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

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

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

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

@@ -0,0 +1,22 @@
+import './FiltersNav.css';
+
+const FiltersNav = (props) => {
+
+    const {toggle, setToggle} = props.toggle;
+
+
+    return(
+        <div className="links-container">
+            <ul className="filters-links">
+                <li className={toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(true)}>
+                    <p id="standard-filters" >Filteri</p>
+                </li> 
+                <li className={!toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(false)}>
+                    <p id="advanced-filters" >Napredni filteri</p>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default FiltersNav;

kivi-cars/src/components/Header/Header.css

@@ -0,0 +1,29 @@
+header {
+    width: 100%;
+    height: 70px;
+    background-color: #02adba;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.title {
+    resize: both;
+    padding: 20px;
+    font-size: 25px;
+    text-align:center;
+}
+
+  @media screen and (max-width: 700px) {
+    .title {
+        font-size: 25px;
+        padding: auto;
+        
+    }
+  }
+
+@media screen and (max-width: 350px) {
+    .title {
+        font-size: 20px;
+    }
+  }

kivi-cars/src/components/Header/Header.js

@@ -0,0 +1,12 @@
+import './Header.css'
+
+
+const Header = (props) => {
+    return (
+        <header>
+            <h3 className="title">{props.header}</h3>
+        </header>
+    )
+}
+
+export default Header

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

@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.locationFilter-div{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: auto;
+    width: 80%;
+    padding: 3em;
+    border-bottom: 2px solid #02adba;
+}
+
+.location-title {
+    width: 30%;
+    font-size: 22px;
+    text-align: center;
+}
+

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

@@ -0,0 +1,45 @@
+import React from "react";
+import './LocationFilter.css';
+import Location from "../../data/location";
+
+const LocationFilter = (props) => {
+
+    const {data, setData} = props.data;
+
+    const clickHandler = (e) => {
+        setData( 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) }>
+                <option value="Svi">Svi</option>
+                <optgroup label={Location.entiteti[0].entitet}>
+                    {Location.entiteti[0].kantoni.map((kanton, i) => {
+                        return(
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
+                        )
+                    })}
+                </optgroup>
+                <optgroup label={Location.entiteti[1].entitet}>
+                    {Location.entiteti[1].kantoni.map((kanton, i) => {
+                        return(
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
+                        )
+                    })}
+                </optgroup>
+                <option style={{fontWeight: "bold"}} name="distrikt" value={Location.entiteti[2].entitet}>{Location.entiteti[2].entitet}</option>
+            </select>
+        </div>
+    )
+}
+
+export default LocationFilter;

kivi-cars/src/containers/App.css

@@ -1,4 +0,0 @@
-.App{
-  display: flex;
-  flex-direction: column;
-}

kivi-cars/src/containers/App.js

@@ -1,15 +1,146 @@
-import './App.css';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import React from 'react';
+import "./css/App.css";
-import Filters from '../components/Filters';
+import { React, useEffect, useState } from "react";
-
+import CategoryPage from "./CategoryPage";
+import LandingPage from "./LandingPage";
+import FiltersPage from "./FiltersPage";
+import LocationPage from "./LocationPage";
+import EmailPage from "./EmailPage";
+import CongratsPage from "./CongratsPage";
+import LinkR from "../data/routes";
 
 function App() {
+  // const info = 'Dobrodosli na stranicu kivi!'
+  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);
+  }, [data]);
+
   return (
-    <div className="App">
+    <div className='App'>
-      <Filters />
+      <Router>
+        <Routes>
+          <Route path='/' element={<LandingPage />} />
+          <Route
+            path='category'
+            element={
+              <CategoryPage data={{ data, setData }} routes={LinkR.category} />
+            }
+          />
+          <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>
- 
   );
 }
 
-export default App;
+export default App;

kivi-cars/src/containers/CategoryPage.js

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

kivi-cars/src/containers/CongratsPage.js

@@ -0,0 +1,36 @@
+import Header from "../components/Header/Header";
+import TitleBtn from "../components/Button/TitleBtn";
+import "./css/CongratsPage.css";
+import { Link } from "react-router-dom";
+
+function CongratsPage() {
+  const naslov = "ČESTITAMO!";
+  const btnTitle = "NOVA PRETRAGA";
+
+  return (
+    <div className='congrats-page'>
+      <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>
+        </div>
+        <div className='second-paragh'>
+          <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} />
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default CongratsPage;

kivi-cars/src/containers/EmailPage.js

@@ -0,0 +1,107 @@
+import { useState, useEffect } from "react";
+import "./css/EmailPage.css";
+import Header from "../components/Header/Header";
+import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
+import TimeBtn from "../components/Button/TimeBtn";
+import TitleBtn from "../components/Button/TitleBtn";
+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({
+    email: "",
+    confirmEmail: "",
+  });
+
+  const header = "SLANJE OBAVJEŠTENJA";
+  let title1 = "Odmah";
+  let title2 = "Dnevno";
+  let title3 = "ZAVRŠI";
+  let errmsg = "Email does not match!";
+  let filter = "Slanje";
+
+  const 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) => {
+    setState((prevState) => ({
+      ...prevState,
+      [event.target.name]: event.target.value,
+    }));
+  };
+
+  useEffect(() => {
+    emailCheck(state.email, state.confirmEmail);
+  }, [state]);
+
+  return (
+    <div>
+      <Header header={header} />
+      <ButtonsToolbar routes={props.routes} />
+      <div className='info'>
+        <h2 className='h2'>Slanje obavještenja</h2>
+      </div>
+      <div className='buttons-container'>
+        <TimeBtn data={{ data, setData, filter }} title={title1} />
+        <TimeBtn data={{ data, setData, filter }} title={title2} />
+      </div>
+      <div className='form'>
+        <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
+              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 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

@@ -0,0 +1,31 @@
+import {React, useEffect, useState} from "react";
+import './css/FiltersPage.css';
+import Header from "../components/Header/Header";
+import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
+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 naslov = "Filteri za pretrazivanje"
+    const [toggle, setToggle] = useState(true)
+
+    const showFilters = (toggle) => {
+        if(toggle){
+            return <StandardFilters data={{data, setData}}/>
+        }
+        return <AdvancedFilters data={{data, setData}}/>;
+    }
+
+    return(
+        <div className="FiltersPage">
+            <Header header={naslov}/>
+            <ButtonsToolbar routes={routes}/> 
+            <FiltersNav toggle={{toggle, setToggle}}/>
+            {showFilters(toggle)}
+        </div>
+    )
+}
+
+export default FiltersPage;

kivi-cars/src/containers/LandingPage.js

@@ -0,0 +1,34 @@
+import logo  from '../assets/logo.png'
+import TitleBtn from '../components/Button/TitleBtn';
+import Header from '../components/Header/Header';
+import './css/LandingPage.css'
+import { Link } from 'react-router-dom';
+
+function LandingPage() {
+
+    const naslov = 'KIVI - CARS';
+    var naziv = 'KUPI';
+  
+    return (
+      <div className="landing-page">
+        <div className='logo-img'>
+            <img className='logo' alt='Logo-img' src={logo}/>
+        </div>
+
+        <Header className='header' header={naslov}/>
+        <div className='paragraph'>
+            <h2> Sva motorna vozila dostupna u oglasima </h2>
+            <h2> Na Vaš email </h2>
+            <h2 id='besplatno'> BESPLATNO </h2>
+            
+        </div>
+        <Link to='/category'>
+          <TitleBtn title={naziv}/>
+        </Link>
+        
+        
+      </div>
+    );
+  }
+  
+  export default LandingPage;

kivi-cars/src/containers/LocationPage.js

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

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

@@ -0,0 +1,14 @@
+*{
+  padding: 0;
+  margin: 0;
+}
+
+
+.App{
+  display: flex;
+  flex-direction: column;
+}
+
+p, h1, h2, h3 ,h4 {
+  font-family: Arial, Helvetica, sans-serif;
+}

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

@@ -0,0 +1,64 @@
+.paragh-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.first-paragh {
+    padding-top: 20px;
+    margin-top: 50px;
+}
+
+.second-paragh{
+    margin-bottom: 60px;
+    padding: 20px;
+}
+
+.third-paragh{
+    padding: 20px;
+    margin-bottom: 10px;
+}
+
+.h1 {
+    text-align: center;
+}
+
+.h2 {
+    text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+    .h2 {
+        font-size: 20px;}
+  }
+
+
+@media screen and (max-width: 600px) {
+    .h2 {
+        font-size: 17px;}
+  }
+
+
+@media screen and (max-width: 300px) {
+    .h2 {
+        font-size: 15px;}
+  }
+
+  
+@media screen and (max-width: 800px) {
+    .h1 {
+        font-size: 27px;}
+  }
+
+
+@media screen and (max-width: 600px) {
+    .h1 {
+        font-size: 22px;}
+  }
+
+
+@media screen and (max-width: 300px) {
+    .h1 {
+        font-size: 18px;}
+  }

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

@@ -0,0 +1,78 @@
+.h2 {
+    margin-top: 1rem;
+    text-align: center;
+    font-size: 300;
+    font-weight: 300;
+}
+
+
+.h3 {
+    margin-top: 2rem;
+    text-align: center;
+    padding: 1rem;
+    font-size: 300;
+    font-weight: 300;
+}
+
+.h3-2 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    text-align: center;
+    padding: 1rem;
+    font-size: 300;
+    font-weight: 300;
+}
+
+.buttons-container {
+    margin-top: 2rem;
+    display: flex;
+    justify-content:center;
+    gap: 20px;
+}
+
+#email {
+    width: 80%;
+    font-size: 15px;
+    padding: 20px;
+    margin: 10px;
+    border: hidden;
+    border-bottom: 1px solid lightslategrey;
+}
+#email:active {
+    width: 80%;
+    font-size: 15px;
+    padding: 20px;
+    margin: 10px;
+    border: hidden;
+    border-bottom: 1px solid lightslategrey;
+}
+
+#confirmEmail {
+    width: 80%;
+    font-size: 15px;
+    padding: 20px ;
+    margin: 10px;
+    border: hidden;
+    border-bottom: 1px solid lightslategrey;
+}
+
+.form {
+    margin-top: 1rem;
+}
+
+textarea:focus, input:focus{
+    outline: none;
+}
+
+.email-div{
+    max-width: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+    
+}
+
+.info{
+    display: flex;
+}

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

@@ -0,0 +1,8 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    color: black;   
+}

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

@@ -0,0 +1,33 @@
+.logo-img {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0 2rem 0;
+}
+
+
+.header {
+    margin-bottom: 100px;
+    display: flex;
+    justify-items: auto;
+   
+}
+.paragraph{
+    display: flex;
+    flex-direction: column;
+    padding: 3rem;
+    gap: 20px;
+   
+}
+h2{
+    display: flex;
+    margin: auto;
+    font-size: 300;
+    font-weight: 300;
+    padding: auto;
+    text-align: center;
+    
+}
+#besplatno{
+    font-weight: bold
+}
+

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

@@ -0,0 +1,20 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox-div{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+}
+
+@media only screen and (min-width: 541px){
+    .checkbox-div{
+        flex-direction: row;
+        justify-content: space-around;
+        margin-bottom: 50px;
+    }
+}

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

@@ -0,0 +1,14 @@
+const AirCondition = {
+    "ime" : "Klima",
+    "VName": "TipKlime",
+    "tipovi" : [
+        "Odaberite",
+        "Jednozonska",
+        "Dvozonska",
+        "Trozonska",
+        "Četverozonska",
+        "Ostalo"
+    ]
+}
+
+export default AirCondition;

kivi-cars/src/data/checkbox.js

@@ -0,0 +1,179 @@
+const CheckBox = [
+  {
+    title: "ABS",
+    value: false,
+    variable: "ABS",
+  },
+  {
+    title: "ESP",
+    value: false,
+    variable: "ESP",
+  },
+  {
+    title: "Alarm",
+    value: false,
+    variable: "Alarm",
+  },
+  {
+    title: "Airbag",
+    value: false,
+    variable: "Airbag",
+  },
+  {
+    title: "Šiber",
+    value: false,
+    variable: "Siber",
+  },
+  {
+    title: "Servo volan",
+    value: false,
+    variable: "ServoVolan",
+  },
+  {
+    title: "Koža",
+    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

@@ -0,0 +1,23 @@
+const Color = {
+    "ime": "Boja",
+    "VName": "Boja",
+    "tipovi": [
+        "Odaberite",
+        "Bež",
+        "Bijela",
+        "Bordo",
+        "Crna",
+        "Crvena",
+        "Ljubičasta",
+        "Narandžasta",
+        "Plava",
+        "Siva",
+        "Smeđa",
+        "Srebrena",
+        "Zelena",
+        "Zlatna",
+        "Žuta"
+    ]
+}
+
+export default Color;

kivi-cars/src/data/condition.js

@@ -0,0 +1,12 @@
+const Condition = {
+    "ime": "Stanje",
+    "VName": "Stanje",
+    "tipovi": [
+        "Odaberite",
+        "Novo",
+        "Polovno",
+        "Udareno"
+    ]
+}
+
+export default Condition;

kivi-cars/src/data/cubes.js

@@ -0,0 +1,11 @@
+const Cubes = {
+    "title": "Kubikaza",
+    "VName": "Kubikaza",
+    "fields": {
+        "min": 0.8,
+        "max": 6.2,
+        "step": 0.1
+    }
+}
+
+export default Cubes

kivi-cars/src/data/doors.js

@@ -0,0 +1,11 @@
+const Doors = {
+    "ime": "Broj vrata",
+    "VName": "BrojVrata",
+    "tipovi" : [
+        "Odaberite",
+        "2/3",
+        "4/5"
+    ]
+}
+
+export default Doors;

kivi-cars/src/data/drive.js

@@ -0,0 +1,12 @@
+const Drive = {
+    "ime" : "Pogon",
+    "VName": "Pogon",
+    "tipovi": [
+        "Odaberite",
+        "Prednji",
+        "Zadnji",
+        "Sva četiri"
+    ]
+}
+
+export default Drive;

kivi-cars/src/data/fuel.js

@@ -0,0 +1,15 @@
+const Fuel = {
+    "ime": "Gorivo",
+    "VName": "Gorivo",
+    "tipovi": [
+        "Odaberite",
+        "Dizel",
+        "Benzin",
+        "Plin",
+        "Cng",
+        "Hybrid",
+        "Elektro"
+    ]
+}
+
+export default Fuel;

kivi-cars/src/data/gearbox.js

@@ -0,0 +1,17 @@
+const Gearbox = {
+    "ime": "Broj brzina",
+    "VName": "BrojStepenihPrijenosa",
+    "tipovi": [
+        "Odaberite",
+        "3+R",
+        "4+R",
+        "5+R",
+        "6+R",
+        "7+R",
+        "8+R",
+        "9+R",
+        "CVT"
+    ]
+}
+
+export default Gearbox;

kivi-cars/src/data/horsepower.js

@@ -0,0 +1,11 @@
+const HorsePower = {
+    "title": "Konjskih snaga",
+    "VName": "KonjskihSnaga",
+    "fields": {
+        "min": 0,
+        "max": 2000,
+        "step": 10
+    }
+}
+
+export default HorsePower

kivi-cars/src/data/kilometers.js

@@ -0,0 +1,11 @@
+const Kilometers = {
+    "title": "Kilometraza",
+    "VName": "Kilometraza",
+    "fields": {
+        "min": 0,
+        "max": 1000000,
+        "step": 1000
+    }
+}
+
+export default Kilometers;

kivi-cars/src/data/kilowats.js

@@ -0,0 +1,11 @@
+const Kilowats = {
+    "title": "Kilovata",
+    "VName": "Kilovata",
+    "fields": {
+        "min": 0,
+        "max": 1000,
+        "step": 10
+    }
+}
+
+export default Kilowats

kivi-cars/src/data/location.js

@@ -0,0 +1,225 @@
+const Location = {
+  ime: "Lokacija",
+  entiteti: [
+    {
+      entitet: "Federacija BiH",
+      kantoni: [
+        {
+          kanton: "Sarajevo",
+          gradovi: [
+            "Hadžići",
+            "Ilidža",
+            "Ilijaš",
+            "Sarajevo-Centar",
+            "Sarajevo-Novi Grad",
+            "Sarajevo-Novo Sarajevo",
+            "Sarajevo-Stari Grad",
+            "Trnovo",
+            "Vogošća",
+          ],
+        },
+        {
+          kanton: "Unsko-sanski",
+          gradovi: [
+            "Bihać",
+            "Bosanska Krupa",
+            "Bosanski Petrovac",
+            "Bužim",
+            "Cazin",
+            "Ključ",
+            "Sanski Most",
+            "Velika Kladuša",
+          ],
+        },
+        {
+          kanton: "Posavski",
+          gradovi: ["Domaljevac", "Odžak", "Orašje", "Šamac"],
+        },
+        {
+          kanton: "Tuzlanski",
+          gradovi: [
+            "Banovići",
+            "Doboj-Istok",
+            "Gradačac",
+            "Gračanica",
+            "Kalesija",
+            "Kladanj",
+            "Lukavac",
+            "Sapna",
+            "Srebrenik",
+            "Teočak",
+            "Tuzla",
+            "Čelić",
+            "Živinice",
+          ],
+        },
+        {
+          kanton: "Zeničko-dobojski",
+          gradovi: [
+            "Breza",
+            "Doboj-Jug",
+            "Kakanj",
+            "Maglaj",
+            "Olovo",
+            "Tešanj",
+            "Usora",
+            "Vareš",
+            "Visoko",
+            "Zavidovići",
+            "Zenica",
+            "Žepče",
+          ],
+        },
+        { kanton: "Bosansko-podrinjski", gradovi: ["Foča", "Goražde", "Pale"] },
+        {
+          kanton: "Srednjobosanski",
+          gradovi: [
+            "Bugojno",
+            "Busovača",
+            "Dobretići",
+            "Donji Vakuf",
+            "Fojnica",
+            "Gornji Vakuf - Uskoplje",
+            "Jajce",
+            "Kiseljak",
+            "Kreševo",
+            "Novi Travnik",
+            "Travnik",
+            "Vitez",
+          ],
+        },
+        {
+          kanton: "Hercegovačko-neretvanski",
+          gradovi: [
+            "Grad Mostar",
+            "Jablanica",
+            "Konjic",
+            "Neum",
+            "Prozor",
+            "Ravno",
+            "Stolac",
+            "Čapljina",
+            "Čitluk",
+          ],
+        },
+        {
+          kanton: "Zapadno-hercegovački",
+          gradovi: ["Grude", "Ljubuški", "Posušje", "Široki Brijeg"],
+        },
+        {
+          kanton: "Livanjski",
+          gradovi: [
+            "Bosansko Grahovo",
+            "Drvar",
+            "Glamoč",
+            "Kupres",
+            "Livno",
+            "Tomislavgrad",
+          ],
+        },
+      ],
+    },
+    {
+      entitet: "Republika Srpska",
+      kantoni: [
+        {
+          kanton: "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/motors-brands.js

@@ -0,0 +1,45 @@
+const Motors = [
+    {"brand":"Izaberite"},
+    {"brand":"Aprilia"},
+    {"brand":"Benelli"},
+    {"brand":"BMW"},
+    {"brand":"Cagiva"},
+    {"brand":"Classe"},
+    {"brand":"CPI"},
+    {"brand":"Derbi"},
+    {"brand":"Ducati"},
+    {"brand":"Gilera"},
+    {"brand":"Harley Davidson"},
+    {"brand":"Honda"},
+    {"brand":"huatian"},
+    {"brand":"Husqvarna"},
+    {"brand":"Hyosung"},
+    {"brand":"Italjet"},
+    {"brand":"Jawa"},
+    {"brand":"kanuni"},
+    {"brand":"Kawasaki"},
+    {"brand":"Keeway"},
+    {"brand":"KTM"},
+    {"brand":"Kymco"},
+    {"brand":"LBC"},
+    {"brand":"Lifan"},
+    {"brand":"Malaguti"},
+    {"brand":"Moto Guzzi"},
+    {"brand":"Nitro"},
+    {"brand":"Panasonic"},
+    {"brand":"Peugeot"},
+    {"brand":"Piaggio"},
+    {"brand":"Puch"},
+    {"brand":"Qingqi"},
+    {"brand":"Sprint"},
+    {"brand":"Spyder"},
+    {"brand":"Suzuki"},
+    {"brand":"Tibra"},
+    {"brand":"Tomos"},
+    {"brand":"Triumph"},
+    {"brand":"Vespa"},
+    {"brand":"Yamaha"},
+    {"brand":"yamasaki"}
+]
+
+export default Motors;

kivi-cars/src/data/price.js

@@ -0,0 +1,11 @@
+const Price = {
+    "title": "Cijena",
+    "VName": "Cijena",
+    "fields": {
+        "min": 0,
+        "max": 1000000,
+        "step": 500
+    }
+}
+
+export default Price;

kivi-cars/src/data/routes.js

@@ -0,0 +1,19 @@
+const LinkR = {
+    "category": {
+        "prev": "/",
+        "next": "/filters"
+    },
+    "filters": {
+        "prev": "/category",
+        "next": "/location"
+    },
+    "location": {
+        "prev": "/filters",
+        "next": "/email"
+    },  
+    "email": {
+        "prev": "/location",
+        "next": "/congrats"
+    }
+}
+export default LinkR;

kivi-cars/src/data/seats.js

@@ -0,0 +1,18 @@
+const Seats = {
+    "ime": "Sjedišta",
+    "VName": "BrojSjedista",
+    "tipovi": [
+        "Odaberite",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "Više"
+    ]
+}
+
+export default Seats;

kivi-cars/src/data/sensors.js

@@ -0,0 +1,13 @@
+const Sensors = {
+    "ime": "Senzori",
+    "VName": "ParkingSenzori",
+    "tipovi": [
+        "Odaberite",
+        "naprijed",
+        "nazad",
+        "naprijed i nazad",
+        "nema"
+    ]
+}
+
+export default Sensors;

kivi-cars/src/data/transmission.js

@@ -0,0 +1,12 @@
+const Transmission = {
+    "ime": "Transmisija",
+    "VName": "Transmisija",
+    "tipovi": [
+        "Odaberite",
+        "Automatski mjenjač",
+        "Manuelni mjenjač",
+        "Polu-automatski mjenjač"
+    ]
+}
+
+export default Transmission

kivi-cars/src/data/trucks-brands.js

@@ -0,0 +1,85 @@
+const Trucks = [
+    {"brand":"Izaberite"},
+    {"brand":"Mercedes"},
+    {"brand":"MAN"},
+    {"brand":"Volkswagen"},
+    {"brand":"Iveco"},
+    {"brand":"TAM"},
+    {"brand":"Fiat"},
+    {"brand":"Mecedes"},
+    {"brand":"Volvo"},
+    {"brand":"Renault"},
+    {"brand":"Ford"},
+    {"brand":"Peugeot"},
+    {"brand":"Scania"},
+    {"brand":"Daf"},
+    {"brand":"Zastava"},
+    {"brand":"FAP"},
+    {"brand":"IMT"},
+    {"brand":"Citroen"},
+    {"brand":"MAGIRUS"},
+    {"brand":"steyr"},
+    {"brand":"Zetor"},
+    {"brand":"Opel"},
+    {"brand":"Nissan"},
+    {"brand":"mercedes benz"},
+    {"brand":"Schmitz"},
+    {"brand":"JCB"},
+    {"brand":"KOGEL"},
+    {"brand":"cat"},
+    {"brand":"Hyundai"},
+    {"brand":"MEILLER"},
+    {"brand":"TORPEDO"},
+    {"brand":"miller"},
+    {"brand":"Atlas"},
+    {"brand":"Schwarzmuller"},
+    {"brand":"Kia"},
+    {"brand":"traktor"},
+    {"brand":"Isuzu"},
+    {"brand":"LKT"},
+    {"brand":"Mitsubishi"},
+    {"brand":"Toyota"},
+    {"brand":"Saurer"},
+    {"brand":"John Deere"},
+    {"brand":"vw"},
+    {"brand":"Mazda"},
+    {"brand":"Škoda"},
+    {"brand":"Timberjack"},
+    {"brand":"Hafei"},
+    {"brand":"Hanomag"},
+    {"brand":"Massey Ferguson"},
+    {"brand":"Same"},
+    {"brand":"KRONE"},
+    {"brand":"Liebherr"},
+    {"brand":"Seat"},
+    {"brand":"hiab"},
+    {"brand":"O&K"},
+    {"brand":"URSUS"},
+    {"brand":"GAZ"},
+    {"brand":"Gorica"},
+    {"brand":"vw kombi"},
+    {"brand":"Tomo Vinkovic"},
+    {"brand":"Actros"},
+    {"brand":"Setra"},
+    {"brand":"Sprinter"},
+    {"brand":"Langendorf"},
+    {"brand":"ZettelMeyer"},
+    {"brand":"DEUTZ"},
+    {"brand":"Komatsu"},
+    {"brand":"TAM 110"},
+    {"brand":"Tatra"},
+    {"brand":"MF"},
+    {"brand":"BOSCH"},
+    {"brand":"Mercedea-Benz"},
+    {"brand":"Caddy"},
+    {"brand":"teretno"},
+    {"brand":"Mercedez Benz"},
+    {"brand":"motokultivator"},
+    {"brand":"kombi"},
+    {"brand":"CASE"},
+    {"brand":"TAM 75"},
+    {"brand":"CLARK"},
+    {"brand":"hurlimann"}
+]
+
+export default Trucks;

kivi-cars/src/data/type.js

@@ -0,0 +1,22 @@
+const Type = {
+    "ime": "Vrsta vozila",
+    "VName": "TipVozila",
+    "tipovi": [
+        "Odaberite",
+        "Karavan",
+        "Limuzina",
+        "Monovolumen",
+        "Malo auto",
+        "Sportback",
+        "Kombi",
+        "Kabriolet",
+        "Coupe",
+        "Terenac",
+        "Off-Road",
+        "Pickup",
+        "Oldtimer",
+        "Caddy"
+    ]
+}
+
+export default Type;

kivi-cars/src/data/year.js

@@ -0,0 +1,11 @@
+const Year = {
+    "title": "Godiste",
+    "VName": "Godiste",
+    "fields": {
+        "min": 1960,
+        "max": new Date().getFullYear(),
+        "step": 1
+    }
+}
+
+export default Year;

kivi-cars/src/index.css

@@ -1,3 +1,7 @@
+html{
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

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;