integrate emmision

client/src/App.vue

@@ -15,6 +15,9 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 500px;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;

client/src/components/chainetv.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <h1>ChaineTV</h1>
+      <div class="form">
         <div>
           <input v-on:keyup.enter="checkchaine()" name="chaine-input" v-model=chaine type="text">
         </div>
@@ -9,10 +10,24 @@
 
           <button v-on:click="parsechaine()">update chaine</button>
         </div>
+      </div>
       <div >
         <ul v-if="arrayresultchaines">
           <li v-for="result in arrayresultchaines" v-bind:key="result.chaine"  >
-            {{result.chaine}} : {{result.name}}
+            <h3>{{result.chaine}} : {{result.name}}</h3>
+            <ul v-if="result.emission!='can\'t find channel'">
+              <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>
+              </ul>
+            </ul>
+            <p v-else>{{result.emission}}</p>
+
           </li>
         </ul>
 
@@ -35,24 +50,36 @@ export default {
     getchaine(num) {
 
       let path = process.env.ROOT_API + '/api/v1/chaine/';
-      path += num;
-      axios.get(path)
+      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() {
-      if (this.chaine == ""){
-        alert("rentrer un numéro")
-        return
+      if (this.chaine === ""){
+        alert("rentrer un numéro");
+        return;
       }
       this.arrayresultchaines=[];
-      const arraychaine=this.chaine.split(' ');
+      const arraychaine=[...new Set(this.chaine.split(' '))];
 
       arraychaine.forEach(element => {
         if (element != ""){
@@ -66,12 +93,12 @@ export default {
       axios.put(path)
         .then((res) => {
           if (res.data=='OK'){
-            
+             alert("update database OK");
           }
         })
         .catch((res) => {
           // eslint-disable-next-line
-          alert("error during database update")
+          alert("error during database update");
           console.error(res);
         });
     },
@@ -84,11 +111,21 @@ h1, h2 {
   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
+ 
+}
 input[type=text] {
 
   border-radius: 4px;
@@ -99,7 +136,9 @@ input[type=text] {
 input[type=text]:focus {
   border: 2px solid rgb(30, 66, 230);
 }
+img{
   
+}
 button {
   background-color: #4CAF50;
   border: none;

client/src/components/ping.vue

@@ -35,6 +35,7 @@ export default {
 <style scoped>
 h1, h2 {
   font-weight: normal;
+  text-align: center;
 }
 ul {
   list-style-type: none;