Consolidacion

app.ts

@@ -1,10 +1,11 @@
 let express = require('express');
 let app = express();
 
-
 app.use(express.static('dist'));
+
+// Que era history??
 // @ts-ignore
-app.use(history());
+// app.use(history());
 
 app.use(express.urlencoded());
 app.use(express.json());
@@ -14,4 +15,14 @@ app.get("/");
 app.post('/links', require('./srv/LinksAnimes/obtenerLinks').obtenerLinks);
 app.put('/links', require('./srv/LinksAnimes/modificarLink').modificarLinks);
 
+app.put('/a/', require('./srv/Admin/crearAnime').crearAnime);
+app.get('/a/', require('./srv/Admin/obtenerTodosAnimes').obtenerTodosAnimes);
+
+app.get('/op/:id', require('./srv/Admin/OP/obtenerOPs').obtenerOPs);
+app.post('/op/', require('./srv/Admin/OP/nuevoOP').nuevoOP);
+
+app.get('/eps/variantes/:anime_ID', require('./srv/Admin/Eps/obtenerVariantes').obtenerVariantes);
+app.get('/eps/links/:opcion_ID', require('./srv/Admin/Eps/obtenerLinks').obtenerLinks);
+app.post('/eps/links/', require('./srv/Admin/Eps/crearLink').crearLink);
+
 app.listen(8080);

package.json

