implement vueex
This commit is contained in:
parent
4aff802d18
commit
e196197a7c
5
client/package-lock.json
generated
5
client/package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
20
client/src/api/index.js
Normal file
20
client/src/api/index.js
Normal file
@ -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/`);
|
||||
|
||||
}
|
@ -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");
|
||||
|
@ -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/>',
|
||||
});
|
||||
|
64
client/src/store/index.js
Normal file
64
client/src/store/index.js
Normal file
@ -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
|
Loading…
Reference in New Issue
Block a user