implement vueex

README.md

@@ -1,2 +0,0 @@
-# chainetv_web
-

client/package-lock.json

@@ -11773,6 +11773,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
+      "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

client/package.json

@@ -14,7 +14,8 @@
     "axios": "^0.18.0",
     "bulma": "^0.7.4",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

client/src/api/index.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const API_PATH=`${process.env.ROOT_API}/api/v1`;
+
+export function  fetchchaine(num){
+
+    return axios.get(`${API_PATH}/chaine/${num}`)
+}
+
+export function fetchemission(num){
+
+    return  axios.get(`${API_PATH}/chaine/${num}/emission`)
+
+}
+
+export function putparsechaine(){
+    
+    return axios.put(`${API_PATH}/chaine/`);
+
+}

client/src/components/chainetv.vue

@@ -29,8 +29,8 @@
       </div>
       <div class="section">
         <div class="container">
-          <ul class v-if="arrayresultchaines">
-            <li class="box" v-for="result in arrayresultchaines" v-bind:key="result.chaine">
+          <ul class v-if="this.$store.state.arrayresultchaines">
+            <li class="box" v-for="result in this.$store.state.arrayresultchaines" v-bind:key="result.chaine">
               <h3 class="title is-5">{{result.chaine}} : {{result.name}}</h3>
               <ul v-if="(result.emission!='can\'t find channel' && result.emission)">
                 <li>
@@ -74,63 +74,34 @@
 </template>
 
 <script>
-import axios from "axios";
+import {putparsechaine} from "../api";
 
 export default {
   name: "chainetv",
   data() {
     return {
-      arrayresultchaines: [],
       chaine: ""
     };
   },
   methods: {
-    getchaine(num) {
-      let path = process.env.ROOT_API + "/api/v1/chaine/";
-      axios
-        .get(path + num)
-        .then(res => {
-          if (res.status === 200) {
-            axios
-              .get(path + num + "/emission")
-              .then(res_emission => {
-                this.arrayresultchaines.push({
-                  chaine: num,
-                  name: res.data,
-                  emission: res_emission.data
-                });
-                console.log(this.arrayresultchaines);
-              })
-              .catch(error => {
-                this.arrayresultchaines.push({ chaine: num, name: res.data });
-              });
-          } else if (res.status === 204) {
-            this.arrayresultchaines.push({ chaine: num, name: "inconnue" });
-          }
-        })
-        .catch(error => {
-          // eslint-disable-next-line
-          console.error(error);
-        });
-    },
+
     checkchaine() {
       if (this.chaine === "") {
         alert("rentrer un numéro");
         return;
       }
-      this.arrayresultchaines = [];
+      this.$store.state.arrayresultchaines = [];
       const arraychaine = [...new Set(this.chaine.split(" "))];
 
       arraychaine.forEach(element => {
         if (element != "") {
-          this.getchaine(element);
+          this.$store.dispatch('getchaine',{num:element});
         }
       });
     },
     parsechaine() {
-      const path = process.env.ROOT_API + "/api/v1/chaine/";
-      axios
-        .put(path)
+    
+      return putparsechaine()
         .then(res => {
           if (res.data == "OK") {
             alert("update database OK");

client/src/main.js

@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
+import store from './store'
 import './../node_modules/bulma/css/bulma.css'
 Vue.config.productionTip = false;
 
@@ -10,6 +11,7 @@ Vue.config.productionTip = false;
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>',
 });

client/src/store/index.js

@@ -0,0 +1,64 @@
+// src/store/index.js
+
+import Vue from 'vue'  
+import Vuex from 'vuex'
+import axios from "axios";
+import { fetchchaine, fetchemission } from '../api';
+Vue.use(Vuex)
+const state = {  
+  // single source of data
+  arrayresultchaines: [],
+}
+const API_PATH=`${process.env.ROOT_API}/api/v1`;
+const actions = {  
+  // asynchronous operations
+  getchaine(context,{num}) {
+    
+    return fetchchaine(num)
+      .then( res => {
+        if (res.status === 200){
+          context.dispatch('getemission',{chaine:num,name:res.data})
+        }else{
+          context.commit('push_chaine',{chaine:num,name:res.data})
+        }
+     })
+      .catch(error => {
+        // eslint-disable-next-line
+        console.error(error);
+      });
+    },
+  getemission(context,{chaine,name}){
+    return fetchemission (chaine)
+      .then(res_emission => {
+        context.commit('push_chaine',{chaine:chaine,name:name,emission:res_emission.data})
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
+
+}
+
+const mutations = {  
+  // isolated data mutations
+  push_chaine(state,payload){
+    if(!payload.name){
+      state.arrayresultchaines.push({ chaine: payload.chaine, name: "inconnue" });
+    }else{
+      state.arrayresultchaines.push({chaine: payload.chaine,name: payload.name,emission: payload.emission});
+    }
+  }
+}
+
+const getters = {  
+  // reusable data accessors
+}
+
+const store = new Vuex.Store({  
+  state,
+  actions,
+  mutations,
+  getters
+})
+
+export default store