254 lines
8.9 KiB
JavaScript
254 lines
8.9 KiB
JavaScript
const m = require('mithril')
|
|
|
|
const Combobox = require('./combobox')
|
|
const Constants = require('./consts')
|
|
|
|
const Frontpage = {
|
|
oninit: function(vnode) {
|
|
this.error = ''
|
|
this.showAddLocation = true
|
|
this.form = {
|
|
city: '',
|
|
zip: '',
|
|
street_name: '',
|
|
locations: [
|
|
// 'Hverfisgata, 101 - Reykjavík',
|
|
],
|
|
type: [ true, false, false, false, false ],
|
|
size: [ true, false, false, false, false ],
|
|
rooms: [ true, false, false, false, false ],
|
|
}
|
|
this.values = {
|
|
type: [ 'Alveg sama', 'Einbýli', 'Fjölbýli', 'Rað/Parhús', 'Hæð/Íbuð' ],
|
|
size: [ 'Alveg sama', '0 - 50fm', '50 - 80fm', '80 - 120fm', '120fm +'],
|
|
rooms: [ 'Alveg sama', 'Stúdíó', '2 - 3 herb.', '3 - 4 herb.', '5 + herb.' ],
|
|
}
|
|
this.inputs = {
|
|
zip: null,
|
|
street: null,
|
|
}
|
|
this.cities = Object.keys(Constants.Locations)
|
|
this.zips = Object.keys(Constants.Streets)
|
|
this.streets = []
|
|
},
|
|
|
|
onFormUpdate: function(vnode, key, index, event) {
|
|
if (['city', 'zip', 'street_name'].includes(key)) {
|
|
this.form[key] = event.target.value
|
|
if (key === 'city') {
|
|
this.zips = Constants.Locations[this.form.city] || []
|
|
} else if (key === 'zip') {
|
|
this.streets = Constants.Streets[this.form.zip] || []
|
|
}
|
|
} else if (key === 'type' || key === 'size' || key === 'rooms') {
|
|
if (index > 0) {
|
|
this.form[key][0] = false
|
|
this.form[key][index] = true
|
|
} else {
|
|
for (let i = 1; i < this.form[key].length; i++) {
|
|
this.form[key][i] = false
|
|
}
|
|
this.form[key][0] = true
|
|
}
|
|
}
|
|
console.log(key, event.target.value)
|
|
},
|
|
|
|
onLocationAdd: function(vnode, event) {
|
|
if (!this.form.city) return false
|
|
this.showAddLocation = false
|
|
let entry = this.form.city
|
|
if (this.form.zip) {
|
|
entry = this.form.zip + ' - ' + this.form.city
|
|
}
|
|
if (this.form.street_name) {
|
|
if (entry !== this.form.city) {
|
|
entry = ', ' + entry
|
|
} else {
|
|
entry = ' - ' + entry
|
|
}
|
|
entry = this.form.street_name + entry
|
|
}
|
|
this.form.city = ''
|
|
this.form.zip = ''
|
|
this.form.street_name = ''
|
|
this.form.locations.push(entry)
|
|
this.cities = Object.keys(Constants.Locations)
|
|
this.zips = Object.keys(Constants.Streets)
|
|
this.streets = []
|
|
return false
|
|
},
|
|
|
|
removeLocationIndex: function(index) {
|
|
this.form.locations.splice(index, 1)
|
|
if (!this.form.locations.length) {
|
|
this.showAddLocation = true
|
|
}
|
|
return false
|
|
},
|
|
|
|
view: function(vnode) {
|
|
return [
|
|
m('section.title', [
|
|
m('div.under', [
|
|
m('div.text', [
|
|
m('h1', 'Ekki missa af draumaeigninni þinni'),
|
|
m('p', 'Skráðu þig í Eignavaktina sem sendir þér tölvupóst um leið og draumaeignina þín kemur á markaðinn'),
|
|
]),
|
|
m('div.filler'),
|
|
m('div.house1'),
|
|
]),
|
|
m('div.form#subscribe', [
|
|
m('h5', 'What are you looking for?'),
|
|
m('form.form-list-vertical', { hidden: !this.form.locations.length }, [
|
|
m('div.form-item.no-margin', [
|
|
m('label', 'Location'),
|
|
]),
|
|
this.form.locations.map((location, i) => {
|
|
return m('div.form-item', [
|
|
m('div.fake-input', [
|
|
m('p', location),
|
|
m('button.remove-item', { onclick: (e) => this.removeLocationIndex(i) })
|
|
])
|
|
])
|
|
}),
|
|
]),
|
|
m('form.form-group', {
|
|
hidden: !this.showAddLocation,
|
|
onsubmit: (e) => this.onLocationAdd(e),
|
|
}, [
|
|
m(Combobox, {
|
|
label: 'City*',
|
|
items: this.cities,
|
|
value: this.form.city,
|
|
placeholder: 'Reykjavík',
|
|
oninput: (e) => this.onFormUpdate(vnode, 'city', null, e),
|
|
ondone: () => { this.inputs.zip.state.focus() },
|
|
}),
|
|
m(Combobox, {
|
|
label: 'Postal code (optional)',
|
|
items: this.zips,
|
|
value: this.form.zip,
|
|
placeholder: '000',
|
|
oninput: (e) => this.onFormUpdate(vnode, 'zip', null, e),
|
|
oncreate: (e) => { this.inputs.zip = e },
|
|
ondone: () => { this.inputs.street.state.focus() },
|
|
}),
|
|
m(Combobox, {
|
|
class: 'form-fill',
|
|
label: 'Street name (optional)',
|
|
items: this.streets,
|
|
value: this.form.street_name,
|
|
placeholder: 'Enter your dream street adress',
|
|
oninput: (e) => this.onFormUpdate(vnode, 'street_name', null, e),
|
|
oncreate: (e) => { this.inputs.street = e },
|
|
ondone: () => { this.onLocationAdd(vnode) },
|
|
}),
|
|
m('div.form-item.form-small.form-no-label', [
|
|
m('input', {
|
|
class: this.form.city ? 'button-active' : 'button-outline',
|
|
type: 'submit',
|
|
value: 'Add location',
|
|
}),
|
|
]),
|
|
]
|
|
),
|
|
m('div.form-group', { hidden: this.showAddLocation }, [
|
|
m('div.form-item', [
|
|
m('button.button-flat', {
|
|
onclick: () => { this.showAddLocation = !this.showAddLocation }
|
|
}, [
|
|
m('i.ic-plus'),
|
|
m('span', 'Add more locations')
|
|
]),
|
|
]),
|
|
]),
|
|
m('div.form-group', [
|
|
m('div.form-item', [
|
|
m('label', 'Tegund'),
|
|
m('div.form-list', [
|
|
this.values.type.map((type, i) => {
|
|
return m('label.checkbox', [
|
|
m('input', {
|
|
type: 'checkbox',
|
|
checked: this.form.type[i],
|
|
oninput: (e) => this.onFormUpdate(vnode, 'type', i, e),
|
|
}),
|
|
m('div.button-checkbox', type),
|
|
])
|
|
}),
|
|
]),
|
|
]),
|
|
]),
|
|
m('div.form-group', [
|
|
m('div.form-item', [
|
|
m('label', 'Size'),
|
|
m('div.form-list', [
|
|
this.values.size.map((size, i) => {
|
|
return m('label.checkbox', [
|
|
m('input', {
|
|
type: 'checkbox',
|
|
checked: this.form.size[i],
|
|
oninput: (e) => this.onFormUpdate(vnode, 'size', i, e),
|
|
}),
|
|
m('div.button-checkbox', size),
|
|
])
|
|
}),
|
|
]),
|
|
]),
|
|
]),
|
|
m('div.form-group', [
|
|
m('div.form-item', [
|
|
m('label', 'Rooms'),
|
|
m('div.form-list', [
|
|
this.values.rooms.map((rooms, i) => {
|
|
return m('label.checkbox', [
|
|
m('input', {
|
|
type: 'checkbox',
|
|
checked: this.form.rooms[i],
|
|
oninput: (e) => this.onFormUpdate(vnode, 'rooms', i, e),
|
|
}),
|
|
m('div.button-checkbox', rooms),
|
|
])
|
|
}),
|
|
]),
|
|
]),
|
|
]),
|
|
|
|
|
|
m('div.form-group', [
|
|
m('div.form-small.form-no-label', [
|
|
m('button.button-inactive', { disabled: true }, 'Continue')
|
|
]),
|
|
]),
|
|
]),
|
|
]),
|
|
m('section.tips', [
|
|
m('div.image.house2'),
|
|
m('div.space'),
|
|
m('div.content', [
|
|
m('h2', 'Góð ráð þegar kemur að kaupa fasteign'),
|
|
m('p', 'Að undirbúa eignina þína fyrir sölusýningu eða opið hús er lykil atriði og það mun ekki bara hjálpa til við sölu heldur getur það hækkað endanlegt verð eignarinnar umtalsvert.'),
|
|
m('p', 'Það eru smáatriðin sem skipta máli þegar kemur að því að sýna eignina. Taktu til, hugaðu að lýsingu og gerðu kósí.'),
|
|
m('p', m.trust(' ')),
|
|
m('div.checkmark', 'Lagaðu til og hafðu heimilið aðlaðandi'),
|
|
m('div.checkmark', 'Falleg lýsing skiptir máli'),
|
|
m('div.checkmark', 'Kveiktu á ilmkertum eða bakaðu smákökur til að fá fram heimilislega lykt'),
|
|
m('div.checkmark', 'Mikilvægustu herbergin eru stofan, eldhúsið og hjónaherbergið'),
|
|
]),
|
|
]),
|
|
m('section.pricemat', [
|
|
m('div.content', [
|
|
m('a.link', { href: 'https://verdmat.is', target: '_blank' }, 'verdmat.is'),
|
|
m('h2', 'Want to know how much your property is worth?'),
|
|
m('p', 'Við erum með allar upplýsingar um stærð eignarinnar, fasteignamat, brunabótamat, byggingarefni, byggingarár og fleira á skrá hjá okkur. '),
|
|
m('a.button-white', { href: 'https://verdmat.is', target: '_blank' }, 'Visit verðmat.is')
|
|
]),
|
|
m('div.image.house3'),
|
|
]),
|
|
]
|
|
},
|
|
}
|
|
|
|
module.exports = Frontpage
|