Welcome page

2017-04-21 01:55:13 +02:00
parent 344877beda
commit 8f57f91d32
9 changed files with 290 additions and 112 deletions
--- a/web/dist/index.html
+++ b/web/dist/index.html
@@ -11,6 +11,7 @@
    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="welcome.css">
  </head>
  <body>
    <div id="root">
--- a/web/dist/static/images/sa-bg.jpg
+++ b/web/dist/static/images/sa-bg.jpg
--- a/web/dist/welcome.css
+++ b/web/dist/welcome.css
@@ -0,0 +1,65 @@
+
+
+/*.welcome-container div {*/
+  /*border: 1px solid red;*/
+/*}*/
+
+.welcome-container h1 {
+  font-size: 2em;
+  text-align: center;
+}
+
+.welcome-container h2 {
+
+  padding-bottom: 25px;
+    color: #2d3138;
+    font-size: 26px;
+    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-position: center;*/
+  -moz-filter: blur(5px);
+  -o-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+   content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: -1;
+
+  width: 100%;
+  height: 100%;
+}
+
+.welcome-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  margin-left: 20px;
+  margin-right: 20px;
+  height: 100%;
+  padding: 100px;
+}
+
+.welcome-content {
+  /*height: 100%;*/
+  margin: 0 auto;
+  width: 600px;
+  background-color: hsla(0,0%,100%,.95);
+    box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
+    padding: 50px;
+}
+
+.welcome-content .gmaps-places-input-welcome {
+  
+  width: 100%;
+}
--- a/web/src/components/ContactModal.js
+++ b/web/src/components/ContactModal.js
@@ -1,28 +1,27 @@
-import React from 'react'
-import {saveContactRequest} from '../lib/api'
+import React from "react";
+import { saveContactRequest } from "../lib/api";

 export default class ContactModal extends React.Component {
-  onContactCloseClick (e) {
-    e.preventDefault()
+  onContactCloseClick(e) {
+    e.preventDefault();

    this.props.dispatch({
-      type: 'CLOSE_CONTACT'
-    })
+      type: "CLOSE_CONTACT"
+    });
  }

-  onSubmit (e) {
-    e.preventDefault()
-    const {name, email, message, phone, alert} = this.props.contact;
+  onSubmit(e) {
+    e.preventDefault();
+    const { name, email, message, phone, alert } = this.props.contact;

    if (!name || !email) {
      this.props.dispatch({
-        type: 'INVALID_CONTACT'
-      })
+        type: "INVALID_CONTACT"
+      });
    } else {
-
      this.props.dispatch({
-        type: 'SUBMIT_CONTACT_START'
-      })
+        type: "SUBMIT_CONTACT_START"
+      });

      saveContactRequest(this.props.listingId, {
        name,
@@ -30,39 +29,42 @@ export default class ContactModal extends React.Component {
        phone,
        message,
        alert
-      }).then(l => l.text()).then(res => {
-        this.props.dispatch({
-          type: 'SUBMIT_CONTACT_END'
+      })
+        .then(l => l.text())
+        .then(res => {
+          this.props.dispatch({
+            type: "SUBMIT_CONTACT_END"
+          });
+        })
+        .catch(e => {
+          // TODO: should we have a global view for rendering errors
+          console.error(e);
        });
-      }).catch(e => {
-        // TODO: should we have a global view for rendering errors
-        console.error(e)
-      });
    }
  }

-  onFieldChange (field, e) {
+  onFieldChange(field, e) {
    this.props.dispatch({
-      type: 'UPDATE_CONTACT_INFO',
+      type: "UPDATE_CONTACT_INFO",
      action: {
        field,
        value: e.target.value
      }
-    })
+    });
  }

-  onAlertToggle (e) {
-    const alert = this.props.contact.alert
+  onAlertToggle(e) {
+    const alert = this.props.contact.alert;
    this.props.dispatch({
-      type: 'UPDATE_CONTACT_INFO',
+      type: "UPDATE_CONTACT_INFO",
      action: {
-        field: 'alert',
+        field: "alert",
        value: !alert
      }
-    })
+    });
  }

