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

Agregado el carrito.

master
Fernando 2018-10-28 17:35:22 -05:00
parent a24e3f2600
commit e51e687c57
11 changed files with 191 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/back/Inicio-Registro.js Normal file
View File

2
public/index.html
View File

@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <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> <title>L'Assiete</title>
</head> </head>
<body> <body>

19
src/components/headerMin.vue
View File

@ -8,7 +8,7 @@
</div> </div>
</div> </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"> <router-link to="/iniciar-sesion/" id="botonRegistro" class="boton">
Registrarse Registrarse
</router-link> </router-link>
@ -19,14 +19,25 @@
<br/> <br/>
<br/> <br/>
</div> </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> </header>
</template> </template>
<script> <script>
export default { export default {
name: 'HeaderMin' name: 'HeaderMin',
computed: {
musuarioNoLogeado: function () {
return !window.usuarioActual[0].logged;
},
nombreDeUsuario: function () {
return window.usuarioActual[0].nombre;
}
}
} }
</script> </script>

2
src/components/navBar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<nav id="navBar" class="mySeccion" data-collapsed="true"> <nav id="navBar" class="mySeccion">
<ul class="linksNavBar"> <ul class="linksNavBar">
<li><router-link to="/">Inicio</router-link></li> <li><router-link to="/">Inicio</router-link></li>
<li><router-link to="/platos/">Platos</router-link></li> <li><router-link to="/platos/">Platos</router-link></li>

26
src/components/navBarInicioSesion.vue Normal file
View 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>

4
src/main.js
View File