@@ -7,7 +7,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "express": "vue-cli-service express:watch",
-    "express:run": "vue-cli-service express:run"
+    "express:run": "vue-cli-service express:run",
+    "deploy": "gcloud app deploy"
   },
   "dependencies": {
     "@types/express": "^4.16.0",

src/components/Administracion/lista-animes.vue

@@ -13,7 +13,8 @@
                 <td class="columna-id">{{ anime["anime_ID"] }}</td>
                 <td>{{ anime["titulo"] }}</td>
                 <td>
-                    <button class="btn" @click="revisarOP('anime' + anime['anime_ID'], anime['anime_ID'])">OP</button> | <button class="btn">ED</button> | <button class="btn">Link</button>
+                    <button class="btn" @click="revisarOP('anime' + anime['anime_ID'], anime['anime_ID'])">OP</button> |
+                    <button class="btn">ED</button> | <button class="btn" @click="verLinks('anime' + anime['anime_ID'], anime['anime_ID'])">Link</button>
                 </td>
             </tr>
             </tbody>
@@ -124,6 +125,15 @@
                 formCrear.appendChild(form);
                 elemNuevo.appendChild(formCrear);
 
+                const botonCerrar = document.createElement("button");
+                botonCerrar.className = "btn red";
+                botonCerrar.addEventListener("click", () => {
+                    elemActual.parentNode.removeChild(marco);
+                });
+                botonCerrar.innerText = "Cerrar.";
+                elemNuevo.appendChild(document.createElement("br"));
+                elemNuevo.appendChild(botonCerrar);
+
                 elemNuevo.style.padding = "30px";
 
                 const xhr = new XMLHttpRequest();
@@ -148,12 +158,256 @@
 
                 marcof.appendChild(elemNuevo);
                 elemActual.parentNode.insertBefore(marco, elemActual.nextSibling);
+            },
+            verLinks (elemId, animeID) {
+                console.log("Viendo los links.");
+                /* TODO: Usar los datos para crear:
+                * Form para crear Variantes (usando un xhr)
+                * Form para crear links que se adecue a cada variante (usando un xhr diferente)
+                * con 2 peticiones xhr
+                * */
+                const crear = data => {
+                    const elemActual = document.getElementById(elemId);
+
+                    const marco = document.createElement("tr");
+                    marco.appendChild(document.createElement("td"));
+                    const marcof = document.createElement("td");
+                    marco.appendChild(marcof);
+                    marco.appendChild(document.createElement("td"));
+
+                    const elemNuevo = document.createElement("div");
+
+                    for (const varianteID in data) {
+                        if (data.hasOwnProperty(varianteID)) {
+
+                            const variante = data[varianteID];
+
+                            const contenedor = document.createElement("div");
+
+                            const varianteSpan = document.createElement("span");
+                            varianteSpan.className = "variante";
+                            varianteSpan.innerText = variante.formato;
+                            contenedor.appendChild(varianteSpan);
+
+                            const resSpan = document.createElement("span");
+                            resSpan.className = "res";
+                            resSpan.innerText = variante.res;
+                            contenedor.appendChild(resSpan);
+
+                            const servidorSpan = document.createElement("span");
+                            servidorSpan.className = "servidor";
+                            servidorSpan.innerText = variante.servidor;
+                            contenedor.appendChild(servidorSpan);
+
+                            const botonVerVariante = document.createElement("span");
+                            botonVerVariante.className = "ver-variante";
+                            botonVerVariante.innerText = "Ver mas";
+                            let contenedorLinks;
+                            const verLinks = () => {
+                                botonVerVariante.innerText = "Cerrar";
+                                botonVerVariante.removeEventListener("click", verLinks);
+                                botonVerVariante.addEventListener("click", ocultarLinks);
+
+                                const generarListaEps = data => {
+                                    contenedorLinks.innerHTML = "";
+
+                                    for (const epID in data) {
+                                        if (data.hasOwnProperty(epID)) {
+                                            const ep = data[epID];
+
+                                            const epDiv = document.createElement("div");
+                                            epDiv.className = "eps-div";
+                                            epDiv.innerHTML = `Ep. ${ep.num_ep}, ${ep.peso} y ${ep.visitas} visitas ->
+                                                <a href="${ep.link}" target="_blank" title="Link">${ep.link.substr(0, 50)}...</a>`;
+                                            contenedorLinks.appendChild(epDiv);
+
+                                        }
+                                    }
+
+                                    const agregarEpForm = document.createElement("form");
+                                    agregarEpForm.class = "agregar-ep-form";
+                                    agregarEpForm.onsubmit = () => false;
+
+                                    const numEp = document.createElement("input");
+                                    numEp.className = "agregar-ep-form__num-ep";
+                                    numEp.placeholder = "Ep num";
+                                    agregarEpForm.appendChild(numEp);
+
+                                    const visitas = document.createElement("input");
+                                    visitas.className = "agregar-ep-form__visitas";
+                                    visitas.placeholder = "Visitas";
+                                    visitas.value = '0';
+                                    agregarEpForm.appendChild(visitas);
+
+                                    const peso = document.createElement("input");
+                                    peso.className = "agregar-ep-form__peso";
+                                    peso.placeholder = "Peso";
+                                    agregarEpForm.appendChild(peso);
+
+                                    const link = document.createElement("input");
+                                    link.className = "agregar-ep-form__link";
+                                    link.placeholder = "link";
+                                    agregarEpForm.appendChild(link);
+
+                                    const botonCrear = document.createElement("button");
+                                    botonCrear.className = "agregar-ep-form__boton-crear";
+                                    botonCrear.innerText = "Crear ep";
+                                    botonCrear.addEventListener("click", () => {
+
+                                        const xhr = new XMLHttpRequest();
+                                        xhr.open("POST", "/eps/links/");
+                                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+                                        xhr.onload = () => {
+                                            const respuesta = YAML.parse(xhr.responseText);
+                                            if (!respuesta.error) {
+                                                numEp.value = visitas.value = peso.value = link.value = "";
+                                            } else {
+                                                console.log("Error :c");
+                                            }
+                                        };
+                                        const dataAEnviar = {
+                                            opcion_ID: variante.opcion_ID,
+                                            num_ep: numEp.value,
+                                            visitas: visitas.value,
+                                            link: link.value,
+                                            peso: peso.value
+                                        };
+                                        xhr.send(`params=${YAML.stringify(dataAEnviar)}`);
+
+                                    });
+                                    agregarEpForm.appendChild(botonCrear);
+
+                                    contenedorLinks.appendChild(agregarEpForm);
+                                };
+
+                                contenedorLinks = document.createElement("div");
+                                contenedorLinks.className = "identado";
+                                contenedorLinks.innerHTML = "Cargando...";
+                                contenedor.insertBefore(contenedorLinks, botonVerVariante.nextSibling);
+
+                                const xhr = new XMLHttpRequest();
+                                xhr.open("GET", `/eps/links/${variante.opcion_ID}`);
+                                xhr.onload = () => {
+                                    generarListaEps(YAML.parse(xhr.responseText));
+                                    console.log(xhr.responseText);
+                                };
+                                xhr.send();
+                            };
+                            function ocultarLinks() {
+                                botonVerVariante.innerText = "Ver mas";
+                                botonVerVariante.removeEventListener("click", ocultarLinks);
+                                botonVerVariante.addEventListener("click", verLinks);
+
+                                contenedor.removeChild(contenedorLinks);
+                            }
+                            botonVerVariante.addEventListener("click", verLinks);
+                            contenedor.appendChild(botonVerVariante);
+
+                            elemNuevo.appendChild(contenedor);
+                        }
+
+                    }
+
+                    const botonCerrar = document.createElement("button");
+                    botonCerrar.className = "btn red";
+                    botonCerrar.innerText = "Cerrar.";
+                    botonCerrar.addEventListener("click", () => {
+                        elemActual.parentNode.removeChild(marco);
+                    });
+                    elemNuevo.appendChild(document.createElement("br"));
+                    elemNuevo.appendChild(botonCerrar);
+
+                    marcof.appendChild(elemNuevo);
+                    elemActual.parentNode.insertBefore(marco, elemActual.nextSibling);
+                };
+
+                const xhr = new XMLHttpRequest();
+                xhr.open("GET", `/eps/variantes/${animeID}`);
+                xhr.onload = () => {
+                    const data = YAML.parse(xhr.responseText);
+                    console.log(xhr.responseText);
+                    crear(data);
+                };
+                xhr.send();
+
             }
         }
     }
 </script>
 
