784 lines
30 KiB
JavaScript
784 lines
30 KiB
JavaScript
|
|
|
|
/* posteriormente la información a cargar estará en una DB, la idea es más adelante hacer
|
|
una página de backoffice desde donde el admin gestionará los cambios
|
|
(adición, eliminación o modificación de productos, eventos...) */
|
|
|
|
|
|
|
|
const infoProductos = [
|
|
{
|
|
numeroproducto: 0,
|
|
titulo: "Primaris Invictor Tactical Warsuit",
|
|
img1: "../RECURSOS/Productos/Invictor300px.jpg",
|
|
img2: "../RECURSOS/Productos/InvictorLado300px.jpg",
|
|
img3: "../RECURSOS/Productos/InvictorOtroLado300px.jpg",
|
|
alt:"Invictor",
|
|
textodescrip: "Armadura de combate de los Ángeles Oscuros completamente pintada con un alto grado de detalle y personalización.",
|
|
disponibles: 1,
|
|
precio: 150.00
|
|
},
|
|
{
|
|
numeroproducto: 1,
|
|
titulo: "Termagantes Tiránidos",
|
|
img1: "../RECURSOS/Productos/TermagantesFront300px.jpg",
|
|
img2: "../RECURSOS/Productos/TermagantesLado300px.jpg",
|
|
img3: "../RECURSOS/Productos/TermagantesBack300px.jpg",
|
|
alt: "Termagantes",
|
|
textodescrip: "Unidad Básica de 10 Termagantes listos para la batalla. Especialistas en cuerpo a cuerpo, pese a no ser de élite aprovechan su gran número.",
|
|
disponibles: 1,
|
|
precio: 139.00
|
|
},
|
|
{
|
|
numeroproducto: 2,
|
|
titulo: "Primaris Inceptor Squad",
|
|
img1: "../RECURSOS/Productos/Inceptor300px.jpg",
|
|
img2: "../RECURSOS/Productos/InceptorLado300px.jpg",
|
|
img3: "../RECURSOS/Productos/PortadaInceptores300px.png",
|
|
alt: "Inceptores",
|
|
textodescrip: "Unidad de 3 Primaris Inceptors Ángeles Oscuros en armadura gravis equipados con armas de plasma.",
|
|
disponibles: 1,
|
|
precio: 149.00
|
|
},
|
|
{
|
|
numeroproducto: 3,
|
|
titulo: "Teniente Primaris Ángel Oscuro",
|
|
img1: "../RECURSOS/Productos/Teniente300px.jpg",
|
|
img2: "../RECURSOS/Productos/TenienteLadoDos300px.jpg",
|
|
img3: "../RECURSOS/Productos/TenienteLadouUno300px.jpg",
|
|
alt: "Teniente",
|
|
textodescrip: "Teniente Primaris de los Ángeles Oscuros equipado con arma de energía y pistola de plasma.",
|
|
disponibles: 1,
|
|
precio: 85.00
|
|
},
|
|
{
|
|
numeroproducto: 4,
|
|
titulo: "Guerreros Tiránidos",
|
|
img1: "../RECURSOS/Productos/TyranidWarriorUnoFront300px.jpg",
|
|
img2: "../RECURSOS/Productos/TyranidWarriorUno300px.jpg",
|
|
img3: "../RECURSOS/Productos/TyranidWarriorUnoBack300px.jpg",
|
|
alt: "Guerrero Tiranido",
|
|
textodescrip: "Versátil unidad de 2 guerreros y 1 primus. Bio-armas de disparo a distancicia y garras y látigo para el cuerpo a cuerpo.",
|
|
disponibles: 1,
|
|
precio: 129.00
|
|
}
|
|
]
|
|
|
|
const listaEventos = [
|
|
{
|
|
numeroEvento: 1,
|
|
titulo: "TORNEO PATRULLAS WARHAMMER 40K",
|
|
texto: "Torneito de toma de contacto para los recién iniciados al hobbie. Desde la Forja ponemos a vuestra disposición mesas, escenografía, ejército(en caso de que sea tu primera vez) y personal de apoyo.",
|
|
fecha: new Date(2024, 1, 10),
|
|
img: "../RECURSOS/Eventos/AquilaImperial150px.png"
|
|
|
|
},
|
|
{
|
|
numeroEvento: 2,
|
|
titulo: "TORNEO 1000PTS WARHAMMER 40K",
|
|
texto: "Torneo para foguearse, la mitad de puntos que una partida competitiva. Desde la Forja ponemos a vuestra disposición mesas, escenografía y árbitro.",
|
|
fecha: new Date(2024, 1, 17),
|
|
img: "../RECURSOS/Eventos/AquilaImperial150px.png"
|
|
},
|
|
{
|
|
numeroEvento: 3,
|
|
titulo: "PARTIDA ZOMBICIDE 2ND EDITION",
|
|
texto: " Clásica partida de zombis, mínimo 4 jugadores para disfrutar de una experiencia aterradora.",
|
|
fecha: new Date(2024, 1, 25),
|
|
img: "../RECURSOS/Eventos/logozombicide150px.jpg"
|
|
}
|
|
|
|
]
|
|
|
|
|
|
/*---------------------------- CONFIGURACION COOKIES------------------- */
|
|
|
|
function galletas() {
|
|
const aceptarGalletas = document.getElementById("botonGalleta");
|
|
const avisoGalleta = document.getElementById("avisoGalleta");
|
|
const fondoAvisoGalleta = document.getElementById("fondoAvisoGalletas");
|
|
const galletasNecesarias = document.getElementById("galletasNecesarias");
|
|
const galletasAnalisis = document.getElementById("galletasAnaliticas");
|
|
const galletasPublicidad = document.getElementById("galletasPubli");
|
|
|
|
|
|
if(!getCookieExistance("cookieNecesaria")){
|
|
avisoGalleta.classList.add('active');
|
|
fondoAvisoGalleta.classList.add('active')
|
|
}
|
|
|
|
aceptarGalletas.addEventListener('click', () => {
|
|
if (galletasAnalisis.checked){
|
|
document.cookie = "cookieAnalisis=true; max-age=2628000; path=/;";
|
|
}
|
|
if (galletasPublicidad.checked){
|
|
document.cookie = "cookiepubli=true; max-age=2628000; path=/;";
|
|
}
|
|
if (galletasNecesarias.checked){
|
|
document.cookie = "cookieNecesaria=true; max-age=2628000; path=/;";
|
|
avisoGalleta.classList.remove('active');
|
|
fondoAvisoGalleta.classList.remove('active');
|
|
location.reload();
|
|
}
|
|
})
|
|
|
|
function getCookieExistance(nombre) {
|
|
var cookies = document.cookie.split(";");
|
|
for (var i = 0; i < cookies.length; i++) {
|
|
var cookie = cookies[i].trim();
|
|
if (cookie.startsWith(nombre + "=")) {
|
|
return true;
|
|
}
|
|
}
|
|
return false; // Si no se encuentra la cookie, retorna false
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const cargado = () => {
|
|
|
|
|
|
// ---------------------- CONFIGURACIÓN BOTON SUBIR ARRIBA -----------------------------
|
|
|
|
|
|
|
|
const $btnUp = document.getElementById("botonArriba");
|
|
|
|
document.addEventListener("click", (e) =>{
|
|
if(e.target === $btnUp || e.target.matches(".fa-arrow-up")){
|
|
window.scrollTo({
|
|
behaviour: "smooth",
|
|
top: 0
|
|
})
|
|
}
|
|
});
|
|
|
|
|
|
//--------------------- CONFIGURACIÓN CARRITO COMPRA -------------------------------------
|
|
|
|
renderizarCesta();
|
|
|
|
|
|
//--------------------- CONFIGURACIÓN CONTENEDOR SERVICIOS -------------------------------------
|
|
|
|
const karroGrande = document.querySelector('.karro-grande');
|
|
const puntoKarro = document.querySelectorAll('.punto-karro');
|
|
|
|
|
|
puntoKarro.forEach((punto , i)=> {
|
|
puntoKarro[i].addEventListener('click', ()=>{
|
|
|
|
let posicionPunto = i;
|
|
let widthImg = 100 / puntoKarro.length
|
|
let operacionPunto = posicionPunto * -widthImg
|
|
console.log(operacionPunto)
|
|
karroGrande.style.transform = `translateX(${operacionPunto}%)`
|
|
|
|
puntoKarro.forEach((punto, i) => {
|
|
puntoKarro[i].classList.remove('activo')
|
|
})
|
|
puntoKarro[i].classList.add('activo')
|
|
})
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
//--------------------- CONFIGURACIÓN CONTENEDOR PRODUCTOS --------------------------------
|
|
|
|
|
|
|
|
let cestaCompra = [];
|
|
|
|
|
|
function leerCesta() {
|
|
|
|
var lecturaCesta = JSON.parse(localStorage.getItem('numProd'));
|
|
if (lecturaCesta === null) {
|
|
cestaCompra = [];
|
|
} else {
|
|
cestaCompra = lecturaCesta;
|
|
}
|
|
|
|
}
|
|
function renderizarCesta(){
|
|
|
|
leerCesta()
|
|
let elCarrito = document.getElementById("carrito");
|
|
let elPrecioTotal = document.getElementById("total");
|
|
elCarrito.textContent = "";
|
|
elPrecio = 0;
|
|
for (i = 0; i < cestaCompra.length; i++) {
|
|
let numeroControl = cestaCompra[i];
|
|
let articuloCarrito = document.createElement("li");
|
|
elCarrito.appendChild(articuloCarrito);
|
|
articuloCarrito.setAttribute("class", "articulo-carrito");
|
|
|
|
let contenedorArticuloCarrito = document.createElement("figure");
|
|
articuloCarrito.appendChild(contenedorArticuloCarrito);
|
|
contenedorArticuloCarrito.setAttribute("class", "img-carrito");
|
|
|
|
let imagenArticuloCarrito = document.createElement("img");
|
|
contenedorArticuloCarrito.appendChild(imagenArticuloCarrito);
|
|
imagenArticuloCarrito.setAttribute("src", infoProductos[numeroControl].img1);
|
|
imagenArticuloCarrito.setAttribute("alt", "imagen");
|
|
|
|
let textoArticulocarrito = document.createElement("p");
|
|
articuloCarrito.appendChild(textoArticulocarrito);
|
|
textoArticulocarrito.innerText = infoProductos[numeroControl].titulo;
|
|
|
|
let infoArticulo = document.createElement("div");
|
|
articuloCarrito.appendChild(infoArticulo);
|
|
infoArticulo.setAttribute("class", "infoArticulo")
|
|
|
|
let precioArticuloCarrito = document.createElement("p");
|
|
infoArticulo.appendChild(precioArticuloCarrito);
|
|
precioArticuloCarrito.innerText = infoProductos[numeroControl].precio + " €";
|
|
elPrecio = elPrecio + infoProductos[numeroControl].precio
|
|
|
|
let botonBorrarArticulo = document.createElement("button");
|
|
infoArticulo.appendChild(botonBorrarArticulo);
|
|
botonBorrarArticulo.innerText = "Eliminar";
|
|
botonBorrarArticulo.setAttribute("type", "button");
|
|
botonBorrarArticulo.setAttribute("onclick", "borrarArticulo()");
|
|
botonBorrarArticulo.setAttribute("marcador", infoProductos[numeroControl].numeroproducto);
|
|
|
|
}
|
|
elPrecioTotal.textContent = elPrecio
|
|
}
|
|
|
|
function guardarEnCarrito() {
|
|
|
|
let prodAñadido = this.event.target.getAttribute("marcador");
|
|
let controlCesta = cestaCompra.includes(prodAñadido);
|
|
leerCesta();
|
|
if ( cestaCompra.length == 0 || !controlCesta) {
|
|
cestaCompra.push(prodAñadido);
|
|
|
|
try {
|
|
localStorage.setItem('numProd', JSON.stringify(cestaCompra));
|
|
renderizarCesta();
|
|
|
|
} catch (e) {
|
|
return "Error al guardar el item en el localStorage: " + e.message;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function borrarArticulo() {
|
|
let prodABorrar = this.event.target.getAttribute("marcador");
|
|
let indice = cestaCompra.indexOf(prodABorrar);
|
|
cestaCompra.splice(indice, 1);
|
|
try {
|
|
localStorage.setItem('numProd', JSON.stringify(cestaCompra));
|
|
renderizarCesta();
|
|
|
|
} catch (e) {
|
|
return "Error al guardar el item en el localStorage: " + e.message;
|
|
}
|
|
}
|
|
|
|
function eliminarCesta() {
|
|
localStorage.removeItem("numProd");
|
|
let elCarrito = document.getElementById("carrito");
|
|
elCarrito.textContent = "";
|
|
cestaCompra = [];
|
|
let elPrecioTotal = document.getElementById("total");
|
|
elPrecioTotal.textContent = 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
function tramitarPedido(){
|
|
|
|
window.location.href = "./Contactos.html";
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const genListaProd = () => {
|
|
|
|
|
|
let contenedorProd = document.getElementById("contenedorProductos2");
|
|
|
|
for (let i = 0; i < infoProductos.length; i++){
|
|
|
|
let itemListaProd = document.createElement("li");
|
|
contenedorProd.appendChild(itemListaProd);
|
|
itemListaProd.setAttribute("class", "item-lista-productos");
|
|
|
|
let tituloProd = document.createElement("h3");
|
|
itemListaProd.appendChild(tituloProd);
|
|
var textotitulo = document.createTextNode(infoProductos[i].titulo)
|
|
tituloProd.appendChild(textotitulo);
|
|
|
|
let contenedorCarrousel = document.createElement("div");
|
|
itemListaProd.appendChild(contenedorCarrousel);
|
|
contenedorCarrousel.setAttribute("class", "container-carousel")
|
|
|
|
let carruselesProd = document.createElement("div");
|
|
contenedorCarrousel.appendChild(carruselesProd);
|
|
carruselesProd.setAttribute("class", "carruseles-prod");
|
|
|
|
let fotoUnoProd = document.createElement("figure");
|
|
carruselesProd.appendChild(fotoUnoProd);
|
|
fotoUnoProd.setAttribute("class", "slider-section-prod")
|
|
|
|
let imgUno = document.createElement("img");
|
|
fotoUnoProd.appendChild(imgUno);
|
|
imgUno.setAttribute("src", infoProductos[i].img1)
|
|
imgUno.setAttribute("alt", infoProductos[i].alt)
|
|
|
|
let fotoDosProd = document.createElement("figure");
|
|
carruselesProd.appendChild(fotoDosProd);
|
|
fotoDosProd.setAttribute("class", "slider-section-prod")
|
|
|
|
let imgDos = document.createElement("img");
|
|
fotoDosProd.appendChild(imgDos);
|
|
imgDos.setAttribute("src", infoProductos[i].img2)
|
|
imgDos.setAttribute("alt", infoProductos[i].alt)
|
|
|
|
let fotoTresProd = document.createElement("figure");
|
|
carruselesProd.appendChild(fotoTresProd);
|
|
fotoTresProd.setAttribute("class", "slider-section-prod")
|
|
|
|
let imgTres = document.createElement("img");
|
|
fotoTresProd.appendChild(imgTres);
|
|
imgTres.setAttribute("src", infoProductos[i].img3)
|
|
imgTres.setAttribute("alt", infoProductos[i].alt)
|
|
|
|
let btnIzq = document.createElement("button");
|
|
contenedorCarrousel.appendChild(btnIzq);
|
|
btnIzq.setAttribute("type", "button");
|
|
btnIzq.setAttribute("class", "btn-left");
|
|
btnIzq.setAttribute("onclick", "moveToLeft()");
|
|
btnIzq.innerText = " < "
|
|
|
|
let btnDcha = document.createElement("button");
|
|
contenedorCarrousel.appendChild(btnDcha);
|
|
btnDcha.setAttribute("type", "button");
|
|
btnDcha.setAttribute("class", "btn-right");
|
|
btnDcha.setAttribute("onclick", "moveToRight()");
|
|
btnDcha.innerText = " > "
|
|
|
|
let listaInfoProd = document.createElement("ul");
|
|
itemListaProd.appendChild(listaInfoProd);
|
|
listaInfoProd.setAttribute("class", "info-producto")
|
|
|
|
let descProd = document.createElement("li");
|
|
listaInfoProd.appendChild(descProd);
|
|
descProd.setAttribute("class", "descripcion-producto");
|
|
|
|
let textoProd = document.createElement("p");
|
|
descProd.appendChild(textoProd);
|
|
textoProd.setAttribute("class", "texto-descrip-prod")
|
|
textoProd.innerText = infoProductos[i].textodescrip
|
|
|
|
let dispoProd = document.createElement("p");
|
|
descProd.appendChild(dispoProd);
|
|
dispoProd.setAttribute("class", "productos-disponibles")
|
|
dispoProd.innerText = "Disponibles: " + infoProductos[i].disponibles
|
|
|
|
let precioProd = document.createElement("li");
|
|
listaInfoProd.appendChild(precioProd);
|
|
precioProd.setAttribute("class", "precio-producto");
|
|
precioProd.innerText = infoProductos[i].precio.toFixed(2) + "€";
|
|
|
|
let liBotonAñadir = document.createElement("li");
|
|
listaInfoProd.appendChild(liBotonAñadir);
|
|
liBotonAñadir.setAttribute("class", "contenedor-boton-añadir");
|
|
|
|
let botonAñadir = document.createElement("button");
|
|
liBotonAñadir.appendChild(botonAñadir);
|
|
botonAñadir.setAttribute("type", "button");
|
|
botonAñadir.setAttribute("class", "añadirProd");
|
|
botonAñadir.setAttribute("marcador", infoProductos[i].numeroproducto);
|
|
botonAñadir.setAttribute("onclick", "guardarEnCarrito()");
|
|
botonAñadir.innerText = "Añadir a Cesta";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//--------------------- CONFIGURACIÓN SLIDERS ------------------------------///
|
|
|
|
let operacion = 0,
|
|
counter = 0;
|
|
|
|
|
|
function moveToRight() {
|
|
let elementoAMover = this.event.target.parentNode.firstElementChild;
|
|
let numeroContenedores = elementoAMover.children.length
|
|
|
|
let widthImg = 100 / numeroContenedores;
|
|
|
|
if (counter >= elementoAMover.children.length-1) {
|
|
operacion = 0;
|
|
counter = 0;
|
|
elementoAMover.style.transform = `translate(-${operacion}%)`;
|
|
return;
|
|
}
|
|
counter++;
|
|
operacion = operacion + widthImg;
|
|
|
|
elementoAMover.style.transform = `translate(-${operacion}%)`;
|
|
}
|
|
|
|
function moveToLeft() {
|
|
let elementoAMover = this.event.target.parentNode.firstElementChild;
|
|
|
|
let widthImg = 100 / elementoAMover.children.length;
|
|
|
|
|
|
counter --;
|
|
if (counter < 0 ) {
|
|
counter = elementoAMover.children.length-1;
|
|
operacion = widthImg * (elementoAMover.children.length-1);
|
|
elementoAMover.style.transform = `translate(-${operacion}%)`
|
|
elementoAMover.style.transition = 'none';
|
|
return;
|
|
}
|
|
|
|
|
|
operacion = operacion - widthImg;
|
|
elementoAMover.style.transform = `translate(-${operacion}%)`
|
|
|
|
}
|
|
|
|
|
|
//-------------------------- EVENTOS --------------------------------
|
|
|
|
|
|
|
|
|
|
const genListaEven = () => {
|
|
let contenedorEventos = document.getElementById("listadeEventos")
|
|
|
|
|
|
for(let i =0; i< listaEventos.length; i++)
|
|
contenedorEventos.innerHTML += `
|
|
<li class="item-lista-eventos">
|
|
<img src="${listaEventos[i].img}" class="token-evento" alt="token_evento">
|
|
<h2 class="titulo-evento">${listaEventos[i].titulo}</h2>
|
|
<p class="texto-evento">${listaEventos[i].texto}</p>
|
|
<p class="fecha-evento" id="evento${listaEventos[i].numeroEvento}">${listaEventos[i].fecha.toLocaleDateString()}</p>
|
|
</li>
|
|
`
|
|
}
|
|
|
|
|
|
|
|
//-------------------------- CONFIGURACIÓN CALENDARIO --------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
const cargaCalendario = () => {
|
|
const nombresMeses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
|
|
'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
|
|
|
|
|
|
let fechaActual = new Date();
|
|
let diaActual = fechaActual.getDate();
|
|
let numeroMes = fechaActual.getMonth();
|
|
let yearActual = fechaActual.getFullYear();
|
|
|
|
|
|
let diaEventoUno = listaEventos[2].fecha //esta fecha se traerá posteriormente desde la DB
|
|
let diaEventoDos = listaEventos[0].fecha //esta fecha se traerá posteriormente desde la DB
|
|
let diaEventoZero = listaEventos[1].fecha //esta fecha se traerá posteriormente desde la DB
|
|
|
|
|
|
let fechas = document.getElementById("dates-calendar");
|
|
let mes = document.getElementById("mes-actual");
|
|
let year = document.getElementById("year");
|
|
|
|
let mesAnteriorDOM = document.getElementById("mes-anterior")
|
|
let mesSiguienteDOM = document.getElementById("mes-siguiente");
|
|
|
|
|
|
mes.textContent = nombresMeses[numeroMes];
|
|
year.textContent = yearActual.toString();
|
|
|
|
mesAnteriorDOM.addEventListener("click", () => mesAnterior());
|
|
mesSiguienteDOM.addEventListener("click", () => mesSiguiente())
|
|
|
|
|
|
const generacionMeses = (mes) => {
|
|
for(let i = diaComienzoSemana(); i>0; i--){
|
|
fechas.innerHTML += `<div class= "dia-calendario item-calendario dias-ultimo-mes">
|
|
${numeroDiasMes(numeroMes-1)-(i-1)}
|
|
</div>`;
|
|
}
|
|
|
|
for (let i = 1; i <= numeroDiasMes(mes); i++){
|
|
let fechaActualVieja = new Date();
|
|
let mesActual = fechaActualVieja.getMonth();
|
|
let yearActualViejo = fechaActualVieja.getFullYear();
|
|
|
|
let numeroDiaEventoZero = diaEventoZero.getDate();
|
|
let mesDiaEventoZero = diaEventoZero.getMonth();
|
|
let yearEventoZero = diaEventoZero.getFullYear();
|
|
|
|
let numeroDiaEventoUno = diaEventoUno.getDate();
|
|
let mesDiaEventoUno = diaEventoUno.getMonth();
|
|
let yearEventoUno = diaEventoUno.getFullYear();
|
|
|
|
let numeroDiaEventoDos = diaEventoDos.getDate();
|
|
let mesDiaEventoDos = diaEventoDos.getMonth();
|
|
let yearEventoDos = diaEventoDos.getFullYear();
|
|
|
|
if((i === diaActual) && (mes === mesActual) && (yearActualViejo === yearActual)){
|
|
fechas.innerHTML += `<div class= "dia-calendario item-calendario today">${i}</div>`;
|
|
}
|
|
else if((i === numeroDiaEventoZero) && (yearActual === yearEventoZero) && (mesDiaEventoZero === mes) && (i !== diaActual)){
|
|
fechas.innerHTML += `<div class= "dia-calendario item-calendario dia-evento dropdown">${i}
|
|
<ul class="desplegable-calendario">
|
|
<li class="item-desplegable-calendario">Dia ${numeroDiaEventoZero}:</li>
|
|
<li class="item-desplegable-calendario">
|
|
<span class="formateo-evento-calend">Torneo 1000 PTS</span>
|
|
</li>
|
|
</ul>
|
|
</div>`;
|
|
}
|
|
else if((i === numeroDiaEventoUno) && (yearActual === yearEventoUno) && (mesDiaEventoUno === mes) && (i !== diaActual)){
|
|
fechas.innerHTML += `<div class= "dia-calendario item-calendario dia-evento dropdown">${i}
|
|
<ul class="desplegable-calendario">
|
|
<li class="item-desplegable-calendario">Dia ${numeroDiaEventoUno}:</li>
|
|
<li class="item-desplegable-calendario">
|
|
<span class="formateo-evento-calend">Partida Zombicide</span>
|
|
</li>
|
|
</ul>
|
|
</div>`;
|
|
}
|
|
else if((i === numeroDiaEventoDos) && (yearActual === yearEventoDos) && (mesDiaEventoDos === mes) && (i !== diaActual)){
|
|
fechas.innerHTML += `<div class= "dia-calendario item-calendario dia-evento dropdown">${i}
|
|
<ul class="desplegable-calendario">
|
|
<li class="item-desplegable-calendario">Dia ${numeroDiaEventoDos}:</li>
|
|
<li class="item-desplegable-calendario">
|
|
<span class="formateo-evento-calend">Torneo Patrullas</span>
|
|
</li>
|
|
</ul>
|
|
</div>`;
|
|
}
|
|
else {
|
|
fechas.innerHTML += `<div class="dia-calendario item-calendario">${i}</div>`;
|
|
|
|
}
|
|
}}
|
|
|
|
|
|
const numeroDiasMes = (mes) => {
|
|
if(mes === -1) mes = 11;
|
|
|
|
if (mes === 0 || 2 || 4 || 6 || 7 || 9 || 11) {
|
|
return 31;
|
|
} else if (mes === 3 || 5 || 8 || 10) {
|
|
return 30;
|
|
} else {
|
|
return esBisiesto() ? 29:28;
|
|
}
|
|
|
|
}
|
|
const esBisiesto = () => {
|
|
return ((yearActual % 100 !== 0) && (yearActual % 4 === 0) || (yearActual % 400 === 0));
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const diaComienzoSemana = () => {
|
|
let comienzo = new Date(yearActual, numeroMes, 1);
|
|
return ((comienzo.getDay()-1) === -1) ? 6 : comienzo.getDay()-1;
|
|
|
|
}
|
|
|
|
const mesAnterior = () => {
|
|
if(numeroMes !== 0){
|
|
numeroMes--;
|
|
}else {
|
|
numeroMes = 11;
|
|
yearActual--;
|
|
}
|
|
nuevaFecha();
|
|
}
|
|
|
|
const mesSiguiente = () => {
|
|
if(numeroMes !== 11){
|
|
numeroMes++;
|
|
}else {
|
|
numeroMes = 0;
|
|
yearActual++;
|
|
}
|
|
|
|
nuevaFecha();
|
|
}
|
|
|
|
|
|
const nuevaFecha = () => {
|
|
fechaActual.setFullYear(yearActual, numeroMes, diaActual);
|
|
mes.textContent = nombresMeses[numeroMes];
|
|
year.textContent = yearActual.toString();
|
|
fechas.textContent = '';
|
|
generacionMeses(numeroMes)
|
|
}
|
|
|
|
|
|
|
|
generacionMeses(numeroMes);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
/*-------------------CONTROL FORMULARIO--------------------*/
|
|
|
|
const validaciones = {
|
|
validacionNombre: false,
|
|
validacionMail: false,
|
|
validacionAsunto: false,
|
|
|
|
}
|
|
|
|
|
|
const expValidarNombre = /^[a-zA-ZÀ-ÿ\s]{1,30}$/;
|
|
const expValidarCorreo = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
|
|
const expValidarAsunto = /^.{4,12}$/;
|
|
|
|
const formulario = document.getElementById('formularioContacto');
|
|
|
|
|
|
const mensajeError = document.getElementById("emailErrorMailUno");
|
|
const correoUsuario = document.getElementById("mail");
|
|
correoUsuario.addEventListener('keyup', validarMail);
|
|
correoUsuario.addEventListener('blur', validarMail);
|
|
|
|
function validarMail() {
|
|
|
|
let inputATestear = correoUsuario.value
|
|
if (!expValidarCorreo.test(inputATestear) && inputATestear.length !== 0) {
|
|
correoUsuario.classList.add("active");
|
|
mensajeError.classList.add("active");
|
|
validaciones.validacionMail = false;
|
|
|
|
|
|
}else if (inputATestear.length === 0){
|
|
|
|
correoUsuario.classList.remove("active");
|
|
mensajeError.classList.remove("active");
|
|
validaciones.validacionMail = false;
|
|
|
|
}
|
|
else {
|
|
correoUsuario.classList.remove("active");
|
|
mensajeError.classList.remove("active");
|
|
validaciones.validacionMail = true;
|
|
|
|
}
|
|
}
|
|
const nombreATestear = document.getElementById("nombre");
|
|
const errorNombre = document.getElementById("errorNombre")
|
|
nombreATestear.addEventListener('keyup', validarNombre);
|
|
nombreATestear.addEventListener('blur', validarNombre);
|
|
function validarNombre() {
|
|
|
|
let inputATestear = nombreATestear.value
|
|
if (!expValidarNombre.test(inputATestear) && inputATestear.length !== 0) {
|
|
nombreATestear.classList.add("active");
|
|
errorNombre.classList.add("active");
|
|
validaciones.validacionNombre = false;
|
|
|
|
|
|
}else if (inputATestear.length === 0){
|
|
|
|
nombreATestear.classList.remove("active");
|
|
errorNombre.classList.remove("active");
|
|
validaciones.validacionNombre = false;
|
|
|
|
}
|
|
else {
|
|
nombreATestear.classList.remove("active");
|
|
errorNombre.classList.remove("active");
|
|
validaciones.validacionNombre = true;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
const asuntoATestear = document.getElementById("formSubject");
|
|
const errorAsunto = document.getElementById("errorAsunto")
|
|
asuntoATestear.addEventListener('keyup', validarAsunto);
|
|
asuntoATestear.addEventListener('blur', validarAsunto);
|
|
function validarAsunto() {
|
|
|
|
let inputATestear = asuntoATestear.value
|
|
if (!expValidarAsunto.test(inputATestear) && inputATestear.length !== 0) {
|
|
asuntoATestear.classList.add("active");
|
|
errorAsunto.classList.add("active");
|
|
validaciones.validacionAsunto = false;
|
|
|
|
|
|
}else if (inputATestear.length === 0){
|
|
|
|
asuntoATestear.classList.remove("active");
|
|
errorAsunto.classList.remove("active");
|
|
validaciones.validacionAsunto = false;
|
|
|
|
}
|
|
else {
|
|
asuntoATestear.classList.remove("active");
|
|
errorAsunto.classList.remove("active");
|
|
validaciones.validacionAsunto = true;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function enviarFormulario() {
|
|
if (validaciones.validacionAsunto == true && validaciones.validacionMail == true && validaciones.validacionNombre == true){
|
|
formulario.submit();
|
|
alert("mensaje enviado");
|
|
correoUsuario.value = "";
|
|
asuntoATestear.value = "";
|
|
nombreATestear.value = "";
|
|
}
|
|
if (validaciones.validacionNombre == false) {
|
|
nombreATestear.classList.add("active");
|
|
errorNombre.classList.add("active");
|
|
|
|
|
|
}
|
|
if (validaciones.validacionMail == false) {
|
|
correoUsuario.classList.add("active");
|
|
mensajeError.classList.add("active");
|
|
|
|
|
|
}
|
|
if (validaciones.validacionAsunto == false) {
|
|
asuntoATestear.classList.add("active");
|
|
errorAsunto.classList.add("active");
|
|
|
|
|
|
}
|
|
|
|
|
|
if (validaciones.validacionAsunto == false || validaciones.validacionMail == false || validaciones.validacionNombre == false){
|
|
alert("revisa los campos, hay alguno incorrecto")
|
|
|
|
}
|
|
}
|