nfp_sites/heimaerbest/app/site_frontpage.js

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('&nbsp;')),
          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