Consolidacion

master
Fernando 2018-12-15 22:49:59 -05:00
parent 15f2c45574
commit 5020fe7eea
15 changed files with 481 additions and 27 deletions

17
app.ts
View File

@ -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.listen(8080);
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);

View File

@ -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",

View File

@ -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

View File

@ -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="../../../About.php">Sobre Nosotros</router-link></li>
<li><router-link to="/cambios">Lista de Cambios</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
}
}
}

View File

@ -25,8 +25,8 @@
<div class="panel__descripcion__titulo" :style="'color: ' + color">
Links<br>
</div>
Todos los links se abren en una pestaña nueva.<br>
<span v-for="(ep, num) in opcion.eps" class="panel__descripcion__link">
Todos los links se abren en una pestaña nueva.<br>
<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) {

View File

@ -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>
Color: {{ color }}
Cosas varias.
</p>
</div>
<div class="col l4 offset-l2 s12">

View File

@ -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) {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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));
});

View File

@ -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);
}