fernando
/
l-assiette
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cambio a Vue y VueRouter

master
Araozu 2018-10-06 09:50:08 -05:00
parent 09386772f6
commit df39560bb7
25 changed files with 340 additions and 3225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
/node_modules
/idea
**.map

21
.htaccess
View File

@ -1,14 +1,11 @@
RewriteEngine On
# redirigir y eliminar php (Yay! Funciona c:)
RewriteCond %{THE_REQUEST} /([^.]+)\.php [NC]
RewriteRule ^ /%1 [NC,L,R=301]
RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
RewriteRule ^ /%1 [NC,L,R=301]
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^ %{REQUEST_URI}.php [NC,L]
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /ihc/index.php [L]
</IfModule>
## Desabilitar cache de Apache
<FilesMatch "\.(html|htm|js|css)$">
@ -19,4 +16,4 @@ RewriteRule ^ %{REQUEST_URI}.php [NC,L]
Header set Pragma "no-cache"
Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
</IfModule>
</FilesMatch>
</FilesMatch>

428
css/base.css
View File

@ -1,428 +0,0 @@
@import url("https://fonts.googleapis.com/css?family=Muli|Open+Sans");
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #44A;
box-shadow: 0 5px 5px #999999;
}
nav {
background-color: #3d3d7c;
color: white;
}
section {
overflow: hidden;
transition: height 150ms ease-out;
height: auto;
}
footer {
background-color: #333;
color: #EEE;
box-shadow: inset 0 5px 5px #999999;
padding: 40px;
}
.contenedor {
max-width: 1200px;
width: 80%;
margin: auto;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
[class*=col-] {
float: left;
}
.row::after {
content: "";
clear: both;
display: table;
}
.center {
text-align: center;
}
#tituloP {
padding: 30px;
color: white;
font-size: 50px;
font-family: "Muli";
}
#tituloP--descripcion {
padding: 10px;
font-size: large;
font-family: "Open Sans";
}
.center {
text-align: center;
}
.boton {
display: inline-block;
margin: 20px;
border-radius: 3px;
box-shadow: 1px 1px 3px #090909;
padding: 10px 30px;
cursor: pointer;
text-decoration: none;
}
.mySeccion {
overflow: hidden;
transition: height 150ms ease-out;
height: auto;
}
#botonRegistro {
background-color: green;
color: white;
font-size: large;
transition: transform 200ms, box-shadow 200ms;
}
#botonRegistro:hover {
transform: translate(-1px, -1px);
box-shadow: 2px 2px 7px #050505;
}
#botonInicioSesion {
background-color: white;
transition: transform 200ms, box-shadow 200ms;
}
#botonInicioSesion:hover {
transform: translate(-1px, -1px);
box-shadow: 2px 2px 7px #050505;
}
#botonInicioSesion:visited {
color: black;
}
.contenido {
margin: 40px 0;
}
.image {
padding: 0 20px;
width: 100%;
height: auto;
}
.descripcionComida {
padding: 0 30px;
text-align: center;
font-size: large;
}
.inicio_registro {
color: white;
}
input {
min-width: 80%;
min-height: 40px;
padding: 10px;
color: #44A;
font-size: large;
}
.botonEnviarForm {
background-color: white;
box-shadow: 1px 1px 2px gray;
cursor: pointer;
border: none;
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms;
}
.botonEnviarForm:hover {
background-color: #4949e2;
color: white;
transform: translate(-1px, -1px);
box-shadow: 2px 2px 2px gray;
}
.google-button {
height: 40px;
border-width: 0;
background: white;
color: #737373;
border-radius: 5px;
white-space: nowrap;
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05);
transition-property: background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
padding: 0;
cursor: pointer;
}
.google-button:focus, .google-button:hover {
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
}
.google-button:active {
background-color: #e5e5e5;
box-shadow: none;
transition-duration: 10ms;
}
.google-button__icon {
display: inline-block;
vertical-align: middle;
margin: 8px 0 8px 8px;
width: 18px;
height: 18px;
box-sizing: border-box;
}
.google-button__text {
display: inline-block;
vertical-align: middle;
padding: 0 24px;
font-size: 14px;
font-weight: bold;
font-family: "Roboto", arial, sans-serif;
}
.unseen {
visibility: hidden;
}
.botonAddCart {
background-color: white;
padding: 5px;
color: #4444aa;
box-shadow: 0.1px 0.1px grey;
border-radius: 2px;
cursor: pointer;
font-size: large;
transition: background-color 250ms, color 250ms;
user-select: none;
}
.botonAddCart:hover {
background-color: #4444AA;
color: white;
}
.caja {
border-radius: 4px;
box-shadow: 1px 1px 2px gray;
padding: 15px;
}
.botonPayPal, .botonVisa {
background-color: #0070ba;
color: white;
font-size: large;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 0 5px;
}
.botonVisa {
background-color: #1a1f5e;
}
.linksNavBar {
margin: 0;
}
.linksNavBar li {
list-style: none;
float: left;
transition: background-color 250ms;
}
.linksNavBar li a {
cursor: pointer;
display: inline-block;
padding: 15px;
color: white;
text-decoration: none;
}
.linksNavBar li:after {
clear: both;
}
.linksNavBar li:hover {
background-color: #35356a;
}
.plato--Titulo {
font-size: x-large;
font-weight: bold;
font-family: "Muli";
color: #3d3d7c;
}
.plato--Descripcion {
font-size: large;
color: #333333;
}
.plato--Precio {
font-size: large;
}
.plato--Precio:before {
color: green;
content: "Precio unitario: ";
}
.plato--Precio:after {
content: " S/.";
}
.plato--Cantidad {
font-size: large;
font-weight: bold;
display: inline-table;
padding: 15px;
}
.plato--Cantidad--Icon {
display: table-cell;
vertical-align: top;
cursor: pointer;
transition: color 250ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.plato--Cantidad--Icon:hover {
color: #4444aa;
}
.carrito {
text-align: left;
}
#carrito--elementos, #carrito--precio {
padding: 0 10px;
}
.carritoElem:after {
clear: both;
}
.carritoElem--img {
float: left;
margin: 10px 20px;
width: 200px;
}
.carrito--subTotal {
text-align: right;
font-weight: bold;
font-family: "Muli", sans-serif;
font-size: x-large;
}
.carrito--subTotal:before {
content: "Subtotal: ";
}
.carrito--subTotal:after {
content: " S/.";
}
.carrito--precio--contenido--titulo {
text-align: center;
font-family: "Muli", sans-serif;
font-size: x-large;
font-weight: 900;
}
.carrito--precio--contenido--botonPagar {
display: inline-block;
width: 100%;
text-align: center;
padding: 10px;
background-color: #4444aa;
color: white;
border-radius: 3px;
cursor: pointer;
}
.carrito--precio--contenido--botonPagar:hover {
background-color: #3d3d7c;
}
#carrito--boton--seguircomprando {
margin: 10px 0;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 4px;
}
#carrito--boton--seguircomprando:visited {
color: white;
}
#carrito--tituloprincipal {
text-align: center;
font-size: xx-large;
font-family: "Muli", sans-serif;
font-weight: 900;
margin: 10px 0;
}
/*# sourceMappingURL=base.css.map */

1
css/base.css.map
View File

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["base.sass"],"names":[],"mappings":"AAAQ;AAKR;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EAEE;EACA,aAvFY;;;AAyFhB;EACE;EAEE;EACA,aA5Fc;;;AA8FlB;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EAEE;;;AAEF;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;;;AAEN;EAEI;EACA;EACA,aAzQY;EA0Qd;;;AAEF;EAEI;EACF;;;AAEF;EACE;;AACA;EACE;EACA;;AACF;EACE;;;AAEJ;EAEI;EACA;EACF;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;;;AAEF;EACE;;;AAGA;EACE;;;AAEJ;EACE;EACA;EACA;;;AAEF;EACE;EAEE;EACA;EACA;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;EAEE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;EAEE;EACA;EACA;EACF","file":"base.css"}

366
css/base.sass
View File

