Agregado el carrito.
This commit is contained in:
Fernando
parent
a24e3f2600
commit
e51e687c57
0
public/back/Inicio-Registro.js
Normal file
0
public/back/Inicio-Registro.js
Normal file
@ -1,18 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
<meta name="google-signin-client_id" content="443321715214-9joe4c9l00osc6qcc4l0i2k3420jvb7q.apps.googleusercontent.com">
|
||||
<title>L'Assiete</title>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>Ups. La página de L'Assiete no se puede mostrar si tienes el JavaScript desactivado :c <br>
|
||||
Actívalo y recarga la página.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||
<div v-if="musuarioNoLogeado" id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||
<router-link to="/iniciar-sesion/" id="botonRegistro" class="boton">
|
||||
Registrarse
|
||||
</router-link>
|
||||
@ -19,14 +19,25 @@
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
|
||||
|
||||
<div v-else class="inicio--usuario-registrado">
|
||||
Bienvenido, {{ nombreDeUsuario }}
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderMin'
|
||||
name: 'HeaderMin',
|
||||
computed: {
|
||||
musuarioNoLogeado: function () {
|
||||
return !window.usuarioActual[0].logged;
|
||||
},
|
||||
nombreDeUsuario: function () {
|
||||
return window.usuarioActual[0].nombre;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav id="navBar" class="mySeccion" data-collapsed="true">
|
||||
<nav id="navBar" class="mySeccion">
|
||||
<ul class="linksNavBar">
|
||||
<li><router-link to="/">Inicio</router-link></li>
|
||||
<li><router-link to="/platos/">Platos</router-link></li>
|
||||
|
||||
26
src/components/navBarInicioSesion.vue
Normal file
26
src/components/navBarInicioSesion.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<nav v-if="usuarioNoLogeado" class="mi-nav-bar">
|
||||
<ul class="linksNavBar">
|
||||
<li><router-link to="/iniciar-sesion/">Inicia Sesion</router-link></li>
|
||||
<li><router-link to="/iniciar-sesion/">Regístrate</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "navBarInicioSesion",
|
||||
computed: {
|
||||
usuarioNoLogeado: function () {
|
||||
return !window.usuarioActual[0].logged;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.mi-nav-bar ul li
|
||||
background-color: #3d3d7b
|
||||
height: auto
|
||||
|
||||
</style>
|
||||
@ -15,9 +15,11 @@ require('@/materialize/js/materialize.min.js');
|
||||
{
|
||||
nombre: 'Usuario',
|
||||
email: 'ejemplo@l-assiete.com',
|
||||
historial: {}
|
||||
historial: {},
|
||||
logged: false
|
||||
}
|
||||
];
|
||||
window.elRouter = router
|
||||
})();
|
||||
|
||||
new Vue({
|
||||
|
||||
@ -96,6 +96,7 @@ footer
|
||||
|
||||
#botonInicioSesion
|
||||
background-color: white
|
||||
font-size: large
|
||||
transition: transform 200ms, box-shadow 200ms
|
||||
|
||||
#botonInicioSesion:hover
|
||||
@ -395,3 +396,14 @@ input
|
||||
.img-inicio
|
||||
height: 90px
|
||||
margin: 0 20px
|
||||
|
||||
.mi-cuenta--usuario-no-logeado
|
||||
text-align: center
|
||||
margin: 20px 0
|
||||
font:
|
||||
size: x-large
|
||||
|
||||
.inicio--usuario-registrado
|
||||
text-align: center
|
||||
color: white
|
||||
font-size: large
|
||||
|
||||
@ -10,79 +10,52 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="login--google">
|
||||
Ingresa con Google: <br>
|
||||
<br>
|
||||
<div class="g-signin2" data-onsuccess="onSignIn"></div><br>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row login">
|
||||
<div class="col l6 m6 s12 login--descripcion center-align">
|
||||
Inicia sesión <br>
|
||||
<br>
|
||||
<button class="login--boton login--botonGoogle hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/281/281764.svg" width="20" height="20"
|
||||
alt="Google">
|
||||
|
||||
Google
|
||||
</button><br>
|
||||
<br>
|
||||
<button class="login--boton login--botonFacebook hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/145/145802.svg" width="20" height="20"
|
||||
alt="Facebook">
|
||||
|
||||
Facebook
|
||||
</button><br>
|
||||
<br>
|
||||
O con tu email: <br>
|
||||
Inicia sesión con tu email: <br>
|
||||
<br>
|
||||
<div class="center">
|
||||
<form class="login--form">
|
||||
<form name="form-inicio-sesion" class="login--form" v-on:submit.prevent="iniciarSesion('form-inicio-sesion')">
|
||||
<label class="login--form--label">Email:</label>
|
||||
<input class="login--form--input" type="email" placeholder="Tu email" required><br>
|
||||
<input class="login--form--input" type="email" placeholder="Tu email" name="email" required><br>
|
||||
<br>
|
||||
<label for="" class="login--form--label">Contraseña</label>
|
||||
<label class="login--form--label">Contraseña</label>
|
||||
<input class="login--form--input" type="password" placeholder="Contraseña" required><br>
|
||||
<br>
|
||||
<router-link to="/platos/" class="btn waves-effect waves-light" type="submit" name="action">Inicia Sesión
|
||||
</router-link>
|
||||
<button class="btn waves-effect waves-light" type="submit" name="action">Inicia Sesión
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col l6 m6 s12 login--registro center-align" id="bordeIzq">
|
||||
Regístrate <br>
|
||||
<br>
|
||||
<button class="login--boton login--botonGoogle hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/281/281764.svg" width="20" height="20"
|
||||
alt="Google">
|
||||
|
||||
Google
|
||||
</button><br>
|
||||
<br>
|
||||
<button class="login--boton login--botonFacebook hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/145/145802.svg" width="20" height="20"
|
||||
alt="Facebook">
|
||||
|
||||
Facebook
|
||||
</button><br>
|
||||
<br>
|
||||
O con tu email: <br>
|
||||
Regístrate con tu email: <br>
|
||||
<br>
|
||||
<div class="center">
|
||||
<form action="" class="login--form">
|
||||
<label for="" class="login--form--label">Nombre</label>
|
||||
<input class="login--form--input" type="text" placeholder="Tu nombre" required><br>
|
||||
<form name="form-registro" action="" class="login--form" v-on:submit.prevent="registrar('form-registro')">
|
||||
<label class="login--form--label">Nombre</label>
|
||||
<input class="login--form--input" type="text" placeholder="Tu nombre" name="nombre" required><br>
|
||||
<br>
|
||||
<label class="login--form--label">Email:</label>
|
||||
<input class="login--form--input" type="email" placeholder="Tu email" required><br>
|
||||
<input class="login--form--input" type="email" placeholder="Tu email" name="email" required><br>
|
||||
<br>
|
||||
<label for="" class="login--form--label">Contraseña</label>
|
||||
<input class="login--form--input" type="password" placeholder="Contraseña" required><br>
|
||||
<label class="login--form--label">Contraseña</label>
|
||||
<input class="login--form--input" type="password" placeholder="Contraseña" name="pass" required><br>
|
||||
<br>
|
||||
<router-link to="/platos/" class="btn waves-effect waves-light" type="submit" name="action">Regístrame
|
||||
</router-link>
|
||||
<button class="btn waves-effect waves-light" type="submit" name="action">Regístrame
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<img src="https://publicholidays.fr/wp-content/uploads/2012/12/France_1920_800_homepage.jpg"
|
||||
alt="Imagen-paris" class="responsive-image" style="opacity: 0.8;"><br>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
@ -93,22 +66,72 @@
|
||||
<script>
|
||||
import MiFooter from '@/components/mi-footer.vue'
|
||||
|
||||
function onSignIn(googleUser) {
|
||||
let id_token = googleUser.getAuthResponse().id_token;
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.onload = function() {
|
||||
console.log('Signed in as: ' + xhr.responseText);
|
||||
};
|
||||
xhr.send('idtoken=' + id_token);
|
||||
}
|
||||
|
||||
(() => {
|
||||
let scr = document.createElement("script");
|
||||
scr.src = "https://apis.google.com/js/platform.js";
|
||||
scr.defer = true;
|
||||
document.head.appendChild(scr);
|
||||
console.log("Anuma v:");
|
||||
})();
|
||||
|
||||
export default {
|
||||
name: 'IniciarSesion',
|
||||
components: {
|
||||
'mi-footer': MiFooter
|
||||
},
|
||||
methods: {
|
||||
registrar: function (nombre) {
|
||||
const nombreUsuario = document.forms[nombre]['nombre'].value;
|
||||
const emailUsuario = document.forms[nombre]['email'].value;
|
||||
/* const passUsuario = document.forms[nombre]['pass'].value */
|
||||
window.usuarioActual[0].nombre = nombreUsuario;
|
||||
window.usuarioActual[0].email = emailUsuario;
|
||||
window.usuarioActual[0].logged = true;
|
||||
|
||||
window.elRouter.push("/");
|
||||
},
|
||||
iniciarSesion: function (nombre) {
|
||||
const emailUsuario = document.forms[nombre]['email'].value;
|
||||
const nombreUsuario = emailUsuario.substring(0,emailUsuario.search("@"));
|
||||
|
||||
window.usuarioActual[0].nombre = nombreUsuario;
|
||||
window.usuarioActual[0].email = emailUsuario;
|
||||
window.usuarioActual[0].logged = true;
|
||||
|
||||
window.elRouter.push("/");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
.g-signin2
|
||||
display: inline-block
|
||||
|
||||
|
||||
#bordeIzq
|
||||
border-left: solid 1px white
|
||||
|
||||
.login
|
||||
color: white
|
||||
|
||||
.login--google
|
||||
text-align: center
|
||||
color: white
|
||||
|
||||
.login--boton
|
||||
border: none
|
||||
padding: 10px 50px
|
||||
|
||||
@ -1,26 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<header-mini></header-mini>
|
||||
<nav-bar></nav-bar>
|
||||
<header-mini />
|
||||
<nav-bar-inicio-sesion />
|
||||
<nav-bar />
|
||||
<section>
|
||||
<div class="container fondoBlanco">
|
||||
<h2 class="tienda--titulo">Mi cuenta</h2>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div v-if="usuarioNoLogeado" class="mi-cuenta--usuario-no-logeado">
|
||||
¡Ups! Parece que no iniciaste sesión.<br>
|
||||
Obtén acceso a más de 7 platos
|
||||
gourmet en la comodida de tu hogar:
|
||||
<br>
|
||||
<br>
|
||||
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||
<router-link to="/iniciar-sesion/" id="botonRegistro" class="boton">
|
||||
Registrarse
|
||||
</router-link>
|
||||
<router-link to="/iniciar-sesion/" id="botonInicioSesion" class="boton">
|
||||
Iniciar Sesion
|
||||
</router-link>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row">
|
||||
<div class="col l6 m6">
|
||||
{{ usuario[0].nombre }}<br>
|
||||
{{ usuario[0].email }}<br>
|
||||
Hola {{ usuario[0].nombre }}, esta es toda la información que guardamos de ti: <br/>
|
||||
<br>
|
||||
Tu nombre: {{ usuario[0].nombre }}<br>
|
||||
Tu email: {{ usuario[0].email }}<br>
|
||||
|
||||
</div>
|
||||
<div class="col l6 m6">
|
||||
Historial de Compras <br>
|
||||
Tu historial de Compras <br>
|
||||
<br>
|
||||
<div v-if="historialVacio">
|
||||
Tu historial de compras está vacio. ¡Compra algo y lo verás aquí!
|
||||
</div>
|
||||
<div v-else>
|
||||
<template v-for="(plato, key) in usuario[0].historial">
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
@ -30,13 +56,16 @@
|
||||
import HeaderMini from '@/components/headerMini'
|
||||
import NavBar from '@/components/navBar'
|
||||
import MiFooter from '@/components/mi-footer'
|
||||
import NavBarInicioSesion from '../components/navBarInicioSesion.vue';
|
||||
|
||||
export default {
|
||||
name: "MiCuenta",
|
||||
components: {
|
||||
NavBarInicioSesion,
|
||||
'header-mini': HeaderMini,
|
||||
'nav-bar': NavBar,
|
||||
'mi-footer': MiFooter
|
||||
'mi-footer': MiFooter,
|
||||
'nav-bar-inicio-sesion': NavBarInicioSesion
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
@ -49,6 +78,9 @@
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
usuarioNoLogeado: function () {
|
||||
return !window.usuarioActual[0].logged;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<header-mini></header-mini>
|
||||
<header-mini />
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
<nav-bar-inicio-sesion />
|
||||
<nav-bar />
|
||||
|
||||
<section class="tienda container mySeccion fondoBlanco" data-collapsed="false">
|
||||
<h2 class="tienda--titulo">Platos</h2>
|
||||
@ -44,7 +45,7 @@
|
||||
|
||||
</section>
|
||||
|
||||
<mi-footer></mi-footer>
|
||||
<mi-footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -52,13 +53,15 @@
|
||||
import MiFooter from "../components/mi-footer.vue";
|
||||
import HeaderMini from '../components/headerMini.vue';
|
||||
import NavBar from '../components/navBar.vue';
|
||||
import NavBarInicioSesion from '../components/navBarInicioSesion.vue';
|
||||
|
||||
export default {
|
||||
name: 'Platos',
|
||||
components: {
|
||||
'mi-footer': MiFooter,
|
||||
'header-mini': HeaderMini,
|
||||
'nav-bar': NavBar
|
||||
'nav-bar': NavBar,
|
||||
'nav-bar-inicio-sesion': NavBarInicioSesion
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<header-mini></header-mini>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
<header-mini />
|
||||
<nav-bar-inicio-sesion />
|
||||
<nav-bar />
|
||||
|
||||
<section id="sectionCarrito" class="container mySeccion">
|
||||
<div class="center">
|
||||
@ -97,13 +97,16 @@
|
||||
import HeaderMini from '@/components/headerMini'
|
||||
import NavBar from '@/components/navBar'
|
||||
import MiFooter from '@/components/mi-footer'
|
||||
import NavBarInicioSesion from '../components/navBarInicioSesion.vue';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Carrito',
|
||||
components: {
|
||||
'header-mini': HeaderMini,
|
||||
'nav-bar': NavBar,
|
||||
'mi-footer': MiFooter
|
||||
'mi-footer': MiFooter,
|
||||
'nav-bar-inicio-sesion': NavBarInicioSesion
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user