-  render () {
+  render() {
    const {
      message,
      email,
@@ -72,10 +74,10 @@ export default class ContactModal extends React.Component {
      nameInvalid,
      emailInvalid,
      sending
-    } = this.props.contact
+    } = this.props.contact;

-    const nameValidationClass = nameInvalid ? 'validation-failed' : ''
-    const emailValidationClass = emailInvalid ? 'validation-failed' : ''
+    const nameValidationClass = nameInvalid ? "validation-failed" : "";
+    const emailValidationClass = emailInvalid ? "validation-failed" : "";

    return (
      <div className="modal contact-form">
@@ -94,7 +96,7 @@ export default class ContactModal extends React.Component {
              <input
                value={name}
                className={nameValidationClass}
-                onChange={this.onFieldChange.bind(this, 'name')}
+                onChange={this.onFieldChange.bind(this, "name")}
                placeholder="Ime i prezime"
                type="text"
              />
@@ -103,32 +105,32 @@ export default class ContactModal extends React.Component {
              <input
                value={email}
                className={emailValidationClass}
-                onChange={this.onFieldChange.bind(this, 'email')}
+                onChange={this.onFieldChange.bind(this, "email")}
                placeholder="Email adresa"
                type="email"
                name="email"
              />
              <input
                value={phone}
-                onChange={this.onFieldChange.bind(this, 'phone')}
+                onChange={this.onFieldChange.bind(this, "phone")}
                placeholder="Telefon (opcionalno)"
                type="text"
              />
            </div>
            <div className="contact-form-message">
              <textarea
-                onChange={this.onFieldChange.bind(this, 'message')}
+                onChange={this.onFieldChange.bind(this, "message")}
                value={message}
              />
            </div>
            <div className="contact-form-alert noselect">
              <label>
-              <input
-                type="checkbox"
-                onChange={this.onAlertToggle.bind(this)}
-                checked={doAlert}
-              />
-              Javi mi kada se objavi sličan oglas
+                <input
+                  type="checkbox"
+                  onChange={this.onAlertToggle.bind(this)}
+                  checked={doAlert}
+                />
+                Javi mi kada se objavi sličan oglas
              </label>
            </div>
            <div className="contact-form-footer">
@@ -137,6 +139,6 @@ export default class ContactModal extends React.Component {
          </form>
        </div>
      </div>
-    )
+    );
  }
 }
--- a/web/src/components/Filters.js
+++ b/web/src/components/Filters.js
@@ -1,94 +1,94 @@
-import React from 'react'
-import {formatFilterNumber} from '../lib/helpers'
+import React from "react";
+import { formatFilterNumber } from "../lib/helpers";
 import {
  CATEGORY_FLAT,
  CATEGORY_HOUSE,
  CATEGORY_OFFICE,
  CATEGORY_LAND
-} from '../../../crawler/enums'
+} from "../../../crawler/enums";

 export default class Filters extends React.Component {
-  onCloseClick (e) {
+  onCloseClick(e) {
    if (this.props.onClose) {
-      this.props.onClose()
+      this.props.onClose();
    }
  }

-  onMaxPriceChange (e) {
-    const maxPrice = e.target.value
+  onMaxPriceChange(e) {
+    const maxPrice = e.target.value;

    this.props.dispatch({
-      type: 'SET_MAX_PRICE',
-      action: {maxPrice}
-    })
+      type: "SET_MAX_PRICE",
+      action: { maxPrice }
+    });
  }

-  onMinPriceChange (e) {
-    const minPrice = e.target.value
+  onMinPriceChange(e) {
+    const minPrice = e.target.value;

    this.props.dispatch({
-      type: 'SET_MIN_PRICE',
-      action: {minPrice}
-    })
+      type: "SET_MIN_PRICE",
+      action: { minPrice }
+    });
  }

-  onMaxSizeChange (e) {
+  onMaxSizeChange(e) {
    this.props.dispatch({
-      type: 'SET_MAX_SIZE',
-      action: {maxSize: e.target.value}
-    })
+      type: "SET_MAX_SIZE",
+      action: { maxSize: e.target.value }
+    });
  }