@ -1,366 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')
$fuenteTitulos: 'Muli'
$fuentePrincipal: 'Open Sans'
*
box-sizing: border-box
html, body
margin: 0
padding: 0
font-family: $fuentePrincipal, sans-serif
header
background-color: #44A
box-shadow: 0 5px 5px #999999
nav
background-color: #3d3d7c
color: white
section
overflow: hidden
transition: height 150ms ease-out
height: auto
footer
background-color: #333
color: #EEE
box-shadow: inset 0 5px 5px #999999
padding: 40px
.contenedor
max-width: 1200px
width: 80%
margin: auto
.col-1
width: 8.33%
.col-2
width: 16.66%
.col-3
width: 25%
.col-4
width: 33.33%
.col-5
width: 41.66%
.col-6
width: 50%
.col-7
width: 58.33%
.col-8
width: 66.66%
.col-9
width: 75%
.col-10
width: 83.33%
.col-11
width: 91.66%
.col-12
width: 100%
[class*="col-"]
float: left
.row::after
content: ""
clear: both
display: table
.center
text-align: center
#tituloP
padding: 30px
color: white
font:
size: 50px
family: $fuenteTitulos
#tituloP--descripcion
padding: 10px
font:
size: large
family: $fuentePrincipal
.center
text-align: center
.boton
display: inline-block
margin: 20px
border-radius: 3px
box-shadow: 1px 1px 3px #090909
padding: 10px 30px
cursor: pointer
text-decoration: none
.mySeccion
overflow: hidden
transition: height 150ms ease-out
height: auto
#botonRegistro
background-color: green
color: white
font-size: large
transition: transform 200ms, box-shadow 200ms
#botonRegistro:hover
transform: translate(-1px, -1px)
box-shadow: 2px 2px 7px #050505
#botonInicioSesion
background-color: white
transition: transform 200ms, box-shadow 200ms
#botonInicioSesion:hover
transform: translate(-1px, -1px)
box-shadow: 2px 2px 7px #050505
#botonInicioSesion:visited
color: black
.contenido
margin: 40px 0
.image
padding: 0 20px
width: 100%
height: auto
.descripcionComida
padding: 0 30px
text-align: center
font-size: large
.inicio_registro
color: white
input
min-width: 80%
min-height: 40px
padding: 10px
color: #44A
font-size: large
.botonEnviarForm
background-color: white
box-shadow: 1px 1px 2px gray
cursor: pointer
border: none
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms
.botonEnviarForm:hover
background-color: #4949e2
color: white
transform: translate(-1px, -1px)
box-shadow: 2px 2px 2px gray
.google-button
height: 40px
border-width: 0
background: white
color: #737373
border-radius: 5px
white-space: nowrap
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05)
transition-property: background-color, box-shadow
transition-duration: 150ms
transition-timing-function: ease-in-out
padding: 0
cursor: pointer
.google-button:focus, .google-button:hover
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1)
.google-button:active
background-color: #e5e5e5
box-shadow: none
transition-duration: 10ms
.google-button__icon
display: inline-block
vertical-align: middle
margin: 8px 0 8px 8px
width: 18px
height: 18px
box-sizing: border-box
.google-button__text
display: inline-block
vertical-align: middle
padding: 0 24px
font-size: 14px
font-weight: bold
font-family: 'Roboto', arial, sans-serif
.unseen
visibility: hidden
.botonAddCart
background-color: white
padding: 5px
color: #4444aa
box-shadow: 0.1px 0.1px grey
border-radius: 2px
cursor: pointer
font-size: large
transition: background-color 250ms, color 250ms
user-select: none
.botonAddCart:hover
background-color: #4444AA
color: white
.caja
border-radius: 4px
box-shadow: 1px 1px 2px gray
padding: 15px
.botonPayPal
background-color: #0070ba
color: white
font-size: large
padding: 10px
border: none
border-radius: 5px
cursor: pointer
margin: 0 5px
.botonVisa
@extend .botonPayPal
background-color: #1a1f5e
.linksNavBar
margin: 0
li
list-style: none
float: left
transition: background-color 250ms
a
cursor: pointer
display: inline-block
padding: 15px
color: white
text-decoration: none
&:after
clear: both
&:hover
background-color: #35356a
.plato--Titulo
font:
size: x-large
weight: bold
family: $fuenteTitulos
color: #3d3d7c
.plato--Descripcion
font:
size: large
color: #333333
.plato--Precio
font-size: large
&:before
color: green
content: "Precio unitario: "
&:after
content: " S/."
.plato--Cantidad
font:
size: large
weight: bold
display: inline-table
padding: 15px
.plato--Cantidad--Icon
display: table-cell
vertical-align: top
cursor: pointer
transition: color 250ms
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
&:hover
color: #4444aa
.carrito
text-align: left
#carrito--elementos, #carrito--precio
padding: 0 10px
.carritoElem
&:after
clear: both
.carritoElem--img
float: left
margin: 10px 20px
width: 200px
.carrito--subTotal
text-align: right
font:
weight: bold
family: $fuenteTitulos, sans-serif
size: x-large
&:before
content: "Subtotal: "
&:after
content: " S/."
.carrito--precio--contenido--titulo
text-align: center
font:
family: $fuenteTitulos, sans-serif
size: x-large
weight: 900
.carrito--precio--contenido--botonPagar
display: inline-block
width: 100%
text-align: center
padding: 10px
background-color: #4444aa
color: white
border-radius: 3px
cursor: pointer
&:hover
background-color: #3d3d7c
#carrito--boton--seguircomprando
margin: 10px 0
padding: 10px 20px
background-color: green
color: white
text-decoration: none
border-radius: 4px
&:visited
color: white
#carrito--tituloprincipal
text-align: center
font:
size: xx-large
family: $fuenteTitulos, sans-serif
weight: 900
margin: 10px 0

1
dist/css/anuma.css vendored
View File

