Update dashboard to send sprinklers

src/prog/dashboard3/package-lock.json

@@ -3454,6 +3454,23 @@
             "number-is-nan": "^1.0.0"
           }
         },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+              "dev": true
+            }
+          }
+        },
         "wrap-ansi": {
           "version": "2.1.0",
           "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
@@ -4857,6 +4874,23 @@
         "strip-json-comments": "~2.0.1",
         "table": "4.0.2",
         "text-table": "~0.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "eslint-config-standard": {
@@ -4879,11 +4913,26 @@
         "text-table": "^0.2.0"
       },
       "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
         "minimist": {
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
         }
       }
     },
@@ -6891,6 +6940,23 @@
         "string-width": "^2.1.0",
         "strip-ansi": "^4.0.0",
         "through": "^2.3.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "internal-ip": {
@@ -7479,8 +7545,7 @@
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
-      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -13423,6 +13488,23 @@
       "requires": {
         "is-fullwidth-code-point": "^2.0.0",
         "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "string_decoder": {
@@ -13446,20 +13528,12 @@
       }
     },
     "strip-ansi": {
-      "version": "4.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "dev": true,
       "requires": {
-        "ansi-regex": "^3.0.0"
+        "ansi-regex": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        }
       }
     },
     "strip-bom": {
@@ -14450,6 +14524,14 @@
       "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==",
       "dev": true
     },
+    "vuex-rest-api": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/vuex-rest-api/-/vuex-rest-api-2.10.0.tgz",
+      "integrity": "sha512-xzPXj7ytH+QF/rS6gTUq6tzDTY6pLF6JDajjJcNSQE0Uu1mKNNKsXaSooLBBcKHBLeswiPJbG39FEdY0HNz7dQ==",
+      "requires": {
+        "lodash.clonedeep": "4.5.x"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
@@ -15012,6 +15094,23 @@
       "requires": {
         "string-width": "^2.1.1",
         "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "wrappy": {

src/prog/dashboard3/package.json

@@ -14,7 +14,8 @@
     "axios": "^0.18.0",
     "loadash": "^1.0.0",
     "npm": "^6.4.1",
-    "vue-axios": "^2.1.1"
+    "vue-axios": "^2.1.1",
+    "vuex-rest-api": "^2.10.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.1",

src/prog/dashboard3/src/api/domo.js

@@ -51,7 +51,7 @@ export default {
     })
   },
   // server: '',
