barra de busqeda

src/components/carrusel.vue

@@ -49,13 +49,14 @@ export default {
   },
   async created() {
     try {
+      let path = `${config.api}/imagenCarrusel?nombre=`;
       let nombres = await axios.get(`${config.api}/nombreCarrusel`);
       nombres = nombres.data.data;
       for (let i = 0; i < nombres.length; i++) {
-        console.log(`  Este es el nombre ${nombres[i]}`);
+        console.log(path);
         let config = {
           // example url
-          url: `http://localhost:3000/imagenCarrusel?nombre=${nombres[i]}`,
+          url: `${path}${nombres[i]}`,
           method: "GET",
           responseType: "blob"
         };

src/components/cartLibro.vue

@@ -6,6 +6,7 @@
         style="width: 12rem;"
         v-bind:key="libro.id"
         v-for="libro in Libros"
+        @click="descripcion(libro.id)"
       >
         <router-link :to="{ path: 'home' }" class="textt">
           <img :src="libro.img" class="card-img-top rounded" alt="libro" />
@@ -29,9 +30,18 @@ export default {
       Libros: []
     };
   },
+  methods: {
+    async descripcion(idLibro) {
+      console.log(` Este es el id del libro ${idLibro}`);
+      localStorage.clear();
+      window.localStorage.setItem("idLibro", idLibro);
+      this.$router.push("/desc");
+    }
+  },
   async created() {
     try {
       let novedades = await axios.get(`${config.api}/librosNovedades`);
+      let path = `${config.api}/libroImagen?idLibro=`;
       novedades = novedades.data.data;
       console.log(`${novedades}`);
       for (let i = 0; i < novedades.length; i++) {
@@ -39,7 +49,7 @@ export default {
         //this.Libros[i].title = novedades[i].titulo;
         let config = {
           // example url
-          url: `http://localhost:3000/libroImagen?idLibro=${(i % 3) + 1}`,
+          url: `${path}${(i % 3) + 1}`,
           method: "GET",
           responseType: "blob"
         };
@@ -48,7 +58,7 @@ export default {
           reader.readAsDataURL(response.data);
           reader.onload = () => {
             this.Libros.push({
-              id: i,
+              id: novedades[i].idLibro,
               title: novedades[i].titulo,
               img: reader.result
             });

src/components/descripcion.vue

@@ -62,15 +62,16 @@
           style="width: 12rem;"
           v-bind:key="libro.id"
           v-for="libro in Libros"
+          @click="descripcion(libro.id)"
         >
-          <router-link :to="{ path: 'home' }" class="textt">
+          <div class="textt">
             <img :src="libro.img" class="card-img-top rounded" alt="libro" />
             <div class="card-body cd textt">
               <p class="card-text textt">
                 {{ libro.title }}
               </p>
             </div>
-          </router-link>
+          </div>
         </div>
       </div>
     </div>
@@ -100,30 +101,20 @@ export default {
       desc: ``,
       boton2: "",
       categoria: "",
-      Libros: [
-        {
-          id: 0,
-          title: "",
-          img: ""
-        },
-        {
-          id: 1,
-          title: "",
-          img: ""
-        },
-        {
-          id: 1,
-          title: "",
-          img: ""
-        }
-      ]
+      Libros: []
     };
   },
+  methods: {
+    async descripcion(idLibro) {
+      localStorage.clear();
+      window.localStorage.setItem("idLibro", idLibro);
+      location.reload();
+    }
+  },
   async created() {
+    let path = `${config.api}`;
     try {
-      //this.idLibro = window.localStorage.getItem("idLibro");
-      this.idLibro = 1;
-
+      this.idLibro = window.localStorage.getItem("idLibro");
       let detalle = await axios.get(
         `${config.api}/libroDetalle?idLibro=${this.idLibro}`
       );
@@ -144,11 +135,12 @@ export default {
     } catch (error) {
       console.log(error);
     }
+    this.idLibro = 1;
 
     try {
       let config = {
         // example url
-        url: `http://localhost:3000/libroImagen?idLibro=${this.idLibro}`,
+        url: `${path}/libroImagen?idLibro=${this.idLibro}`,
         method: "GET",
         responseType: "blob"
       };
@@ -169,10 +161,9 @@ export default {
       similares = similares.data.data;
       console.log(`${similares}`);
       for (let i = 0; i < similares.length; i++) {
-        this.Libros[i].title = similares[i].titulo;
         let config = {
           // example url
-          url: `http://localhost:3000/libroImagen?idLibro=${i + 2}`,
+          url: `${path}/libroImagen?idLibro=${i + 2}`,
           method: "GET",
           responseType: "blob"
         };
@@ -180,7 +171,12 @@ export default {
           let reader = new FileReader();
           reader.readAsDataURL(response.data);
           reader.onload = () => {
-            this.Libros[i].img = reader.result;
+            this.Libros.push({
+              id: similares[i].idLibro,
+              title: similares[i].titulo,
+              img: reader.result
+            });
+            //this.Libros[i].img = reader.result;
           };
         });
       }

src/components/footer.vue

@@ -1,6 +1,6 @@
 <template>
   <footer class="container-fluid Azul-puma footer py-3 ">
-    <container>
+    <div class="container">
       <div row>
         <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
           Comité Editorial
@@ -18,7 +18,7 @@
           Puntos de Venta
         </button>
       </div>
-    </container>
+    </div>
     <div row>
       <p class="mb-0 ">Hecho en México, todos los derechos reservados 2020.</p>
       <p class="my-0 ">

src/components/header.vue

@@ -1,39 +1,37 @@
 <template>
-  <container>
-    <div class="row divMaster header cl-12 azulUnam">
-      <div
-        class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
-      >
-        <a href="https://www.unam.mx/" target="_blank">
-          <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
-        </a>
-      </div>
-
-      <div
-        class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
-      >
-        <a href="https://www.acatlan.unam.mx/" target="_blank">
-          <img
-            class="sizeImg"
-            src="../assets/FES-editoriales.png"
-            alt="logo unam"
-          />
-        </a>
-      </div>
-
-      <div
-        class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
-      >
-        <a href="https://www.acatlan.unam.mx/" target="_blank">
-          <img
-            class="sizeImg"
-            src="../assets/FES-editoriales.png"
-            alt="logo unam"
-          />
-        </a>
-      </div>
+  <div class="row divMaster header cl-12 azulUnam">
+    <div
+      class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
+    >
+      <a href="https://www.unam.mx/" target="_blank">
+        <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
+      </a>
     </div>
-  </container>
+
+    <div
+      class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
+    >
+      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <img
+          class="sizeImg"
+          src="../assets/FES-editoriales.png"
+          alt="logo unam"
+        />
+      </a>
+    </div>
+
+    <div
+      class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
+    >
+      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <img
+          class="sizeImg"
+          src="../assets/FES-editoriales.png"
+          alt="logo unam"
+        />
+      </a>
+    </div>
+  </div>
 </template>
 
 <style>

src/components/temaLibro.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="divMaster row mb-5">
+    <div class="col-10 offset-1 d-flex flex-wrap justify-content-center">
+      <div
+        class="card m-3"
+        style="width: 12rem;"
+        v-bind:key="libro.id"
+        v-for="libro in Libros"
+        @click="descripcion(libro.id)"
+      >
+        <router-link :to="{ path: 'home' }" class="textt">
+          <img :src="libro.img" class="card-img-top rounded" alt="libro" />
+          <div class="card-body cd textt">
+            <p class="card-text textt">
+              {{ libro.title }}
+            </p>
+          </div>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+export default {
+  components: {},
+
+  data() {
+    return {
+      categoria: "",
+      Libros: []
+    };
+  },
+  methods: {
+    async descripcion(idLibro) {
+      localStorage.clear();
+      window.localStorage.setItem("idLibro", idLibro);
+      this.$router.push("/desc");
+    }
+  },
+  async created() {
+    let path = `${config.api}`;
+    this.categoria = window.localStorage.getItem("categoria");
+    try {
+      let similares = await axios.get(
+        `${config.api}/temaLibro?categoria=${this.categoria}`
+      );
+      similares = similares.data.data;
+      console.log(` este es el resutlado${similares}`);
+      for (let i = 0; i < similares.length; i++) {
+        let config = {
+          // example url
+          url: `${path}/libroImagen?idLibro=${(i % 4) + 1}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        await axios(config).then(response => {
+          let reader = new FileReader();
+          reader.readAsDataURL(response.data);
+          reader.onload = () => {
+            this.Libros.push({
+              id: similares[i].idLibro,
+              title: similares[i].titulo,
+              img: reader.result
+            });
+            //this.Libros[i].img = reader.result;
+          };
+        });
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error ${error}`);
+    }
+  },
+  beforeCreate() {
+    if (!window.localStorage.getItem("categoria")) this.$router.push("/");
+    else this.categoria = window.localStorage.getItem("categoria");
+  }
+};
+</script>
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+.card {
+  border: none !important;
+  border-bottom: 5px solid #1b3d70 !important;
+}
+a {
+  text-decoration: none !important;
+  color: black;
+}
+</style>

src/config/config.js

@@ -1,5 +1,5 @@
 const config = {
-  api: "http://localhost:3000"
+  api: "http://localhost:3001"
   //api: "https://venus.acatlan.unam.mx/indiana_hackaton"
 };
 module.exports = config;

src/esteticas/nav.vue

@@ -21,11 +21,13 @@
             class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-around  mt-0 mt-lg-0"
           >
             <li class="nav-item">
-              <a class="nav-link text-white" href="#">Inicio</a>
+              <a class="nav-link text-white" href="#" @click="inicio()"
+                >Inicio</a
+              >
             </li>
-            <li class="nav-item">
+            <!--<li class="nav-item">
               <a class="nav-link text-white" href="#">Presentacion</a>
-            </li>
+            </li>-->
 
             <li class="nav-item">
               <div class="dropdown">
@@ -45,34 +47,48 @@
                   class="dropdown-menu azulUnam"
                   aria-labelledby="navbarDropdown"
                 >
-                  <a class="dropdown-item text-white" href="#"
+                  <a
+                    class="dropdown-item text-white"
+                    @click="tema('Ciencias Socioeconomicas')"
                     >Ciencias Socioeconomicas</a
                   >
                   <div class="dropdown-divider"></div>
-                  <a class="dropdown-item text-white" href="#"
+                  <a
+                    class="dropdown-item text-white"
+                    @click="tema('Diseño y Edificacion')"
                     >Diseño y Edificacion</a
                   >
                   <div class="dropdown-divider"></div>
-                  <a class="dropdown-item text-white" href="#"
+                  <a
+                    class="dropdown-item text-white"
+                    @click="tema('Enseñanza de Idiomas')"
                     >Enseñanza de Idiomas</a
                   >
                   <div class="dropdown-divider"></div>
-                  <a class="dropdown-item text-white" href="#"
+                  <a
+                    class="dropdown-item text-white"
+                    @click="tema('Estudios de Posgrado')"
                     >Estudios de Posgrado</a
                   >
                   <div class="dropdown-divider "></div>
-                  <a class="dropdown-item text-white " href="#">Humanidades</a>
+                  <a
+                    class="dropdown-item text-white "
+                    @click="tema('Humanidades')"
+                    >Humanidades</a
+                  >
                   <div class="dropdown-divider"></div>
-                  <a class="dropdown-item text-white" href="#"
+                  <a
+                    class="dropdown-item text-white"
+                    @click="tema('Matematicas e Ingenieria')"
                     >Matematicas e Ingenieria</a
                   >
                 </div>
               </div>
             </li>
 
-            <li class="nav-item">
+            <!--<li class="nav-item">
               <a class="nav-link text-white" href="#">Difusion Editorial</a>
-            </li>
+            </li>-->
           </ul>
         </div>
 
@@ -88,6 +104,7 @@
               placeholder="Buscar"
               aria-label="Recipient's username"
               aria-describedby="basic-addon2"
+              v-model="nombre"
             />
             <div class="input-group-append reDer bg-white">
               <button class="btn  my-0" type="submit">
@@ -97,7 +114,6 @@
                   viewBox="0 0 16 16"
                   class="bi bi-search blanco"
                   fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"
@@ -111,6 +127,18 @@
               </button>
             </div>
           </div>
+          <!-- <div>-->
+          <div v-if="nombre.length > 2">
+            <ul
+              class="list-group"
+              v-for="item in buscarLibro"
+              v-bind:key="item.idLibro"
+            >
+              <li class="list-group-item" @click="descripcion(item.idLibro)">
+                {{ item.titulo }}
+              </li>
+            </ul>
+          </div>
         </form>
       </nav>
     </div>
@@ -118,16 +146,55 @@
 </template>
 
 <script>
+import axios from "axios";
+import config from "../config/config.js";
 export default {
   data() {
     return {
-      isExist: true
+      isExist: true,
+      libros: [],
+      nombre: ""
     };
   },
   methods: {
+    async descripcion(idLibro) {
+      console.log(` Este es el id del libro ${idLibro}`);
+      localStorage.clear();
+      window.localStorage.setItem("idLibro", idLibro);
+      this.$router.push("/desc").catch(() => {
+        location.reload();
+      });
+    },
+    inicio() {
+      this.$router.push("/").catch(() => {
+        location.reload();
+      });
+    },
+    async tema(categoria) {
+      window.localStorage.setItem("categoria", categoria);
+      this.$router.push("/tema").catch(() => {
+        location.reload();
+      });
+    },
     method() {
       this.isExist = !this.isExist;
     }
+  },
+  async created() {
+    let path = `${config.api}`;
+    try {
+      let libros = await axios.get(`${path}/getLibros`);
+      this.libros = await libros.data.data;
+    } catch (error) {
+      console.log(`Error ${error}`);
+    }
+  },
+  computed: {
+    buscarLibro: function() {
+      return this.libros.filter(item =>
+        item.titulo.toLowerCase().includes(this.nombre.toLowerCase())
+      );
+    }
   }
 };
 </script>
@@ -150,6 +217,11 @@ nav {
 .azulUnam {
   background-color: #1e3c70;
 }
+
+.list-group-item:hover {
+  background-color: #1e3c70;
+  color: white;
+}
 .doradoUnam {
   background-color: #bb8800;
 }

src/routes.js

@@ -3,11 +3,13 @@ import login from "./view/login.vue";
 import libroDescripcion from "./view/libroDescripcion.vue";
 import difusion from "./view/difusion.vue";
 import lineamientos from "./view/lineamiento.vue";
+import tema from "./view/tema.vue";
 
 export const routes = [
   { path: "/", component: home, name: "form" },
   { path: "/login", component: login, name: "Login" },
   { path: "/desc", component: libroDescripcion, name: "LibroDesc" },
   { path: "/difusion", component: difusion, name: "difusion" },
-  { path: "/lineamientos", component: lineamientos, name: "lineamientos" }
+  { path: "/lineamientos", component: lineamientos, name: "lineamientos" },
+  { path: "/tema", component: tema, name: "tema" }
 ];

src/view/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Header></Header>
+    <Header />
     <h1 class="my-5">Inicia Sesion</h1>
     <div class="row d-flex justify-content-center">
       <div class="col-12 col-md-8 col-lg-6 col-xl-6">

src/view/tema.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <Header />
+    <Nav />
+    <Title title="Resultado" />
+    <Cart />
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+import Nav from "./../esteticas/nav.vue";
+//import Nav from "./../components/navPrincipal.vue";
+import Footer from "./../components/footer.vue";
+import Cart from "../components/temaLibro.vue";
+import Title from "../components/titulo.vue";
+
+export default {
+  name: "home",
+  components: {
+    Header,
+    Nav,
+    Footer,
+    Cart,
+    Title
+  }
+};
+</script>