-<style scoped lang="sass">
+<style lang="sass">
+%tags
+    display: inline-block
+    cursor: default
+    color: white
+    padding: 5px 8px
+    border-radius: 3px
+    margin: 0 5px
+    font:
+        size: medium
+
+.variante
+    @extend %tags
+    background-color: #339
+
+.res
+    @extend %tags
+    background-color: #393
+
+.servidor
+    @extend %tags
+    background-color: #933
+
+.ver-variante
+    @extend %tags
+    background-color: white
+    color: black
+    cursor: pointer
+    transition: transform 250ms, box-shadow 250ms
+    user-select: none
+    &:hover
+        transform: translate(-1px, -1px)
+        box-shadow: 1px 1px 2px #444
+
+.eps-div
+    overflow: hidden
+
+.identado
+    padding: 10px 0 10px 20px
+
+.agregar-ep-form
+    input
+
+
+%inputs-agregar-ep
+    display: inline-block
+    margin: 0 5px !important
+    padding: 5px !important
+
+.agregar-ep-form__num-ep
+    @extend %inputs-agregar-ep
+    max-width: 30px
+
+
+.agregar-ep-form__visitas
+    @extend %inputs-agregar-ep
+    max-width: 30px
+
+.agregar-ep-form__link
+    @extend %inputs-agregar-ep
+    width: 400px !important
+
+.agregar-ep-form__peso
+    @extend %inputs-agregar-ep
+    max-width: 70px
+
+.agregar-ep-form__boton-crear
+    padding: 10px
+    background-color: black
+    color: white
+    border: none
+    border-radius: 3px
+    cursor: pointer
 
 .columna-id
     max-width: 40px

src/components/AnimeView/NavBar.vue

@@ -10,13 +10,13 @@
                     </b>
 
                     <ul class="right hide-on-med-and-down">
