From 4aff802d1843223e93ca4c3438d8ee38dbc7f542 Mon Sep 17 00:00:00 2001
From: vincent <vincent@ducamps.win>
Date: Fri, 26 Apr 2019 20:33:02 +0200
Subject: [PATCH] implement bulma style

---
 client/src/components/chainetv.vue | 201 +++++++++++++++--------------
 1 file changed, 107 insertions(+), 94 deletions(-)

diff --git a/client/src/components/chainetv.vue b/client/src/components/chainetv.vue
index 9c6d2cc..37ded3e 100644
--- a/client/src/components/chainetv.vue
+++ b/client/src/components/chainetv.vue
@@ -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>