Merge branch 'standard_filters' into 'main'

add standard filters component

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

kivi-cars/public/manifest.json

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

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

@@ -2,7 +2,7 @@ import React from "react";
 import "./Filters.css";
 import Cars from "../../data/cars";
 
-const Filters = () => {
+const AdvancedFilters = () => {
 
     return(
         <div className="filters-container">
@@ -11,4 +11,4 @@ const Filters = () => {
     )
 }
 
-export default Filters
+export default AdvancedFilters

kivi-cars/src/components/Filters/Filter/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/DoubleFilter.js

@@ -0,0 +1,23 @@
+import React from "react";
+import "./DoubleFilter.css";
+
+const DoubleFilter = (props) => {
+
+    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" className="filter-number" defaultValue={props.fields.default} type="number" min={props.fields.min} max={props.fields.max} step={props.fields.step} />
+                </div>
+                <div className="filter"> 
+                <label htmlFor="do" className="filter-info">Do</label>
+                <input placeholder="Unesite" id="do" className="filter-number" defaultValue={props.fields.default} type="number" min={props.fields.min} max={props.fields.max} step={props.fields.step} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DoubleFilter;

kivi-cars/src/components/Filters/Filter/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/Filter.js

@@ -1,12 +1,16 @@
 import React from "react";
+import './Filter.css';
 
 const Filter = (props) => {
     return(
-        <div >
-            <select>
-                <option>
-                    
-                </option>
+        <div className="filter-component">
+            <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
+            <select className="dropdown-list" name={props.ime} id={props.ime}>
+                {props.tipovi.map((tip, i) => {
+                    return (
+                        <option key={i} value={tip}>{tip}</option>
+                    )
+                })}
             </select>
         </div>
     )

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

@@ -1,3 +1,16 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.filters-container{
+    width: 90%;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
 
 
 

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

@@ -1 +1,74 @@
-import React from "react";
+import React from "react";
+import "./Filters.css";
+import Cars from "../../data/cars";
+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 Filter from "./Filter/Filter";
+import DoubleFilter from "./Filter/DoubleFilter";
+import Year from "../../data/year";
+import Price from "../../data/price";
+import HorsePower from "../../data/horsepower";
+import Kilowats from "../../data/kilowats";
+
+const StandardFilters = () => {
+
+    let brand_index = 5
+    let index = 0
+
+    const brands = Cars.map(brand => {
+        return brand.brand
+    })
+
+    const models = Cars[brand_index].models
+
+    const Brands = {
+        "ime": "Marka",
+        "tipovi": ["Odaberite", ...brands]
+    }
+
+    const Models = {
+        "ime": "Modeli",
+        "tipovi": ["Odaberite", ...models]
+    }
+
+    
+    const data = [Fuel, Type]
+    const data1 = [Transmission, Drive, Condition, Doors]
+    const data2 = [Price, Year, Cubes, HorsePower, Kilowats]
+        
+
+    return(
+        <div className="filters-container">
+            <Filter ime={Brands.ime} tipovi={Brands.tipovi} />
+            <Filter ime={Models.ime} tipovi={Models.tipovi} />
+
+            {data.map(item => {
+                index += 1;
+                return(
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi}/>
+                )
+            })}
+
+            {data2.map(item => {
+                index += 1;
+                return(
+                    <DoubleFilter key={index} title={item.title} fields={item.fields} />
+                )
+            })}
+            
+            {data1.map(item => {
+                index += 1;
+                return(
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi}/>
+                )
+            })}
+        </div>
+    )
+}
+
+export default StandardFilters

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

@@ -32,10 +32,10 @@
     cursor: pointer;
 }
 
-@media only screen and (max-width: 920px) and (min-width: 541px){
+@media only screen and (min-width: 541px){
     .filters-link {
         line-height: 54px;
-        font-size: 22px;
+        font-size: 26px;
     }
 }
 

kivi-cars/src/containers/App.js

@@ -1,9 +1,19 @@
 import './css/App.css';
-
+import React from 'react';
+import Header from '../components/Header/Header';
+import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import StandardBtn from '../components/Button/StandardBtn';
+import FiltersPage from './FiltersPage';
+  
 
 function App() {
+
+  const info = 'Dobrodosli na stranicu kivi!'
+
   return (
     <div className="App">
+      <FiltersPage />
+
     </div>
   );
 }

kivi-cars/src/containers/FiltersPage.js

@@ -0,0 +1,22 @@
+import React from "react";
+import './css/FiltersPage.css';
+import Header from "../components/Header/Header";
+import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
+import FiltersNav from '../components/Searchfilters/FiltersNav'
+import StandardFilters from "../components/Filters/Standard-filters";
+
+const FiltersPage = () => {
+
+    const naslov = "Filteri za pretrazivanje"
+
+    return(
+        <div className="FiltersPage">
+            <Header header={naslov}/>
+            <ButtonsToolbar />
+            <FiltersNav />
+            <StandardFilters />
+        </div>
+    )
+}
+
+export default FiltersPage;

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

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

kivi-cars/src/data/cars.js

@@ -1365,7 +1365,7 @@ const Cars = [
       ]
     },
     {
-      "brand": "smart",
+      "brand": "Smart",
       "models": [
         "fortwo"
       ]

kivi-cars/src/data/color.js

@@ -1,6 +1,7 @@
 const Color = {
     "ime": "Boja",
     "tipovi": [
+        "Odaberite",
         "Bež",
         "Bijela",
         "Bordo",

kivi-cars/src/data/condition.js

@@ -1,6 +1,7 @@
 const Condition = {
     "ime": "Stanje",
     "tipovi": [
+        "Odaberite",
         "Novo",
         "Polovno",
         "Udareno"

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

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

kivi-cars/src/data/drive.js

@@ -1,6 +1,7 @@
 const Drive = {
     "ime" : "Pogon",
     "tipovi": [
+        "Odaberite",
         "Prednji",
         "Zadnji",
         "Sva četiri"

kivi-cars/src/data/fuel.js

@@ -1,6 +1,7 @@
 const Fuel = {
     "ime": "Gorivo",
     "tipovi": [
+        "Odaberite",
         "Dizel",
         "Benzin",
         "Plin",

kivi-cars/src/data/gearbox.js

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

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/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

@@ -1,6 +1,7 @@
 const Lights = {
     "ime": "Svjetla",
     "tipovi": [
+        "Odaberite",
         "Halogena",
         "Xenon",
         "Led",

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

@@ -1,6 +1,7 @@
 const Seats = {
     "ime": "Sjedišta",
     "tipovi": [
+        "Odaberite",
         "1",
         "2",
         "3",

kivi-cars/src/data/sensors.js

@@ -1,6 +1,7 @@
 const Sensors = {
     "ime": "Senzori",
     "tipovi": [
+        "Odaberite",
         "naprijed",
         "nazad",
         "naprijed i nazad",

kivi-cars/src/data/transmission.js

@@ -1,9 +1,10 @@
 const Transmission = {
     "ime": "Transmisija",
     "tipovi": [
-        "automatski mjenjač",
-        "manuelni mjenjač",
-        "polu-automatski mjenjač"
+        "Odaberite",
+        "Automatski mjenjač",
+        "Manuelni mjenjač",
+        "Polu-automatski mjenjač"
     ]
 }
 

kivi-cars/src/data/type.js

@@ -1,6 +1,7 @@
 const Type = {
     "ime": "Vrsta vozila",
     "tipovi": [
+        "Odaberite",
         "Karavan",
         "Limuzina",
         "Monovolumen",

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',