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