diff --git a/web/dist/static/images/rent_0.png b/web/dist/static/images/rent_0.png new file mode 100644 index 0000000..758d0ac Binary files /dev/null and b/web/dist/static/images/rent_0.png differ diff --git a/web/dist/static/images/rent_0_mobile.png b/web/dist/static/images/rent_0_mobile.png new file mode 100644 index 0000000..81df224 Binary files /dev/null and b/web/dist/static/images/rent_0_mobile.png differ diff --git a/web/dist/static/images/rent_1.png b/web/dist/static/images/rent_1.png new file mode 100644 index 0000000..983cc98 Binary files /dev/null and b/web/dist/static/images/rent_1.png differ diff --git a/web/dist/static/images/rent_1_mobile.png b/web/dist/static/images/rent_1_mobile.png new file mode 100644 index 0000000..0f19660 Binary files /dev/null and b/web/dist/static/images/rent_1_mobile.png differ diff --git a/web/dist/static/images/sale_0.png b/web/dist/static/images/sale_0.png new file mode 100644 index 0000000..e3291dd Binary files /dev/null and b/web/dist/static/images/sale_0.png differ diff --git a/web/dist/static/images/sale_0_mobile.png b/web/dist/static/images/sale_0_mobile.png new file mode 100644 index 0000000..fafd92f Binary files /dev/null and b/web/dist/static/images/sale_0_mobile.png differ diff --git a/web/dist/static/images/sale_1.png b/web/dist/static/images/sale_1.png new file mode 100644 index 0000000..ebf6c62 Binary files /dev/null and b/web/dist/static/images/sale_1.png differ diff --git a/web/dist/static/images/sale_1_mobile.png b/web/dist/static/images/sale_1_mobile.png new file mode 100644 index 0000000..2cf03a8 Binary files /dev/null and b/web/dist/static/images/sale_1_mobile.png differ diff --git a/web/dist/welcome.css b/web/dist/welcome.css index 2e48e85..ef9fea8 100644 --- a/web/dist/welcome.css +++ b/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%; + } } diff --git a/web/src/components/Main.js b/web/src/components/Main.js index 0540f07..2ab724b 100644 --- a/web/src/components/Main.js +++ b/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 }) diff --git a/web/src/components/Welcome.js b/web/src/components/Welcome.js index 68bb794..cf34ae1 100644 --- a/web/src/components/Welcome.js +++ b/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 (
@@ -63,15 +47,11 @@ export default class Welcome extends React.Component {

KIVI

Pronađi svoj novi dom!

- - - +
+ + +
+
diff --git a/web/src/index.js b/web/src/index.js index 8af6b78..eb8694b 100644 --- a/web/src/index.js +++ b/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 =
- render(main, root) -} + const main =
; + 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 = - 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 = ; + render (welcome, root); } else { - renderMain() + renderMain (); } -*/ diff --git a/web/src/lib/api.js b/web/src/lib/api.js index 572eb5c..e781a4e 100644 --- a/web/src/lib/api.js +++ b/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, diff --git a/web/webpack.config.js b/web/webpack.config.js index 790a447..3a8f7c2 100644 --- a/web/webpack.config.js +++ b/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: [ {