@ -15,9 +15,11 @@ require('@/materialize/js/materialize.min.js');
{ {
nombre: 'Usuario', nombre: 'Usuario',
email: 'ejemplo@l-assiete.com', email: 'ejemplo@l-assiete.com',
historial: {} historial: {},
logged: false
} }
]; ];
window.elRouter = router
})(); })();
new Vue({ new Vue({

12
src/sass/base.sass
View File

@ -96,6 +96,7 @@ footer
#botonInicioSesion #botonInicioSesion
background-color: white background-color: white
font-size: large
transition: transform 200ms, box-shadow 200ms transition: transform 200ms, box-shadow 200ms
#botonInicioSesion:hover #botonInicioSesion:hover
@ -395,3 +396,14 @@ input
.img-inicio .img-inicio
height: 90px height: 90px
margin: 0 20px 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

121
src/views/Login-Registro.vue
View File

@ -10,79 +10,52 @@
</div> </div>
</div> </div>
<div class="container"> <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="row login">
<div class="col l6 m6 s12 login--descripcion center-align"> <div class="col l6 m6 s12 login--descripcion center-align">
Inicia sesión <br> Inicia sesión con tu email: <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">
&nbsp;&nbsp;
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">
&nbsp;&nbsp;
Facebook
</button><br>
<br>
O con tu email: <br>
<br> <br>
<div class="center"> <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> <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> <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> <input class="login--form--input" type="password" placeholder="Contraseña" required><br>
<br> <br>
<router-link to="/platos/" class="btn waves-effect waves-light" type="submit" name="action">Inicia Sesión <button class="btn waves-effect waves-light" type="submit" name="action">Inicia Sesión
</router-link> </button>
</form> </form>
</div> </div>
<br> <br>
</div> </div>
<div class="col l6 m6 s12 login--registro center-align" id="bordeIzq"> <div class="col l6 m6 s12 login--registro center-align" id="bordeIzq">
Regístrate <br> Regístrate con tu email: <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">
&nbsp;&nbsp;
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">
&nbsp;&nbsp;
Facebook
</button><br>
<br>
O con tu email: <br>
<br> <br>
<div class="center"> <div class="center">
<form action="" class="login--form"> <form name="form-registro" action="" class="login--form" v-on:submit.prevent="registrar('form-registro')">
<label for="" class="login--form--label">Nombre</label> <label class="login--form--label">Nombre</label>
<input class="login--form--input" type="text" placeholder="Tu nombre" required><br> <input class="login--form--input" type="text" placeholder="Tu nombre" name="nombre" required><br>
<br> <br>
<label class="login--form--label">Email:</label> <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> <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> <input class="login--form--input" type="password" placeholder="Contraseña" name="pass" required><br>
<br> <br>
<router-link to="/platos/" class="btn waves-effect waves-light" type="submit" name="action">Regístrame <button class="btn waves-effect waves-light" type="submit" name="action">Regístrame
</router-link> </button>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<br> <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> </div>
<br> <br>
@ -93,22 +66,72 @@
<script> <script>
import MiFooter from '@/components/mi-footer.vue' 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 { export default {
name: 'IniciarSesion', name: 'IniciarSesion',
components: { components: {
'mi-footer': MiFooter '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> </script>
<style scoped lang="sass"> <style scoped lang="sass">
.g-signin2
display: inline-block
#bordeIzq #bordeIzq
border-left: solid 1px white border-left: solid 1px white
.login .login
color: white color: white
.login--google
text-align: center
color: white
.login--boton .login--boton
border: none border: none
padding: 10px 50px padding: 10px 50px

46
src/views/MiCuenta.vue
View File

@ -1,26 +1,52 @@
<template> <template>
<div> <div>
<header-mini></header-mini> <header-mini />
<nav-bar></nav-bar> <nav-bar-inicio-sesion />
<nav-bar />
<section> <section>
<div class="container fondoBlanco"> <div class="container fondoBlanco">
<h2 class="tienda--titulo">Mi cuenta</h2> <h2 class="tienda--titulo">Mi cuenta</h2>
<br> <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"> <div class="col l6 m6">
{{ usuario[0].nombre }}<br> Hola {{ usuario[0].nombre }}, esta es toda la información que guardamos de ti: <br/>
{{ usuario[0].email }}<br> <br>
Tu nombre: {{ usuario[0].nombre }}<br>
Tu email: {{ usuario[0].email }}<br>
</div> </div>
<div class="col l6 m6"> <div class="col l6 m6">
Historial de Compras <br> Tu historial de Compras <br>
<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 v-for="(plato, key) in usuario[0].historial">
</template> </template>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
<mi-footer></mi-footer> <mi-footer></mi-footer>
</div> </div>
@ -30,13 +56,16 @@
import HeaderMini from '@/components/headerMini' import HeaderMini from '@/components/headerMini'
import NavBar from '@/components/navBar' import NavBar from '@/components/navBar'
import MiFooter from '@/components/mi-footer' import MiFooter from '@/components/mi-footer'
import NavBarInicioSesion from '../components/navBarInicioSesion.vue';
export default { export default {
name: "MiCuenta", name: "MiCuenta",
components: { components: {
NavBarInicioSesion,
'header-mini': HeaderMini, 'header-mini': HeaderMini,
'nav-bar': NavBar, 'nav-bar': NavBar,
'mi-footer': MiFooter 'mi-footer': MiFooter,
'nav-bar-inicio-sesion': NavBarInicioSesion
}, },
data: function () { data: function () {
return { return {
@ -49,6 +78,9 @@
return false return false
} }
return true return true
},
usuarioNoLogeado: function () {
return !window.usuarioActual[0].logged;
} }
} }
} }

11
src/views/Platos.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div> <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"> <section class="tienda container mySeccion fondoBlanco" data-collapsed="false">
<h2 class="tienda--titulo">Platos</h2> <h2 class="tienda--titulo">Platos</h2>
@ -44,7 +45,7 @@
</section> </section>
<mi-footer></mi-footer> <mi-footer />
</div> </div>
</template> </template>
@ -52,13 +53,15 @@
import MiFooter from "../components/mi-footer.vue"; import MiFooter from "../components/mi-footer.vue";
import HeaderMini from '../components/headerMini.vue'; import HeaderMini from '../components/headerMini.vue';
import NavBar from '../components/navBar.vue'; import NavBar from '../components/navBar.vue';
import NavBarInicioSesion from '../components/navBarInicioSesion.vue';
export default { export default {
name: 'Platos', name: 'Platos',
components: { components: {
'mi-footer': MiFooter, 'mi-footer': MiFooter,
'header-mini': HeaderMini, 'header-mini': HeaderMini,
'nav-bar': NavBar 'nav-bar': NavBar,
'nav-bar-inicio-sesion': NavBarInicioSesion
}, },
data: function () { data: function () {
return { return {

11
src/views/carrito.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<header-mini></header-mini> <header-mini />
<nav-bar-inicio-sesion />
<nav-bar></nav-bar> <nav-bar />
<section id="sectionCarrito" class="container mySeccion"> <section id="sectionCarrito" class="container mySeccion">
<div class="center"> <div class="center">
@ -97,13 +97,16 @@
import HeaderMini from '@/components/headerMini' import HeaderMini from '@/components/headerMini'
import NavBar from '@/components/navBar' import NavBar from '@/components/navBar'
import MiFooter from '@/components/mi-footer' import MiFooter from '@/components/mi-footer'
import NavBarInicioSesion from '../components/navBarInicioSesion.vue';
export default { export default {
name: 'Carrito', name: 'Carrito',
components: { components: {
'header-mini': HeaderMini, 'header-mini': HeaderMini,
'nav-bar': NavBar, 'nav-bar': NavBar,
'mi-footer': MiFooter 'mi-footer': MiFooter,
'nav-bar-inicio-sesion': NavBarInicioSesion
}, },
data: function () { data: function () {
return { return {