<template>
<h1>Sprinklers</h1>
<group>
  <cell-switch v-for="item in sprinklers" :data="item" @on-change="setSprinkler">
  </cell-switch>
</group>
</template>

<script>
import Group from 'vux/dist/components/group'
import Cell from 'vux/dist/components/cell'
import CellSwitch from './cell-switch'

export default {
  // Data
  data () {
    // console.log('Data init.');
    return {
      sprinklers: []
    }
  },
  ready () {
    console.log('Get Sprinklers state')
    this.getSprinklers()
  },
  // Components used.
  components: {
    Group,
    Cell,
    CellSwitch
  },
  methods: {
    /* Get Sprinklers */
    getSprinklers () {
      this.$http.get('/v1/capabilities/sprinklers')
        .then(function (response) {
          this.$set('sprinklers', response.data.Sprinklers)
          console.log('Success!:', response.data)
        }, function (err) {
          console.log(err)
        })
    },
    /* Set Sprinkler */
    setSprinkler (data) {
      var msg = ''
      console.log(data)
      msg = '{"id": ' + data.id + ', "state": ' + data.state + '}'
      console.log(msg)
      this.$http.post('/v1/capabilities/sprinklers', msg)
        .then(function (response) {
          console.log('Success!:', response.data)
        }, function (err) {
          console.log(err)
        })
    }
  }
}

</script>