@ -1 +0,0 @@
.anuma-we{font-family:sans-serif;font-size:30px}.anuma-we--alv{color:#23bf87}/*# sourceMappingURL=anuma.css.map */

0
src/js/vue.js → dist/dependencias/vue.js vendored
View File

1
dist/dependencias/vuerouter.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/base.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/topbar.min.js vendored Normal file
View File

@ -0,0 +1 @@
const 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=t=>(widthDestino=t,promesaActual=new Promise((o,i)=>{topBar.style.minWidth=`${t}%`,setTimeout(()=>o(),500)})),cancelarTransicion=()=>{const t=topBar.style.transition;topBar.style.transition="",topBar.style.minWidth=`${widthDestino}%`,topBar.style.transition=t},ocultarTopBar=()=>{topBar.style.opacity="0",setTimeout(()=>{topBar.style.minWidth="0%"},250)},reiniciarTopBar=()=>{const t=topBar.style.transition;topBar.style.transition="",topBar.style.minWidth="0",topBar.style.opacity="1",topBar.style.transition=t};

281
index.php
View File

@ -2,7 +2,7 @@
<html lang="es">
<head>
<title>Cocina Francesa</title>
<link rel="stylesheet" href="./css/base.css" type="text/css"/>
<link rel="stylesheet" href="/ihc/dist/css/base.css?v=2" type="text/css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
@ -11,182 +11,119 @@
</head>
<body>
<script src="./js/topbar.js"></script>
<script src="/ihc/dist/js/topbar.min.js"></script>
<header id="header">
<div class="contenedor">
<div id="tituloP" class="center">
<a href="./#" style="color: white; text-decoration: none">Cocina Francesa</a>
<div id="tituloP--descripcion">
Descubre un nuevo sabor
</div>
</div>
</div>
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
<a href="./#registro" id="botonRegistro" class="boton">
Registrarse
</a>
<a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
Iniciar Sesion
</a>
<br/>
<br/>
<br/>
</div>
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
<div id="vueApp">
<router-view></router-view>
</div>
</header>
<nav id="navBar" class="mySeccion" data-collapsed="true">
<ul class="linksNavBar">
<li><a href="./#">Inicio</a></li>
<li><a href="./#usuarios/">Comprar</a></li>
<li><a href="./#usuarios/mi-cuenta">Mi cuenta</a></li>
<li><a href="./#usuarios/pagos">Carrito</a></li>
</ul>
</nav>
<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
<div class="row contenido">
<div class="col-5">
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
alt="Plato Francés"/>
</div>
<div class="col-7">
<div class="descripcionComida">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-7 center">
<div class="descripcionComida">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
gravida
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
sagittis.
</div>
</div>
<div class="col-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
alt="Plato Francés" class="image">
</div>
</div>
<br/>
</section>
<section id="sectionS" class="contenedor mySeccion">
</section>
<section id="sectionCarrito" class="contenedor mySeccion" data-collapsed="true" style="height: 0">
<br/>
<br/>
<div class="center">
<div id="carrito--tituloprincipal">
Carrito de compras
</div>
<br/>
<a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
<br/>
<br/>
<div id="carrito" class="row carrito">
<div id="carrito--elementos" class="col-8">
<div id="carrito--elementos--contenido" class="caja">
<template v-if="noEstaVacio">
<template v-for="producto in item">
<div class="carritoElem">
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
<div class="plato--Titulo">{{ producto.nombre }}</div>
<br>
<div class="plato--Precio">{{ producto.precio }}</div>
<div class="plato--Cantidad">Cantidad:
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
<span>{{ producto.cantidad }}</span>
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
</div>
<br>
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
<hr>
</div>
</template>
</template>
<template v-else>
No hay nada en tu carrito de compras :c
</template>
</div>
</div>
<div id="carrito--precio" class="col-4">
<div id="carrito--precio--contenido" class="caja">
<template v-if="noEstaVacio">
<div id="pagos">
<div style="display: inline-block;">
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
</div>
<div style="display: inline-block; float: right; clear: both">
{{ subTotal }} S/.
</div>
</div>
<div>
<div style="display: inline-block;">
Descuentos:
</div>
<div style="display: inline-block; float: right; clear: both">
{{ descuento }} S/.
</div>
</div>
<br>
<br>
<div>
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
Total:
</div>
<div class="carrito--precio--contenido--titulo"
style="display: inline-block; float: right; clear: both">
{{ total }} S/.
</div>
</div>
<br>
<br>
<a class="carrito--precio--contenido--botonPagar">
Completar Transaccion
</a>
</template>
<template v-else>
No hay nada en tu carrito de compras :c
</template>
</div>
</div>
</div>
</div>
<br/>
<br/>
</section>
<footer id="footer">
<div class="contenedor">
Cocina Francesa.<br/>
Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
Se utilizaron: Vue.js, BEM, Sass, npm, y PHP.<br>
<br/>
Desarrollado por Fernando Araoz, 20173373.
</div>
</footer>
<!-- Vue -->
<!-- Vue y Vuerouter -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./js/vue.js"></script>
<script src="/ihc/dist/dependencias/vuerouter.min.js"></script>
<script src="/ihc/dist/dependencias/vue.js"></script>
<script>
Vue.use(VueRouter);
const carritoUsuario = [];
const footer = {
template: `<?php include "./src/componentes/mi-footer.vue" ?>`
};
const navBar = {
template: `<?php include "./src/componentes/navBar.vue" ?>`
};
const headerMin = {
template: `<?php include "./src/componentes/headerMin.vue" ?>`
};
const inicio = {
template: `<?php include "./src/componentes/inicio.vue" ?>`,
components: {
'mi-footer': footer,
'header-min': headerMin,
'nav-bar': navBar
}
};
const carrito = {
template: `<?php include "./src/componentes/carrito.vue"?>`,
components: {
'mi-footer': footer,
'header-min': headerMin,
'nav-bar': navBar
},
data: function () {
return {
item: carritoUsuario,
descuento: 0
};
},
computed: {
cantidadItems: function () {
let items = 0;
for (const i in this.item)
items++;
return items;
},
subTotal: function () {
let subT = 0;
for (const itemI in this.item ) {
if (this.item.hasOwnProperty(itemI)){
const item = this.item[itemI];
subT += (item["precio"] * item["cantidad"]);
}
}
return subT;
},
total: function () {
return this.subTotal - this.descuento;
},
noEstaVacio: function () {
for (const i in this.item) {
return true;
}
return false;
},
},
methods: {
restarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad > 0)
elem.cantidad = cantidad -1;
},
aumentarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad >= 0)
elem.cantidad = cantidad+1;
}
}
};
const routes = [
{path: '/ihc/',component: inicio},
{path: '/ihc/carrito/', component: carrito}
];
const router = new VueRouter({
mode: 'history',
routes: routes
});
const vm = new Vue({
el: '#vueApp',
router: router
})
.$mount('#vueApp');
</script>
<!-- Logica principal -->
<script src="./js/base.js?v=2"></script>
<!--<script src="./dist/js/base.min.js?v=2"></script>-->
</body>
</html>

603
js/Router.js
View File

