improve gestion affichage

backend/chaine.json

@@ -164,7 +164,7 @@
     "212": "Dorcel TV\n",
     "213": "Dorcel XXX\n",
     "214": "Libido TV\n",
-    "215": "Penthouse HD\n",
+    "215": " Penthouse Gold\n",
     "216": "Penthouse Black\n",
     "217": "Colmax TV\n",
     "218": "Pink X\n",
@@ -336,7 +336,7 @@
     "614": "RTL2\n",
     "615": "Fun Radio\n",
     "616": "NRJ\n",
-    "617": "Ch\u00e9rie\n",
+    "617": "Ch\u00e9rie FM\n",
     "618": "Rire & Chansons\n",
     "619": "Nostalgie\n",
     "620": "RMC\n",

client/src/components/chainetv.vue

@@ -2,19 +2,20 @@
   <div>
     <h1>ChaineTV</h1>
       <div>
-        <input name="chaine-input" v-model=chaine type="text">
+        <input v-on:keyup.enter="checkchaine()" name="chaine-input" v-model=chaine type="text">
       </div>
       <div>
         <button v-on:click="checkchaine()">search</button>
 
-        <button v-on:click="parsechaine">update chaine</button>
+        <button v-on:click="parsechaine()">update chaine</button>
       </div>
       <div >
-        <ul>
-          <li  v-for="message in messages" :key="message">
-            {{message}}
+        <ul v-if="arrayresultchaines">
+          <li v-for="result in arrayresultchaines" v-bind:key="result.chaine"  >
+            {{result.chaine}} : {{result.name}}
           </li>
         </ul>
+       
       </div>
   </div>
 </template>
@@ -26,7 +27,7 @@ export default {
   name: 'chainetv',
   data() {
     return {
-      messages: [],
+      arrayresultchaines: [],
       chaine: '',
     };
   },
@@ -37,8 +38,8 @@ export default {
       path += num;
       axios.get(path)
         .then((res) => {
-          this.messages.push(num + ' ==> ' + res.data);
-          console.log(this.messages);
+          this.arrayresultchaines.push({"chaine":num,"name":res.data});
+          
         })
         .catch((error) => {
           // eslint-disable-next-line
@@ -46,15 +47,21 @@ export default {
         });
     },
     checkchaine() {
-      this.message=null
-      this.getchaine(this.chaine);
+      this.arrayresultchaines=[];
+      const arraychaine=this.chaine.split(' ');
 
+      arraychaine.forEach(element => {
+        if (element != ""){
+          this.getchaine(element);
+        }
+      });
+      
     },
     parsechaine() {
       const path = process.env.ROOT_API + '/api/v1/chaine/';
       axios.put(path)
         .then((res) => {
-          this.message = res.data;
+          this.messages = res.data;
 
         })
         .catch((error) => {
@@ -68,12 +75,34 @@ export default {
 <style scoped>
 h1, h2 {
   font-weight: normal;
+  font-size: 2em;
+  font-weight: bold;
 }
 ul {
   list-style-type: none;
   padding: 0;
 }
 
+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);
+}
+
+button {
+  background-color: #4CAF50;
+  border: none;
+  color: white;
+  padding: 16px 32px;
+  text-decoration: none;
+  margin: 4px 2px;
+  cursor: pointer;
+}
 a {
   color: #42b983;
 }