- Nuevo componente Tienda que lista los productos

- Cambios menores

index.php

@@ -40,6 +40,10 @@ const headerMin = {
     template: `<?php include "./src/componentes/headerMin.vue" ?>`
 };
 
+const headerMini = {
+    template: `<?php include "./src/componentes/header-mini.vue"?>`
+};
+
 const inicio = {
     template: `<?php include "./src/componentes/inicio.vue" ?>`,
     components: {
@@ -49,11 +53,53 @@ const inicio = {
     }
 };
 
+const tienda = function (resolve, reject) {
+    const ajax1 = new XMLHttpRequest();
+    const ajax2 = new XMLHttpRequest();
+
+    ajax1.onreadystatechange = ajax2.onreadystatechange = () => {
+        if (ajax1.status === 200 && ajax1.readyState === 4 && ajax2.status === 200 && ajax2.readyState === 4) {
+            const platosD = JSON.parse(ajax2.responseText);
+            resolve({
+                template: `${ajax1.responseText}`,
+                data: function () {
+                    return {
+                        platos: platosD,
+                        itemActual: 1
+                    };
+                },
+                components: {
+                    'mi-footer': footer,
+                    'header-mini': headerMini,
+                    'nav-bar': navBar
+                },
+                methods: {
+                    cambiarContador: function () {
+                        if (this.itemActual === 1 || this.itemActual === 2){
+                            this.itemActual++;
+                            return true;
+                        } else {
+                            this.itemActual = 1;
+                            return false;
+                        }
+                    }
+                }
+            });
+        }
+    };
+
+    ajax1.open("GET","/ihc/src/componentes/tienda.vue",true);
+    ajax1.send();
+
+    ajax2.open("GET","/ihc/src/data/platos.json");
+    ajax2.send();
+};
+
 const carrito = {
     template: `<?php include "./src/componentes/carrito.vue"?>`,
     components: {
         'mi-footer': footer,
-        'header-min': headerMin,
+        'header-mini': headerMini,
         'nav-bar': navBar
     },
     data: function () {
@@ -105,7 +151,8 @@ const carrito = {
 
 const routes = [
     {path: '/ihc/',component: inicio},
-    {path: '/ihc/carrito/', component: carrito}
+    {path: '/ihc/carrito/', component: carrito},
+    {path: '/ihc/tienda/', component: tienda}
 ];
 
 const router = new VueRouter({

package.json

@@ -5,7 +5,8 @@
   "main": "index.php",
   "scripts": {
       "uglify": "uglifyjs src/js/*.js -m -c -o dist/js/app.js",
-      "sass": "sass -s compressed src/sass:dist/css"
+      "sass": "sass -s compressed src/sass:dist/css",
+      "compile": "npm run uglify && npm run sass"
   },
   "repository": {
     "type": "git",

src/componentes/carrito.vue

@@ -1,5 +1,5 @@
 <div>
-    <header-min></header-min>
+    <header-mini></header-mini>
 
     <nav-bar></nav-bar>
 

src/componentes/header-mini.vue

@@ -0,0 +1,7 @@
+<header id="header">
+    <div class="contenedor">
+        <div id="tituloP" class="center tituloP--mini">
+            <router-link to="/ihc/" class="titulo--link">L'Assiette</router-link>
+        </div>
+    </div>
+</header>

src/componentes/header.vue

@@ -1,10 +0,0 @@
-<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>

src/componentes/headerMin.vue

@@ -1,7 +1,7 @@
 <header id="header">
     <div class="contenedor">
         <div id="tituloP" class="center">
-            <a href="./#" style="color: white; text-decoration: none">L'Assiette</a>
+            <router-link to="/ihc/" class="titulo--link">L'Assiette</router-link>
             <div id="tituloP--descripcion">
                 Descubre un nuevo sabor
             </div>

src/componentes/mi-footer.vue

@@ -3,7 +3,7 @@
         <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>
+            Se utilizaron: Vue.js, BEM, Sass, npm, y nodejs.<br>
             <br/>
             Desarrollado por Fernando Araoz, 20173373.
         </div>

src/componentes/navBar.vue

@@ -2,7 +2,7 @@
     <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/tienda/">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>

src/componentes/tienda.vue

@@ -0,0 +1,48 @@
+<div>
+    <header-mini></header-mini>
+
+    <nav-bar></nav-bar>
+
+    <section class="tienda contenedor mySeccion" data-collapsed="false">
+        <br>
+        <br>
+        <div class="tienda--titulo">Tienda</div>
+        <br>
+        Ver mi cuenta | Ver mi carrito
+        <br>
+        <br>
+        <template v-for="item in platos">
+            <div class="row tienda--tarjeta">
+                <div class="col-4">
+                    <img class="responsive-image" :src="item.imgUrl"/>
+                </div>
+                <div class="col-8">
+                    <div class="tienda--tarjeta--titulo">
+                        {{ item.nombre }}
+                    </div>
+                    <br>
+                    <div class="tienda--tarjeta--descripcion">
+                        {{ item.descripcion }}
+                    </div>
+                    <br>
+                    <div class="tienda--tarjeta--precio">
+                        {{ item.precio }}
+                    </div>
+                    <br>
+                    <div class="tienda--tarjeta--cantidad">
+                        1
+                        <i class='material-icons plato--Cantidad--Icon'>add</i>
+                    </div>
+                    <br/>
+                    <button class="tienda--tarjeta--botonComprar">
+                        <i class='material-icons'>add_shopping_cart</i> Añadir al carrito
+                    </button>
+                </div>
+            </div>
+        </template>
+        <br>
+        <br>
+    </section>
+
+    <mi-footer></mi-footer>
+</div>

src/data/platos.json

@@ -0,0 +1,50 @@
+[
+  {
+    "nombre": "Soupe à l'oignon",
+    "descripcion": "Sopa tradicional hecha con cebolla y carne.",
+    "imgUrl": "https://www.expatica.com/media/upload/714571.jpg",
+    "precio": 20
+  },
+  {
+    "nombre": "Coq au vin",
+    "descripcion": "Pollo cocinado con vino, hongos, carne de cerdo y ajo",
+    "imgUrl": "https://www.expatica.com/media/upload/714572.jpg",
+    "precio": 50
+  },
+  {
+    "nombre": "Beef bourguignon",
+    "descripcion": "Filete cocinado en vino, sasonado con especias",
+    "imgUrl": "https://www.expatica.com/media/upload/714573.jpg",
+    "precio": 30
+  },
+  {
+    "nombre": "Cassoulet",
+    "descripcion": "Guiso parecido a las habichuelas típicas españolas que se hace con alubias blancas o frijoles acompañadas de carne de diferentes animales",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Cassoulet-570x320.jpg",
+    "precio": 22
+  },
+  {
+    "nombre": "Fondue de queso",
+    "descripcion": "Crema que se puede tomar bien como acompañante de otros ingredientes o bien mojando trozos de pan en él.",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Fondue-570x321.jpg",
+    "precio": 5
+  },
+  {
+    "nombre": "Ratatouille",
+    "descripcion": "Elaborado con diversas hortalizas, es un plato natural de Niza y la región de Provenza, al sureste de Francia.",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Ratatouille-570x320.jpg",
+    "precio": 35
+  },
+  {
+    "nombre": "Magret de canard",
+    "descripcion": "Un filete de carne magra, que suele provenir de un ganso o pato cebado",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Magret-de-Canard-570x320.jpg",
+    "precio": 17
+  },
+  {
+    "nombre": "Merluza al beurre blanc",
+    "descripcion": "Este plato consiste en troncos o lomos de merluza que se sirven en salsa beurre blanc.",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Merluza-a-la-beurre-blanc-570x320.jpg",
+    "precio": 22
+  }
+]

src/sass/base.sass

@@ -3,6 +3,8 @@
 $fuenteTitulos: 'Muli'
 $fuentePrincipal: 'Open Sans'
 
+$colorPrincipalOscuro: #3d3d7c
+
 *
   box-sizing: border-box
 
@@ -95,6 +97,15 @@ footer
     size: large
     family: $fuentePrincipal
 
+.tituloP--mini
+  padding: 10px !important
+  font:
+    size: 40px !important
+
+.titulo--link
+  color: white
+  text-decoration: none
+
 .center
   text-align: center
 
@@ -363,4 +374,56 @@ input
     weight: 900
   margin: 10px 0
 
+.responsive-image
+  padding: 0 20px
+  width: 100%
+  height: auto
 
+
+.tienda--titulo
+  text-align: center
+  font:
+    family: $fuenteTitulos, sans-serif
+    size: xx-large
+    weight: 900
+  margin: 10px 0
+
+.tienda--tarjeta
+  padding: 10px
+  margin: 10px 5px
+  border-radius: 3px
+  box-shadow: 2px 2px 5px gray
+
+.tienda--tarjeta--titulo
+  font:
+    size: x-large
+    family: $fuenteTitulos, sans-serif
+  color: $colorPrincipalOscuro
+
+.tienda--tarjeta--descripcion
+
+.tienda--tarjeta--precio
+  &:before
+    content: "Precio unitario: "
+    color: green
+  &:after
+    content: " S/."
+
+.tienda--tarjeta--cantidad
+  &:before
+    content: "Cantidad <i class='material-icons plato--Cantidad--Icon'>remove</i> "
+
+.tienda--tarjeta--botonComprar
+  background-color: white
+  color: $colorPrincipalOscuro
+  padding: 10px
+  cursor: pointer
+  border-radius: 3px
+  transition: color 100ms, background-color 100ms
+  font:
+    size: large
+    weight: bold
+    family: $fuenteTitulos
+  &:hover
+    background-color: $colorPrincipalOscuro
+    color: white

staff/index.php

@@ -1,13 +0,0 @@
-<br />
-<br />
-<div class="center">
-    Personal<br />
-    <br />
-    <br />
-    <a href="./#usuarios/">Volver a la carta</a>
-    <br />
-    <br />
-
-</div>
-<br />
-<br />