@ -1,603 +0,0 @@
/* global window, module */
;(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.Router = factory()
}(this, (function () {
/**
* Router
*
* @version: 1.2.7
* @author Graidenix
*
* @constructor
*
* @param {object} options
* @returns {Router}
*/
function Router(options) {
var settings = this._getSettings(options);
this.notFoundHandler = settings.page404;
this.mode = (!window.history || !window.history.pushState) ? "hash" : settings.mode;
this.root = settings.root === "/" ? "/" : "/" + this._trimSlashes(settings.root) + "/";
this.beforeHook = settings.hooks.before;
this.securityHook = settings.hooks.secure;
this.routes = [];
if (settings.routes && settings.routes.length > 0) {
var _this = this;
settings.routes.forEach(function (route) {
_this.add(route.rule, route.handler, route.options);
});
}
this._pageState = null;
this._currentPage = null;
this._skipCheck = false;
this._action = null;
if (this.mode === "hash") {
this._historyStack = [];
this._historyIdx = 0;
this._historyState = "add"
}
return this;
}
/**
* Define Router Page
*
* @param {string} uri
* @param {object} query
* @param {Array} params
* @param {object} state
* @param {object} options
*
* @constructor
*/
Router.Page = function (uri, query, params, state, options) {
this.uri = uri || "";
this.query = query || {};
this.params = params || [];
this.state = state || null;
this.options = options || {};
};
/**
* Sanitize options and add default values
*
* @param {object} options
* @returns {object}
* @private
*/
Router.prototype._getSettings = function (options) {
var settings = {};
var defaults = {
routes: [],
mode: "history",
root: "/",
hooks: {
"before": function () {
},
"secure": function () {
return true;
}
},
page404: function (page) {
console.error({
page: page,
message: "404. Page not found"
});
}
};
options = options || {};
["routes", "mode", "root", "page404"].forEach(function (key) {
settings[key] = options[key] || defaults[key];
});
settings.hooks = Object.assign({}, defaults.hooks, options.hooks || {});
return settings;
};
/**
* Get URI for Router "history" mode
*
* @private
* @returns {string}
*/
Router.prototype._getHistoryFragment = function () {
var fragment = decodeURI(window.location.pathname);
if (this.root !== "/") {
fragment = fragment.replace(this.root, "");
}
return this._trimSlashes(fragment);
};
/**
* Get URI for router "hash" mode
*
* @private
* @returns {string}
*/
Router.prototype._getHashFragment = function () {
var hash = window.location.hash.substr(1).replace(/(\?.*)$/, "");
return this._trimSlashes(hash);
};
/**
* Get current URI
*
* @private
* @returns {string}
*/
Router.prototype._getFragment = function () {
if (this.mode === "history") {
return this._getHistoryFragment();
} else {
return this._getHashFragment();
}
};
/**
* Trim slashes for path
*
* @private
* @param {string} path
* @returns {string}
*/
Router.prototype._trimSlashes = function (path) {
if (typeof path !== "string") {
return "";
}
return path.toString().replace(/\/$/, "").replace(/^\//, "");
};
/**
* 404 Page Handler
*
* @private
*/
Router.prototype._page404 = function (path) {
this._currentPage = new Router.Page(path);
this.notFoundHandler(path);
};
/**
* Convert the string route rule to RegExp rule
*
* @param {string} route
* @returns {RegExp}
* @private
*/
Router.prototype._parseRouteRule = function (route) {
if (typeof route !== "string") {
return route;
}
var uri = this._trimSlashes(route);
var rule = uri
.replace(/([\\\/\-\_\.])/g, "\\$1")
.replace(/\{[a-zA-Z]+\}/g, "(:any)")
.replace(/\:any/g, "[\\w\\-\\_\\.]+")
.replace(/\:word/g, "[a-zA-Z]+")
.replace(/\:num/g, "\\d+");
return new RegExp("^" + rule + "$", "i");
};
/**
* Parse query string and return object for it
*
* @param {string} query
* @returns {object}
* @private
*/
Router.prototype._parseQuery = function (query) {
var _query = {};
if (typeof query !== "string") {
return _query;
}
if (query[0] === "?") {
query = query.substr(1);
}
this._queryString = query;
query.split("&").forEach(function (row) {
var parts = row.split("=");
if (parts[0] !== "") {
if (parts[1] === undefined) {
parts[1] = true;
}
_query[decodeURIComponent(parts[0])] = parts[1];
}
});
return _query;
};
/**
* Get query for `history` mode
*
* @returns {Object}
* @private
*/
Router.prototype._getHistoryQuery = function () {
return this._parseQuery(window.location.search);
};
/**
* Get query for `hash` mode
*
* @returns {Object}
* @private
*/
Router.prototype._getHashQuery = function () {
var index = window.location.hash.indexOf("?");
var query = (index !== -1) ? window.location.hash.substr(index) : "";
return this._parseQuery(query);
};
/**
* Get query as object
*
* @private
* @returns {Object}
*/
Router.prototype._getQuery = function () {
if (this.mode === "history") {
return this._getHistoryQuery();
} else {
return this._getHashQuery();
}
};
/**
* Add route to routes list
*
* @param {string|RegExp} rule
* @param {function} handler
* @param {{}} options
* @returns {Router}
*/
Router.prototype.add = function (rule, handler, options) {
this.routes.push({
rule: this._parseRouteRule(rule),
handler: handler,
options: options
});
return this;
};
/**
* Remove a route from routes list
*
* @param param
* @returns {Router}
*/
Router.prototype.remove = function (param) {
var _this = this;
if (typeof param === "string") {
param = this._parseRouteRule(param).toString();
}
this.routes.some(function (route, i) {
if (route.handler === param || route.rule.toString() === param) {
_this.routes.splice(i, 1);
return true;
}
return false;
});
return this;
};
/**
* Reset the state of Router
*
* @returns {Router}
*/
Router.prototype.reset = function () {
this.routes = [];
this.mode = null;
this.root = "/";
this._pageState = {};
this.removeUriListener();
return this;
};
/**
* Add current page in history stack
* @private
*/
Router.prototype._pushHistory = function () {
var _this = this,
fragment = this._getFragment();
if (this.mode === "hash") {
if (this._historyState === "add") {
if (this._historyIdx !== this._historyStack.length - 1) {
this._historyStack.splice(this._historyIdx + 1);
}
this._historyStack.push({
path: fragment,
state: _this._pageState
});
this._historyIdx = this._historyStack.length - 1;
}
this._historyState = "add";
}
};
/**
*
* @param asyncRequest boolean
* @returns {PromiseResult<boolean> | boolean}
* @private
*/
Router.prototype._unloadCallback = function (asyncRequest) {
var result;
if (this._skipCheck) {
return asyncRequest ? Promise.resolve(true) : true;
}
if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
result = this._currentPage.options.unloadCb(this._currentPage, asyncRequest);
if (!asyncRequest || result instanceof Promise) {
return result;
}
return result ? Promise.resolve(result) : Promise.reject(result);
} else {
return asyncRequest ? Promise.resolve(true) : true;
}
};
/**
* Check if router has the action for current path
*
* @returns {boolean}
* @private
*/
Router.prototype._findRoute = function () {
var _this = this,
fragment = this._getFragment();
return this.routes.some(function (route) {
var match = fragment.match(route.rule);
if (match) {
match.shift();
var query = _this._getQuery();
var page = new Router.Page(fragment, query, match, _this._pageState, route.options);
if (!_this.securityHook(page)) {
return false;
}
_this._currentPage = page;
if (_this._skipCheck) {
_this._skipCheck = false;
return true;
}
_this.beforeHook(page);
route.handler.apply(page, match);
_this._pageState = null;
window.onbeforeunload = function (ev) {
if (_this._unloadCallback(false)) {
return;
}
ev.returnValue = true;
return true;
};
return true;
}
return false;
});
};
/**
*
*/
Router.prototype._treatAsync = function () {
var result;
result = this._currentPage.options.unloadCb(this._currentPage, true);
if (!(result instanceof Promise)) {
result = result ? Promise.resolve(result) : Promise.reject(result);
}
result
.then(this._processUri.bind(this))
.catch(this._resetState.bind(this));
};
/**
*
* @private
*/
Router.prototype._resetState = function () {
this._skipCheck = true;
this.navigateTo(this._current, this._currentPage.state, true);
};
/**
* Replace current page with new one
*/
Router.prototype._processUri = function () {
var fragment = this._getFragment(),
found;
this._current = fragment;
this._pushHistory();
found = this._findRoute.call(this);
if (!found) {
this._page404(fragment);
}
};
/**
* Check the URL and execute handler for its route
*
* @returns {Router}
*/
Router.prototype.check = function () {
if (this._skipCheck) return this;
// if page has unload cb treat as promise
if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
this._treatAsync();
} else {
this._processUri();
}
return this;
};
/**
* Add the URI listener
*
* @returns {Router}
*/
Router.prototype.addUriListener = function () {
if (this.mode === "history") {
window.onpopstate = this.check.bind(this);
} else {
window.onhashchange = this.check.bind(this);
}
return this;
};
/**
* Remove the URI listener
*
* @returns {Router}
*/
Router.prototype.removeUriListener = function () {
window.onpopstate = null;
window.onhashchange = null;
return this;
};
/**
* Redirect to a page with replace state
*
* @param {string} path
* @param {object} state
* @param {boolean} silent
*
* @returns {Router}
*/
Router.prototype.redirectTo = function (path, state, silent) {
path = this._trimSlashes(path) || "";
this._pageState = state || null;
this._skipCheck = !!silent;
if (this.mode === "history") {
history.replaceState(state, null, this.root + this._trimSlashes(path));
return this.check();
} else {
this._historyIdx--;
window.location.hash = path;
}
return this;
};
/**
* Navigate to a page
*
* @param {string} path
* @param {object} state
* @param {boolean} silent
*
* @returns {Router}
*/
Router.prototype.navigateTo = function (path, state, silent) {
path = this._trimSlashes(path) || "";
this._pageState = state || null;
this._skipCheck = !!silent;
if (this.mode === "history") {
history.pushState(state, null, this.root + this._trimSlashes(path));
return this.check();
} else {
window.location.hash = path;
}
return this;
};
/**
* Refresh page with recall route handler
* @returns {Router}
*/
Router.prototype.refresh = function () {
if (!this._currentPage) {
return this;
}
var path = this._currentPage.uri + "?" + this._queryString;
return this.navigateTo(path, this._currentPage.state);
};
/**
* Go Back in browser history
* Simulate "Back" button
*
* @returns {Router}
*/
Router.prototype.back = function () {
if (this.mode === "history") {
window.history.back();
return this;
}
return this.go(this._historyIdx - 1);
};
/**
* Go Forward in browser history
* Simulate "Forward" button
*
* @returns {Router}
*/
Router.prototype.forward = function () {
if (this.mode === "history") {
window.history.forward();
return this;
}
return this.go(this._historyIdx + 1);
};
/**
* Go to a specific history page
*
* @param {number} count
* @returns {Router}
*/
Router.prototype.go = function (count) {
if (this.mode === "history") {
window.history.go(count);
return this;
}
var page = this._historyStack[count];
if (!page) {
return this;
}
this._historyIdx = count;
this._historyState = "hold";
return this.navigateTo(page.path, page.state);
};
return Router;
})));

563
js/base.js
View File

