range chaine #4
@ -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 {
|
||||||
|
@ -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)
|
// }
|
||||||
// }
|
|
||||||
|
@ -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 >
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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',
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user