implement bulma style
This commit is contained in:
parent
49c17fae69
commit
4aff802d18
@ -1,154 +1,167 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h1>ChaineTV</h1>
|
<section class="hero has-text-centered is-success is-fullheigh">
|
||||||
<div class="form">
|
<div class="hero-body">
|
||||||
<div>
|
<h1 class="title">ChaineTV</h1>
|
||||||
<input v-on:keyup.enter="checkchaine()" name="chaine-input" v-model=chaine type="text">
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="section has-text-centered">
|
||||||
|
<div class="container">
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-on:keyup.enter="checkchaine()"
|
||||||
|
name="chaine-input"
|
||||||
|
v-model="chaine"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="field field is-grouped is-grouped-centered">
|
||||||
<button v-on:click="checkchaine()">search</button>
|
<div class="control">
|
||||||
|
<button class="button is-success" v-on:click="checkchaine()">search</button>
|
||||||
<button v-on:click="parsechaine()">update chaine</button>
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button class="button is-success" v-on:click="parsechaine()">update chaine</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div >
|
<div class="section">
|
||||||
<ul v-if="arrayresultchaines">
|
<div class="container">
|
||||||
<li v-for="result in arrayresultchaines" v-bind:key="result.chaine" >
|
<ul class v-if="arrayresultchaines">
|
||||||
<h3>{{result.chaine}} : {{result.name}}</h3>
|
<li class="box" v-for="result in arrayresultchaines" v-bind:key="result.chaine">
|
||||||
<ul v-if="(result.emission!='can\'t find channel' && result.emission)">
|
<h3 class="title is-5">{{result.chaine}} : {{result.name}}</h3>
|
||||||
<li><h4><a target="_blank" :href="result.emission.href">{{result.emission.title}}</a></h4></li>
|
<ul v-if="(result.emission!='can\'t find channel' && result.emission)">
|
||||||
<li><img :src="result.emission.img"></li>
|
<li>
|
||||||
<li><p>{{result.emission.synopsis}}</p></li>
|
<h4 class="title is-4">
|
||||||
<ul v-if="result.emission.casting.length!=0" class="casting">
|
<a
|
||||||
<h4>casting:</h4>
|
class="has-text-success"
|
||||||
<li v-for="(actor,index) in result.emission.casting" v-bind:key="index" >
|
target="_blank"
|
||||||
<i><a target="_blank" :href="'https://fr.wikipedia.org/wiki/'+actor.replace(' ','_')">{{actor}}</a></i>
|
:href="result.emission.href"
|
||||||
</li>
|
>{{result.emission.title}}</a>
|
||||||
|
</h4>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img :src="result.emission.img">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>{{result.emission.synopsis}}</p>
|
||||||
|
</li>
|
||||||
|
<div v-if="result.emission.casting.length!=0">
|
||||||
|
<h4 class="title is-6">casting:</h4>
|
||||||
|
<div class="list is-hoverable">
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
class="has-text-success list-item"
|
||||||
|
:href="'https://fr.wikipedia.org/wiki/'+actor.replace(' ','_')"
|
||||||
|
v-for="(actor,index) in result.emission.casting"
|
||||||
|
v-bind:key="index"
|
||||||
|
>
|
||||||
|
<i>{{actor}}</i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
</ul>
|
|
||||||
<p v-else>{{result.emission}}</p>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<p v-else>{{result.emission}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios';
|
import axios from "axios";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'chainetv',
|
name: "chainetv",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
arrayresultchaines: [ ],
|
arrayresultchaines: [],
|
||||||
chaine: '',
|
chaine: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getchaine(num) {
|
getchaine(num) {
|
||||||
|
let path = process.env.ROOT_API + "/api/v1/chaine/";
|
||||||
let path = process.env.ROOT_API + '/api/v1/chaine/';
|
axios
|
||||||
axios.get(path + num)
|
.get(path + num)
|
||||||
.then((res) => {
|
.then(res => {
|
||||||
if(res.status===200){
|
if (res.status === 200) {
|
||||||
axios.get(path + num + "/emission")
|
axios
|
||||||
.then((res_emission) => {
|
.get(path + num + "/emission")
|
||||||
|
.then(res_emission => {
|
||||||
this.arrayresultchaines.push({"chaine":num,"name":res.data,"emission":res_emission.data});
|
this.arrayresultchaines.push({
|
||||||
console.log(this.arrayresultchaines)
|
chaine: num,
|
||||||
|
name: res.data,
|
||||||
|
emission: res_emission.data
|
||||||
|
});
|
||||||
|
console.log(this.arrayresultchaines);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch(error => {
|
||||||
this.arrayresultchaines.push({"chaine":num,"name":res.data});
|
this.arrayresultchaines.push({ chaine: num, name: res.data });
|
||||||
|
|
||||||
});
|
});
|
||||||
}else if(res.status===204){
|
} else if (res.status === 204) {
|
||||||
this.arrayresultchaines.push({"chaine":num,"name":"inconnue"});
|
this.arrayresultchaines.push({ chaine: num, name: "inconnue" });
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch(error => {
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
console.error(error);
|
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.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.getchaine(element);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
parsechaine() {
|
parsechaine() {
|
||||||
const path = process.env.ROOT_API + '/api/v1/chaine/';
|
const path = process.env.ROOT_API + "/api/v1/chaine/";
|
||||||
axios.put(path)
|
axios
|
||||||
.then((res) => {
|
.put(path)
|
||||||
if (res.data=='OK'){
|
.then(res => {
|
||||||
alert("update database OK");
|
if (res.data == "OK") {
|
||||||
|
alert("update database OK");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((res) => {
|
.catch(res => {
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
alert("error during database update");
|
alert("error during database update");
|
||||||
console.error(res);
|
console.error(res);
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
h1, h2 {
|
h1,
|
||||||
|
h2 {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
ul.casting>li{
|
|
||||||
list-style-type: initial;
|
|
||||||
text-align: justify
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
text-align: justify;
|
||||||
text-align: justify
|
|
||||||
|
|
||||||
}
|
}
|
||||||
input[type=text] {
|
|
||||||
|
|
||||||
border-radius: 4px;
|
.is-success {
|
||||||
padding: 12px 20px;
|
background-color: #4caf50;
|
||||||
margin: 8px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
input[type=text]:focus {
|
|
||||||
border: 2px solid rgb(30, 66, 230);
|
.is-hoverable {
|
||||||
}
|
|
||||||
img{
|
|
||||||
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 16px 32px;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: 4px 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
color: #42b983;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user