@ -1,563 +0,0 @@
let navBar = new Vue({
el: '#navBar',
data: {
visible: true
}
});
const carritoUsuario = [];
window.addEventListener("hashchange", () => {
render(decodeURI(window.location.hash));
});
const render = url => {
switch (url) {
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:
abrirPagPrin();
return;
}
};
const sectionP = document.getElementById("sectionP");
const contenedorInicioRegistro = document.getElementById("contenedorInicio-Registro");
const formInicioRegistro = document.getElementById("inicio_registro");
const sectionS = document.getElementById("sectionS");
const sectionCarrito = document.getElementById("sectionCarrito");
const manipularTopBar = status => {
switch (status) {
case 1:
cambiarProgreso(25);
break;
case 2:
cancelarTransicion();
cambiarProgreso(50);
break;
case 3:
cancelarTransicion();
cambiarProgreso(75);
break;
default:
cancelarTransicion();
reiniciarTopBar();
}
};
const abrirUsuarios = () => {
const crearPlatos = () => {
return new Promise((resolve, reject) => {
const ajax = new XMLHttpRequest();
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
const data = JSON.parse(ajax.responseText);
const divR = document.getElementById("productos");
let contenedor = document.createElement("div");
contenedor.className = "row";
let contador = 0;
for (const itemI in data) {
if (data.hasOwnProperty(itemI)) {
const item = data[itemI];
contador++;
if (contador >= 4) {
divR.appendChild(contenedor);
divR.appendChild(document.createElement("br"));
contenedor = document.createElement("div");
contenedor.className = "row";
contador = 1;
}
const itemDiv = document.createElement("div");
itemDiv.className = "col-4 caja plato";
const img = document.createElement("img");
img.className = "image";
img.src = item["imgUrl"];
itemDiv.appendChild(img);
const nombre = document.createElement("div");
nombre.className = "plato--Titulo";
nombre.innerText = item["nombre"];
itemDiv.appendChild(nombre);
itemDiv.appendChild(document.createElement("br"));
const descripcion = document.createElement("div");
descripcion.className = "plato--Descripcion";
descripcion.innerText = item["descripcion"];
itemDiv.appendChild(descripcion);
itemDiv.appendChild(document.createElement("br"));
const precioUnitario = document.createElement("div");
precioUnitario.className = "plato--Precio";
precioUnitario.innerText = `${item["precio"]}`;
itemDiv.appendChild(precioUnitario);
const cantidad = document.createElement("div");
cantidad.className = "plato--Cantidad";
cantidad.appendChild(document.createTextNode("Cantidad: "));
const unidades = document.createElement("span");
const botonMenos = document.createElement("i");
botonMenos.className = "material-icons plato--Cantidad--Icon";
botonMenos.innerText = "remove";
botonMenos.addEventListener("click",() => {
const valorActual = parseInt(unidades.innerText);
if (valorActual > 1) {
unidades.innerText = valorActual-1;
} else {
unidades.innerText = "1";
}
});
cantidad.appendChild(botonMenos);
unidades.innerText = "1";
cantidad.appendChild(unidades);
const botonMas = document.createElement("i");
botonMas.className = "material-icons plato--Cantidad--Icon";
botonMas.innerText = "add";
botonMas.addEventListener("click",() => {
const valorActual = parseInt(unidades.innerText);
if (valorActual > 0) {
unidades.innerText = valorActual+1;
} else {
unidades.innerText = "1";
}
});
cantidad.appendChild(botonMas);
itemDiv.appendChild(cantidad);
itemDiv.appendChild(document.createElement("br"));
const botonAddCart = document.createElement("button");
botonAddCart.className = "botonAddCart";
botonAddCart.addEventListener("click",() => {
const cantidad = parseInt(unidades.innerText);
if (cantidad > 0) {
const item = data[itemI];
item["cantidad"] = cantidad;
// carritoUsuario[itemI] = item;
carritoUsuario.push(item);
console.log(`JSON del usuario|>\n${JSON.stringify(carritoUsuario)}`);
window.location.replace("./#usuarios/pagos");
} else {
alert("");
}
});
botonAddCart.innerHTML = "<i class='material-icons'>add_shopping_cart</i> Añadir al carrito";
itemDiv.appendChild(botonAddCart);
contenedor.appendChild(itemDiv);
}
}
divR.appendChild(contenedor);
resolve();
}
};
ajax.open("POST", "./usuarios/platos.json", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
});
};
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionS, () => {
sectionS.innerHTML = ajax.responseText;
crearPlatos();
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./usuarios/index.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirMiCuenta = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionS, () => {
sectionS.innerHTML = ajax.responseText;
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./usuarios/mi-cuenta.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirCarrito = () => {
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionS);
/* Metodo antiguo
const ajax = new XMLHttpRequest();
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionCarrito, () => {
sectionCarrito.innerHTML = ajax.responseText;
crearCarrito();
});
sectionCarrito.setAttribute("vacio","false");
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./usuarios/pagos.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
*/
/* Metodo con Vue */
abrirElemF(sectionCarrito);
};
const abrirStaff = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionS, () => {
sectionS.innerHTML = ajax.responseText;
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./staff/", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirInicioSesion = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
const elem = document.getElementById("inicio_registro");
abrirElemF(elem, () => {
elem.innerHTML = ajax.responseText
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./iniciar-sesion.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirRegistro = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
const elem = document.getElementById("inicio_registro");
abrirElemF(elem, () => {
elem.innerHTML = ajax.responseText
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./registro.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirPagPrin = () => {
const inicio_registro = document.getElementById("inicio_registro");
cerrarElemF(inicio_registro, () => inicio_registro.innerHTML = "");
cerrarElemF(sectionS, () => sectionS.innerHTML = "");
cerrarElemF(sectionCarrito);
abrirElemF(contenedorInicioRegistro);
abrirElemF(sectionP);
};
/* Height Transition by CSS Tricks. Returns a Promise */
const collapseSection = element => {
return new Promise((resolve, reject) => {
// get the height of the element's inner content, regardless of its actual size
let sectionHeight = element.scrollHeight;
// temporarily disable all css transitions
let elementTransition = element.style.transition;
element.style.transition = '';
// on the next frame (as soon as the previous style change has taken effect),
// explicitly set the element's height to its current pixel height, so we
// aren't transitioning out of 'auto'
requestAnimationFrame(function () {
element.style.height = sectionHeight + 'px';
element.style.transition = elementTransition;
// on the next frame (as soon as the previous style change has taken effect),
// have the element transition to height: 0
requestAnimationFrame(function () {
element.style.height = 0 + 'px';
setTimeout(() => {
resolve("Termine de ocultar we v':");
}, 160);
});
});
// mark the section as "currently collapsed"
element.setAttribute('data-collapsed', 'true');
});
};
const expandSection = element => {
return new Promise((resolve, reject) => {
// get the height of the element's inner content, regardless of its actual size
let sectionHeight = element.scrollHeight;
// have the element transition to the height of its inner content
element.style.height = sectionHeight + 'px';
// when the next css transition finishes (which should be the one we just triggered)
element.addEventListener('transitionend', function (e) {
// remove this event listener so it only gets triggered once
element.removeEventListener('transitionend', arguments.callee);
// remove "height" from the element's inline styles, so it can return to its initial value
element.style.height = null;
setTimeout(() => {
resolve("Termine de ampliar we v':");
}, 0);
});
// mark the section as "currently not collapsed"
element.setAttribute('data-collapsed', 'false');
});
};
const abrirElemF = (element, midF, postF) => {
if (element.getAttribute("data-collapsed") === "true") {
if (midF !== undefined)
midF();
expandSection(element).then(() => {
if (postF !== undefined)
postF();
});
} else {
collapseSection(element).then(() => {
if (midF !== undefined)
midF();
expandSection(element).then(() => {
if (postF !== undefined)
postF();
});
});
}
};
const cerrarElemF = (element, postF) => {
if (element.getAttribute("data-collapsed") === "false") {
collapseSection(element).then(() => {
if (postF !== undefined)
postF();
});
}
};
render(decodeURI(window.location.hash));
const carrito = new Vue({
el: "#carrito",
data: {
item: carritoUsuario,
descuento: 0
},
computed: {
cantidadItems: function () {
let items = 0;
for (const i in this.item)
items++;
return items;
},
subTotal: function () {
let subT = 0;
for (const itemI in this.item ) {
if (this.item.hasOwnProperty(itemI)){
const item = this.item[itemI];
subT += (item["precio"] * item["cantidad"]);
}
}
return subT;
},
total: function () {
return this.subTotal - this.descuento;
},
noEstaVacio: function () {
for (const i in this.item) {
return true;
}
return false;
},
},
methods: {
restarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad > 0)
elem.cantidad = cantidad -1;
},
aumentarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad >= 0)
elem.cantidad = cantidad+1;
}
}
});
/* Metodo con Antiguo
const crearCarrito = () => {
carrito = new Vue({
el: "#carrito",
data: {
item: carritoUsuario,
descuento: 0
},
computed: {
cantidadItems: function () {
let items = 0;
for (const i in this.item)
items++;
return items;
},
subTotal: function () {
let subT = 0;
for (const itemI in this.item ) {
if (this.item.hasOwnProperty(itemI)){
const item = this.item[itemI];
subT += (item["precio"] * item["cantidad"]);
}
}
return subT;
},
total: function () {
return this.subTotal - this.descuento;
},
noEstaVacio: function () {
for (const i in this.item) {
return true;
}
return false;
},
},
methods: {
restarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad > 0)
elem.cantidad = cantidad -1;
},
aumentarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad >= 0)
elem.cantidad = cantidad+1;
}
}
});
};
*/

46
js/topbar.js
View File

@ -1,46 +0,0 @@
const 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 ${transitionD}ms, opacity 250ms`;
topBar.style.minWidth = "0";
let widthDestino = 0;
document.body.appendChild(topBar);
let promesaActual;
const cambiarProgreso = progreso => {
widthDestino = progreso;
promesaActual = new Promise((resolve, reject) => {
topBar.style.minWidth = `${progreso}%`;
setTimeout(() => resolve(),transitionD);
});
return promesaActual;
};
const cancelarTransicion = () => {
const transiciones = topBar.style.transition;
topBar.style.transition = "";
topBar.style.minWidth = `${widthDestino}%`;
topBar.style.transition = transiciones;
};
const ocultarTopBar = () => {
topBar.style.opacity = "0";
setTimeout(() => {
topBar.style.minWidth = "0%";
},250);
};
const reiniciarTopBar = () => {
const transiciones = topBar.style.transition;
topBar.style.transition = "";
topBar.style.minWidth = `0`;
topBar.style.opacity = "1";
topBar.style.transition = transiciones;
};

25
package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "ihc",
"version": "1.0.0",
"description": "A simple meb application for a 'French Restaurant'",
"main": "index.php",
"scripts": {
"uglify": "uglifyjs src/js/*.js -m -c -o dist/js/app.js",
"sass": "sass -s compressed src/sass:dist/css"
},
"repository": {
"type": "git",
"url": "git+https://gitlab.com/Araozu/ihc-proyect.git"
},
"keywords": [
"ihc",
"unsa",
"2018"
],
"author": "Fernando Araoz Morales",
"license": "MIT",
"bugs": {
"url": "https://gitlab.com/Araozu/ihc-proyect/issues"
},
"homepage": "https://gitlab.com/Araozu/ihc-proyect#readme"
}

94
src/componentes/carrito.vue Normal file
View File

@ -0,0 +1,94 @@
<div>
<header-min></header-min>
<nav-bar></nav-bar>
<section id="sectionCarrito" class="contenedor mySeccion" data-collapsed="false">
<br/>
<br/>
<div class="center">
<div id="carrito--tituloprincipal">
Carrito de compras
</div>
<br/>
<a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
<br/>
<br/>
<div id="carrito" class="row carrito">
<div id="carrito--elementos" class="col-8">
<div id="carrito--elementos--contenido" class="caja">
<template v-if="noEstaVacio">
<template v-for="producto in item">
<div class="carritoElem">
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
<div class="plato--Titulo">{{ producto.nombre }}</div>
<br>
<div class="plato--Precio">{{ producto.precio }}</div>
<div class="plato--Cantidad">Cantidad:
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
<span>{{ producto.cantidad }}</span>
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
</div>
<br>
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
<hr>
</div>
</template>
</template>
<template v-else>
No hay nada en tu carrito de compras :c
</template>
</div>
</div>
<div id="carrito--precio" class="col-4">
<div id="carrito--precio--contenido" class="caja">
<template v-if="noEstaVacio">
<div id="pagos">
<div style="display: inline-block;">
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
</div>
<div style="display: inline-block; float: right; clear: both">
{{ subTotal }} S/.
</div>
</div>
<div>
<div style="display: inline-block;">
Descuentos:
</div>
<div style="display: inline-block; float: right; clear: both">
{{ descuento }} S/.
</div>
</div>
<br>
<br>
<div>
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
Total:
</div>
<div class="carrito--precio--contenido--titulo"
style="display: inline-block; float: right; clear: both">
{{ total }} S/.
</div>
</div>
<br>
<br>
<a class="carrito--precio--contenido--botonPagar">
Completar Transaccion
</a>
</template>
<template v-else>
No hay nada en tu carrito de compras :c
</template>
</div>
</div>
</div>
</div>
<br/>
<br/>
</section>
<mi-footer></mi-footer>
</div>

10
src/componentes/header.vue Normal file
View File

@ -0,0 +1,10 @@
<header id="header">
<div class="contenedor">
<div id="tituloP" class="center">
<a href="./#" style="color: white; text-decoration: none">Le goût</a>
<div id="tituloP--descripcion">
Descubre un nuevo sabor
</div>
</div>
</div>
</header>

23
src/componentes/headerMin.vue Normal file
View File

@ -0,0 +1,23 @@
<header id="header">
<div class="contenedor">
<div id="tituloP" class="center">
<a href="./#" style="color: white; text-decoration: none">L'Assiete</a>
<div id="tituloP--descripcion">
Descubre un nuevo sabor
</div>
</div>
</div>
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
<a href="./#registro" id="botonRegistro" class="boton">
Registrarse
</a>
<a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
Iniciar Sesion
</a>
<br/>
<br/>
<br/>
</div>
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
</header>

44
src/componentes/inicio.vue Normal file
View File

@ -0,0 +1,44 @@
<div>
<header-min></header-min>
<nav-bar></nav-bar>
<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
<div class="row contenido">
<div class="col-5">
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
alt="Plato Francés"/>
</div>
<div class="col-7">
<div class="descripcionComida">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-7 center">
<div class="descripcionComida">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
gravida
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
sagittis.
</div>
</div>
<div class="col-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
alt="Plato Francés" class="image">
</div>
</div>
<br/>
</section>
<mi-footer></mi-footer>
</div>

11
src/componentes/mi-footer.vue Normal file
View File

@ -0,0 +1,11 @@
<div>
<footer id="footer">
<div class="contenedor">
Cocina Francesa.<br/>
Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
Se utilizaron: Vue.js, BEM, Sass, npm, y PHP.<br>
<br/>
Desarrollado por Fernando Araoz, 20173373.
</div>
</footer>
</div>

10
src/componentes/navBar.vue Normal file
View File

@ -0,0 +1,10 @@
<div>
<nav id="navBar" class="mySeccion" data-collapsed="true">
<ul class="linksNavBar">
<li><router-link to="/ihc/">Inicio</router-link></li>
<li><router-link to="/ihc/usuarios/">Comprar</router-link></li>
<li><router-link to="/ihc/usuarios/mi-cuenta">Mi cuenta</router-link></li>
<li><router-link to="/ihc/carrito/">Carrito</router-link></li>
</ul>
</nav>
</div>

603
src/js/Router.js
View File

@ -1,603 +0,0 @@
/* global window, module */
;(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.Router = factory()
}(this, (function () {
/**
* Router
*
* @version: 1.2.7
* @author Graidenix
*
* @constructor
*
* @param {object} options
* @returns {Router}
*/
function Router(options) {
var settings = this._getSettings(options);
this.notFoundHandler = settings.page404;
this.mode = (!window.history || !window.history.pushState) ? "hash" : settings.mode;
this.root = settings.root === "/" ? "/" : "/" + this._trimSlashes(settings.root) + "/";
this.beforeHook = settings.hooks.before;
this.securityHook = settings.hooks.secure;
this.routes = [];
if (settings.routes && settings.routes.length > 0) {
var _this = this;
settings.routes.forEach(function (route) {
_this.add(route.rule, route.handler, route.options);
});
}
this._pageState = null;
this._currentPage = null;
this._skipCheck = false;
this._action = null;
if (this.mode === "hash") {
this._historyStack = [];
this._historyIdx = 0;
this._historyState = "add"
}
return this;
}
/**
* Define Router Page
*
* @param {string} uri
* @param {object} query
* @param {Array} params
* @param {object} state
* @param {object} options
*
* @constructor
*/
Router.Page = function (uri, query, params, state, options) {
this.uri = uri || "";
this.query = query || {};
this.params = params || [];
this.state = state || null;
this.options = options || {};
};
/**
* Sanitize options and add default values
*
* @param {object} options
* @returns {object}
* @private
*/
Router.prototype._getSettings = function (options) {
var settings = {};
var defaults = {
routes: [],
mode: "history",
root: "/",
hooks: {
"before": function () {
},
"secure": function () {
return true;
}
},
page404: function (page) {
console.error({
page: page,
message: "404. Page not found"
});
}
};
options = options || {};
["routes", "mode", "root", "page404"].forEach(function (key) {
settings[key] = options[key] || defaults[key];
});
settings.hooks = Object.assign({}, defaults.hooks, options.hooks || {});
return settings;
};
/**
* Get URI for Router "history" mode
*
* @private
* @returns {string}
*/
Router.prototype._getHistoryFragment = function () {
var fragment = decodeURI(window.location.pathname);
if (this.root !== "/") {
fragment = fragment.replace(this.root, "");
}
return this._trimSlashes(fragment);
};
/**
* Get URI for router "hash" mode
*
* @private
* @returns {string}
*/
Router.prototype._getHashFragment = function () {
var hash = window.location.hash.substr(1).replace(/(\?.*)$/, "");
return this._trimSlashes(hash);
};
/**
* Get current URI
*
* @private
* @returns {string}
*/
Router.prototype._getFragment = function () {
if (this.mode === "history") {
return this._getHistoryFragment();
} else {
return this._getHashFragment();
}
};
/**
* Trim slashes for path
*
* @private
* @param {string} path
* @returns {string}
*/
Router.prototype._trimSlashes = function (path) {
if (typeof path !== "string") {
return "";
}
return path.toString().replace(/\/$/, "").replace(/^\//, "");
};
/**
* 404 Page Handler
*
* @private
*/
Router.prototype._page404 = function (path) {
this._currentPage = new Router.Page(path);
this.notFoundHandler(path);
};
/**
* Convert the string route rule to RegExp rule
*
* @param {string} route
* @returns {RegExp}
* @private
*/
Router.prototype._parseRouteRule = function (route) {
if (typeof route !== "string") {
return route;
}
var uri = this._trimSlashes(route);
var rule = uri
.replace(/([\\\/\-\_\.])/g, "\\$1")
.replace(/\{[a-zA-Z]+\}/g, "(:any)")
.replace(/\:any/g, "[\\w\\-\\_\\.]+")
.replace(/\:word/g, "[a-zA-Z]+")
.replace(/\:num/g, "\\d+");
return new RegExp("^" + rule + "$", "i");
};
/**
* Parse query string and return object for it
*
* @param {string} query
* @returns {object}
* @private
*/
Router.prototype._parseQuery = function (query) {
var _query = {};
if (typeof query !== "string") {
return _query;
}
if (query[0] === "?") {
query = query.substr(1);
}
this._queryString = query;
query.split("&").forEach(function (row) {
var parts = row.split("=");
if (parts[0] !== "") {
if (parts[1] === undefined) {
parts[1] = true;
}
_query[decodeURIComponent(parts[0])] = parts[1];
}
});
return _query;
};
/**
* Get query for `history` mode
*
* @returns {Object}
* @private
*/
Router.prototype._getHistoryQuery = function () {
return this._parseQuery(window.location.search);
};
/**
* Get query for `hash` mode
*
* @returns {Object}
* @private
*/
Router.prototype._getHashQuery = function () {
var index = window.location.hash.indexOf("?");
var query = (index !== -1) ? window.location.hash.substr(index) : "";
return this._parseQuery(query);
};
/**
* Get query as object
*
* @private
* @returns {Object}
*/
Router.prototype._getQuery = function () {
if (this.mode === "history") {
return this._getHistoryQuery();
} else {
return this._getHashQuery();
}
};
/**
* Add route to routes list
*
* @param {string|RegExp} rule
* @param {function} handler
* @param {{}} options
* @returns {Router}
*/
Router.prototype.add = function (rule, handler, options) {
this.routes.push({
rule: this._parseRouteRule(rule),
handler: handler,
options: options
});
return this;
};
/**
* Remove a route from routes list
*
* @param param
* @returns {Router}
*/
Router.prototype.remove = function (param) {
var _this = this;
if (typeof param === "string") {
param = this._parseRouteRule(param).toString();
}
this.routes.some(function (route, i) {
if (route.handler === param || route.rule.toString() === param) {
_this.routes.splice(i, 1);
return true;
}
return false;
});
return this;
};
/**
* Reset the state of Router
*
* @returns {Router}
*/
Router.prototype.reset = function () {
this.routes = [];
this.mode = null;
this.root = "/";
this._pageState = {};
this.removeUriListener();
return this;
};
/**
* Add current page in history stack
* @private
*/
Router.prototype._pushHistory = function () {
var _this = this,
fragment = this._getFragment();
if (this.mode === "hash") {
if (this._historyState === "add") {
if (this._historyIdx !== this._historyStack.length - 1) {
this._historyStack.splice(this._historyIdx + 1);
}
this._historyStack.push({
path: fragment,
state: _this._pageState
});
this._historyIdx = this._historyStack.length - 1;
}
this._historyState = "add";
}
};
/**
*
* @param asyncRequest boolean
* @returns {PromiseResult<boolean> | boolean}
* @private
*/
Router.prototype._unloadCallback = function (asyncRequest) {
var result;
if (this._skipCheck) {
return asyncRequest ? Promise.resolve(true) : true;
}
if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
result = this._currentPage.options.unloadCb(this._currentPage, asyncRequest);
if (!asyncRequest || result instanceof Promise) {
return result;
}
return result ? Promise.resolve(result) : Promise.reject(result);
} else {
return asyncRequest ? Promise.resolve(true) : true;
}
};
/**
* Check if router has the action for current path
*
* @returns {boolean}
* @private
*/
Router.prototype._findRoute = function () {
var _this = this,
fragment = this._getFragment();
return this.routes.some(function (route) {
var match = fragment.match(route.rule);
if (match) {
match.shift();
var query = _this._getQuery();
var page = new Router.Page(fragment, query, match, _this._pageState, route.options);
if (!_this.securityHook(page)) {
return false;
}
_this._currentPage = page;
if (_this._skipCheck) {
_this._skipCheck = false;
return true;
}
_this.beforeHook(page);
route.handler.apply(page, match);
_this._pageState = null;
window.onbeforeunload = function (ev) {
if (_this._unloadCallback(false)) {
return;
}
ev.returnValue = true;
return true;
};
return true;
}
return false;
});
};
/**
*
*/
Router.prototype._treatAsync = function () {
var result;
result = this._currentPage.options.unloadCb(this._currentPage, true);
if (!(result instanceof Promise)) {
result = result ? Promise.resolve(result) : Promise.reject(result);
}
result
.then(this._processUri.bind(this))
.catch(this._resetState.bind(this));
};
/**
*
* @private
*/
Router.prototype._resetState = function () {
this._skipCheck = true;
this.navigateTo(this._current, this._currentPage.state, true);
};
/**
* Replace current page with new one
*/
Router.prototype._processUri = function () {
var fragment = this._getFragment(),
found;
this._current = fragment;
this._pushHistory();
found = this._findRoute.call(this);
if (!found) {
this._page404(fragment);
}
};
/**
* Check the URL and execute handler for its route
*
* @returns {Router}
*/
Router.prototype.check = function () {
if (this._skipCheck) return this;
// if page has unload cb treat as promise
if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
this._treatAsync();
} else {
this._processUri();
}
return this;
};
/**
* Add the URI listener
*
* @returns {Router}
*/
Router.prototype.addUriListener = function () {
if (this.mode === "history") {
window.onpopstate = this.check.bind(this);
} else {
window.onhashchange = this.check.bind(this);
}
return this;
};
/**
* Remove the URI listener
*
* @returns {Router}
*/
Router.prototype.removeUriListener = function () {
window.onpopstate = null;
window.onhashchange = null;
return this;
};
/**
* Redirect to a page with replace state
*
* @param {string} path
* @param {object} state
* @param {boolean} silent
*
* @returns {Router}
*/
Router.prototype.redirectTo = function (path, state, silent) {
path = this._trimSlashes(path) || "";
this._pageState = state || null;
this._skipCheck = !!silent;
if (this.mode === "history") {
history.replaceState(state, null, this.root + this._trimSlashes(path));
return this.check();
} else {
this._historyIdx--;
window.location.hash = path;
}
return this;
};
/**
* Navigate to a page
*
* @param {string} path
* @param {object} state
* @param {boolean} silent
*
* @returns {Router}
*/
Router.prototype.navigateTo = function (path, state, silent) {
path = this._trimSlashes(path) || "";
this._pageState = state || null;
this._skipCheck = !!silent;
if (this.mode === "history") {
history.pushState(state, null, this.root + this._trimSlashes(path));
return this.check();
} else {
window.location.hash = path;
}
return this;
};
/**
* Refresh page with recall route handler
* @returns {Router}
*/
Router.prototype.refresh = function () {
if (!this._currentPage) {
return this;
}
var path = this._currentPage.uri + "?" + this._queryString;
return this.navigateTo(path, this._currentPage.state);
};
/**
* Go Back in browser history
* Simulate "Back" button
*
* @returns {Router}
*/
Router.prototype.back = function () {
if (this.mode === "history") {
window.history.back();
return this;
}
return this.go(this._historyIdx - 1);
};
/**
* Go Forward in browser history
* Simulate "Forward" button
*
* @returns {Router}
*/
Router.prototype.forward = function () {
if (this.mode === "history") {
window.history.forward();
return this;
}
return this.go(this._historyIdx + 1);
};
/**
* Go to a specific history page
*
* @param {number} count
* @returns {Router}
*/
Router.prototype.go = function (count) {
if (this.mode === "history") {
window.history.go(count);
return this;
}
var page = this._historyStack[count];
if (!page) {
return this;
}
this._historyIdx = count;
this._historyState = "hold";
return this.navigateTo(page.path, page.state);
};
return Router;
})));

423
src/js/base.js
View File

@ -1,374 +1,5 @@
el: '#navBar',
data: {
visible: true
}
});
const carritoUsuario = [];
window.addEventListener("hashchange", () => {
render(decodeURI(window.location.hash));
});
const render = url => {
switch (url) {
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:
abrirPagPrin();
return;
}
};
const sectionP = document.getElementById("sectionP");
const contenedorInicioRegistro = document.getElementById("contenedorInicio-Registro");
const formInicioRegistro = document.getElementById("inicio_registro");
const sectionS = document.getElementById("sectionS");
const sectionCarrito = document.getElementById("sectionCarrito");
const manipularTopBar = status => {
switch (status) {
case 1:
cambiarProgreso(25);
break;
case 2:
cancelarTransicion();
cambiarProgreso(50);
break;
case 3:
cancelarTransicion();
cambiarProgreso(75);
break;
default:
cancelarTransicion();
reiniciarTopBar();
}
};
const abrirUsuarios = () => {
const crearPlatos = () => {
return new Promise((resolve, reject) => {
const ajax = new XMLHttpRequest();
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
const data = JSON.parse(ajax.responseText);
const divR = document.getElementById("productos");
let contenedor = document.createElement("div");
contenedor.className = "row";
let contador = 0;
for (const itemI in data) {
if (data.hasOwnProperty(itemI)) {
const item = data[itemI];
contador++;
if (contador >= 4) {
divR.appendChild(contenedor);
divR.appendChild(document.createElement("br"));
contenedor = document.createElement("div");
contenedor.className = "row";
contador = 1;
}
const itemDiv = document.createElement("div");
itemDiv.className = "col-4 caja plato";
const img = document.createElement("img");
img.className = "image";
img.src = item["imgUrl"];
itemDiv.appendChild(img);
const nombre = document.createElement("div");
nombre.className = "plato--Titulo";
nombre.innerText = item["nombre"];
itemDiv.appendChild(nombre);
itemDiv.appendChild(document.createElement("br"));
const descripcion = document.createElement("div");
descripcion.className = "plato--Descripcion";
descripcion.innerText = item["descripcion"];
itemDiv.appendChild(descripcion);
itemDiv.appendChild(document.createElement("br"));
const precioUnitario = document.createElement("div");
precioUnitario.className = "plato--Precio";
precioUnitario.innerText = `${item["precio"]}`;
itemDiv.appendChild(precioUnitario);
const cantidad = document.createElement("div");
cantidad.className = "plato--Cantidad";
cantidad.appendChild(document.createTextNode("Cantidad: "));
const unidades = document.createElement("span");
const botonMenos = document.createElement("i");
botonMenos.className = "material-icons plato--Cantidad--Icon";
botonMenos.innerText = "remove";
botonMenos.addEventListener("click",() => {
const valorActual = parseInt(unidades.innerText);
if (valorActual > 1) {
unidades.innerText = valorActual-1;
} else {
unidades.innerText = "1";
}
});
cantidad.appendChild(botonMenos);
unidades.innerText = "1";
cantidad.appendChild(unidades);
const botonMas = document.createElement("i");
botonMas.className = "material-icons plato--Cantidad--Icon";
botonMas.innerText = "add";
botonMas.addEventListener("click",() => {
const valorActual = parseInt(unidades.innerText);
if (valorActual > 0) {
unidades.innerText = valorActual+1;
} else {
unidades.innerText = "1";
}
});
cantidad.appendChild(botonMas);
itemDiv.appendChild(cantidad);
itemDiv.appendChild(document.createElement("br"));
const botonAddCart = document.createElement("button");
botonAddCart.className = "botonAddCart";
botonAddCart.addEventListener("click",() => {
const cantidad = parseInt(unidades.innerText);
if (cantidad > 0) {
const item = data[itemI];
item["cantidad"] = cantidad;
// carritoUsuario[itemI] = item;
carritoUsuario.push(item);
console.log(`JSON del usuario|>\n${JSON.stringify(carritoUsuario)}`);
window.location.replace("./#usuarios/pagos");
} else {
alert("");
}
});
botonAddCart.innerHTML = "<i class='material-icons'>add_shopping_cart</i> Añadir al carrito";
itemDiv.appendChild(botonAddCart);
contenedor.appendChild(itemDiv);
}
}
divR.appendChild(contenedor);
resolve();
}
};
ajax.open("POST", "./usuarios/platos.json", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
});
};
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionS, () => {
sectionS.innerHTML = ajax.responseText;
crearPlatos();
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./usuarios/index.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirMiCuenta = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionS, () => {
sectionS.innerHTML = ajax.responseText;
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./usuarios/mi-cuenta.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirCarrito = () => {
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionS);
/* Metodo antiguo
const ajax = new XMLHttpRequest();
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionCarrito, () => {
sectionCarrito.innerHTML = ajax.responseText;
crearCarrito();
});
sectionCarrito.setAttribute("vacio","false");
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./usuarios/pagos.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
*/
/* Metodo con Vue */
abrirElemF(sectionCarrito);
};
const abrirStaff = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(formInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
abrirElemF(sectionS, () => {
sectionS.innerHTML = ajax.responseText;
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./staff/", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirInicioSesion = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
const elem = document.getElementById("inicio_registro");
abrirElemF(elem, () => {
elem.innerHTML = ajax.responseText
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./iniciar-sesion.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirRegistro = () => {
const ajax = new XMLHttpRequest();
reiniciarTopBar();
cerrarElemF(contenedorInicioRegistro);
cerrarElemF(sectionP);
cerrarElemF(sectionCarrito);
ajax.onreadystatechange = () => {
if (ajax.status === 200 && ajax.readyState === 4) {
cambiarProgreso(100).then(ocultarTopBar);
const elem = document.getElementById("inicio_registro");
abrirElemF(elem, () => {
elem.innerHTML = ajax.responseText
});
} else {
manipularTopBar(ajax.readyState);
}
};
ajax.open("POST", "./registro.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
};
const abrirPagPrin = () => {
const inicio_registro = document.getElementById("inicio_registro");
cerrarElemF(inicio_registro, () => inicio_registro.innerHTML = "");
cerrarElemF(sectionS, () => sectionS.innerHTML = "");
cerrarElemF(sectionCarrito);
abrirElemF(contenedorInicioRegistro);
abrirElemF(sectionP);
};
/* Height Transition by CSS Tricks. Returns a Promise */
const collapseSection = element => {
return new Promise((resolve, reject) => {
@ -458,9 +89,6 @@ const cerrarElemF = (element, postF) => {
}
};
render(decodeURI(window.location.hash));
const carrito = new Vue({
el: "#carrito",
data: {
@ -507,54 +135,3 @@ const carrito = new Vue({
}
}
});
/* Metodo con Antiguo
const crearCarrito = () => {
carrito = new Vue({
el: "#carrito",
data: {
item: carritoUsuario,
descuento: 0
},
computed: {
cantidadItems: function () {
let items = 0;
for (const i in this.item)
items++;
return items;
},
subTotal: function () {
let subT = 0;
for (const itemI in this.item ) {
if (this.item.hasOwnProperty(itemI)){
const item = this.item[itemI];
subT += (item["precio"] * item["cantidad"]);
}
}
return subT;
},
total: function () {
return this.subTotal - this.descuento;
},
noEstaVacio: function () {
for (const i in this.item) {
return true;
}
return false;
},
},
methods: {
restarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad > 0)
elem.cantidad = cantidad -1;
},
aumentarCantidad: function (elem) {
const cantidad = parseInt(elem.cantidad);
if (cantidad >= 0)
elem.cantidad = cantidad+1;
}
}
});
};
*/

7
src/sass/anuma.sass
View File

@ -1,7 +0,0 @@
.anuma-we
font:
family: sans-serif
size: 30px
.anuma-we--alv
color: #23bf87