Cambio a Vue y VueRouter
parent
09386772f6
commit
df39560bb7
|
@ -1,2 +1,3 @@
|
|||
/node_modules
|
||||
/idea
|
||||
**.map
|
||||
|
|
19
.htaccess
19
.htaccess
|
@ -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)$">
|
||||
|
|
428
css/base.css
428
css/base.css
|
@ -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 +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
366
css/base.sass
|
@ -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 +0,0 @@
|
|||
.anuma-we{font-family:sans-serif;font-size:30px}.anuma-we--alv{color:#23bf87}/*# sourceMappingURL=anuma.css.map */
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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
281
index.php
|
@ -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
603
js/Router.js
|
@ -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
563
js/base.js
|
@ -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
46
js/topbar.js
|
@ -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;
|
||||
};
|
|
@ -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"
|
||||
}
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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
603
src/js/Router.js
|
@ -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
423
src/js/base.js
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
*/
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
.anuma-we
|
||||
font:
|
||||
family: sans-serif
|
||||
size: 30px
|
||||
|
||||
.anuma-we--alv
|
||||
color: #23bf87
|
Loading…
Reference in New Issue