vincent/chainetv_web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

implement bulma style

Browse Source
This commit is contained in:
vincent 2019-04-26 20:33:02 +02:00
parent 49c17fae69
commit 4aff802d18
1 changed files with 107 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
client/src/components/chainetv.vue
View File

@ -1,77 +1,117 @@
<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> </div>
<div> </section>
<button v-on:click="checkchaine()">search</button> <div class="section has-text-centered">
<div class="container">
<button v-on:click="parsechaine()">update chaine</button> <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 > <div class="field field is-grouped is-grouped-centered">
<ul v-if="arrayresultchaines"> <div class="control">
<li v-for="result in arrayresultchaines" v-bind:key="result.chaine" > <button class="button is-success" v-on:click="checkchaine()">search</button>
<h3>{{result.chaine}} : {{result.name}}</h3> </div>
<div class="control">
<button class="button is-success" v-on:click="parsechaine()">update chaine</button>
</div>
</div>
</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">
<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><h4><a target="_blank" :href="result.emission.href">{{result.emission.title}}</a></h4></li> <li>
<li><img :src="result.emission.img"></li> <h4 class="title is-4">
<li><p>{{result.emission.synopsis}}</p></li> <a
<ul v-if="result.emission.casting.length!=0" class="casting"> class="has-text-success"
<h4>casting:</h4> target="_blank"
<li v-for="(actor,index) in result.emission.casting" v-bind:key="index" > :href="result.emission.href"
<i><a target="_blank" :href="'https://fr.wikipedia.org/wiki/'+actor.replace(' ','_')">{{actor}}</a></i> >{{result.emission.title}}</a>
</h4>
</li> </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> <p v-else>{{result.emission}}</p>
</li> </li>
</ul> </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 === "") {
@ -79,76 +119,49 @@ export default {
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 => {
if (res.data == "OK") {
alert("update database 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 .is-success {
background-color: #4caf50;
}
} .is-hoverable {
input[type=text] {
border-radius: 4px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
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 {
color: #42b983; color: #42b983;
} }
</style> </style>