client/src/App.vue

@@ -16,7 +16,6 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
- 
 }
 h1,
 h2 {

client/src/api/index.js

@@ -1,28 +1,18 @@
-import axios from "axios";
+import axios from 'axios';
 
 const API_PATH = `${process.env.ROOT_API}/api/v1`;
-
 export function fetchchaine(num) {
-
-    return axios.get(`${API_PATH}/chaine/${num}`)
+  return axios.get(`${API_PATH}/chaine/${num}`);
 }
-
 export function fetchemission(num) {
-
-    return  axios.get(`${API_PATH}/chaine/${num}/emission`)
-
+  return axios.get(`${API_PATH}/chaine/${num}/emission`);
 }
-
 export function putparsechaine(jwt) {
-    
   return axios.put(`${API_PATH}/chaine/`, '', { headers: { Authorization: `Bearer: ${jwt}` } });
-
 }
-
 export function authenticate(userData) {
-   return axios.post(`${API_PATH}/login/`, userData)
+  return axios.post(`${API_PATH}/login/`, userData);
 }
-  
 // export function register(userData) {
-//   return axios.post(`${API_URL}/register/`, userData)
+//  return axios.post(`${API_URL}/register/`, userData);
 // }

client/src/components/chainetv.vue

@@ -30,7 +30,8 @@
       <div class="section">
         <div class="container">
           <ul class v-if="this.$store.state.arrayresultchaines">
-            <li class="box" v-for="result in this.$store.state.arrayresultchaines" v-bind:key="result.chaine">
+            <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,57 +75,60 @@
 </template>
 
 <script>
-import {putparsechaine} from "../api";
+import { putparsechaine } from '../api';
 
 export default {
-  name: "chainetv",
+  name: 'chainetv',
   data() {
     return {
-      chaine: ""
+      chaine: '',
     };
   },
   methods: {
-
     checkchaine() {
-      if (this.chaine === "") {
-        alert("rentrer un numéro");
+      if (this.chaine === '') {
+        alert('rentrer un numéro');
         return;
       }
       this.$store.state.arrayresultchaines = [];
-      const arraychaine = [...new Set(this.chaine.split(" "))];
-
-      arraychaine.forEach(element => {
-        if (element != "") {
+      const arraychaine = [...new Set(this.chaine.split(' '))];
+      const re = new RegExp('^[0-9]*-[0-9]*$');
+      arraychaine.forEach((element) => {
+        if (element !== '') {
+          if (re.test(element)) {
+            const range = element.split('-');
+            for (let i = range[0]; i <= range[1]; i += 1) {
+              this.$store.dispatch('getchaine', { num: i });
+            }
+          } else {
             this.$store.dispatch('getchaine', { num: element });
           }
+        }
       });
     },
     parsechaine() {
       if (!this.$store.getters.isAuthenticated) {
-           this.$router.push('/login')
+        this.$router.push('/login');
       } else {
-            console.log(this.$store.state.jwt.token)
         return putparsechaine(this.$store.state.jwt.token)
-          .then(res => {
-            if (res.data == "OK") {
-              alert("update database OK");
+          .then((res) => {
+            if (res.data === 'OK') {
+              alert('update database OK');
             }
           })
-          .catch(error => {
+          .catch((error) => {
           // eslint-disable-next-line
             if (error.response) {
               alert(error.response.data.message);
-               
             } else {
-              
               console.error(error);
             }
-            this.$router.push('/login')
+            this.$router.push('/login');
           });
       }
-
-    }
-  }
+      return true;
+    },
+  },
 };
 </script>
 <style >

client/src/components/login.vue

@@ -35,42 +35,42 @@
 </template>
 
 <script>
-import {EventBus} from "../utils"
+import { EventBus } from '../utils';
+
 export default {
   data() {
     return {
       name: '',
       password: '',
-      errorMsg: ''
-    }
+      errorMsg: '',
+    };
   },
   methods: {
     authenticate() {
       this.$store.dispatch('login', { name: this.name, password: this.password })
         .then(() => {
           if (this.$store.getters.isAuthenticated) {
-                         this.$router.push('/')
+            this.$router.push('/');
           }
-                }
-        )
-
+        },
+        );
     },
     register() {
       this.$store.dispatch('register', { name: this.name, password: this.password })
-        .then(() => this.$router.push('/'))
-    }
+        .then(() => this.$router.push('/'));
+    },
   },
   mounted() {
     EventBus.$on('failedRegistering', (msg) => {
-      this.errorMsg = msg
-    })
+      this.errorMsg = msg;
+    });
     EventBus.$on('failedAuthentication', (msg) => {
-      this.errorMsg = msg
-    })
+      this.errorMsg = msg;
+    });
   },
   beforeDestroy() {
-    EventBus.$off('failedRegistering')
-    EventBus.$off('failedAuthentication')
-  }
-}
+    EventBus.$off('failedRegistering');
+    EventBus.$off('failedAuthentication');
+  },
+};
 </script>

client/src/components/ping.vue

