Update dashboard to send sprinklers

2018-10-05 23:24:34 +02:00
parent fb528553d3
commit 222960cedb
8 changed files with 174 additions and 153 deletions
--- a/src/prog/dashboard3/package-lock.json
+++ b/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=",
-      "dev": true
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
    },
    "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",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "version": "3.0.1",
+      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
      "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
-        }
+        "ansi-regex": "^2.0.0"
      }
    },
    "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": {
--- a/src/prog/dashboard3/package.json
+++ b/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",
--- a/src/prog/dashboard3/src/api/domo.js
+++ b/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: {
--- a/src/prog/dashboard3/src/components/.gitkeep
+++ b/src/prog/dashboard3/src/components/.gitkeep
--- a/src/prog/dashboard3/src/components/domo-item.vue
+++ b/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)
    }
  }
 }
--- a/src/prog/dashboard3/src/pages/sprinklers.vue
+++ b/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">
-        <q-item-side icon="settings" />
-        <q-item-main :label="sprinkler.name" />
-        <q-item-side right>
-        <q-toggle :val="sprinkler.state" @click="updateSprinkler(sprinkler)" />
-      </q-item-side>
-  </q-item>
+      <div v-for="sprinkler in sprinklers" :key="sprinkler.id">
+        <domo-item :data="sprinkler" v-on:state-change="updateSprinkler" />
+      </div>
    </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 () {
-    return {
-      sprinklers: _.cloneDeep(this.$store.state.sprinklers.all)
-    }
-  },
-  created () {
+  computed: mapState({
+    sprinklers: state => state.sprinklers
+  }),
+  async 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
-    }
+    await this.listSprinklers()
  },
  methods: {
+    ...mapActions([
+      'listSprinklers',
+      'updateSprinklers'
+    ]),
    updateSprinkler (sprinkler) {
-      console.log('updateSprinkler', sprinkler)
-      /* this.$store.commit('updateUser', {
-         [field]: value
-     }); */
+      console.log('updateSprinkler: ', sprinkler)
+      const params = { id: sprinkler.id }
+      this.updateSprinklers({ params, sprinkler })
    }
  }
 }
--- a/src/prog/dashboard3/src/store/index.js
+++ b/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,
-    sprinklers
+    domoStore
  },
-  strict: debug
+  ...sprinklers,
+  strict: false
 })

 export default store
--- a/src/prog/dashboard3/src/store/modules/sprinklers.js
+++ b/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
-// shape: [{ id, quantity }]
-const state = {
-  all: []
-}
-
-// 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
+const sprinklers = new Vapi({
+  baseURL: api.baseURL,
+  state: {
+    sprinklers: []
  }
 })
-  },
-
-  cartTotalPrice: (state, getters) => {
-    return getters.cartProducts.reduce((total, product) => {
-      return total + product.price * product.quantity
-    }, 0)
+  .get({
+    action: 'listSprinklers',
+    property: 'list',
+    path: '/v1/sprinklers',
+    onSuccess: (state, payload, axios, { params, data }) => {
+      // if you set the onSuccess function you have to set the state manually
+      // console.log('success avec ', payload)
+      state.sprinklers = payload.data.sprinklers
    }
-  */
-}
-
-// actions
-const actions = {
-  load ({ commit }) {
-    api.request(api.route.v1.sprinklers.get)
-      .then(data => {
-        console.log('on est la.', data)
-        commit('SET_SPRINKLERS', data.data.sprinklers)
  })
-  }
-}
+
+  .put({
+    action: 'updateSprinklers',
+    property: 'update',
+    path: ({id}) => `/v1/sprinklers/${id}`
+  })

 /*
-  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 })
-    }
-  }
-*/
-
-// mutations
-const mutations = {
-  SET_SPRINKLERS (state, sprinklers) {
-    console.log('sprinkler', sprinklers)
-    state.all = sprinklers
-  },
-  update (state, sprinkler) {
-    console.log('>>>sprinkler', sprinkler)
-  }
-/*
-  pushProductToCart (state, { id }) {
-    state.items.push({
-      id,
-      quantity: 1
+  .get({
+    action: 'getPost',
+    property: 'post',
+    path: ({ id }) => `/posts/${id}`
  })
-  },

-  incrementItemQuantity (state, { id }) {
-    const cartItem = state.items.find(item => item.id === id)
-    cartItem.quantity++
-  },
-
-  setCartItems (state, { items }) {
-    state.items = items
-  },
-
-  setCheckoutStatus (state, status) {
-    state.checkoutStatus = status
-  }
+  .post({
+    action: 'updatePost',
+    property: 'post',
+    path: ({ id }) => `/posts/${id}`
+  })
 */
-}
+  // Step 4
+  .getStore()

-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-}
+export default sprinklers