Tercer Commit... aver
This commit is contained in:
519
JS/index.js
Normal file
519
JS/index.js
Normal file
@@ -0,0 +1,519 @@
|
||||
|
||||
|
||||
/* 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: 1,
|
||||
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: 2,
|
||||
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: 3,
|
||||
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: 4,
|
||||
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: 5,
|
||||
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: "PARTIDA ZOMBICIDE 2ND EDITION",
|
||||
texto: " Clásica partida de zombis, mínimo 4 jugadores para disfrutar de una experiencia aterradora.",
|
||||
fecha: new Date(2023, 11, 27),
|
||||
img: "../RECURSOS/Eventos/logozombicide150px.jpg"
|
||||
},
|
||||
{
|
||||
numeroEvento: 2,
|
||||
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(2023, 11, 30),
|
||||
img: "../RECURSOS/Eventos/AquilaImperial150px.png"
|
||||
},
|
||||
{
|
||||
numeroEvento: 3,
|
||||
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, 0, 3),
|
||||
img: "../RECURSOS/Eventos/AquilaImperial150px.png"
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
|
||||
/*---------------------------- 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(!localStorage.getItem('galletas-aceptadas')){
|
||||
avisoGalleta.classList.add('active');
|
||||
fondoAvisoGalleta.classList.add('active')
|
||||
}
|
||||
*/
|
||||
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 -------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
//--------------------- 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 --------------------------------
|
||||
|
||||
|
||||
|
||||
const genListaProd = () => {
|
||||
let contenedorProd = document.getElementById("contenedorProductos2");
|
||||
|
||||
for (let i = 0; i < infoProductos.length; i++){
|
||||
|
||||
|
||||
contenedorProd.innerHTML += `
|
||||
|
||||
<li class="item-lista-productos">
|
||||
<h3>${infoProductos[i].titulo}</h3>
|
||||
<div class="container-carousel">
|
||||
<div class="carruseles-prod" id="slider">
|
||||
<figure class="slider-section-prod">
|
||||
<img src="${infoProductos[i].img1}" alt="${infoProductos[i].alt}">
|
||||
</figure>
|
||||
<figure class="slider-section-prod">
|
||||
<img src="${infoProductos[i].img2}" alt="${infoProductos[i].alt}">
|
||||
</figure>
|
||||
|
||||
<figure class="slider-section-prod">
|
||||
<img src="${infoProductos[i].img3}" alt="${infoProductos[i].alt}">
|
||||
</figure>
|
||||
</div>
|
||||
<button type="button" class="btn-left" onclick="moveToLeft()"> < </button>
|
||||
<button type="button" class="btn-right" onclick="moveToRight()"> > </button>
|
||||
</div>
|
||||
<ul class="info-producto">
|
||||
<li class="descripcion-producto">
|
||||
<p class="texto-descrip-prod">${infoProductos[i].textodescrip} </p>
|
||||
<p class="productos-disponibles">Disponibles: ${infoProductos[i].disponibles}</p>
|
||||
</li>
|
||||
<li class="precio-producto">${infoProductos[i].precio}€</li>
|
||||
</ul>
|
||||
</li>
|
||||
`}
|
||||
|
||||
}
|
||||
|
||||
/** más adelante se creará un botón para añadir a un carrito y un contenedor para los articulos del carrito
|
||||
con sus correspondientes botones para quitar el producto, un espacio donde figure la suma de las cantidades, etc. */
|
||||
|
||||
|
||||
|
||||
|
||||
//--------------------- 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[0].fecha //esta fecha se traerá posteriormente desde la DB
|
||||
let diaEventoDos = listaEventos[1].fecha //esta fecha se traerá posteriormente desde la DB
|
||||
let diaEventoZero = listaEventos[2].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 validarFormulario = () => {
|
||||
let formulario = document.getElementById('formularioContacto');
|
||||
let botonFormulario = document.getElementById('enviarForm');
|
||||
|
||||
const emailError = document.getElementById('mailErrorArea');
|
||||
let campoEmail = document.getElementById('mailForm');
|
||||
|
||||
|
||||
campoEmail.addEventListener("input", function (event) {
|
||||
|
||||
|
||||
if (campoEmail.validity.valid) {
|
||||
emailError.innerHTML = "";
|
||||
emailError.className = "error";
|
||||
} else {
|
||||
showError();
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener("submit", function (event) {
|
||||
|
||||
if (!campoEmail.validity.valid) {
|
||||
showError();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
function showError() {
|
||||
if (campoEmail.validity.valueMissing) {
|
||||
|
||||
emailError.textContent = "Debe introducir una dirección de correo electrónico.";
|
||||
} else if (campoEmail.validity.typeMismatch) {
|
||||
|
||||
emailError.textContent = "El valor introducido debe ser una dirección de correo electrónico.";
|
||||
}
|
||||
emailError.className = "error active";
|
||||
}
|
||||
formulario.submit()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user