-  onMinSizeChange (e) {
+  onMinSizeChange(e) {
    this.props.dispatch({
-      type: 'SET_MIN_SIZE',
-      action: {minSize: e.target.value}
-    })
+      type: "SET_MIN_SIZE",
+      action: { minSize: e.target.value }
+    });
  }

-  onRoomsClick (rooms) {
+  onRoomsClick(rooms) {
    this.props.dispatch({
-      type: 'UPDATE_ROUTE',
+      type: "UPDATE_ROUTE",
      action: {
-        params: {rooms}
+        params: { rooms }
      }
-    })
+    });

-    this.props.dispatch({type: 'SET_ROOMS', action: {rooms}})
+    this.props.dispatch({ type: "SET_ROOMS", action: { rooms } });
  }

-  onCategoryClick (category) {
+  onCategoryClick(category) {
    this.props.dispatch({
-      type: 'UPDATE_ROUTE',
+      type: "UPDATE_ROUTE",
      action: {
-        params: {category}
+        params: { category }
      }
-    })
+    });

-    this.props.dispatch({type: 'SET_CATEGORY', action: {category}})
+    this.props.dispatch({ type: "SET_CATEGORY", action: { category } });
  }

-  onRefreshClick (closeFilters) {
-    this.updateSearch()
+  onRefreshClick(closeFilters) {
+    this.updateSearch();

    if (closeFilters) {
      this.props.dispatch({
-        type: 'CLOSE_FILTERS'
-      })
+        type: "CLOSE_FILTERS"
+      });
    }
  }

