range chaine #4

Merged
vincent merged 3 commits from dev into master 2019-05-09 13:31:14 +00:00
9 changed files with 163 additions and 169 deletions

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<!-- components/Login.vue --> <!-- components/Login.vue -->
<template> <template>
<div> <div>
<section class="hero is-success"> <section class="hero is-success">
<div class="hero-body"> <div class="hero-body">
@ -32,45 +32,45 @@
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import {EventBus} from "../utils" import { EventBus } from '../utils';
export default {
data () { export default {
data() {
return { return {
name: '', name: '',
password: '', password: '',
errorMsg: '' errorMsg: '',
} };
}, },
methods: { methods: {
authenticate () { authenticate() {
this.$store.dispatch('login', { name: this.name, password: this.password }) this.$store.dispatch('login', { name: this.name, password: this.password })
.then(() =>{ .then(() => {
if (this.$store.getters.isAuthenticated){ if (this.$store.getters.isAuthenticated) {
this.$router.push('/') this.$router.push('/');
} }
} },
) );
}, },
register () { register() {
this.$store.dispatch('register', { name: this.name, password: this.password }) this.$store.dispatch('register', { name: this.name, password: this.password })
.then(() => this.$router.push('/')) .then(() => this.$router.push('/'));
} },
}, },
mounted () { mounted() {
EventBus.$on('failedRegistering', (msg) => { EventBus.$on('failedRegistering', (msg) => {
this.errorMsg = msg this.errorMsg = msg;
}) });
EventBus.$on('failedAuthentication', (msg) => { EventBus.$on('failedAuthentication', (msg) => {
this.errorMsg = msg this.errorMsg = msg;
}) });
}, },
beforeDestroy () { beforeDestroy() {
EventBus.$off('failedRegistering') EventBus.$off('failedRegistering');
EventBus.$off('failedAuthentication') EventBus.$off('failedAuthentication');
} },
} };
</script> </script>

View File

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

View File

@ -3,10 +3,10 @@
import Vue from 'vue'; import Vue from 'vue';
import App from './App'; import App from './App';
import router from './router'; import router from './router';
import store from './store' import store from './store';
import './../node_modules/bulma/css/bulma.css' import './../node_modules/bulma/css/bulma.css';
Vue.config.productionTip = false;
Vue.config.productionTip = false;
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',

View File

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

View File

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

View File

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