welcome popeup + mobile friendly

web/dist/welcome.css

@@ -5,25 +5,25 @@
 /*}*/
 
 .welcome-container h1 {
-  font-size: 2em;
+  font-size: 1.2em;
   text-align: center;
 }
 
 .welcome-container h2 {
 
-  padding-bottom: 25px;
-    color: #2d3138;
-    font-size: 26px;
-    font-weight: 200;
-    text-align: center;
-    letter-spacing: .59px;
+  /*padding-bottom: 25px;*/
+  color: #2d3138;
+  font-size: 1em;
+  font-weight: 200;
+  text-align: center;
+  letter-spacing: .59px;
 }
 
-
 .welcome-container-bg {
   /*background-color: rgb(92, 192, 99);*/
-  background-image: url('static/map.jpg');
-  /*background-image: url('static/images/sa-bg.jpg');*/
+  /*background-image: url('static/map.jpg');*/
+  background-image: url('static/images/sa-bg.jpg');
+  background-size: auto 100%;
   /*background-position: center;*/
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
@@ -40,26 +40,116 @@
 }
 
 .welcome-container {
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
+  top:0;
+  bottom:0;
   z-index: 0;
-  margin-left: 20px;
-  margin-right: 20px;
+  /*margin-left: 20px;
+  margin-right: 20px;*/
   height: 100%;
-  padding: 100px;
+  /*padding: 100px;*/
 }
 
 .welcome-content {
   /*height: 100%;*/
-  margin: 0 auto;
-  width: 600px;
+  /*margin: 0 auto;*/
+  width: 240px;
   background-color: hsla(0,0%,100%,.95);
-    box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
-    padding: 50px;
+  box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top:40%;
+  /*padding: 50px;*/
 }
 