-  onKeyPress (e) {
-    if (e.key === 'Enter') {
-      this.updateSearch()
+  onKeyPress(e) {
+    if (e.key === "Enter") {
+      this.updateSearch();
    }
  }

-  updateSearch () {
-    const {minPrice, maxPrice, minSize, maxSize} = this.props.filters
+  updateSearch() {
+    const { minPrice, maxPrice, minSize, maxSize } = this.props.filters;

    this.props.dispatch({
-      type: 'UPDATE_ROUTE',
+      type: "UPDATE_ROUTE",
      action: {
        params: {
          minPrice,
@@ -97,20 +97,20 @@ export default class Filters extends React.Component {
          maxSize
        }
      }
-    })
-    this.props.dispatch({type: 'UPDATE_SEARCH'})
+    });
+    this.props.dispatch({ type: "UPDATE_SEARCH" });
  }

-  onResetSearch (e) {
+  onResetSearch(e) {
    this.props.dispatch({
-      type: 'RESET_FILTERS'
-    })
+      type: "RESET_FILTERS"
+    });
  }

-  render () {
-    const {filters} = this.props
-    const selectedRooms = val => filters.rooms[val] ? 'selected' : ''
-    const selectedCategory = val => filters.category[val] ? 'selected' : ''
+  render() {
+    const { filters } = this.props;
+    const selectedRooms = val => filters.rooms[val] ? "selected" : "";
+    const selectedCategory = val => filters.category[val] ? "selected" : "";

    return (
      <div className="filters">
@@ -135,7 +135,7 @@ export default class Filters extends React.Component {
              onChange={this.onMinPriceChange.bind(this)}
              value={formatFilterNumber(filters.minPrice)}
            />
-            {' '}
+            {" "}
            DO

            <input
@@ -206,7 +206,7 @@ export default class Filters extends React.Component {
            />

            DO
-            {' '}
+            {" "}
            <input
              onKeyPress={this.onKeyPress.bind(this)}
              value={formatFilterNumber(filters.maxSize)}
@@ -247,8 +247,8 @@ export default class Filters extends React.Component {
              3
            </div>
            <div
-              onClick={this.onRoomsClick.bind(this, '4+')}
-              className={`filter-btn property-rooms-btn ${selectedRooms('4+')}`}
+              onClick={this.onRoomsClick.bind(this, "4+")}
+              className={`filter-btn property-rooms-btn ${selectedRooms("4+")}`}
            >
              4+
            </div>
@@ -262,12 +262,18 @@ export default class Filters extends React.Component {
        </div>
        <div className="clear-both" />
        <div className="filter-bottom">
-          <div onClick={this.onResetSearch.bind(this)} className="filter-btn">Poništi</div>
-          <div onClick={this.onRefreshClick.bind(this, true)}
-            className="filter-btn confirm">Potvrdi</div>
-        
+          <div onClick={this.onResetSearch.bind(this)} className="filter-btn">
+            Poništi
+          </div>
+          <div
+            onClick={this.onRefreshClick.bind(this, true)}
+            className="filter-btn confirm"
+          >
+            Potvrdi
+          </div>
+
        </div>
      </div>
-    )
+    );
  }
 }
--- a/web/src/components/Main.js
+++ b/web/src/components/Main.js
@@ -630,7 +630,7 @@ class Main extends React.Component {
        </div>

        <div id="left" style={leftStyle} className={leftClass}>
-          {this.state.mobileView === 'LIST' && !this.state.listingDetails  &&  
+          {this.state.mobileView === 'LIST' && !this.state.listingDetails  &&
          <div className={ this.state.filtersOpen ? "map-list-view hide": "map-list-view" }>
        <Listings
          sort={this.state.sort}
--- a/web/src/components/Welcome.js
+++ b/web/src/components/Welcome.js
@@ -0,0 +1,81 @@
+import React from 'react'
+import { pacSelectFirst } from '../helpers/googleMaps'
+
+export default class Welcome extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      type: 'SALE'
+    }
+  }
+
+  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'
+    })
+  }
+
+  onRentClick () {
+    this.setState({
+      type: 'RENT'
+    })
+  }
+
+  render () {
+    return (
+      <div>
+      <div className='welcome-container-bg'>
+      </div>
+      <div className='welcome-container'>
+
+        <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>
+
+      </div>
+    </div>
+    )
+  }
+}
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import {render} from 'react-dom'
 import Main from './components/Main'
+import Welcome from './components/Welcome'

 const getInitialState = url => {
-  console.log('PARSING URL:', url)
  const params = window.location.search.substr(1).split('&')

  const initialState = {
@@ -13,16 +13,15 @@ const getInitialState = url => {

  for (const param of params) {
    const [key, value] = param.split('=')
-    console.log('analyzing param ', key, value)
    if (key === 'rooms' && value !== '') {
-      console.log("IT's ROOMS")
+      initialState.rooms = {}
      value.split(',').forEach(k => {
-        console.log("IT's ROOMS", k)
        initialState.rooms[parseInt(k)] = true
      })
    }

    if (key === 'category' && value !== '') {
+      initialState.category = {}
      value.split(',').forEach(k => {
        initialState.category[parseInt(k)] = true
      })
@@ -40,6 +39,10 @@ const getInitialState = url => {
      initialState.listingId = value
    }

+    if (key === 'type') {
+      initialState.type = value
+    }
+
    if (key === 'zoom') {
      initialState.zoom = parseInt(value)
    }
@@ -52,6 +55,25 @@ const getInitialState = url => {
  return initialState
 }

-const main = <Main initialState={getInitialState(window.location)} />
+const root = document.getElementById('root')
+const initialState = getInitialState(window.location)

-render(main, document.getElementById('root'))
+const renderMain = (additionalState = {}) => {
+  const main = <Main initialState={{...initialState, ...additionalState}} />
+  render(main, root)
+}
+
+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)
+} else {
+  renderMain()
+}
--- a/web/src/lib/api.js
+++ b/web/src/lib/api.js
@@ -71,3 +71,4 @@ export const loadSeen = id => {
  return seen
  //return seen.findIndex(s => s === id) !== -1;
 }
+