wip

src/prog/dashboard3/package-lock.json

@@ -7679,6 +7679,11 @@
         "strip-bom": "^3.0.0"
       }
     },
+    "loadash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/loadash/-/loadash-1.0.0.tgz",
+      "integrity": "sha512-xlX5HBsXB3KG0FJbJJG/3kYWCfsCyCSus3T+uHVu6QL6YxAdggmm3QeyLgn54N2yi5/UE6xxL5ZWJAAiHzHYEg=="
+    },
     "loader-fs-cache": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz",

src/prog/dashboard3/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "loadash": "^1.0.0",
     "vue-axios": "^2.1.1"
   },
   "devDependencies": {

src/prog/dashboard3/src/components/domo-item.vue

@@ -0,0 +1,25 @@
+<template>
+  <q-item link v-ripple.mat>
+    <q-item-side icon="settings" />
+      <q-item-main :label="data.name" />
+    <q-item-side right>
+      <q-toggle v-model="data.state" />
+    </q-item-side>
+  </q-item>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {}
+  },
+  watch: {
+    'data.state': function (newState) {
+      this.$emit('on-change', this.data)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/pages/sprinklers.vue

@@ -3,48 +3,48 @@
     <!-- content -->
     <q-list>
       <q-list-header>Sprinklers</q-list-header>
-      <q-item link v-ripple.mat v-for="sprinkler in sprinklers" :key="sprinkler.id">
-        <q-item-side icon="settings" />
-        <q-item-main :label="sprinkler.name" />
-        <q-item-side right>
-          <q-toggle :value="true" @input="click" />
-      </q-item-side>
-      </q-item>
-      <!--<q-item link v-ripple.mat>
-          <q-toggle v-model="sprinkler.state" />
-
-        <q-item-side icon="settings" />
-        <q-item-main label="Zone B" />
-        <q-item-side right>
-          <q-toggle v-model="checked_two" />
-        </q-item-side>
-      </q-item>
-      <q-item link v-ripple.mat>
-        <q-item-side icon="settings" />
-        <q-item-main label="Zone C" />
-        <q-item-side right>
-          <q-toggle v-model="checked_three" />
-        </q-item-side>
-      </q-item>-->
+      <domo-item v-for="sprinkler in sprinklers" :key="sprinkler.id" :data="sprinkler"
+                 @on-change="updateSprinkler"></domo-item>
     </q-list>
   </q-page>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import DomoItem from 'components/domo-item'
+import _ from 'lodash'
 
 export default {
   name: 'PageSprinklers',
-  computed: mapState({
-    sprinklers: state => state.sprinklers.all
-  }),
+  components: {
+    DomoItem
+  },
+  data () {
+    return {
+      sprinklers: _.cloneDeep(this.$store.state.sprinklers.all)
+    }
+  },
   created () {
     console.log('created')
     this.$store.dispatch('sprinklers/load')
     console.log('sprin', this.sprinklers)
+  },
+  watch: {
+    sprinklers: {
+      handler: _.debounce(function (sprinkler) {
+        console.log('update sprinkler')
+        this.$store.commit('sprinklers/update', sprinkler)
+      }, 500),
+      deep: true
+    }
+  },
+  methods: {
+    updateSprinkler (sprinkler) {
+      console.log('updateSprinkler', sprinkler)
+      /* this.$store.commit('updateUser', {
+         [field]: value
+     }); */
+    }
   }
-
-  click()
 }
 </script>
 

src/prog/dashboard3/src/store/modules/sprinklers.js

@@ -76,6 +76,9 @@ const mutations = {
   SET_SPRINKLERS (state, sprinklers) {
     console.log('sprinkler', sprinklers)
     state.all = sprinklers
+  },
+  update (state, sprinkler) {
+    console.log('>>>sprinkler', sprinkler)
   }
 /*
   pushProductToCart (state, { id }) {