@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     getMessage() {
-      const path = process.env.ROOT_API + '/api/v1/ping';
+      const path = `${process.env.ROOT_API}/api/v1/ping`;
       axios.get(path)
         .then((res) => {
           this.msg = res.data;

client/src/main.js

@@ -3,10 +3,10 @@
 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;
+import store from './store';
+import './../node_modules/bulma/css/bulma.css';
 
+Vue.config.productionTip = false;
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

client/src/router/index.js

@@ -3,9 +3,9 @@ import Router from 'vue-router';
 import ping from '@/components/ping';
 import chainetv from '@/components/chainetv';
 import login from '@/components/login';
-import store from '@/store'
-Vue.use(Router);
+import store from '@/store';
 
+Vue.use(Router);
 export default new Router({
   routes: [
     {
@@ -16,7 +16,7 @@ export default new Router({
     {
       path: '/login',
       name: 'Login',
-      component: login
+      component: login,
     },
     {
       path: '/ping',
@@ -24,11 +24,11 @@ export default new Router({
       component: ping,
       beforeEnter(to, from, next) {
         if (!store.getters.isAuthenticated) {
-          next('/login')
+          next('/login');
         } else {
-          next()
-        }
+          next();
         }
       },
+    },
   ],
 });

client/src/store/index.js

@@ -1,55 +1,45 @@
 // src/store/index.js
 
-import Vue from 'vue'  
-import Vuex from 'vuex'
+import Vue from 'vue';
+import Vuex from 'vuex';
 import { fetchchaine, fetchemission, authenticate } from '../api';
-import { isValidJwt, EventBus } from '../utils' 
-Vue.use(Vuex)
-const state = {  
-  // single source of data
-  arrayresultchaines: [],
-  user: {},
-  jwt: ''
-}
-const API_PATH=`${process.env.ROOT_API}/api/v1`;
+import { isValidJwt, EventBus } from '../utils';
+
+Vue.use(Vuex);
 const actions = {
   // asynchronous operations
   getchaine(context, { num }) {
-    
     return fetchchaine(num)
-      .then( res => {
+      .then((res) => {
         if (res.status === 200) {
-          context.dispatch('getemission',{chaine:num,name:res.data})
+          context.dispatch('getemission', { chaine: num, name: res.data });
         } else {
-          context.commit('push_chaine',{chaine:num,name:res.data})
+          context.commit('push_chaine', { chaine: num, name: res.data });
         }
       })
-      .catch(error => {
+      .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})
+      .then((resEmission) => {
+        context.commit('push_chaine', { chaine, name, emission: resEmission.data });
       })
-      .catch(error => {
-        context.commit('push_chaine',{chaine:chaine,name:name})
+      .catch((error) => {
+        context.commit('push_chaine', { chaine, name });
         console.error(error);
       });
   },
   login(context, userData) {
-    context.commit('setUserData', { userData })
+    context.commit('setUserData', { userData });
     return authenticate(userData)
       .then(response => context.commit('setJwtToken', { jwt: response.data }))
-      .catch(error => {
-       
-        console.log('Error Authenticating: ', error)
-        EventBus.$emit('failedAuthentication', error.response.data.message)
-        
-       
-      })
+      .catch((error) => {
+        console.log('Error Authenticating: ', error);
+        EventBus.$emit('failedAuthentication', error.response.data.message);
+      });
   },
 //  register (context, userData) {
 //   context.commit('setUserData', { userData })
@@ -60,41 +50,53 @@ const actions = {
 //        EventBus.$emit('failedRegistering: ', error)
 //      })
 //  }
-
-}
+};
 
 const mutations = {
   // isolated data mutations
   push_chaine(state, payload) {
     if (!payload.name) {
-      state.arrayresultchaines.push({ chaine: payload.chaine, name: "inconnue" });
+      state.arrayresultchaines.push({ chaine: payload.chaine, name: 'inconnue' });
     } else {
-      state.arrayresultchaines.push({chaine: payload.chaine,name: payload.name,emission: payload.emission});
+      state.arrayresultchaines.push({
+        chaine: payload.chaine, name: payload.name, emission: payload.emission,
+      });
     }
+    state.arrayresultchaines = state.arrayresultchaines.sort((a, b) => {
+      if (a.chaine < b.chaine) return -1;
+      if (a.chaine > b.chaine) return 1;
+      return 0;
+    });
   },
   setUserData(state, payload) {
-    console.log('setUserData payload = ', payload)
-    state.userData = payload.userData
+    console.log('setUserData payload = ', payload);
+    state.userData = payload.userData;
   },
   setJwtToken(state, payload) {
-    console.log('setJwtToken payload = ', payload)
-    localStorage.token = payload.jwt.token
-    state.jwt = payload.jwt
-  }
-}
+    console.log('setJwtToken payload = ', payload);
+    localStorage.token = payload.jwt.token;
+    state.jwt = payload.jwt;
+  },
+};
 
 const getters = {
   // reusable data accessors
   isAuthenticated(state) {
-    return isValidJwt(state.jwt.token)
-  }
-}
+    return isValidJwt(state.jwt.token);
+  },
+};
 
+const state = {
+  // single source of data
+  arrayresultchaines: [],
+  user: {},
+  jwt: '',
+};
 const store = new Vuex.Store({
   state,
   actions,
   mutations,
-  getters
-})
+  getters,
+});
 
-export default store  
+export default store;

client/src/utils/index.js

@@ -1,13 +1,12 @@
-import Vue from 'vue'
-
-export const EventBus = new Vue()
+import Vue from 'vue';
 
+export const EventBus = new Vue();
 export function isValidJwt(jwt) {
   if (!jwt || jwt.split('.').length < 3) {
-    return false
+    return false;
   }
-  const data = JSON.parse(atob(jwt.split('.')[1]))
-  const exp = new Date(data.exp * 1000) // JS deals with dates in milliseconds since epoch
-  const now = new Date()
-  return now < exp
+  const data = JSON.parse(atob(jwt.split('.')[1]));
+  const exp = new Date(data.exp * 1000); // JS deals with dates in milliseconds since epoch
+  const now = new Date();
+  return now < exp;
 }