-.welcome-content .gmaps-places-input-welcome {
-  
-  width: 100%;
+.buy-button {
+  height: 80px;
+  width: 80px;
+  background:url('static/images/sale_1_mobile.png') no-repeat;
+  background-size: contain;
+  border: none;
+  margin-left: 10%;
+  margin-right: 5%;
+}
+
+.rent-button{
+  height: 80px;
+  width: 80px;
+  background:url('static/images/rent_0_mobile.png') no-repeat;
+  background-size: contain;
+  border: none;
+  margin-left: 5%;
+}
+
+.search-button{
+  background-color: #b6d53b;
+  margin: 10px;
+  border: none;
+  text-align: center;
+  font-size: 1em;
+  width: 90%;
+  margin-left:5%;
+  margin-right: 5%;
+}
+
+@media (min-width: 550px) {
+
+  .welcome-container h1 {
+    font-size: 2em;
+    text-align: center;
+  }
+  
+  .welcome-container h2 {
+  
+    /*padding-bottom: 25px;*/
+    color: #2d3138;
+    font-size: 1.4em;
+    font-weight: 200;
+    text-align: center;
+    letter-spacing: .59px;
+  }
+
+  .welcome-content {
+    /*height: 100%;*/
+    /*margin: 0 auto;*/
+    width: 500px;
+    background-color: hsla(0,0%,100%,.95);
+    box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
+    margin-left: auto;
+    margin-right: auto;
+    margin-top:10%;
+    /*padding: 50px;*/
+  }
+
+  .buy-button {
+    height: 150px;
+    width: 150px;
+    background:url('static/images/sale_1_mobile.png') no-repeat;
+    background-size: contain;
+    border: none;
+    margin-left: 15%;
+    margin-right: 5%;
+  }
+  
+  .rent-button{
+    height: 150px;
+    width: 150px;
+    background:url('static/images/rent_0_mobile.png') no-repeat;
+    background-size: contain;
+    border: none;
+    margin-left: 5%;
+  }
+
+  .search-button{
+    background-color: #b6d53b;
+    margin: 10px;
+    border: none;
+    text-align: center;
+    font-size: 1.4em;
+    width: 90%;
+    margin-left:5%;
+    margin-right: 5%;
+  }
 }

web/src/components/Main.js

@@ -22,7 +22,8 @@ class Main extends React.Component {
       filters: {
         rooms: {},
         category: {},
-        status : {}
+        status : {},
+        adType: 0
       },
       mobileView: 'MAP',
       contact: {
@@ -34,6 +35,8 @@ class Main extends React.Component {
       }
     }
 
+    console.log("Props : ");
+    console.log(props.initialState);
     if (props.initialState) {
       props.initialState.sort = props.initialState.sort || state.sort
       state.filters.rooms = props.initialState.rooms
@@ -49,6 +52,7 @@ class Main extends React.Component {
       state.filters.maxSize = props.initialState.maxSize
       state.filters.minPrice = props.initialState.minPrice
       state.filters.maxPrice = props.initialState.maxPrice
+      state.filters.adType = props.initialState.adType
     }
 
     this.state = state
@@ -234,7 +238,8 @@ class Main extends React.Component {
       maxSize,
       minPrice,
       maxPrice,
-      category
+      category,
+      adType
     } = this.state.filters
 
     const bounds = map.getBounds()
@@ -246,6 +251,7 @@ class Main extends React.Component {
       minPrice,
       maxPrice,
       category,
+      adType,
       page: this.state.page,
       pins: true
     })
@@ -404,7 +410,8 @@ class Main extends React.Component {
       maxSize,
       minPrice,
       maxPrice,
-      category
+      category,
+      adType
     } = this.state.filters
 
     const bounds = map.getBounds()
@@ -416,6 +423,7 @@ class Main extends React.Component {
       minPrice,
       maxPrice,
       category,
+      adType,
       page: this.state.page,
       sort: this.state.sort
     })

web/src/components/Welcome.js

@@ -1,59 +1,43 @@
 import React from 'react'
-import { pacSelectFirst } from '../helpers/googleMaps'
+import {AD_TYPE_SALE, AD_TYPE_RENT} from '../../../common/enums';
 
 export default class Welcome extends React.Component {
+
   constructor (props) {
     super(props)
 
     this.state = {
-      type: 'SALE'
+      type: AD_TYPE_SALE,
+      buyButtonImg: 'static/images/sale_1_mobile.png',
+      rentButtonImg: 'static/images/rent_0_mobile.png'
     }
   }
 
-  componentDidMount () {
-    const options = {
-      componentRestrictions: { country: 'BA' },
-      types: ['geocode']
-    }
-
-    const input = document.getElementById('gmaps-places-input-welcome')
-    const searchBox = new google.maps.places.Autocomplete(input, options)
-
-    pacSelectFirst(input)
-    input.addEventListener('focus', e => {
-      e.target.value = ''
-    })
-    searchBox.addListener('place_changed', () => {
-      const place = searchBox.getPlace()
-      if (place.geometry.viewport) {
-        const bounds = place.geometry.viewport.toUrlValue()
-        this.props.onSearch({
-          bounds,
-          type: this.state.type
-        })
-      } else {
-        const location = place.geometry.location
-        this.props.onSearch({
-          location,
-          type: this.state.type
-        })
-      }
-    })
-  }
-
   onSaleClick () {
     this.setState({
-      type: 'SALE'
+      type: AD_TYPE_SALE,
+      buyButtonImg: 'static/images/sale_1_mobile.png',
+      rentButtonImg: 'static/images/rent_0_mobile.png'
     })
   }
 
   onRentClick () {
     this.setState({
-      type: 'RENT'
+      type: AD_TYPE_RENT,
+      buyButtonImg: 'static/images/sale_0_mobile.png',
+      rentButtonImg: 'static/images/rent_1_mobile.png'
     })
   }
 
+  onSearchClick () {
+
+  }
+
   render () {
+    let style1 = {
+      background:'url(' + this.state.buyButtonImg + ')',
+      backgrounSize: 'cover'
+    }
     return (
       <div>
       <div className='welcome-container-bg'>
@@ -63,15 +47,11 @@ export default class Welcome extends React.Component {
         <div className='welcome-content'>
         <h1>KIVI</h1>
         <h2>Pronađi svoj novi dom!</h2>
-          <button
-            onClick={this.onSaleClick.bind(this)}>Kupovina</button>
-          <button onClick={this.onRentClick.bind(this)}>Iznajmljivanje</button>
-          <input
-            type='text'
-            placeholder='Unesite adresu, naselje ili grad'
-            className='where-to'
-            id='gmaps-places-input-welcome'
-          />
+        <div>
+          <button className='buy-button' style={{background:"url("+this.state.buyButtonImg+") no-repeat"}} onClick={this.onSaleClick.bind(this)}></button>
+          <button className='rent-button' style={{background:"url("+this.state.rentButtonImg+") no-repeat"}} onClick={this.onRentClick.bind(this)}></button>
+        </div>
+        <button className='search-button' onClick={()=>this.props.onSearch({adType: this.state.type})} >TRAŽI</button>
         </div>
 
       </div>

web/src/index.js

@@ -1,84 +1,84 @@
-import React from 'react'
-import {render} from 'react-dom'
-import Main from './components/Main'
-import Welcome from './components/Welcome'
+import React from 'react';
+import {render} from 'react-dom';
+import Main from './components/Main';
+import Welcome from './components/Welcome';
 
 const getInitialState = url => {
-  const params = window.location.search.substr(1).split('&')
+  const params = window.location.search.substr (1).split ('&');
 
   const initialState = {
     rooms: {},
-    category: {}
-  }
+    category: {},
+  };
 
   for (const param of params) {
-    const [key, value] = param.split('=')
+    const [key, value] = param.split ('=');
     if (key === 'rooms' && value !== '') {
-      initialState.rooms = {}
-      value.split(',').forEach(k => {
-        initialState.rooms[parseInt(k)] = true
-      })
+      initialState.rooms = {};
+      value.split (',').forEach (k => {
+        initialState.rooms[parseInt (k)] = true;
+      });
     }
 
     if (key === 'category' && value !== '') {
-      initialState.category = {}
-      value.split(',').forEach(k => {
-        initialState.category[parseInt(k)] = true
-      })
+      initialState.category = {};
+      value.split (',').forEach (k => {
+        initialState.category[parseInt (k)] = true;
+      });
     }
 
     if (key === 'sort') {
-      initialState.sort = value
+      initialState.sort = value;
     }
 
     if (key === 'bounds') {
-      initialState.bounds = value
+      initialState.bounds = value;
     }
 
     if (key === 'listingId') {
-      initialState.listingId = value
+      initialState.listingId = value;
     }
 
-    if (key === 'type') {
-      initialState.type = value
+    if (key === 'adType') {
+      initialState.adType = value;
     }
 
     if (key === 'zoom') {
-      initialState.zoom = parseInt(value)
+      initialState.zoom = parseInt (value);
     }
 
-    if (['minSize', 'maxSize', 'minPrice', 'maxPrice'].includes(key)) {
-      initialState[key] = parseFloat(value)
+    if (['minSize', 'maxSize', 'minPrice', 'maxPrice'].includes (key)) {
+      initialState[key] = parseFloat (value);
     }
   }
 
-  return initialState
-}
+  return initialState;
+};
 
-const root = document.getElementById('root')
-const initialState = getInitialState(window.location)
+const root = document.getElementById ('root');
+const initialState = getInitialState (window.location);
 
 const renderMain = (additionalState = {}) => {
-  const main = <Main initialState={{...initialState, ...additionalState}} />
-  render(main, root)
-}
+  const main = <Main initialState={{...initialState, ...additionalState}} />;
+  render (main, root);
+};
 
-renderMain()
+//renderMain ();
 
 // disable temp
-/*
-if (Object.keys(initialState).length === 2 &&
-    window.localStorage.getItem('lastLoad') == null) {
-  const onSearch = ({bounds, type, location}) => {
-    window.location = `/?bounds=${bounds}&type=${type}`
-    //renderMain({
-      //bounds,
-      //type
-    //})
-  }
-  const welcome = <Welcome onSearch={onSearch} />
-  render(welcome, root)
+
+if (
+  Object.keys (initialState).length === 2 &&
+  window.localStorage.getItem ('lastLoad') == null
+) {
+  const onSearch = ({adType}) => {
+    
+    console.log("onSearch()");
+    //window.location = `/?adType=${adType}`;
+    renderMain({adType})
+  };
+  const welcome = <Welcome onSearch={onSearch} />;
+  render (welcome, root);
 } else {
-  renderMain()
+  renderMain ();
 }
-*/

web/src/lib/api.js

@@ -37,6 +37,7 @@ export const loadProperties = (
     maxSize = '',
     rooms = {},
     category = {},
+    adType=1,
     page = 1,
     pins = false,
     sort = ''
@@ -50,7 +51,7 @@ export const loadProperties = (
 
   // TODO: handle errors
   //return fetch(process.env.API_URL + '/api/search', {
-  let url = `http://${BASE_URL}:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}&page=${page}&pins=${pins}&sort=${sort}`
+  let url = `http://${BASE_URL}:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&adType=${adType}&category=${allCategories}&page=${page}&pins=${pins}&sort=${sort}`
 
   return fetch(
     url,

web/webpack.config.js

@@ -5,6 +5,12 @@ module.exports = {
     filename: "app.bundle.js",
     publicPath: "http://0.0.0.0:8080/"
   },
+  devServer: {
+    // .. rest of devserver options
+
+    host: '0.0.0.0',
+    disableHostCheck: true
+  },
   module: {
     loaders: [
       {