-                        <li><router-link to="../../../Changelog.php">Lista de Cambios</router-link></li>
+                        <li><router-link to="/cambios">Lista de Cambios</router-link></li>
-                        <li><router-link to="../../../About.php">Sobre Nosotros</router-link></li>
+                        <li><router-link to="/nosotros">Sobre Nosotros</router-link></li>
                     </ul>
                 </div>
             </nav>
         </div>
-        <div class="nav-wrapper" :style="'background-color: ' + color">
+        <div class="nav-wrapper" :style="'background-color: ' + color" v-if="renderizarBarraInferior">
             <div class="col s12 enMedio">
                 <router-link to="/" class="breadcrumb" style="margin-left: 20px">Inicio</router-link>
                 <router-link to="/Anime/" class="breadcrumb enMedio">Anime</router-link>
@@ -39,6 +39,10 @@
             color: {
                 type: String,
                 default: "#23BF87"
+            },
+            renderizarBarraInferior: {
+                type: Boolean,
+                default: true
             }
         }
     }

src/components/AnimeView/panelDeDescarga.vue

@@ -25,8 +25,8 @@
                     <div class="panel__descripcion__titulo" :style="'color: ' + color">
                         Links<br>
                     </div>
-                    <span v-for="(ep, num) in opcion.eps" class="panel__descripcion__link">
                     Todos los links se abren en una pestaña nueva.<br>
+                    <span v-for="(ep, num) in opcion.eps" class="panel__descripcion__link">
                         <br>
                         Episodio {{ num }} ->
                         <a :href="ep.link" target="_blank" :style="'color: ' + color"