-  server: 'http://192.168.1.129:8080',
+  baseURL: 'http://192.168.1.129:8080',
   timeout: 1000,
   etag_timeout: 10,
   route: {

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

@@ -13,9 +13,12 @@ export default {
   props: {
     data: {}
   },
+  created () {
+    // console.log('domo-item created')
+  },
   watch: {
     'data.state': function (newState) {
-      this.$emit('on-change', this.data)
+      this.$emit('state-change', this.data)
     }
   }
 }

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

@@ -3,51 +3,38 @@
     <!-- content -->
     <q-list>
       <q-list-header>Sprinklers</q-list-header>
-      <q-item link v-ripple.mat v-for="sprinkler in sprinklers" :key="sprinkler.id">
+      <div v-for="sprinkler in sprinklers" :key="sprinkler.id">
-        <q-item-side icon="settings" />
+        <domo-item :data="sprinkler" v-on:state-change="updateSprinkler" />
-        <q-item-main :label="sprinkler.name" />
+      </div>
-        <q-item-side right>
-        <q-toggle :val="sprinkler.state" @click="updateSprinkler(sprinkler)" />
-      </q-item-side>
-  </q-item>
     </q-list>
   </q-page>
 </template>
 
 <script>
 import DomoItem from 'components/domo-item'
-import _ from 'lodash'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'PageSprinklers',
   components: {
     DomoItem
   },
-  data () {
+  computed: mapState({
-    return {
+    sprinklers: state => state.sprinklers
-      sprinklers: _.cloneDeep(this.$store.state.sprinklers.all)
+  }),
-    }
+  async created () {
-  },
-  created () {
     console.log('created')
-    this.$store.dispatch('sprinklers/load')
+    await this.listSprinklers()
-    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: {
+    ...mapActions([
+      'listSprinklers',
+      'updateSprinklers'
+    ]),
     updateSprinkler (sprinkler) {
-      console.log('updateSprinkler', sprinkler)
+      console.log('updateSprinkler: ', sprinkler)
-      /* this.$store.commit('updateUser', {
+      const params = { id: sprinkler.id }
-         [field]: value
+      this.updateSprinklers({ params, sprinkler })
-     }); */
     }
   }
 }

src/prog/dashboard3/src/store/index.js

@@ -6,14 +6,14 @@ import sprinklers from './modules/sprinklers'
 
 Vue.use(Vuex)
 
-const debug = process.env.NODE_ENV !== 'production'
+// const debug = process.env.NODE_ENV !== 'production'
 
 const store = new Vuex.Store({
   modules: {
-    domoStore,
+    domoStore
-    sprinklers
   },
-  strict: debug
+  ...sprinklers,
+  strict: false
 })
 
 export default store

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

@@ -1,112 +1,43 @@
+import Vapi from 'vuex-rest-api'
 import api from '../../api/domo'
 
-// initial state
+const sprinklers = new Vapi({
-// shape: [{ id, quantity }]
+  baseURL: api.baseURL,
-const state = {
+  state: {
-  all: []
+    sprinklers: []
-}
-
-// getters
-const getters = {
-/*
-  cartProducts: (state, getters, rootState) => {
-    return state.items.map(({ id, quantity }) => {
-      const product = rootState.products.all.find(product => product.id === id)
-      return {
-        title: product.title,
-        price: product.price,
-        quantity
-      }
-    })
-  },
-
-  cartTotalPrice: (state, getters) => {
-    return getters.cartProducts.reduce((total, product) => {
-      return total + product.price * product.quantity
-    }, 0)
   }
-  */
+})
-}
+  .get({
-
+    action: 'listSprinklers',
-// actions
+    property: 'list',
-const actions = {
+    path: '/v1/sprinklers',
-  load ({ commit }) {
+    onSuccess: (state, payload, axios, { params, data }) => {
-    api.request(api.route.v1.sprinklers.get)
+      // if you set the onSuccess function you have to set the state manually
-      .then(data => {
+      // console.log('success avec ', payload)
-        console.log('on est la.', data)
+      state.sprinklers = payload.data.sprinklers
-        commit('SET_SPRINKLERS', data.data.sprinklers)
-      })
-  }
-}
-
-/*
-  checkout ({ commit, state }, products) {
-    const savedCartItems = [...state.items]
-    commit('setCheckoutStatus', null)
-    // empty cart
-    commit('setCartItems', { items: [] })
-    shop.buyProducts(
-      products,
-      () => commit('setCheckoutStatus', 'successful'),
-      () => {
-        commit('setCheckoutStatus', 'failed')
-        // rollback to the cart saved before sending the request
-        commit('setCartItems', { items: savedCartItems })
-      }
-    )
-  },
-
-  addProductToCart ({ state, commit }, product) {
-    commit('setCheckoutStatus', null)
-    if (product.inventory > 0) {
-      const cartItem = state.items.find(item => item.id === product.id)
-      if (!cartItem) {
-        commit('pushProductToCart', { id: product.id })
-      } else {
-        commit('incrementItemQuantity', cartItem)
-      }
-      // remove 1 item from stock
-      commit('products/decrementProductInventory', { id: product.id }, { root: true })
     }
-  }
+  })
-*/
+
+  .put({
+    action: 'updateSprinklers',
+    property: 'update',
+    path: ({id}) => `/v1/sprinklers/${id}`
+  })
 
-// mutations
-const mutations = {
-  SET_SPRINKLERS (state, sprinklers) {
-    console.log('sprinkler', sprinklers)
-    state.all = sprinklers
-  },
-  update (state, sprinkler) {
-    console.log('>>>sprinkler', sprinkler)
-  }
 /*
-  pushProductToCart (state, { id }) {
+  .get({
-    state.items.push({
+    action: 'getPost',
-      id,
+    property: 'post',
-      quantity: 1
+    path: ({ id }) => `/posts/${id}`
-    })
+  })
-  },
 
-  incrementItemQuantity (state, { id }) {
+  .post({
-    const cartItem = state.items.find(item => item.id === id)
+    action: 'updatePost',
-    cartItem.quantity++
+    property: 'post',
-  },
+    path: ({ id }) => `/posts/${id}`
-
+  })
-  setCartItems (state, { items }) {
-    state.items = items
-  },
-
-  setCheckoutStatus (state, status) {
-    state.checkoutStatus = status
-  }
 */
-}
+  // Step 4
+  .getStore()
 
-export default {
+export default sprinklers
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-}