LaForjaWebOne/JS/index.js

    
    
    /*  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...) */
   
   
     let cestaCompra = [];
   
     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: "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"
        },
        {
            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(2024, 1, 11),
            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, 1, 17),
            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 -------------------------------------

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




        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 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 eliminarCesta() {
                localStorage.removeItem("numProd");
                let elCarrito = document.getElementById("carrito");
                elCarrito.textContent = "";
                cestaCompra = [];
                let elPrecioTotal = document.getElementById("total");
                elPrecioTotal.textContent = 0;
            }

          function leerCesta() {
            
            
            var lecturaCesta = JSON.parse(localStorage.getItem('numProd'));
            if (lecturaCesta === null) {
            cestaCompra = [];
            } else {
            cestaCompra = lecturaCesta;
            }
            
            
                   
        }
   
        
        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";


    }


}    

/** 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()
    
    }