@@ -49,7 +49,7 @@
         name: "panelDeDescarga",
         data: function () {
             return {
-                posActual: '0'
+                posActual: '1'
             }
         },
         props: {
@@ -76,6 +76,8 @@
                 const opcionAnterior = document.getElementById(`opcion${this.posActual}`);
                 const opcionNueva = document.getElementById(`opcion${idDestino}`);
 
+                console.log("posicionActual es " + this.posActual + " y pronto sera " + idDestino);
+
                 if (elemNuevo && elemAnterior && opcionAnterior && opcionNueva) {
                     this.posActual = idDestino;
 
@@ -86,7 +88,8 @@
                     opcionNueva.style.backgroundColor = opcionNueva.getAttribute("color-min");
 
                 } else {
-                    console.log(":c");
+                    console.log("Woah, elemNuevo && elemAnterior && opcionAnterior && opcionNueva no se cumple...\n" +
+                        elemNuevo + " " + elemAnterior + " " + opcionAnterior + " " + opcionNueva);
                 }
             },
             incrementarContador (ep_ID, evento) {

src/components/mi-footer.vue

@@ -7,8 +7,7 @@
                     <p class="grey-text text-lighten-4">
                         Anime de temporada @24FPS y @60FPS, H.264 y H.265<br>
                         Traducciones de Novelas Ligeras desde Ingles y Japones.<br>
-                        Cosas varias.<br>
+                        Cosas varias.
-                        Color: {{ color }}
                     </p>
                 </div>
                 <div class="col l4 offset-l2 s12">

src/router.ts

@@ -29,6 +29,16 @@ const rutas = {
             path: '/a/',
             name: 'Administracion',
             component: () => import('./views/Administracion.vue')
+        },
+        {
+            path: '/cambios',
+            name: 'Lista de Cambios',
+            component: () => import('./views/ListaDeCambios.vue')
+        },
+        {
+            path: '/nosotros',
+            name: 'Nosotros',
+            component: () => import('./views/Nosotros.vue')
         }
     ],
     scrollBehavior (to: any, from: any, savedPosition: any) {

src/views/Inicio.vue

@@ -36,6 +36,8 @@ import sliderReciente from '../components/slider-reciente.vue'
 import tarjetaMenuPrin from '../components/tarjeta-menu-princ.vue'
 import featuresCard from '../components/features-card.vue'
 import footer from '../components/mi-footer.vue'
+import { global } from "../global";
+
 
 export default {
     components: {
@@ -44,6 +46,9 @@ export default {
         'tarjeta-menu-prin': tarjetaMenuPrin,
         'features-card': featuresCard,
         'mi-footer': footer
+    },
+    created: function () {
+        global.color = '#23bf87';
     }
 }
 </script>

src/views/ListaDeCambios.vue

@@ -1,10 +1,38 @@
 <template>
-    $END$
+    <div>
+        <nav-bar variante="" :anio="0" temporada="" nombre="" :renderizar-barra-inferior="false"/>
+
+        <div class="container row">
+            <div class="col l8 m12 s12">
+                <div class="caja contenido">
+                    Hmmph
+                </div>
+            </div>
+            <div class="col l4 hide-on-med-and-down">
+                <div class="caja">
+                    :c
+                </div>
+            </div>
+        </div>
+
+        <mi-footer />
+    </div>
 </template>
 
 <script>
+    import NavBar from '../components/AnimeView/NavBar.vue'
+    import MiFooter from '../components/mi-footer.vue'
+    import { global } from "../global";
+
     export default {
-        name: "ListaDeCambios"
+        name: "ListaDeCambios",
+        components: {
+            'nav-bar': NavBar,
+            'mi-footer': MiFooter
+        },
+        created: function () {
+            global.color = '#23bf87';
+        }
     }
 </script>
 

src/views/Nosotros.vue

@@ -1,10 +1,21 @@
 <template>
-    $END$
+    <div>
+        <nav-bar variante="" :anio="0" temporada="" nombre="" :renderizar-barra-inferior="false"/>
+    </div>
 </template>
 
 <script>
+    import NavBar from '../components/AnimeView/NavBar.vue'
+    import { global } from "../global";
+
     export default {
-        name: "Nosotros"
+        name: "Nosotros",
+        components: {
+            'nav-bar': NavBar
+        },
+        created: function () {
+            global.color = '#23bf87';
+        }
     }
 </script>
 

srv/Admin/Eps/crearLink.ts

@@ -0,0 +1,43 @@
+interface formatoDataARecibir {
+    opcion_ID: number,
+    num_ep: number,
+    visitas: number,
+    link: string,
+    peso: string
+}
+
+const crearLink = (req: any, res: any) => {
+
+    const con = require('../../mysql').obtenerConexionMySql();
+    const YAML = require('yaml');
+
+    const parametros: formatoDataARecibir = YAML.parse(req.body.params);
+
+    con.connect((err: Error) => {
+        if (!err && parametros) {
+
+            const query = `INSERT INTO eps (opcion_ID, num_ep, visitas, link, peso) VALUES (${parametros.opcion_ID}, 
+              ${parametros.num_ep}, ${parametros.visitas}, ${con.escape(parametros.link)}, ${con.escape(parametros.peso)} )`;
+            con.query(query, (err: Error) => {
+                if (!err) {
+
+                    res.send("error: false");
+
+                } else {
+                    console.log("Error al ejecutar query en /Admin/Eps/crearEp -> con.query (linea 20). Query y error:\n" + query + "\n" + parametros);
+                    res.send("error: true");
+                }
+            });
+
+        } else if (!err) {
+            console.log("Error. 'parametros' no existe en /Admin/Eps/crearEp -> con.connect (linea 16):\n" + parametros);
+            res.send("error: true");
+        } else {
+            console.log("Error al conectarse a la base de datos en /Admin/Eps/crearEp -> con.connect (linea 16):\n" + err);
+            res.send("error: true");
+        }
+    });
+
+};
+
+module.exports.crearLink = crearLink;

srv/Admin/Eps/obtenerLinks.ts

@@ -0,0 +1,43 @@
+interface epsRespuesta {
+    ep_ID: number,
+    opcion_ID: number,
+    num_ep: number,
+    visitas: number,
+    link: string,
+    peso: string
+}
+
+const obtenerLinks = (req: any, res: any) => {
+
+    const con = require('../../mysql').obtenerConexionMySql();
+    const YAML = require('yaml');
+
+    const opcion_ID = req.params.opcion_ID;
+
+    con.connect((err: Error) => {
+        if (!err && opcion_ID) {
+
+            const query = `SELECT * FROM eps WHERE opcion_ID=${opcion_ID}`;
+            con.query(query, (err: Error, response: epsRespuesta[]) => {
+                if (!err) {
+
+                    res.send(YAML.stringify(response));
+
+                } else {
+                    console.log("Error al ejecutar query en /Admin/Eps/obtenerEps con.query (linea 21). Query:\n" + query + "\nError: \n" + err);
+                    res.send("error: true");
+                }
+            });
+
+        } else if (!err) {
+            console.log("Error. opcion_ID no existe en /Admin/Eps/obtenerEps con.connect (linea 8)");
+            res.send("error: true");
+        } else {
+            console.log("");
+            res.send("error: true");
+        }
+    });
+
+};
+
+module.exports.obtenerLinks = obtenerLinks;

srv/Admin/Eps/obtenerVariantes.ts

@@ -0,0 +1,45 @@
+interface respuestaLinks {
+    opcion_ID: number,
+    links_ID: number,
+    num_opcion: number,
+    formato: string,
+    res: string,
+    servidor: string,
+    color: string
+}
+
+const obtenerVariantes = (req: any, res: any) => {
+
+    const con = require('../../mysql').obtenerConexionMySql();
+    const YAML = require('yaml');
+
+    const anime_ID: string = req.params.anime_ID;
+
+    con.connect((err: Error) => {
+        if (!err && anime_ID) {
+
+            const query = `SELECT * FROM links_opciones WHERE links_ID=(SELECT links_ID FROM links WHERE anime_ID=${anime_ID})`;
+
+            con.query (query, (err: Error, response: respuestaLinks[]) => {
+                if (!err) {
+
+                    res.send(YAML.stringify(response));
+
+                } else {
+                    console.log("Error al ejecutar query sql. La query era:\n" + query + "\n y el error es:\n" + err);
+                    res.send("error: true");
+                }
+            });
+
+        } else if (!err) {
+            console.log("Error. anime_ID no existe en Admin/Eps/obtenerVariantes con.connect:\n" + anime_ID);
+            res.send("error: true");
+        } else {
+            console.log("Error al conectarse a la Base de Datos en Admin/Eps/obtenerVariantes con.connect:\n" + err);
+            res.send("error: true");
+        }
+    });
+
+};
+
+module.exports.obtenerVariantes = obtenerVariantes;

srv/LinksAnimes/obtenerLinks.ts

@@ -95,7 +95,8 @@ const obtenerLinks = (req: any, res: any) => {
 
 
                         const gestorOpciones = new GestorDeTareas(() => {
-                            console.log(YAML.stringify(data));
+                            /* TODO: Error. Parece que las tareas se añaden luego de que se terminan. Rediseño pls :c */
+                            /* Este error ocasiona que solo se cargue la primera variante, y que el resto de variante se devuelva vacia. */
                             res.send(YAML.stringify(data));
                         });
 

srv/index.ts

@@ -4,14 +4,6 @@ export default (app:any) => {
 
     app.use(express.json());
     app.use(express.urlencoded());
-    //
-    // app.get('/foo', (req, res) => {
-    //   res.json({msg: 'foo'});
-    // });
-    //
-    // app.post('/bar', (req, res) => {
-    //   res.json(req.body);
-    // });
 
     app.get("/");
 
@@ -24,4 +16,8 @@ export default (app:any) => {
     app.get('/op/:id', require('./Admin/OP/obtenerOPs').obtenerOPs);
     app.post('/op/', require('./Admin/OP/nuevoOP').nuevoOP);
 
+    app.get('/eps/variantes/:anime_ID', require('./Admin/Eps/obtenerVariantes').obtenerVariantes);
+    app.get('/eps/links/:opcion_ID', require('./Admin/Eps/obtenerLinks').obtenerLinks);
+    app.post('/eps/links/', require('./Admin/Eps/crearLink').crearLink);
+
 }