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}`)
+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 fetchemission(num) {
+  return axios.get(`${API_PATH}/chaine/${num}/emission`);
 }
-
-export function putparsechaine(jwt){
-    
-    return axios.put(`${API_PATH}/chaine/`,'',{ headers: { Authorization: `Bearer: ${jwt}` }});
-
+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)
+export function authenticate(userData) {
+  return axios.post(`${API_PATH}/login/`, userData);
 }
-  
-// export function register (userData) {  
-//   return axios.post(`${API_URL}/register/`, userData)
-// }
+// export function 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 != "") {
-          this.$store.dispatch('getchaine',{num: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')
-        } 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");
+      if (!this.$store.getters.isAuthenticated) {
+        this.$router.push('/login');
+      } else {
+        return putparsechaine(this.$store.state.jwt.token)
+          .then((res) => {
+            if (res.data === 'OK') {
+              alert('update database OK');
             }
           })
-          .catch(error => {
-            // eslint-disable-next-line
+          .catch((error) => {
+          // eslint-disable-next-line
             if (error.response) {
               alert(error.response.data.message);
-               
-            }else{
-              
+            } else {
               console.error(error);
             }
-            this.$router.push('/login')
+            this.$router.push('/login');
           });
-        }
-
-    }
-  }
+      }
+      return true;
+    },
+  },
 };
 </script>
 <style >

client/src/components/login.vue

@@ -1,5 +1,5 @@
-<!-- components/Login.vue -->  
-<template>  
+<!-- components/Login.vue -->
+<template>
   <div>
     <section class="hero is-success">
       <div class="hero-body">
@@ -32,45 +32,45 @@
     </section>
 
   </div>
-</template>  
+</template>
 
-<script>  
-import {EventBus} from "../utils"
-export default {  
-  data () {
+<script>
+import { EventBus } from '../utils';
+
+export default {
+  data() {
     return {
       name: '',
       password: '',
-      errorMsg: ''
-    }
+      errorMsg: '',
+    };
   },
   methods: {
-    authenticate () {
+    authenticate() {
       this.$store.dispatch('login', { name: this.name, password: this.password })
-        .then(() =>{ 
-                    if (this.$store.getters.isAuthenticated){
-                         this.$router.push('/')
-                    }
-                }
-        )
-
+        .then(() => {
+          if (this.$store.getters.isAuthenticated) {
+            this.$router.push('/');
+          }
+        },
+        );
     },
-    register () {
+    register() {
       this.$store.dispatch('register', { name: this.name, password: this.password })
-        .then(() => this.$router.push('/'))
-    }
+        .then(() => this.$router.push('/'));
+    },
   },
-  mounted () {
+  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')
-  }
-}
-</script>  
+  beforeDestroy() {
+    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,19 +16,19 @@ export default new Router({
     {
       path: '/login',
       name: 'Login',
-      component: login
+      component: login,
     },
     {
       path: '/ping',
       name: 'ping',
       component: ping,
-      beforeEnter (to, from, next) {
+      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 { 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`;
-const actions = {  
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { fetchchaine, fetchemission, authenticate } from '../api';
+import { isValidJwt, EventBus } from '../utils';
+
+Vue.use(Vuex);
+const actions = {
   // asynchronous operations
-  getchaine(context,{num}) {
-    
+  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})
+      .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 => {
+      })
+      .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})
+  },
+  getemission(context, { chaine, name }) {
+    return fetchemission(chaine)
+      .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 })
+  login(context, 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 = {  
+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});
+  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,
+      });
     }
+    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
+  setUserData(state, payload) {
+    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
-  }
-}
+  setJwtToken(state, payload) {
+    console.log('setJwtToken payload = ', payload);
+    localStorage.token = payload.jwt.token;
+    state.jwt = payload.jwt;
+  },
+};
 
-const getters = {  
+const getters = {
   // reusable data accessors
-  isAuthenticated (state) {
-    return isValidJwt(state.jwt.token)
-  }
-}
+  isAuthenticated(state) {
+    return isValidJwt(state.jwt.token);
+  },
+};
 
-const store = new Vuex.Store({  
+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'
+import Vue from 'vue';
 
-export const EventBus = new Vue()
-
-export function isValidJwt (jwt) {  
+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;
 }