l-assiette/dist/js/app.js

const carritoUsuario=[];window.addEventListener("hashchange",()=>{render(decodeURI(window.location.hash))});const render=e=>{switch(e){case"#registro":abrirRegistro();break;case"#iniciar-sesion":abrirInicioSesion();break;case"#usuarios/":abrirUsuarios();break;case"#usuarios/mi-cuenta":abrirMiCuenta();break;case"#usuarios/pagos":abrirCarrito();break;case"#staff/":abrirStaff();break;default:return void abrirPagPrin()}},sectionP=document.getElementById("sectionP"),contenedorInicioRegistro=document.getElementById("contenedorInicio-Registro"),formInicioRegistro=document.getElementById("inicio_registro"),sectionS=document.getElementById("sectionS"),sectionCarrito=document.getElementById("sectionCarrito"),manipularTopBar=e=>{switch(e){case 1:cambiarProgreso(25);break;case 2:cancelarTransicion(),cambiarProgreso(50);break;case 3:cancelarTransicion(),cambiarProgreso(75);break;default:cancelarTransicion(),reiniciarTopBar()}},abrirUsuarios=()=>{const e=new XMLHttpRequest;reiniciarTopBar(),cerrarElemF(contenedorInicioRegistro),cerrarElemF(formInicioRegistro),cerrarElemF(sectionP),cerrarElemF(sectionCarrito),e.onreadystatechange=(()=>{200===e.status&&4===e.readyState?(cambiarProgreso(100).then(ocultarTopBar),abrirElemF(sectionS,()=>{sectionS.innerHTML=e.responseText,(()=>new Promise((e,t)=>{const r=new XMLHttpRequest;r.onreadystatechange=(()=>{if(200===r.status&&4===r.readyState){const t=JSON.parse(r.responseText),n=document.getElementById("productos");let a=document.createElement("div");a.className="row";let i=0;for(const e in t)if(t.hasOwnProperty(e)){const r=t[e];++i>=4&&(n.appendChild(a),n.appendChild(document.createElement("br")),(a=document.createElement("div")).className="row",i=1);const o=document.createElement("div");o.className="col-4 caja plato";const s=document.createElement("img");s.className="image",s.src=r.imgUrl,o.appendChild(s);const c=document.createElement("div");c.className="plato--Titulo",c.innerText=r.nombre,o.appendChild(c),o.appendChild(document.createElement("br"));const d=document.createElement("div");d.className="plato--Descripcion",d.innerText=r.descripcion,o.appendChild(d),o.appendChild(document.createElement("br"));const l=document.createElement("div");l.className="plato--Precio",l.innerText=`${r.precio}`,o.appendChild(l);const p=document.createElement("div");p.className="plato--Cantidad",p.appendChild(document.createTextNode("Cantidad: "));const m=document.createElement("span"),u=document.createElement("i");u.className="material-icons plato--Cantidad--Icon",u.innerText="remove",u.addEventListener("click",()=>{const e=parseInt(m.innerText);m.innerText=e>1?e-1:"1"}),p.appendChild(u),m.innerText="1",p.appendChild(m);const h=document.createElement("i");h.className="material-icons plato--Cantidad--Icon",h.innerText="add",h.addEventListener("click",()=>{const e=parseInt(m.innerText);m.innerText=e>0?e+1:"1"}),p.appendChild(h),o.appendChild(p),o.appendChild(document.createElement("br"));const E=document.createElement("button");E.className="botonAddCart",E.addEventListener("click",()=>{const r=parseInt(m.innerText);if(r>0){const n=t[e];n.cantidad=r,carritoUsuario.push(n),console.log(`JSON del usuario|>\n${JSON.stringify(carritoUsuario)}`),window.location.replace("./#usuarios/pagos")}else alert("")}),E.innerHTML="<i class='material-icons'>add_shopping_cart</i> Añadir al carrito",o.appendChild(E),a.appendChild(o)}n.appendChild(a),e()}}),r.open("POST","./usuarios/platos.json",!0),r.setRequestHeader("Content-type","application/x-www-form-urlencoded"),r.send()}))()})):manipularTopBar(e.readyState)}),e.open("POST","./usuarios/index.php",!0),e.setRequestHeader("Content-type","application/x-www-form-urlencoded"),e.send()},abrirMiCuenta=()=>{const e=new XMLHttpRequest;reiniciarTopBar(),cerrarElemF(contenedorInicioRegistro),cerrarElemF(formInicioRegistro),cerrarElemF(sectionP),cerrarElemF(sectionCarrito),e.onreadystatechange=(()=>{200===e.status&&4===e.readyState?(cambiarProgreso(100).then(ocultarTopBar),abrirElemF(sectionS,()=>{sectionS.innerHTML=e.responseText})):manipularTopBar(e.readyState)}),e.open("POST","./usuarios/mi-cuenta.php",!0),e.setRequestHeader("Content-type","application/x-www-form-urlencoded"),e.send()},abrirCarrito=()=>{reiniciarTopBar(),cerrarElemF(contenedorInicioRegistro),cerrarElemF(formInicioRegistro),cerrarElemF(sectionP),cerrarElemF(sectionS),abrirElemF(sectionCarrito)},abrirStaff=()=>{const e=new XMLHttpRequest;reiniciarTopBar(),cerrarElemF(contenedorInicioRegistro),cerrarElemF(formInicioRegistro),cerrarElemF(sectionP),cerrarElemF(sectionCarrito),e.onreadystatechange=(()=>{200===e.status&&4===e.readyState?(cambiarProgreso(100).then(ocultarTopBar),abrirElemF(sectionS,()=>{sectionS.innerHTML=e.responseText})):manipularTopBar(e.readyState)}),e.open("POST","./staff/",!0),e.setRequestHeader("Content-type","application/x-www-form-urlencoded"),e.send()},abrirInicioSesion=()=>{const e=new XMLHttpRequest;reiniciarTopBar(),cerrarElemF(contenedorInicioRegistro),cerrarElemF(sectionP),cerrarElemF(sectionCarrito),e.onreadystatechange=(()=>{if(200===e.status&&4===e.readyState){cambiarProgreso(100).then(ocultarTopBar);const t=document.getElementById("inicio_registro");abrirElemF(t,()=>{t.innerHTML=e.responseText})}else manipularTopBar(e.readyState)}),e.open("POST","./iniciar-sesion.php",!0),e.setRequestHeader("Content-type","application/x-www-form-urlencoded"),e.send()},abrirRegistro=()=>{const e=new XMLHttpRequest;reiniciarTopBar(),cerrarElemF(contenedorInicioRegistro),cerrarElemF(sectionP),cerrarElemF(sectionCarrito),e.onreadystatechange=(()=>{if(200===e.status&&4===e.readyState){cambiarProgreso(100).then(ocultarTopBar);const t=document.getElementById("inicio_registro");abrirElemF(t,()=>{t.innerHTML=e.responseText})}else manipularTopBar(e.readyState)}),e.open("POST","./registro.php",!0),e.setRequestHeader("Content-type","application/x-www-form-urlencoded"),e.send()},abrirPagPrin=()=>{const e=document.getElementById("inicio_registro");cerrarElemF(e,()=>e.innerHTML=""),cerrarElemF(sectionS,()=>sectionS.innerHTML=""),cerrarElemF(sectionCarrito),abrirElemF(contenedorInicioRegistro),abrirElemF(sectionP)},collapseSection=e=>new Promise((t,r)=>{let n=e.scrollHeight,a=e.style.transition;e.style.transition="",requestAnimationFrame(function(){e.style.height=n+"px",e.style.transition=a,requestAnimationFrame(function(){e.style.height="0px",setTimeout(()=>{t("Termine de ocultar we v':")},160)})}),e.setAttribute("data-collapsed","true")}),expandSection=e=>new Promise((t,r)=>{let n=e.scrollHeight;e.style.height=n+"px",e.addEventListener("transitionend",function(r){e.removeEventListener("transitionend",arguments.callee),e.style.height=null,setTimeout(()=>{t("Termine de ampliar we v':")},0)}),e.setAttribute("data-collapsed","false")}),abrirElemF=(e,t,r)=>{"true"===e.getAttribute("data-collapsed")?(void 0!==t&&t(),expandSection(e).then(()=>{void 0!==r&&r()})):collapseSection(e).then(()=>{void 0!==t&&t(),expandSection(e).then(()=>{void 0!==r&&r()})})},cerrarElemF=(e,t)=>{"false"===e.getAttribute("data-collapsed")&&collapseSection(e).then(()=>{void 0!==t&&t()})};render(decodeURI(window.location.hash));const carrito=new Vue({el:"#carrito",data:{item:carritoUsuario,descuento:0},computed:{cantidadItems:function(){let e=0;for(const t in this.item)e++;return e},subTotal:function(){let e=0;for(const t in this.item)if(this.item.hasOwnProperty(t)){const r=this.item[t];e+=r.precio*r.cantidad}return e},total:function(){return this.subTotal-this.descuento},noEstaVacio:function(){for(const e in this.item)return!0;return!1}},methods:{restarCantidad:function(e){const t=parseInt(e.cantidad);t>0&&(e.cantidad=t-1)},aumentarCantidad:function(e){const t=parseInt(e.cantidad);t>=0&&(e.cantidad=t+1)}}}),topBar=document.createElement("div");topBar.style.position="fixed",topBar.style.minHeight="3px",topBar.style.backgroundColor="red",topBar.style.zIndex="1";const transitionD=500;topBar.style.transition="min-width 500ms, opacity 250ms",topBar.style.minWidth="0";let promesaActual,widthDestino=0;document.body.appendChild(topBar);const cambiarProgreso=e=>(widthDestino=e,promesaActual=new Promise((t,r)=>{topBar.style.minWidth=`${e}%`,setTimeout(()=>t(),500)})),cancelarTransicion=()=>{const e=topBar.style.transition;topBar.style.transition="",topBar.style.minWidth=`${widthDestino}%`,topBar.style.transition=e},ocultarTopBar=()=>{topBar.style.opacity="0",setTimeout(()=>{topBar.style.minWidth="0%"},250)},reiniciarTopBar=()=>{const e=topBar.style.transition;topBar.style.transition="",topBar.style.minWidth="0",topBar.style.opacity="1",topBar.style.transition=e};