Merge branch 'next_button' into 'main'

add next button in filters

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

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,24 @@
+import React from 'react'
+import './button.css'
+
+const StandardBtn = (props) => {
+
+    const {setData, filter} = props.data
+
+    const clickHandler = ( e ) => {
+        setData( prevState => ({
+            ...prevState,
+            "Category":{
+                [e.target.name]: 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/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,67 @@
+.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;
+}
+
+.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,55 @@
+import React from "react";
+import "./Filters.css";
+import Filter from "./Filter/Filter";
+import TitleBtn from "../Button/TitleBtn";
+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 {filters, setFilters} = props.data
+    const data1 = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
+    let index = 0
+
+
+    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

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import './css/Checkbox.css';
+
+const Checkbox = (props) => {
+
+
+    const {setFilters} = props.data
+    const [isChecked, setIsChecked] = useState(true)
+
+
+    const changeHandler = ( event ) => {
+        setFilters(prevData => ({
+            ...prevData,
+            [event.target.name]: isChecked
+        }))
+    }
+
+    return(
+        <div className="checkbox-div">
+            <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>
+    )
+}
+
+export default Checkbox;

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

@@ -0,0 +1,40 @@
+import React, {useEffect, useState} from "react";
+import "./css/DoubleFilter.css";
+
+const DoubleFilter = (props) => {
+
+    const {setFilters} = props.data
+    const [doubleFilterData, setDoubleFilterData] = useState({})
+
+    const changeHandler = ( e ) => {
+        setDoubleFilterData(prevData => ({
+            ...prevData,
+            [e.target.name]: e.target.value     
+        }))
+    }
+
+    useEffect(() => {
+        setFilters(prevData => ({
+            ...prevData,
+            [props.title]: doubleFilterData
+        }))
+    }, [doubleFilterData])
+
+    return (
+        <div className="doubleFilter-component">
+            <label htmlFor="filters-div">{props.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" 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>
+    )
+}
+
+export default DoubleFilter;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import './css/Filter.css';
+
+const Filter = (props) => {
+
+    const {setFilters} = props.data
+
+    const changeHandler = ( e ) => {
+        setFilters( prevData => ({
+            ...prevData,
+            [e.target.name]: e.target.value
+        }))
+    }
+
+    return(
+        <div className="filter-component">
+            <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
+            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(e) => changeHandler(e)}>
+                {props.tipovi.map((tip, i) => {
+                    return (
+                        <option key={i} value={tip} name={tip}>{tip}</option>
+                    )
+                })}
+            </select>
+        </div>
+    )
+}
+
+export default Filter;

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

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+import './css/LocationCheckbox.css';
+
+const LocationCheckbox = (props) => {
+
+    const {setCheckboxStatus} = props.data;
+    const [checked, setChecked] = useState(true)
+
+    const changeHandler = (e) => {
+        setCheckboxStatus(prevStatus => ({
+            ...prevStatus,
+            [e.target.name]: checked
+        }))
+    }
+
+
+    return (
+        <div className="checkbox">
+            <label className="checkbox-title" htmlFor={props.title}>{props.title}</label>
+            <input className="check-box" type="checkbox" name={props.title} id={props.title} onChange={(e)=> {
+                setChecked(!checked)
+                changeHandler(e)
+                }}/>
+        </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,49 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.filters-container{
+    width: 90%;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.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,64 @@
+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 vehicleService from "../../services/vehicle-service";
+
+const StandardFilters = (props) => {
+
+    const {data, filters, setFilters} = props.data;
+    const [brandIndex, setBrandIndex] = useState(0);
+    let index = 0;
+    let details, marke;
+
+    details = vehicleService(data.Category.Vozilo);
+    const {show, brands, data1, data2, data3} = details;
+
+    const [model, setModel] = useState(show);
+
+
+    useEffect(() => {
+        if(filters.Marka)setBrandIndex(marke.indexOf(filters.Marka))
+    }, [filters])
+
+
+    marke = brands.map(marka => {return marka.brand})
+
+    return(
+        <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}
+
+            {data1.map(item => {
+                index += 1;
+                return(
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
+                )
+            })}
+
+            {data2.map(item => {
+                index += 1;
+                return(
+                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{data, filters, setFilters}}/>
+                )
+            })}
+            
+            {data3.map(item => {
+                index += 1;
+                return(
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
+                )
+            })}
+
+            <div style={{marginTop: 50}}>
+                <Link to="/location">
+                    <TitleBtn title="Dalje" />
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default StandardFilters

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

@@ -0,0 +1,55 @@
+*{
+    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,42 @@
+import React from "react";
+import './LocationFilter.css';
+import Location from "../../data/location";
+
+const LocationFilter = (props) => {
+
+    const {setLocationData} = props.data;
+
+    const clickHandler = (e) => {
+        setLocationData( prevData => ( {
+                ...prevData,
+                "kanton": e.target.value
+            }))
+    }
+
+
+    return (
+        <div className="locationFilter-div">
+            <label className="location-title" htmlFor={Location.ime}>Izaberite lokaciju:</label>
+            <select name={Location.ime} id={Location.ime} onChange={(e) => clickHandler(e) }>
+                <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,14 +1,40 @@
-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({})
+
+  useEffect(() => {
+    console.log(data)
+  }, [data])
+
+
   return (
     <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>
- 
   );
 }
 

kivi-cars/src/containers/CategoryPage.js

@@ -0,0 +1,22 @@
+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,34 @@
+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,96 @@
+import { useState, useEffect} from 'react';
+import './css/EmailPage.css'
+import Header from '../components/Header/Header';
+import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import StandardBtn from '../components/Button/StandardBtn';
+import TitleBtn from '../components/Button/TitleBtn';
+import { Link } from 'react-router-dom';
+
+
+function EmailPage(props) {
+
+    const {data, setData} = props.data
+    const [error, setError] = useState(false)
+
+
+    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'>
+                <StandardBtn data={{data, setData, filter}} title={title1}/>
+                <StandardBtn 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">
+                    <TitleBtn title={title3} />    
+                </Link>
+                )}      
+            </div>
+        </div>
+        
+
+        
+
+
+     );
+}
+
+export default EmailPage;

kivi-cars/src/containers/FiltersPage.js

@@ -0,0 +1,41 @@
+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 = (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, filters, setFilters}}/>
+        }
+        return <AdvancedFilters data={{data, filters, setFilters}}/>;
+    }
+
+    return(
+        <div className="FiltersPage">
+            <Header header={naslov}/>
+            <ButtonsToolbar routes={props.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,87 @@
+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 [locationData, setLocationData] = useState({})
+    const [locationInfo, setLocationInfo] = useState({"gradovi": []})
+    const [checkboxStatus, setCheckboxStatus] = useState({})
+    const [location, setLocation] = useState({});
+    const naslov = "Dodajte lokaciju"
+
+    let id = 0;
+
+    useEffect(() => {
+        if(locationData.kanton){
+            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])
+
+    useEffect(() => {
+        if(locationData.kanton === 'Distrikt Brcko'){
+            setLocation(
+                {
+                "entitet": "Distrikt Brcko",
+                "kanton": "Distrikt Brcko",
+                "gradovi": "Brcko"
+                }
+            )
+        }else{
+            setLocation( prevData => ({
+                ...prevData,
+                "entitet": locationInfo.entitet,
+                "kanton": locationInfo.kanton,
+                "gradovi": checkboxStatus
+            }))}
+            console.log("location", location)
+    }, [checkboxStatus])
+
+    useEffect(() => {
+        setData( prevData => ({
+            ...prevData,
+            "Location": location
+        }))
+        console.log("data", data)
+    }, [location])
+
+    
+    return (
+        <div className='location-div'>
+            <Header header={naslov}/>
+            <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/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,19 @@
+*{
+    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;
+    }
+}

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

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

kivi-cars/src/data/checkbox.js

@@ -0,0 +1,38 @@
+const CheckBox = [
+    "ABS",
+    "ESP",
+    "Tempomat",
+    "Alarm",
+    "Airbag",
+    "Šiber",
+    "Servo volan",
+    "Koža",
+    "Klima",
+    "Centralna brava",
+    "Daljinsko zaključavanje",
+    "ISOFIX",
+    "Registrovan",
+    "Xenon",
+    "LED",
+    "Laser",
+    "Električni podizači stakala",
+    "Naslon za ruke", 
+    "Električni retrovizor",
+    "Start/Stop",
+    "Turbo",
+    "Stranac",   
+    "Pakring assistent",
+    "Senzor mrtvog ugla",
+    "Servisna knjiga",
+    "Komande na volanu",
+    "Navigacija",
+    "Grijanje sjedišta",
+    "Masažna sjedišta",
+    "Memorija sjedišta",
+    "Panorama",
+    "Ocarinjen",
+    "Udaren",
+    
+]
+
+export default CheckBox;

kivi-cars/src/data/color.js

@@ -0,0 +1,22 @@
+const Color = {
+    "ime": "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,11 @@
+const Condition = {
+    "ime": "Stanje",
+    "tipovi": [
+        "Odaberite",
+        "Novo",
+        "Polovno",
+        "Udareno"
+    ]
+}
+
+export default Condition;

kivi-cars/src/data/cubes.js

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

kivi-cars/src/data/doors.js

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

kivi-cars/src/data/drive.js

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

kivi-cars/src/data/fuel.js

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

kivi-cars/src/data/gearbox.js

@@ -0,0 +1,16 @@
+const Gearbox = {
+    "ime": "Broj brzina",
+    "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,10 @@
+const HorsePower = {
+    "title": "Konjskih snaga",
+    "fields": {
+        "min": 0,
+        "max": 2000,
+        "step": 10
+    }
+}
+
+export default HorsePower

kivi-cars/src/data/kilometers.js

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

kivi-cars/src/data/kilowats.js

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

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

@@ -0,0 +1,231 @@
+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 Brcko",
+            "kantoni": [
+                {"kanton": "Distrikt Brcko",
+                    "gradovi":[
+                        
+                    ]
+                }
+            ]
+        }
+    ]
+}
+
+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,10 @@
+const Price = {
+    "title": "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,17 @@
+const Seats = {
+    "ime": "Sjedišta",
+    "tipovi": [
+        "Odaberite",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "Više"
+    ]
+}
+
+export default Seats;

kivi-cars/src/data/sensors.js

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

kivi-cars/src/data/transmission.js

@@ -0,0 +1,11 @@
+const Transmission = {
+    "ime": "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,21 @@
+const Type = {
+    "ime": "Vrsta vozila",
+    "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,10 @@
+const Year = {
+    "title": "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/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;