From 85169b63b5e260dc9b73c1b65f1d62bb5f0d92ac Mon Sep 17 00:00:00 2001 From: ismailsosic Date: Thu, 14 Apr 2022 10:50:35 +0200 Subject: [PATCH] Simple object --- kivi-cars/package-lock.json | 22 ++++++ .../src/components/Button/StandardBtn.js | 12 +-- .../ButtonsToolbar/ButtonsToolbar.js | 6 +- .../components/CategoryBtns/categorybtns.js | 13 +++- .../components/Filters/Advanced-filters.js | 18 +++-- .../src/components/Filters/Filter/Checkbox.js | 10 +-- .../components/Filters/Filter/DoubleFilter.js | 11 ++- .../src/components/Filters/Filter/Filter.js | 15 ++-- .../Filters/Filter/LocationCheckbox.js | 28 +++++++ .../Filters/Filter/{ => css}/Checkbox.css | 0 .../Filters/Filter/{ => css}/DoubleFilter.css | 0 .../Filters/Filter/{ => css}/Filter.css | 0 .../Filters/Filter/css/LocationCheckbox.css | 47 ++++++++++++ .../components/Filters/Standard-filters.js | 33 +++++---- .../components/FiltersNavbar/FiltersNav.js | 4 +- .../components/Location/LocationFilter.css | 21 ++++++ .../src/components/Location/LocationFilter.js | 31 ++++---- kivi-cars/src/containers/App.js | 18 ++--- kivi-cars/src/containers/CategoryPage.js | 4 +- kivi-cars/src/containers/DataContext.js | 3 - kivi-cars/src/containers/EmailPage.js | 13 ++-- kivi-cars/src/containers/FiltersPage.js | 17 ++++- kivi-cars/src/containers/LocationPage.js | 74 +++++++++++++++++-- kivi-cars/src/containers/css/LocationPage.css | 15 ++++ kivi-cars/src/data/cars-brands.js | 4 +- kivi-cars/src/data/fuel.js | 2 +- kivi-cars/src/data/location.js | 10 ++- 27 files changed, 326 insertions(+), 105 deletions(-) create mode 100644 kivi-cars/src/components/Filters/Filter/LocationCheckbox.js rename kivi-cars/src/components/Filters/Filter/{ => css}/Checkbox.css (100%) rename kivi-cars/src/components/Filters/Filter/{ => css}/DoubleFilter.css (100%) rename kivi-cars/src/components/Filters/Filter/{ => css}/Filter.css (100%) create mode 100644 kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css delete mode 100644 kivi-cars/src/containers/DataContext.js diff --git a/kivi-cars/package-lock.json b/kivi-cars/package-lock.json index bade6b5..703494a 100644 --- a/kivi-cars/package-lock.json +++ b/kivi-cars/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-hook-form": "^7.29.0", "react-router-dom": "^6.2.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" @@ -13172,6 +13173,21 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-hook-form": { + "version": "7.29.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz", + "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -25388,6 +25404,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-hook-form": { + "version": "7.29.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz", + "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/kivi-cars/src/components/Button/StandardBtn.js b/kivi-cars/src/components/Button/StandardBtn.js index 919232b..c9a664b 100644 --- a/kivi-cars/src/components/Button/StandardBtn.js +++ b/kivi-cars/src/components/Button/StandardBtn.js @@ -1,19 +1,21 @@ +import React from 'react' import './button.css' const StandardBtn = (props) => { - const {filtersData, setFiltersData, filter} = props.data + const {setData, filter} = props.data const clickHandler = ( e ) => { - setFiltersData(prevData => ({ - ...prevData, - [e.target.name]: e.target.value + setData( prevState => ({ + ...prevState, + "Category":{ + [e.target.name]: e.target.value + } })) } return (
-
) diff --git a/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js b/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js index e127755..0160e8f 100644 --- a/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js +++ b/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js @@ -1,7 +1,7 @@ import './ButtonsToolbar.css'; import { Link } from 'react-router-dom' import ArrowLeft from '../Button/leftBtn'; -import ArrowRigh from '../Button/rightBtn'; +// import ArrowRigh from '../Button/rightBtn'; const ButtonsToolbar = (props) => { @@ -12,12 +12,12 @@ const ButtonsToolbar = (props) => { -
+ {/*
-
+
*/} ) } diff --git a/kivi-cars/src/components/CategoryBtns/categorybtns.js b/kivi-cars/src/components/CategoryBtns/categorybtns.js index 5178413..2ab1f07 100644 --- a/kivi-cars/src/components/CategoryBtns/categorybtns.js +++ b/kivi-cars/src/components/CategoryBtns/categorybtns.js @@ -1,6 +1,7 @@ import './categorybtns.css' import StandardBtn from '../Button/StandardBtn' import { Link } from 'react-router-dom'; +import { useEffect, useState } from 'react'; const CategoryBtns = (props) => { @@ -10,16 +11,20 @@ const CategoryBtns = (props) => { let kamion = 'Kamion'; let filter = 'Vozilo' - const {filtersData, setFiltersData} = props.data; + const {data, setData} = props.data; return (
- + + + + + + + - -
) diff --git a/kivi-cars/src/components/Filters/Advanced-filters.js b/kivi-cars/src/components/Filters/Advanced-filters.js index 25ad906..324f955 100644 --- a/kivi-cars/src/components/Filters/Advanced-filters.js +++ b/kivi-cars/src/components/Filters/Advanced-filters.js @@ -1,6 +1,8 @@ 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"; @@ -13,8 +15,8 @@ import CheckBox from "../../data/checkbox"; const AdvancedFilters = (props) => { - const {filtersData, setFiltersData} = props.data - const data = [Color, AirCondition, Seats, Gearbox, Sensors, Lights] + const {filters, setFilters} = props.data + const data1 = [Color, AirCondition, Seats, Gearbox, Sensors, Lights] let index = 0 @@ -22,10 +24,10 @@ const AdvancedFilters = (props) => {
{ - data.map(item => { + data1.map(item => { index += 1; return( - + ) }) } @@ -35,11 +37,17 @@ const AdvancedFilters = (props) => { CheckBox.map(item => { index += 1; return( - + ) }) }
+ +
+ + + +
) } diff --git a/kivi-cars/src/components/Filters/Filter/Checkbox.js b/kivi-cars/src/components/Filters/Filter/Checkbox.js index 04541c3..ec91239 100644 --- a/kivi-cars/src/components/Filters/Filter/Checkbox.js +++ b/kivi-cars/src/components/Filters/Filter/Checkbox.js @@ -1,15 +1,15 @@ -import React, { useEffect, useState } from "react"; -import './Checkbox.css'; +import React, { useState } from "react"; +import './css/Checkbox.css'; const Checkbox = (props) => { - const {filtersData, setFiltersData} = props.data - const [isChecked, setIsChecked] = useState(false) + const {setFilters} = props.data + const [isChecked, setIsChecked] = useState(true) const changeHandler = ( event ) => { - setFiltersData(prevData => ({ + setFilters(prevData => ({ ...prevData, [event.target.name]: isChecked })) diff --git a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js index 3bf64e2..8686107 100644 --- a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js +++ b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js @@ -1,21 +1,20 @@ import React, {useEffect, useState} from "react"; -import "./DoubleFilter.css"; +import "./css/DoubleFilter.css"; const DoubleFilter = (props) => { - const defaultV = 0 - const {filtersData, setFiltersData} = props.data + const {setFilters} = props.data const [doubleFilterData, setDoubleFilterData] = useState({}) const changeHandler = ( e ) => { setDoubleFilterData(prevData => ({ ...prevData, - [e.target.name]: e.target.value + [e.target.name]: e.target.value })) } useEffect(() => { - setFiltersData(prevData => ({ + setFilters(prevData => ({ ...prevData, [props.title]: doubleFilterData })) @@ -31,7 +30,7 @@ const DoubleFilter = (props) => {
- changeHandler(e)}/> + changeHandler(e)}/>
diff --git a/kivi-cars/src/components/Filters/Filter/Filter.js b/kivi-cars/src/components/Filters/Filter/Filter.js index 3c0381e..c1e9cce 100644 --- a/kivi-cars/src/components/Filters/Filter/Filter.js +++ b/kivi-cars/src/components/Filters/Filter/Filter.js @@ -1,21 +1,22 @@ -import React from "react"; -import './Filter.css'; +import React, { useEffect, useState } from "react"; +import './css/Filter.css'; const Filter = (props) => { - const {filtersData, setFiltersData} = props.data + const {filters, setFilters} = props.data + const [filtersData, setFiltersData] = useState({}) - const changeHandler = ( event ) => { - setFiltersData( prevData => ({ + const changeHandler = ( e ) => { + setFilters( prevData => ({ ...prevData, - [event.target.name]: event.target.value + [e.target.name]: e.target.value })) } return(
- changeHandler(e)}> {props.tipovi.map((tip, i) => { return ( diff --git a/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js b/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js new file mode 100644 index 0000000..2535579 --- /dev/null +++ b/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 ( +
+ + { + setChecked(!checked) + changeHandler(e) + }}/> +
+ ) +} + +export default LocationCheckbox; \ No newline at end of file diff --git a/kivi-cars/src/components/Filters/Filter/Checkbox.css b/kivi-cars/src/components/Filters/Filter/css/Checkbox.css similarity index 100% rename from kivi-cars/src/components/Filters/Filter/Checkbox.css rename to kivi-cars/src/components/Filters/Filter/css/Checkbox.css diff --git a/kivi-cars/src/components/Filters/Filter/DoubleFilter.css b/kivi-cars/src/components/Filters/Filter/css/DoubleFilter.css similarity index 100% rename from kivi-cars/src/components/Filters/Filter/DoubleFilter.css rename to kivi-cars/src/components/Filters/Filter/css/DoubleFilter.css diff --git a/kivi-cars/src/components/Filters/Filter/Filter.css b/kivi-cars/src/components/Filters/Filter/css/Filter.css similarity index 100% rename from kivi-cars/src/components/Filters/Filter/Filter.css rename to kivi-cars/src/components/Filters/Filter/css/Filter.css diff --git a/kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css b/kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css new file mode 100644 index 0000000..dadf9b9 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/kivi-cars/src/components/Filters/Standard-filters.js b/kivi-cars/src/components/Filters/Standard-filters.js index 281302b..140508d 100644 --- a/kivi-cars/src/components/Filters/Standard-filters.js +++ b/kivi-cars/src/components/Filters/Standard-filters.js @@ -1,7 +1,9 @@ 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 Cubes from "../../data/cubes"; import Type from "../../data/type"; @@ -18,7 +20,7 @@ import Kilometers from "../../data/kilometers"; const StandardFilters = (props) => { - const {filtersData, setFiltersData} = props.data; + const {filters, setFilters} = props.data; const [brandIndex, setBrandIndex] = useState(0); let index = 0; @@ -27,8 +29,9 @@ const StandardFilters = (props) => { }) useEffect(() => { - if(filtersData.Marka)setBrandIndex(brands.indexOf(filtersData.Marka)) - }, [filtersData]) + if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka)) + console.log("filters", filters) + }, [filters]) const models = Cars[brandIndex].models @@ -42,39 +45,41 @@ const StandardFilters = (props) => { "tipovi": models } - - - - const data = [Fuel, Type] const data1 = [Transmission, Drive, Condition, Doors] const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats] - + const data3 = [Fuel, Type] return(
- - + + - {data.map(item => { + {data3.map(item => { index += 1; return( - + ) })} {data2.map(item => { index += 1; return( - + ) })} {data1.map(item => { index += 1; return( - + ) })} + +
+ + + +
) } diff --git a/kivi-cars/src/components/FiltersNavbar/FiltersNav.js b/kivi-cars/src/components/FiltersNavbar/FiltersNav.js index b7a6e01..3b498d5 100644 --- a/kivi-cars/src/components/FiltersNavbar/FiltersNav.js +++ b/kivi-cars/src/components/FiltersNavbar/FiltersNav.js @@ -9,10 +9,10 @@ const FiltersNav = (props) => {
diff --git a/kivi-cars/src/components/Location/LocationFilter.css b/kivi-cars/src/components/Location/LocationFilter.css index e69de29..c93dcad 100644 --- a/kivi-cars/src/components/Location/LocationFilter.css +++ b/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; +} + diff --git a/kivi-cars/src/components/Location/LocationFilter.js b/kivi-cars/src/components/Location/LocationFilter.js index 6252789..1695769 100644 --- a/kivi-cars/src/components/Location/LocationFilter.js +++ b/kivi-cars/src/components/Location/LocationFilter.js @@ -1,44 +1,39 @@ -import React, {useEffect, useState} from "react"; +import React from "react"; import './LocationFilter.css'; import Location from "../../data/location"; -const LocationFilter = () => { +const LocationFilter = (props) => { - const [locationData, setLocationData] = useState({}); + const {setLocationData} = props.data; const clickHandler = (e) => { - setLocationData( prevData => ({ - ...prevData, - [e.target.name]: e.target.value - })) + setLocationData( prevData => ( { + ...prevData, + "kanton": e.target.value + })) } - console.log(locationData) - - useEffect(() => { - console.log(locationData) - },[locationData]) return ( -
- - clickHandler(e) }> {Location.entiteti[0].kantoni.map((kanton, i) => { return( - + ) })} {Location.entiteti[1].kantoni.map((kanton, i) => { return( - + ) })} - +
) diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js index 7a6e4c6..75deea6 100644 --- a/kivi-cars/src/containers/App.js +++ b/kivi-cars/src/containers/App.js @@ -12,12 +12,12 @@ import LinkR from '../data/routes'; function App() { - const info = 'Dobrodosli na stranicu kivi!' - const [filtersData, setFiltersData] = useState({}) + // const info = 'Dobrodosli na stranicu kivi!' + const [data, setData] = useState({}) useEffect(() => { - console.log(filtersData) - }, [filtersData]) + console.log(data) + }, [data]) return ( @@ -26,11 +26,11 @@ function App() { } /> - }/> - }/> - }/> - }/> - }/> + }/> + }/> + }/> + }/> + }/> diff --git a/kivi-cars/src/containers/CategoryPage.js b/kivi-cars/src/containers/CategoryPage.js index dba91bf..38f098b 100644 --- a/kivi-cars/src/containers/CategoryPage.js +++ b/kivi-cars/src/containers/CategoryPage.js @@ -5,7 +5,7 @@ import './css/CategoryPage.css' function CategoryPage(props) { - const {filtersData, setFiltersData} = props.data + const {data, setData} = props.data const naslov = 'IZABERITE KATEGORIJU' return ( @@ -13,7 +13,7 @@ function CategoryPage(props) {
- +
); diff --git a/kivi-cars/src/containers/DataContext.js b/kivi-cars/src/containers/DataContext.js deleted file mode 100644 index d6a8449..0000000 --- a/kivi-cars/src/containers/DataContext.js +++ /dev/null @@ -1,3 +0,0 @@ -import {createContext} from 'react'; - - diff --git a/kivi-cars/src/containers/EmailPage.js b/kivi-cars/src/containers/EmailPage.js index 69ed034..70d02a8 100644 --- a/kivi-cars/src/containers/EmailPage.js +++ b/kivi-cars/src/containers/EmailPage.js @@ -1,5 +1,4 @@ -import {useContext, useState, useEffect} from 'react'; -import { DataContext } from './DataContext'; +import { useState, useEffect} from 'react'; import './css/EmailPage.css' import Header from '../components/Header/Header'; import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar'; @@ -10,7 +9,7 @@ import { Link } from 'react-router-dom'; function EmailPage(props) { - const {filtersData, setFiltersData} = props.data + const {data, setData} = props.data const [error, setError] = useState(false) @@ -30,9 +29,9 @@ function EmailPage(props) { const emailCheck = (e, ec) => { if(e !== "" && e === ec){ setError(false) - setFiltersData(prevData => ({ + setData(prevData => ({ ...prevData, - "email": state.email + "Email": state.email })) return error }else { @@ -60,8 +59,8 @@ function EmailPage(props) {

Slanje obavještenja

- - + +
diff --git a/kivi-cars/src/containers/FiltersPage.js b/kivi-cars/src/containers/FiltersPage.js index 63a6ad3..b8a56fa 100644 --- a/kivi-cars/src/containers/FiltersPage.js +++ b/kivi-cars/src/containers/FiltersPage.js @@ -1,4 +1,4 @@ -import {React, useState} from "react"; +import {React, useEffect, useState} from "react"; import './css/FiltersPage.css'; import Header from "../components/Header/Header"; import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar"; @@ -10,13 +10,22 @@ const FiltersPage = (props) => { const naslov = "Filteri za pretrazivanje" const [toggle, setToggle] = useState(true) - const {filtersData, setFiltersData} = props.data + const [filters, setFilters] = useState({}); + const {data, setData} = props.data + + useEffect(() => { + setData( prevData => ({ + ...prevData, + "Filters": filters + })) + }, [filters]) + const showFilters = (toggle) => { if(toggle){ - return + return } - return ; + return ; } return( diff --git a/kivi-cars/src/containers/LocationPage.js b/kivi-cars/src/containers/LocationPage.js index 5cd50d1..550c4ad 100644 --- a/kivi-cars/src/containers/LocationPage.js +++ b/kivi-cars/src/containers/LocationPage.js @@ -1,25 +1,85 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import './css/LocationPage.css'; import Header from "../components/Header/Header"; -import Filter from '../components/Filters/Filter/Filter'; 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 {filtersData, setFiltersData} = props.data + 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 ( -
+
- - - + +
+ {locationInfo.gradovi.map((grad) => { + id += 1 + return( + + ) + })} +
+ + +
); } diff --git a/kivi-cars/src/containers/css/LocationPage.css b/kivi-cars/src/containers/css/LocationPage.css index afafd28..5de0fe7 100644 --- a/kivi-cars/src/containers/css/LocationPage.css +++ b/kivi-cars/src/containers/css/LocationPage.css @@ -1,4 +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; + } } \ No newline at end of file diff --git a/kivi-cars/src/data/cars-brands.js b/kivi-cars/src/data/cars-brands.js index bfcd932..09b7fcb 100644 --- a/kivi-cars/src/data/cars-brands.js +++ b/kivi-cars/src/data/cars-brands.js @@ -1,6 +1,6 @@ const Cars = [ - {"brand":"Izaberite", - "models": ["Izaberite"] + {"brand":"Odaberite", + "models": ["Odaberite"] }, {"brand":"Alfa Romeo", "models": [ diff --git a/kivi-cars/src/data/fuel.js b/kivi-cars/src/data/fuel.js index add6283..97cdce2 100644 --- a/kivi-cars/src/data/fuel.js +++ b/kivi-cars/src/data/fuel.js @@ -4,7 +4,7 @@ const Fuel = { "Odaberite", "Dizel", "Benzin", - "Plin", + "Benzin/Plin", "Cng", "Hybrid", "Elektro" diff --git a/kivi-cars/src/data/location.js b/kivi-cars/src/data/location.js index 3671bd3..a277405 100644 --- a/kivi-cars/src/data/location.js +++ b/kivi-cars/src/data/location.js @@ -216,7 +216,15 @@ const Location = { } ] }, - {"distrikt":"Distrikt Brcko"} + {"entitet":"Distrikt Brcko", + "kantoni": [ + {"kanton": "Distrikt Brcko", + "gradovi":[ + + ] + } + ] + } ] }