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==",
|
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||||
"dev": true
|
"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": {
|
"watchpack": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||||
|
@ -14,7 +14,8 @@
|
|||||||
"axios": "^0.18.0",
|
"axios": "^0.18.0",
|
||||||
"bulma": "^0.7.4",
|
"bulma": "^0.7.4",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"vue-router": "^3.0.1"
|
"vue-router": "^3.0.1",
|
||||||
|
"vuex": "^3.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^7.1.2",
|
"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>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<ul class v-if="arrayresultchaines">
|
<ul class v-if="this.$store.state.arrayresultchaines">
|
||||||
<li class="box" v-for="result in 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,63 +74,34 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from "axios";
|
import {putparsechaine} from "../api";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "chainetv",
|
name: "chainetv",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
arrayresultchaines: [],
|
|
||||||
chaine: ""
|
chaine: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
checkchaine() {
|
||||||
if (this.chaine === "") {
|
if (this.chaine === "") {
|
||||||
alert("rentrer un numéro");
|
alert("rentrer un numéro");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.arrayresultchaines = [];
|
this.$store.state.arrayresultchaines = [];
|
||||||
const arraychaine = [...new Set(this.chaine.split(" "))];
|
const arraychaine = [...new Set(this.chaine.split(" "))];
|
||||||
|
|
||||||
arraychaine.forEach(element => {
|
arraychaine.forEach(element => {
|
||||||
if (element != "") {
|
if (element != "") {
|
||||||
this.getchaine(element);
|
this.$store.dispatch('getchaine',{num:element});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
parsechaine() {
|
parsechaine() {
|
||||||
const path = process.env.ROOT_API + "/api/v1/chaine/";
|
|
||||||
axios
|
return putparsechaine()
|
||||||
.put(path)
|
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.data == "OK") {
|
if (res.data == "OK") {
|
||||||
alert("update database OK");
|
alert("update database OK");
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
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 './../node_modules/bulma/css/bulma.css'
|
import './../node_modules/bulma/css/bulma.css'
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
@ -10,6 +11,7 @@ Vue.config.productionTip = false;
|
|||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
router,
|
router,
|
||||||
|
store,
|
||||||
components: { App },
|
components: { App },
|
||||||
template: '<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