Terminada la conexion del panel de descarga con la base de datos. Todo: Funcionalidad del panel

package-lock.json

@@ -992,6 +992,11 @@
       "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
       "dev": true
     },
+    "bignumber.js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-4.1.0.tgz",
+      "integrity": "sha512-eJzYkFYy9L4JzXsbymsFn3p54D+llV27oTQ+ziJG7WFRheJcNZilgVXMG0LoZtlQSKBsJdWtLFqOD0u+U0jZKA=="
+    },
     "binary-extensions": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.12.0.tgz",
@@ -1869,8 +1874,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
-      "dev": true
     },
     "cosmiconfig": {
       "version": "5.0.6",
@@ -5002,8 +5006,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
-      "dev": true
     },
     "isemail": {
       "version": "3.1.3",
@@ -5803,6 +5806,17 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "mysql": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.16.0.tgz",
+      "integrity": "sha512-dPbN2LHonQp7D5ja5DJXNbCLe/HRdu+f3v61aguzNRQIrmZLOeRoymBYyeThrR6ug+FqzDL95Gc9maqZUJS+Gw==",
+      "requires": {
+        "bignumber.js": "4.1.0",
+        "readable-stream": "2.3.6",
+        "safe-buffer": "5.1.2",
+        "sqlstring": "2.3.1"
+      }
+    },
     "nan": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
@@ -7165,8 +7179,7 @@
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
-      "dev": true
     },
     "promise-inflight": {
       "version": "1.0.1",
@@ -7410,7 +7423,6 @@
       "version": "2.3.6",
       "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-      "dev": true,
       "requires": {
         "core-util-is": "1.0.2",
         "inherits": "2.0.3",
@@ -8491,6 +8503,11 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "sqlstring": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
+      "integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
+    },
     "sshpk": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.1.tgz",
@@ -8655,7 +8672,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "5.1.2"
       }
@@ -9456,8 +9472,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
-      "dev": true
     },
     "util.promisify": {
       "version": "1.0.0",

package.json

@@ -12,6 +12,7 @@
     "@types/express": "^4.16.0",
     "@types/node": "^10.12.5",
     "express": "^4.16.4",
+    "mysql": "^2.16.0",
     "vue": "^2.5.17",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^7.0.0",

src/components/AnimeView/Contenido.vue

@@ -42,7 +42,7 @@
                     <anuncio-global />
                     <anuncio-local />
                     <br>
-                    <panel-de-descarga :color="color" />
+                    <panel-de-descarga :color="color" :nombre="datos.titulo"/>
 
                 </div>
             </div>

src/components/AnimeView/irozuku.json

@@ -4,7 +4,7 @@
   "opciones": [
     {
       "formato": "ligero",
-      "res": "720p",
+      "res": "@60fps",
       "servidor": "MEGA",
       "color": "red",
       "eps": {

src/components/AnimeView/panelDeDescarga.vue

@@ -4,20 +4,28 @@
             Descarga aquí.<br>
             <div class="panel__titulo__variantes">
 
-                <div class="panel__titulo__variantes__variante hoverable" style="background-color: red">
+                <template v-for="(opcion, indice) in datos.opciones">
-                    Ligero <br>MEGA
+                    <div class="panel__titulo__variantes__variante hoverable"
-                </div>
+                         :style="indice === 0? `background-color: ${opcion.color}` : ''"
-                <div class="panel__titulo__variantes__variante hoverable">
+                         v-on:click="cambiarDescripcionDescarga(indice)" >
-                    MP4 720p <br>MEGA
+                        {{ opcion.formato }} {{ opcion.res }}<br>{{ opcion.servidor }}
-                </div>
+                    </div>
+                </template>
 
             </div>
 
         </div>
         <div class="panel__descripcion">
-            Códec: H265, Resolución: 1280x720p, Framerate: 60fps, Contenedor: MP4, Subtitulos: Quemados<br>
+
-            <div class="panel__descripcion__titulo" :style="'color: ' + color">Links</div>
+            <template v-for="(opcion, indice) in datos.opciones">
-            o
+
+                <div class="panel__descripcion__titulo" :id="`tarjeta${indice}`"
+                     :style="'color: ' + color + ((indice !== 0)? '; display: none' : '')">
+                    Links (Elem num {{ indice }})
+                </div>
+
+            </template>
+
         </div>
     </div>
 </template>
@@ -26,11 +34,54 @@
 
     export default {
         name: "panelDeDescarga",
+        data: function () {
+            return {
+                datos: {},
+                posActual: '0'
+            }
+        },
         props: {
             color: {
                 type: String,
                 default: '#23bf87'
+            },
+            nombre: {
+                type: String,
+                required: true
             }
+        },
+        methods: {
+            cambiarDescripcionDescarga (idDestino: string) {
+                const elemAnterior = document.getElementById(`tarjeta${this.posActual}`);
+                const elemNuevo = document.getElementById(`tarjeta${idDestino}`);
+
+                if (elemNuevo && elemAnterior) {
+                    this.posActual = idDestino;
+
+                    elemAnterior.style.display = "none";
+                    elemNuevo.style.display = "block";
+
+                    console.log(":3 " + idDestino);
+                } else {
+                    console.log(":c");
+                }
+            }
+        },
+        created: function () {
+            const xhr = new XMLHttpRequest();
+
+            xhr.open("POST","/links");
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+            const vm = this;
+            xhr.onload = () => {
+
+                const data = JSON.parse(xhr.responseText);
+                if (data.exito) {
+                    vm.datos = data.payload;
+                }
+
+            };
+            xhr.send(`nombre=${ this.nombre }`);
         }
     }
 </script>

src/views/AnimeView.vue

@@ -5,13 +5,13 @@
                 :anio="parseInt(this.$route.params.anio)"
                 :temporada="this.$route.params.temp"
                 :nombre="this.$route.params.anime"
-                :color="this.datos.data.color"
+                :color="color"
         />
         <div class="container row">
             <div class="col l8 m12 s12">
 
                 <contenido :nombre="this.$route.params.anime" :datos="this.datos" :render="this.existe"
-                           :color="this.datos.data.color"/>
+                           :color="color"/>
 
             </div>
             <div class="col l4 hide-on-med-and-down">
@@ -39,6 +39,7 @@
         data: function () {
             return {
                 datos: {},
+                color: '#23bf87',
                 existe: false
             }
         },
@@ -49,9 +50,10 @@
                 for (const animeI in window.indiceAnimes) {
                     const anime = window.indiceAnimes[animeI];
                     if (anime.link === link) {
-                        console.log("Lo encontre we :D");
+
                         this.datos = anime;
                         this.existe = true;
+                        this.color = anime.data.color;
                         break;
                     }
                 }

srv/LinksAnimes/obtenerLinks.ts

@@ -0,0 +1,36 @@
+const obtenerLinks = (req: any, res: any) => {
+
+    const con = require('../mysql').obtenerConexionMySql();
+    const nombre = req.body.nombre;
+
+    con.connect((err: any) => {
+        if (!err && nombre !== undefined) {
+            con.query(
+                `SELECT data FROM links WHERE nombre='${nombre}'`,
+                (err: any, response: any) => {
+                    if (!err && response[0] ) {
+
+                        const objecto = JSON.parse(response[0]["data"]);
+
+                        res.send(`{ "exito": true, "payload": ${JSON.stringify(objecto)} }`);
+
+                    } else {
+                        console.log("Error al ejecutar Query.\n" + err);
+                        res.send(`{ "exito": false }`);
+                    }
+
+                    con.end();
+                }
+            );
+
+        } else {
+            console.log("Hubo un error al conectarse a la base de datos :c");
+            res.send(`{ "exito": false }`);
+
+            con.end();
+        }
+    });
+
+};
+
+module.exports.obtenerLinks = obtenerLinks;

srv/index.ts

@@ -1,7 +1,9 @@
 import express from 'express';
 
 export default (app:any) => {
-    // app.use(express.json());
+
+    app.use(express.json());
+    app.use(express.urlencoded());
     //
     // app.get('/foo', (req, res) => {
     //   res.json({msg: 'foo'});
@@ -12,4 +14,7 @@ export default (app:any) => {
     // });
 
     app.get("/");
+
+    app.post('/links', require('./LinksAnimes/obtenerLinks').obtenerLinks);
+
 }