Merge pull request 'pruebas' (#3 ) from pruebas into master

Reviewed-on: #3
cambio de footer
2021-01-19 22:24:26 +00:00 · 2021-01-19 16:23:34 -06:00 · 2021-01-19 16:19:54 -06:00 · 2021-01-19 22:02:08 +00:00 · 2021-01-19 16:00:12 -06:00 · 2021-01-14 21:05:06 -06:00
84 changed files with 15238 additions and 12568 deletions
@@ -1,14 +1,14 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    parser: "babel-eslint"
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
-  }
-};
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint"
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+  }
+};
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" type=image/png href=assets/icono.png><title>Portal Editorial Acatlán</title><link href=css/app.f3c1ecc3.css rel=preload as=style><link href=css/chunk-vendors.138628b4.css rel=preload as=style><link href=js/app.c4a9c942.js rel=preload as=script><link href=js/chunk-vendors.8f463115.js rel=preload as=script><link href=css/chunk-vendors.138628b4.css rel=stylesheet><link href=css/app.f3c1ecc3.css rel=stylesheet></head><body><noscript><strong>We're sorry but portal doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.8f463115.js></script><script src=js/app.c4a9c942.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" type=image/png href=assets/icono.png><title>Portal Editorial Acatlán</title><link href=css/app.d2fdfe7d.css rel=preload as=style><link href=css/chunk-vendors.138628b4.css rel=preload as=style><link href=js/app.3c2f55de.js rel=preload as=script><link href=js/chunk-vendors.67046eec.js rel=preload as=script><link href=css/chunk-vendors.138628b4.css rel=stylesheet><link href=css/app.d2fdfe7d.css rel=stylesheet></head><body><noscript><strong>We're sorry but portal doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.67046eec.js></script><script src=js/app.3c2f55de.js></script></body></html>
@@ -1,31 +1,36 @@
-{
-  "name": "portal",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "axios": "^0.19.2",
-    "bootstrap": "^4.5.2",
-    "core-js": "^3.6.5",
-    "jquery": "^3.5.1",
-    "popper.js": "^1.16.1",
-    "vue": "^2.6.11",
-    "vue-router": "^3.3.4"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+{
+  "name": "portal",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.5.2",
+    "bootstrap-vue": "^2.21.2",
+    "core-js": "^3.6.5",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
+    "sweetalert2": "^10.13.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.3.4",
+    "vuex": "^3.6.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^7.4.1",
+    "prettier": "1.19.1",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
@@ -0,0 +1,279 @@
+<template>
+    <b-container fluid>
+        <div v-if="!cargando">
+            <b-row class="mb-2">
+                <b-col class="mt-5 mb-3">
+                    <h1  style="text-align:center;">Agregar Libro</h1>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                <b-col>
+                    <b-form-input
+                    id="isbn"
+                    class="mb-2 mr-sm-2 mb-sm-0"
+                    placeholder="ISBN"
+                    v-model="isbn"
+                    ></b-form-input>
+                </b-col>
+                <b-col>
+                    <b-form-input
+                    id="titulo"
+                    class="mb-2 mr-sm-2 mb-sm-0"
+                    placeholder="Titulo"
+                    v-model="titulo"
+                    ></b-form-input>
+                </b-col>
+                
+            </b-row>
+            <b-row class="mb-2">
+                    <b-col>
+                        <b-dropdown v-model="categoria" v-bind:text="categoria" block split split-variant="outline-primary" variant="primary" class="m-2">
+                            <b-dropdown-item @click="categoria='Ciencias Socioeconómicas'" >Ciencias Socioeconómicas</b-dropdown-item>
+                            <b-dropdown-item @click="categoria='Diseño y Edificación'" >Diseño y Edificación</b-dropdown-item>
+                            <b-dropdown-item @click="categoria='Enseñanza de Idiomas'" >Enseñanza de Idiomas</b-dropdown-item>
+                            <b-dropdown-item @click="categoria='Estudios de Posgrado'" >Estudios de Posgrado</b-dropdown-item>
+                            <b-dropdown-item @click="categoria='Humanidades'" >Humanidades</b-dropdown-item>
+                            <b-dropdown-item @click="categoria='Matemáticas e Ingenieria'" >Matemáticas e Ingenieria</b-dropdown-item>
+                            <b-dropdown-item @click="categoria='Universidad Abierta y Educación a Distancia'" >Universidad Abierta y Educación a Distancia</b-dropdown-item>
+                        </b-dropdown>
+                    </b-col>
+                    <b-col>
+                        <b-form-input
+                        id="autor"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Autor"
+                        v-model="autor"
+                        ></b-form-input>
+                    </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                <b-col>
+                    <b-form-input
+                        id="paginas"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Numero de paginas"
+                        v-model="paginas"
+                        type="number"
+                    ></b-form-input>
+                </b-col>
+                <b-col>
+                    <b-form-input
+                        id="precio"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Precio"
+                        v-model="precio"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                <b-col>
+                    <b-dropdown v-model="version" v-bind:text="version" block split split-variant="outline-primary" variant="primary" class="m-2">
+                            <b-dropdown-item @click="version='Impresa'" >Impresa</b-dropdown-item>
+                            <b-dropdown-item @click="version='Digital'" >Digital</b-dropdown-item>
+                        </b-dropdown>
+                </b-col>
+                <b-col>
+                    <b-form-input
+                        id="year"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Año de publicación"
+                        v-model="year"
+                        type="number"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                <b-col>
+                    <b-form-file
+                        id="pdfNuevo"
+                        placeholder="Seleccione el PDF o arrastre..."
+                        accept=".pdf"
+                    ></b-form-file>
+                </b-col>
+                
+                <b-col>
+                    <b-form-file
+                        id="imagenNuevo"
+                        placeholder="Seleccione la imagen o arrastre..."
+                        accept=".png, .jpg"
+                    ></b-form-file>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+            <b-col>
+                    <b-form-textarea
+                    id="descripcion"
+                    v-model="impresion"
+                    placeholder="Ediciones (Primera edición: 2016)"
+                    rows="3"
+                    max-rows="6"
+                    ></b-form-textarea>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+            <b-col>
+                    <b-form-textarea
+                    id="descripcion"
+                    v-model="descripcion"
+                    placeholder="Descripción"
+                    rows="3"
+                    max-rows="6"
+                    ></b-form-textarea>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                <b-col class="mb-5">
+                    <div style="margin-top: 2rem;">
+                        <b-button block variant="success" @click="agregarLibro()">Agregar</b-button>
+                    </div>
+                </b-col>
+            </b-row>
+        </div>
+        <div  v-else>
+            <CargandoLibro  v-bind:imageLoading="imageLoading"  v-bind:pdfLoading="pdfLoading" v-bind:dataLoading="dataLoading"  v-bind:imageSaved="imageSaved" v-bind:pdfSaved="pdfSaved" v-bind:dataSaved="dataSaved" />
+        </div>
+    </b-container>
+</template>
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+import Swal from 'sweetalert2'
+import CargandoLibro from './cargandoDatos.vue';
+export default {
+    components: {
+        CargandoLibro
+    },
+    props: {
+    nombreLibro: String,
+    value: String
+  },
+    data() {
+    return {
+      isbn: "",
+      titulo: "",
+      categoria:"Categoria",
+      autor:"",
+      paginas:"",
+      impresion:"",
+      precio:"",
+      version:"Versión",
+      descripcion:"",
+      year:"",
+      cargando: false,
+      imageLoading: true,
+      pdfLoading: true,
+      dataLoading: true,
+      imageSaved: false,
+      pdfSaved: false,
+      dataSaved: false
+    };
+  },
+  methods:{
+      faltaCampo(campo){
+          Swal.fire(
+            `Te falta por llenar el campo de ${campo}`,
+            '',
+            'warning'
+        )
+      },
+      async agregarLibro(){
+            try{
+                
+
+                var formData = new FormData();
+                var imagen = document.querySelector('#imagenNuevo');
+                var pdf = document.querySelector('#pdfNuevo');
+                if(this.isbn !== "") formData.append("isbn",  this.isbn); else return this.faltaCampo("ISBN");
+                if(this.titulo !== "") formData.append("titulo", this.titulo); else return this.faltaCampo("Titulo");
+                if(this.categoria !== "Categoria") formData.append("categoria", this.categoria); else return this.faltaCampo("Categoria");
+                if(this.autor !== "") formData.append("autor", this.autor); else return this.faltaCampo("Autor");
+                if(this.paginas !== "") formData.append("paginas", this.paginas); else return this.faltaCampo("Paginas");
+                if(this.impresion !== "") formData.append("edicion", this.impresion); else return this.faltaCampo("Edición");
+                if(this.precio !== "") formData.append("precio", this.precio); else return this.faltaCampo("Precio");
+                if(this.version !== "Versión") formData.append("version", this.version); else return this.faltaCampo("Versión");
+                if(this.descripcion !== "") formData.append("descripcion", this.descripcion); else return this.faltaCampo("Descripción");
+                if(this.year !== "") formData.append("year", this.year); else return this.faltaCampo("Año de publicación");
+                if(imagen.files.length === 0)   return this.faltaCampo("Imagen");
+                if(pdf.files.length === 0) return this.faltaCampo("Pdf");
+                formData.append("type", 'addLibro');
+                formData.append("seccion", 'datos');
+                if(imagen.files[0].size > 1200000){
+                       Swal.fire(
+                        `EL tamaño de la Imagen es muy grande`,
+                        'Por favor suba imagenes menores a 1MG',
+                        'warning'
+                    )
+                    return;
+                }   
+
+                if(pdf.files[0].size > 1200000){
+                       Swal.fire(
+                        `EL tamaño del PDF es muy grande`,
+                        'Por favor suba PDFs menores a 1MG',
+                        'warning'
+                    )
+                    return;
+                }
+
+                this.cargando = true;
+                let idLibro = null;
+                let textoFinal = ``;
+                await axios.post( `${config.api}/actualizarLibro`,  formData ,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(response =>{
+                    console.log('lo que responde datos:', response);
+                    idLibro = response.data.idLibro;
+                    this.dataLoading= false;
+                    this.dataSaved = true;
+                }).catch(async () =>{
+                    this.dataLoading= false
+                    await Swal.fire({
+                        icon: 'error',
+                        title: 'No se pudieron guardar los datos',
+                        text: `No se pudieron guardar los datos en la base de datos, intentelo en un otro momento`,
+                    });
+                    location.reload();
+                    return;
+                });
+                formData.delete('seccion');
+                formData.append("seccion", 'imagen');
+                formData.append("idLibro", idLibro);
+                formData.append("imagen", imagen.files[0]);
+                await axios.post( `${config.api}/actualizarLibro`,  formData ,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(() =>{
+                    this.imageLoading= false;
+                    this.imageSaved = true;
+                }).catch(() => {
+                    this.imageLoading= false;
+                    textoFinal += `No su pudo guardar la imagen`;
+                });
+                formData.delete('seccion');
+                formData.delete('imagen');
+                formData.append("seccion", 'pdf');
+                formData.append("pdf", pdf.files[0]);
+                await axios.post( `${config.api}/actualizarLibro`,  formData ,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(() =>{
+                    this.pdfLoading= false;
+                    this.pdfSaved = true;
+                }).catch(() =>{
+                    this.pdfLoading= false;
+                    textoFinal += `y tampoco se pude guardar el pdf`;
+                });
+                if(textoFinal!== ``)
+                    textoFinal += ` actualize los datos editando el libro`
+                await Swal.fire(
+                    'Se termino de subir los datos',
+                    textoFinal,
+                    'success'
+                    );
+                location.reload();
+            }   
+            catch(error){
+                console.log(error);
+                Swal.fire({
+                    icon: 'error',
+                    title: 'El libro no pudo ser agregado',
+                    text: `Algo salio mal, ${error}`,
+                });
+            }
+
+      }
+  }
+}
+</script>
@@ -0,0 +1,81 @@
+<template>
+    <div class="container" style="margin-top: 3rem; margin-bottom: 3rem;">
+        <div class="d-flex justify-content-center" >
+            <b-card class="text-left " style="width: 20rem; margin-top: .8rem;" >
+                <b-container v-if="dataLoading">
+                    <b-row>
+                        <b-col cols="3">
+                            <b-spinner variant="primary" label="Spinning"></b-spinner>
+                        </b-col>
+                        <b-col >
+                            <b-card-text block>
+                                Guardando Datos...
+                            </b-card-text>
+                        </b-col>
+                    </b-row>
+                </b-container>
+                <b-alert v-else-if="dataSaved" variant="success" show style="margin: 0rem">Datos Guardados</b-alert>
+                <b-alert v-else show variant="danger">Los datos no se pudieron guardar</b-alert>
+            </b-card>
+        </div>
+        <div class="d-flex justify-content-center">
+           
+            <b-card class="text-left" style="width: 20rem; margin-top: .8rem;" >
+                <b-container v-if="imageLoading">
+                    <b-row>
+                        <b-col cols="3">
+                            <b-spinner variant="primary" label="Spinning"></b-spinner>
+                        </b-col>
+                        <b-col >
+                            <b-card-text block>
+                                Guardando Imagen...
+                            </b-card-text>
+                        </b-col>
+                        
+                    </b-row>
+                </b-container>
+                 <b-alert v-else-if="imageSaved" variant="success" show style="margin: 0rem">Imagen Guardada</b-alert>
+                 <b-alert v-else show variant="danger">La imagen no se pudo guardar</b-alert>
+            </b-card>
+        </div>
+        <div class="d-flex justify-content-center">
+            <b-card class="text-left" style="width: 20rem; margin-top: .8rem;" >
+                <b-container v-if="pdfLoading">
+                    <b-row>
+                        <b-col cols="3">
+                            <b-spinner variant="primary" label="Spinning"></b-spinner>
+                        </b-col>
+                        <b-col >
+                            <b-card-text block>
+                                Guardando PDF...
+                            </b-card-text>
+                        </b-col>
+                        
+                    </b-row>
+                </b-container>
+                <b-alert v-else-if="pdfSaved" variant="success" show style="margin: 0rem">PDF Guardado</b-alert>
+                <b-alert v-else show variant="danger">El pdf no se pudo guardar</b-alert>
+            </b-card>
+        </div>
+        <h3 style="margin-top: 2rem;"><strong>Cargando...</strong></h3>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        imageLoading: Boolean,
+        pdfLoading: Boolean,
+        dataLoading: Boolean, 
+        imageSaved: Boolean,
+        pdfSaved: Boolean,
+        dataSaved: Boolean, 
+  },
+    data() {
+        return {
+           
+    }}
+}
+</script>
+<style scoped>
+ 
+</style>
@@ -1,82 +1,87 @@
-<template>
-  <div class="divMaster row ">
-    <div
-      id="carouselExampleControls"
-      class="carousel slide col-md-10 col-lg-10 col-xl-10 my-5 col-12 mx-auto"
-      data-ride="carousel"
-    >
-      <div class="carousel-inner">
-        <div
-          class="carousel-item"
-          v-bind:key="libro.id"
-          v-for="(libro, idx) in Libros"
-          :class="{ active: idx == 0 }"
-        >
-          <img :src="libro.img" class="d-block w-100 img-fluid" alt="img" />
-        </div>
-      </div>
-      <a
-        class="carousel-control-prev"
-        href="#carouselExampleControls"
-        role="button"
-        data-slide="prev"
-      >
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="sr-only">Previous</span>
-      </a>
-      <a
-        class="carousel-control-next"
-        href="#carouselExampleControls"
-        role="button"
-        data-slide="next"
-      >
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="sr-only">Next</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import config from "../config/config.js";
-
-export default {
-  data() {
-    return {
-      Libros: []
-    };
-  },
-  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(path);
-        let config = {
-          // example url
-          url: `${path}${nombres[i]}`,
-          method: "GET",
-          responseType: "blob"
-        };
-        await axios(config).then(response => {
-          let reader = new FileReader();
-          reader.readAsDataURL(response.data);
-          reader.onload = () => {
-            this.Libros.push({ id: i, img: reader.result });
-          };
-        });
-      }
-    } catch (error) {
-      console.log(`Ocurrio un error msj: ${error}`);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.divMaster {
-  height: auto;
-}
-</style>
+<template>
+  <div class="divMaster row ">
+    <div
+      id="carouselExampleControls"
+      class="carousel slide col-md-10 col-lg-10 col-xl-10 my-5 col-12 mx-auto"
+      data-ride="carousel"
+    >
+      <div class="carousel-inner">
+        <div
+          class="carousel-item"
+          v-bind:key="libro.id"
+          v-for="(libro, idx) in Libros"
+          :class="{ active: idx == 0 }"
+        >
+          <img :src="libro.img" class="d-block w-100 img-fluid" alt="img" />
+        </div>
+      </div>
+      <a
+        class="carousel-control-prev"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="prev"
+      >
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a
+        class="carousel-control-next"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="next"
+      >
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+
+export default {
+  data() {
+    return {
+      Libros: []
+    };
+  },
+  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(path);
+        let config = {
+          // example url
+          url: `${path}${nombres[i]}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        try{
+          await axios(config).then(response => {
+            let reader = new FileReader();
+            reader.readAsDataURL(response.data);
+            reader.onload = () => {
+              this.Libros.push({ id: i, img: reader.result });
+            };
+          });
+        }
+        catch(error){
+          console.log(error);
+        }
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error msj: ${error}`);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>
@@ -32,7 +32,7 @@ export default {
  },
  methods: {
    async descripcion(idLibro) {
-      console.log(` Este es el id del libro ${idLibro}`);
+      //console.log(` Este es el id del libro ${idLibro}`);
      localStorage.clear();
      window.localStorage.setItem("idLibro", idLibro);
      this.$router.push("/desc");
@@ -43,7 +43,7 @@ export default {
      let novedades = await axios.get(`${config.api}/librosNovedades`);
      let path = `${config.api}/libroImagen?idLibro=`;
      novedades = novedades.data.data;
-      console.log(`${novedades}`);
+      //console.log(`${novedades}`);
      for (let i = 0; i < novedades.length; i++) {
        //alert(novedades[i].titulo);
        //this.Libros[i].title = novedades[i].titulo;
@@ -3,11 +3,31 @@
    <div class="row ">
      <div class="col-md-6 col-sm-12 py-5">
        <img :src="src" alt="" class="libro" />
-        <button class="button pre" @click="showModal">
+        <button class="button pre" @click="showModal()">
          Previsualizar
        </button>

-        <modal v-show="isModalVisible" @close="closeModal" :pdfPre="PDF" />
+        <div v-if="Visible" @close="closeModal()">
+          <transition name="modal">
+            <div class="modal-backdrop" @click.self="closeModal()">
+              <div
+                class="modal"
+                role="dialog"
+                aria-labelledby="modalTitle"
+                aria-describedby="modalDescription"
+              >
+                <section class="modal-body rounded" id="modalDescription">
+                  <iframe
+                    :src="PDF"
+                    width="100%"
+                    height="100%"
+                    frameborder="0"
+                  ></iframe>
+                </section>
+              </div>
+            </div>
+          </transition>
+        </div>
        <br /><br />
        <div class="container">
          <div class="row izq">
@@ -54,7 +74,7 @@
        <div class="overflow-auto">{{ desc }}</div>

        <a
-          href="https://demo-tienda.acatlan.unam.mx/"
+          href="https://tienda.acatlan.unam.mx/"
          class="button text-white d-flex justify-content-center align-items-center"
        >
          <p class="text-center">Comprar</p>
@@ -89,12 +109,12 @@
 import axios from "axios";
 import config from "../config/config.js";
 import Title from "../components/titulo.vue";
-import modal from "../components/previsual.vue";
+//import modal from "../components/previsual.vue";

 export default {
  components: {
-    Title,
-    modal
+    Title
+    //modal
  },

  data() {
@@ -112,6 +132,7 @@ export default {
      boton2: "",
      categoria: "",
      Libros: [],
+      Visible: false,

      isModalVisible: false,
      //PDF: "http://www.ataun.eus/bibliotecagratuita/Cl%C3%A1sicos%20en%20Espa%C3%B1ol/Nicol%C3%A1s%20Maquiavelo/El%20pr%C3%ADncipe.pdf#toolbar=0&navpanes=0&scrollbar=0&zoom=80"
@@ -120,16 +141,20 @@ export default {
    };
  },
  methods: {
+    close() {
+      this.$emit("close");
+    },
+
    async descripcion(idLibro) {
      localStorage.clear();
      window.localStorage.setItem("idLibro", idLibro);
      location.reload();
    },
    showModal() {
-      this.isModalVisible = true;
+      this.Visible = true;
    },
    closeModal() {
-      this.isModalVisible = false;
+      this.Visible = false;
    }
  },
  async created() {
@@ -140,18 +165,25 @@ export default {
        `${config.api}/libroDetalle?idLibro=${this.idLibro}`
      );

-      detalle = await detalle.data.datos;
+      let detalleDatos = await detalle.data.datos;

-      this.titulo = detalle.titulo;
-      this.autor = detalle.autor;
-      this.paginas = detalle.paginas;
-      this.isbn = detalle.isbn;
-      this.edicion = detalle.impresion;
-      this.precio = detalle.precio;
-      this.version = detalle.version;
-      this.desc = detalle.descripcion;
-      this.categoria = detalle.categoria;
-      if (detalle.precio !== "Gratis") this.boton2 = "Comprar";
+      this.titulo = detalleDatos.titulo;
+      this.autor = detalleDatos.autor;
+      this.paginas = detalleDatos.paginas;
+      this.isbn = detalleDatos.isbn;
+      this.edicion = detalleDatos.impresion;
+      this.precio = detalleDatos.precio;
+      this.version = detalleDatos.version;
+      this.desc = detalleDatos.descripcion;
+      this.categoria = detalleDatos.categoria;
+      //let path = `${config.api}/PDFget/?nombrePDF=${nombre}`;
+      this.PDF = `${config.api}/PDFget/?nombrePDF=${detalle.data.pdfVis}`;
+      //console.log(`datos: `,detalleDatos.data );
+      //console.log(`Esta es el nombred el pdf ${this.PDF}`);
+
+      window.localStorage.setItem("pdfVis", this.PDF);
+
+      if (detalleDatos.precio !== "Gratis") this.boton2 = "Comprar";
      else this.boton2 = "Descargar";
    } catch (error) {
      console.log(error);
@@ -179,7 +211,7 @@ export default {
        `${config.api}/librosSimilares?categoria=${this.categoria}`
      );
      similares = similares.data.data;
-      console.log(`${similares}`);
+      //console.log(`${similares}`);
      for (let i = 0; i < similares.length; i++) {
        let config = {
          // example url
@@ -212,6 +244,34 @@ export default {
 </script>

 <style scoped>
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background: #ffffff;
+  box-shadow: 2px 2px 20px 1px;
+  /* overflow-x: auto; */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  width: 90%;
+  height: 90%;
+}
+
+.modal-body {
+  /* position: relative; */
+  padding: 20px 10px;
+}
 .divMaster {
  height: auto;
 }
@@ -0,0 +1,156 @@
+<template>
+    <b-container class="mt-5">
+        <div class="mb-5">
+          <h1 class="mb-4" style="text-align:left;">Agregar Imagen</h1>
+            <b-row>
+              <b-col class="p-0" cols="8">
+                <b-form-file
+                  v-model="nuevaImagenBanner"
+                  id="nuevaImagenBanner"
+                  block
+                  placeholder="Seleccione la imagen o arrastre aqui..."
+                  accept=".png, .jpg"
+                ></b-form-file>
+              </b-col>
+              <b-col>
+               <b-button block variant="success" @click="agregarImagen()">Agregar</b-button>
+              </b-col>
+            </b-row>
+        </div>
+        <h1 class="mb-4" style="text-align:left;">Eliminar Imagen</h1>
+        <div class=" row ">
+            <div  class="d-flex flex-wrap"  style="justify-content: space-between;">
+                <div v-bind:key="imagenBanner.id"  v-for="imagenBanner in imagenesBanner"  >
+                    <b-card  class="m-3" style="width: 28rem;"> 
+                        <b-card-img :src="imagenBanner.img" alt="Image" ></b-card-img>
+                        <b-card-footer><b-button variant="danger" @click="eliminarImagen(imagenBanner.nombreImagen)">Eliminar</b-button></b-card-footer>
+                    </b-card>
+                </div>
+            </div>
+        </div>
+    </b-container>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+import Swal from 'sweetalert2'
+export default {
+  name: "editarBanner",
+   data() {
+    return {
+      imagenesBanner: [],
+      nuevaImagenBanner: null,
+    };
+  },
+  methods:{
+    async eliminarImagen(nombreImagenBanner){
+      const swalWithBootstrapButtons = Swal.mixin({
+        customClass: {
+          confirmButton: 'btn btn-outline-success',
+          cancelButton: 'btn btn-outline-danger'
+        },
+        buttonsStyling: false
+      })
+
+      swalWithBootstrapButtons.fire({
+        title: '¿Estás seguro de que quieres eliminar la imagen?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Si, eliminar',
+        cancelButtonText: 'No, cancelar',
+        reverseButtons: true
+      }).then(async (result) => {
+        if (result.isConfirmed) {
+          try{
+            await axios.post( `${config.api}/eliminarImagenCarrusel`,{nombre: nombreImagenBanner} );
+            await swalWithBootstrapButtons.fire(
+              'Eliminado!',
+              'Se ha eliminado la imagen con éxito.',
+              'success'
+            );
+            location.reload();
+          }
+          catch(error){
+            console.log(error);
+            Swal.fire({
+              icon: 'error',
+              title: 'La imagen no pudo ser eliminada',
+              text: 'algo salio mal, mensaje en consola',
+            });
+          }
+        }
+      
+      })
+    },
+    async agregarImagen(){
+      try{
+        let formData = new FormData();
+        let imagenBanner = document.querySelector('#nuevaImagenBanner');
+        console.log('tamaño: ',imagenBanner.files.length);
+        if(imagenBanner.files.length === 0){
+           Swal.fire(
+            '¿Aún no has seleccionado la imagen?',
+            '',
+            'question'
+          );
+          return;
+        }
+        formData.append("imagen", imagenBanner.files[0]);
+        await axios.post( `${config.api}/agregarImagenCarrusel`, formData ,{ headers: {'Content-Type': 'multipart/form-data'}} );
+        await Swal.fire(
+          'Imagen agregada con éxito',
+          '',
+          'success'
+        );
+        location.reload();
+      }
+      catch(error){
+        console.log(error);
+        Swal.fire({
+          icon: 'error',
+          title: 'La imagen no pudo ser agregada',
+          text: 'Algo salio mal, mensaje en consola',
+        });
+      }
+       
+    }
+  },
+  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++) {
+        let config = {
+          url: `${path}${nombres[i]}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        try{
+          await axios(config).then(response => {
+            let reader = new FileReader();
+            reader.readAsDataURL(response.data);
+            reader.onload = () => {
+              this.imagenesBanner.push({ id: i, img: reader.result, nombreImagen: nombres[i]});
+            };
+          });
+        }
+        catch(error){
+          console.log(error);
+        }
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error msj: ${error}`);
+    }
+  }
+};
+</script>
+
+
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>
@@ -0,0 +1,182 @@
+<template>
+    <b-container class="mt-2">
+        <div style="margin-bottom: 2rem">
+          <h4 style="text-align:left">Libros cargados </h4>
+            <b-progress  :max="librosTotales" height="1.5rem"  >
+              <b-progress-bar :value="Libros.length">
+                <span>Cargados: <strong>{{ Libros.length }} / {{ librosTotales }}</strong></span>
+              </b-progress-bar>
+            </b-progress>
+          </div>
+         <div class=" divMaster row  row d-flex flex-wrap justify-content-center mb-3">
+              <b-input-group  class="mb-2">
+                  <b-input-group-prepend is-text>
+                      <b-icon icon="search"></b-icon>
+                  </b-input-group-prepend>
+                  <b-form-input type="search" placeholder="Buscar por nombre del libro, autor o categoría" v-model="searchLibro" ></b-form-input>
+              </b-input-group>
+        </div>
+        <div class="divMaster row ">
+            <div class="  d-flex flex-wrap  " style="justify-content: space-between;">
+                <div v-bind:key="libro.id"  v-for="libro in listaLibroFiltrada"  >
+                    <b-card  class="mb-3" style="width: 14rem; height: 25rem;"> 
+                        <b-card-img :src="libro.img" alt="Image"  style="max-width: 20rem; height: 15rem;" ></b-card-img>
+                            <p class="mt-1" style="text-align: left; font-size: 15px;">{{nombreLibro(libro.titulo)}}</p>
+                            <template #footer>
+                                <b-button variant="outline-warning" class="float-left" @click="libroSelect=libro" v-b-modal.modalEditarLibro>Editar</b-button>
+                                <b-button variant="outline-danger" class="float-right" @click="eliminarLibro(libro.idLibro)" >Eliminar</b-button>
+                            </template>
+                    </b-card>
+                </div>
+            </div>
+        </div>
+        <ModalEditar  v-bind:libro="libroSelect"  />
+    </b-container>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+import ModalEditar from './modalEditar.vue';
+import Swal from 'sweetalert2';
+export default {
+   components: {
+    ModalEditar,
+  },
+  data() {
+    return {
+      Libros: [],
+      searchLibro: "",
+      libroSelect: null,
+      librosTotales: 0,
+    };
+  },
+  methods: {
+    async eliminarLibro(idLibro){
+       const swalWithBootstrapButtons = Swal.mixin({
+        customClass: {
+          confirmButton: 'btn btn-outline-success',
+          cancelButton: 'btn btn-outline-danger'
+        },
+        buttonsStyling: false
+      })
+
+      swalWithBootstrapButtons.fire({
+        title: '¿Estás seguro de que quieres eliminar el libro?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Si, eliminar',
+        cancelButtonText: 'No, cancelar',
+        reverseButtons: true
+      }).then(async (result) => {
+        if (result.isConfirmed) {
+          try{
+            await axios.post( `${config.api}/eliminarLibro`,{idLibro: idLibro} );
+            await swalWithBootstrapButtons.fire(
+              'Eliminado!',
+              'Se ha eliminado el libro con éxito.',
+              'success'
+            );
+            location.reload();
+          }
+          catch(error){
+            console.log(error);
+            Swal.fire({
+              icon: 'error',
+              title: 'El libro no pudo ser eliminado',
+              text: 'algo salio mal, mensaje en consola',
+            });
+          }
+        }
+      
+      })
+    },
+    nombreLibro(nombreLibro){
+      let maxLengthtitulo = 40;
+      if(nombreLibro.length < maxLengthtitulo)
+        return nombreLibro;
+      return `${nombreLibro.substring(0, maxLengthtitulo)}...`;
+      
+    }
+  },
+  async created() {
+    try {
+      let todosLibros = await axios.get(`${config.api}/getTodosLibros`);
+      let path = `${config.api}/libroImagen?idLibro=`;
+      todosLibros = todosLibros.data.data;
+      this.librosTotales = todosLibros.length;
+     
+      for (let i = 0; i < todosLibros.length; i++) {
+        let config = {
+          url: `${path}${todosLibros[i].idLibro}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        try {
+          axios(config).then( async response => {
+            let reader = new FileReader();
+            await reader.readAsDataURL(response.data);
+            reader.onload = () => {
+              this.Libros.push({
+                id: todosLibros[i].idLibro,
+                titulo: todosLibros[i].titulo,
+                img: reader.result,
+                idLibro: todosLibros[i].idLibro,
+                isbn: todosLibros[i].isbn,
+                categoria: todosLibros[i].categoria,
+                autor: todosLibros[i].autor,
+                paginas: todosLibros[i].paginas,
+                impresion: todosLibros[i].impresion,
+                precio: todosLibros[i].precio,
+                version: todosLibros[i].version,
+                descripcion: todosLibros[i].descripcion,
+                year: todosLibros[i].year,
+              });
+            };
+          }).catch(() =>{
+          
+            this.Libros.push({
+                id: todosLibros[i].idLibro,
+                titulo: todosLibros[i].titulo,
+                idLibro: todosLibros[i].idLibro,
+                isbn: todosLibros[i].isbn,
+                categoria: todosLibros[i].categoria,
+                autor: todosLibros[i].autor,
+                paginas: todosLibros[i].paginas,
+                impresion: todosLibros[i].impresion,
+                precio: todosLibros[i].precio,
+                version: todosLibros[i].version,
+                descripcion: todosLibros[i].descripcion,
+                year: todosLibros[i].year,
+              });
+          });
+        } catch (error) {
+          console.log(`No existe esa imagen`);
+        }
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error ${error}`);
+    }
+  },
+  computed:{
+        listaLibroFiltrada: function()
+        {
+          return this.Libros.filter( (item)=>{  
+              let searchTitulo = (item.titulo).toLowerCase().includes(this.searchLibro.toLowerCase()) ;
+              let searchAutor = (item.autor).toLowerCase().includes(this.searchLibro.toLowerCase()) ;
+              let searchCategoria = (item.categoria).toLowerCase().includes(this.searchLibro.toLowerCase()) ;
+              if(searchTitulo || searchAutor || searchCategoria)
+                return true;
+              return false;
+          }
+        );
+        }
+    }
+};
+</script>
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="row d-flex align-items-center tamaño cuerpo">
+      <div class="col-12 col-sm-12 col-md-4 col-lg-6 col-xl-6 p-0">
+        <img class="card-img" :src="img" alt="Card image cap" />
+      </div>
+      <div class="col-12 col-sm-12 col-md-8 col-lg-6 col-xl-6 card-body  ">
+        <h5>{{ title }}</h5>
+        <br />
+        <p class="card-text-right">{{ text }}</p>
+        <a
+          :href="linkD"
+          target="_blank"
+          v-if="linkD != '' && linkW == ''"
+          download
+        >
+          <span> Descargar aquí</span>
+        </a>
+        <a :href="linkW" target="_blank" v-if="linkD == '' && linkW != ''">
+          <span> Visita nuestra página </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["linkD", "linkW", "img", "text", "title"],
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.tamaño {
+  width: 40rem;
+}
+.cuerpo {
+  -webkit-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
+  box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
+}
+
+@media (max-width: 440px) {
+  .tamaño {
+    width: 18rem;
+  }
+  .cuerpo {
+    -webkit-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
+    box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
+  }
+}
+</style>
@@ -1,37 +1,7 @@
 <template>
  <footer class="container-fluid Azul-puma footer py-3 ">
-    <div class="container">
-      <div row>
-        <router-link to="/comite">
-          <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
-            Comité Editorial
-          </button>
-        </router-link>
-        <router-link to="/lineamientos">
-          <button type="button" class="col-md-6 col-sm-12 btn boton-footer dos">
-            Política Editorial y Lineamentos
-          </button></router-link
-        >
-        <router-link to="/proceso">
-          <button
-            type="button"
-            class="col-md-6 col-sm-12 btn boton-footer tres"
-          >
-            Proceso Editorial y Organismos
-          </button>
-        </router-link>
-        <router-link to="/puntos">
-          <button
-            type="button"
-            class="col-md-6 col-sm-12 btn boton-footer cuatro"
-          >
-            Puntos de Venta
-          </button>
-        </router-link>
-      </div>
-    </div>
    <div row>
-      <p class="mb-0 ">Hecho en México, todos los derechos reservados 2020.</p>
+      <p class="mb-0 ">Hecho en México, todos los derechos reservados 2021.</p>
      <p class="my-0 ">
        Esta página puede ser reproducida con fines no lucrativos, siempre y
        cuando no se mutile, se cite la fuente
@@ -0,0 +1,333 @@
+<template>
+    <b-modal size="lg" id="modalEditarLibro"  hide-footer title="Editar Libro">
+        
+        <b-container fluid v-if="!loading">
+            <b-row class="mb-2">
+                <b-col >
+                    <h2  style="text-align:left;"> {{libro.titulo}}</h2>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                <b-col>
+                    <b-form-checkbox v-model="isActiveIsbn" name="check-button" switch><b>ISBN:</b></b-form-checkbox>
+                </b-col>
+                <b-col>
+                    <label class="mr-sm-2">{{libro.isbn}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="isbn"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+             <b-row class="mb-2">
+                 <b-col>
+                    <b-form-checkbox v-model="isActiveTitulo" name="check-button" switch><b>Titulo:</b></b-form-checkbox>
+                 </b-col>
+                 <b-col>
+                    <label class="mr-sm-2">{{libro.titulo}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="titulo"
+                    ></b-form-input>
+                </b-col>
+               
+            </b-row>
+             <b-row class="mb-2">
+                <b-col>
+                    <b-form-checkbox v-model="isActiveCategoria" name="check-button" switch><b>Categoria:</b></b-form-checkbox>
+                </b-col>
+                <b-col>
+                    <label class="mr-sm-2">{{libro.categoria}}</label>
+                </b-col>
+                <b-col cols="6">
+                     <b-dropdown v-model="categoria" v-bind:text="categoria" block split split-variant="outline-primary" variant="primary" class="m-2">
+                        <b-dropdown-item @click="categoria='Ciencias Socioeconómicas'" >Ciencias Socioeconómicas</b-dropdown-item>
+                        <b-dropdown-item @click="categoria='Diseño y Edificación'" >Diseño y Edificación</b-dropdown-item>
+                        <b-dropdown-item @click="categoria='Enseñanza de Idiomas'" >Enseñanza de Idiomas</b-dropdown-item>
+                        <b-dropdown-item @click="categoria='Estudios de Posgrado'" >Estudios de Posgrado</b-dropdown-item>
+                        <b-dropdown-item @click="categoria='Humanidades'" >Humanidades</b-dropdown-item>
+                        <b-dropdown-item @click="categoria='Matemáticas e Ingenieria'" >Matemáticas e Ingenieria</b-dropdown-item>
+                        <b-dropdown-item @click="categoria='Universidad Abierta y Educación a Distancia'" >Universidad Abierta y Educación a Distancia</b-dropdown-item>
+                    </b-dropdown>
+                   
+                </b-col>
+            </b-row>
+             <b-row class="mb-2">
+                <b-col>
+                    <b-form-checkbox v-model="isActiveAutor" name="check-button" switch><b>Autor:</b></b-form-checkbox>
+                </b-col>
+                <b-col>
+                    <label class="mr-sm-2">{{libro.autor}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="autor"
+                    ></b-form-input>
+                </b-col>
+               
+            </b-row>
+             <b-row class="mb-2">
+                <b-col>
+                    <b-form-checkbox v-model="isActivePaginas" name="check-button" switch><b>Numero de paginas:</b></b-form-checkbox>
+                </b-col>
+                <b-col>
+                    <label class="mr-sm-2">{{libro.paginas}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="paginas"
+                        type="number"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+             <b-row class="mb-2">
+                    <b-col>
+                        <b-form-checkbox v-model="isActivePrecio" name="check-button" switch><b>Precio:</b></b-form-checkbox>
+                    </b-col>
+                    <b-col>
+                    <label class="mr-sm-2">{{libro.precio}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="precio"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                    <b-col>
+                        <b-form-checkbox v-model="isActiveEdicion" name="check-button" switch><b>Edición:</b></b-form-checkbox>
+                    </b-col>
+                    <b-col>
+                    <label class="mr-sm-2">{{libro.impresion}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="edicion"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                    <b-col>
+                        <b-form-checkbox v-model="isActiveVersion" name="check-button" switch><b>Versión:</b></b-form-checkbox>
+                    </b-col>
+                    <b-col>
+                    <label class="mr-sm-2">{{libro.version}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="version"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                    <b-col>
+                        <b-form-checkbox v-model="isActiveYear" name="check-button" switch><b>Año de publicación:</b></b-form-checkbox>
+                    </b-col>
+                    <b-col>
+                    <label class="mr-sm-2">{{libro.year}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-input
+                        id="inline-form-input-name"
+                        class="mb-2 mr-sm-2 mb-sm-0"
+                        placeholder="Editar"
+                        v-model="year"
+                        type="number"
+                    ></b-form-input>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                    <b-col>
+                        <b-form-checkbox v-model="isActiveDescripcion" name="check-button" switch><b>Descrpción:</b></b-form-checkbox>
+                    </b-col>
+                    <b-col>
+                    <label class="mr-sm-2" style="font-size: 12px">{{libro.descripcion}}</label>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-textarea
+                        id="textarea"
+                        v-model="descripcion"
+                        placeholder="Editar"
+                        rows="3"
+                        max-rows="6"
+                    ></b-form-textarea>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                    <b-col>
+                        <b-form-checkbox v-model="isActiveImagen" name="check-button" switch><b>Imagen</b></b-form-checkbox>
+                    </b-col>
+                    <b-col>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-file
+                        placeholder="Seleccione la imagen o arrastre..."
+                        accept=".png, .jpg"
+                        id="imagen"
+                    ></b-form-file>
+                </b-col>
+            </b-row>
+            <b-row class="mb-2">
+                    <b-col>
+                        <b-form-checkbox v-model="isActivePdf" name="check-button" switch><b>PDF Visualización</b></b-form-checkbox>
+                    </b-col>
+                    <b-col>
+                </b-col>
+                <b-col cols="6">
+                    <b-form-file
+                        placeholder="Seleccione el PDF o arrastre..."
+                        id="pdf"
+                        accept=".pdf"
+                    ></b-form-file>
+                </b-col>
+            </b-row>
+
+            <b-row class="mb-2">
+                <b-col>
+                        <div style="margin-top: 2rem;">
+                            <b-button variant="outline-success" class="float-right" @click="actualizarLibro(libro.idLibro)" style="width: 30%; ">Actualizar</b-button>
+                            <b-button @click="$bvModal.hide('modalEditarLibro')"  variant="outline-danger"  class="btn  float-left"  style="width: 30%; ">Cancelar</b-button>
+                        </div>
+                </b-col>
+            </b-row>
+        </b-container>
+        <b-container v-else>
+            <div class="text-center">
+                <b-spinner style="width: 10rem; height: 10rem; margin: 3rem;" variant="primary" label="Text Centered"></b-spinner><br />
+                <strong><h1 style="margin: 3rem;">Guardando...</h1></strong>
+            </div>
+        </b-container>
+    </b-modal>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+import Swal from 'sweetalert2'
+export default {
+    props: {
+        libro: Object,
+    },
+    data() {
+    return {
+        isbn: "",
+        titulo: "",
+        categoria:"Categoria",
+        autor:"",
+        paginas:"",
+        impresion:"",
+        precio:"",
+        version:"",
+        descripcion:"",
+        year:"",
+        edicion:"",
+        isActiveIsbn: false,
+        isActiveTitulo: false,
+        isActiveCategoria: false,
+        isActiveAutor: false,
+        isActivePaginas: false,
+        isActivePrecio: false,
+        isActiveVersion: false,
+        isActiveYear: false,
+        isActiveDescripcion: false,
+        isActiveImagen: false,
+        isActivePdf: false,
+        isActiveEdicion:false,
+        loading: false
+    };
+
+  },
+  methods:{
+      async actualizarLibro(idLibro){
+          try{
+                var formData = new FormData();
+                if(this.isActiveIsbn) formData.append("isbn",  this.isbn);
+                if(this.isActiveTitulo) formData.append("titulo", this.titulo);
+                if(this.isActiveCategoria) formData.append("categoria", this.categoria);
+                if(this.isActiveAutor) formData.append("autor", this.autor);
+                if(this.isActivePaginas) formData.append("paginas", this.paginas);
+                if(this.isActiveEdicion) formData.append("edicion", this.impresion);
+                if(this.isActivePrecio) formData.append("precio", this.precio);
+                if(this.isActiveVersion) formData.append("version", this.version);
+                if(this.isActiveDescripcion) formData.append("descripcion", this.descripcion);
+                if(this.isActiveYear) formData.append("year", this.year);
+                if(this.isActiveImagen){
+                    var imagen = document.querySelector('#imagen');
+                     if(imagen.files[0].size > 1200000){
+                        Swal.fire(
+                        `EL tamaño de la Imagen es muy grande`,
+                        'Por favor suba imagenes menores a 1MG',
+                        'warning'
+                        )
+                        return;
+                    }   
+                    formData.append("imagen", imagen.files[0]);
+                }
+                if(this.isActivePdf){
+                    var pdf = document.querySelector('#pdf');
+                    if(pdf.files[0].size > 1200000){
+                        Swal.fire(
+                            `EL tamaño del PDF es muy grande`,
+                            'Por favor suba PDFs menores a 1MG',
+                            'warning'
+                        )
+                        return;
+                    }
+                    formData.append("pdf", pdf.files[0]);
+                }
+                if( formData.entries().next().done){
+                     Swal.fire(
+                        '¿Aún no has ningún campo a editar?',
+                        '',
+                        'question'
+                    );
+                    return;
+                }
+                formData.append("idLibro", idLibro);
+                formData.append("type", 'editarLibro');
+                this.loading = true;
+                await axios.post( `${config.api}/actualizarLibro`,  formData  ,{ headers: { 'Content-Type': 'multipart/form-data' } });
+                this.loading = false;
+                await Swal.fire(
+                'Libro actualizado con éxito',
+                    '',
+                    'success'
+                );
+                location.reload();
+            }
+            catch(error){
+                console.log(error);
+                Swal.fire({
+                    icon: 'error',
+                    title: 'El libro no pudo ser actualizado',
+                    text: `Algo salio mal, ${error}`,
+                });
+            }
+
+      }
+  }
+}
+</script>
@@ -12,8 +12,8 @@
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
-          <span class="navbar-toggler-icon blanco"></span>
-          <span class="mx-2">Menu</span>
+          <span class="navbar-toggler-icon blanco d-flex"></span>
+          <!-- <span class="mx-2">Menu</span> -->
        </button>

        <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
@@ -21,12 +21,10 @@
            class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-between mt-0 mt-lg-0"
          >
            <li class="nav-item">
-              <a class="nav-link text-white" href="#" @click="inicio()"
-                >Inicio</a
-              >
+              <a class="nav-link text-white" @click="inicio()">Inicio</a>
            </li>
            <li class="nav-item">
-              <a class="nav-link text-white" href="#" @click="presentacion()"
+              <a class="nav-link text-white" @click="presentacion()"
                >Presentación</a
              >
            </li>
@@ -35,7 +33,6 @@
              <div class="dropdown">
                <a
                  class="btn nav-link  dropdown-toggle text-white"
-                  href="#"
                  role="button"
                  id="dropdownMenuLink"
                  data-toggle="dropdown"
@@ -52,13 +49,13 @@
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Ciencias Socioeconomicas')"
-                    >Ciencias Socioeconomicas</a
+                    >Ciencias Socioeconómicas</a
                  >
                  <div class="dropdown-divider"></div>
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Diseño y Edificacion')"
-                    >Diseño y Edificacion</a
+                    >Diseño y Edificación</a
                  >
                  <div class="dropdown-divider"></div>
                  <a
@@ -88,18 +85,18 @@
                  <div class="dropdown-divider"></div>
                  <a
                    class="dropdown-item text-white"
-                    @click="tema('Educacion Abierta')"
+                    @click="tema('Universidad Abierta y Educación a Distancia')"
                    >Universidad Abierta y Educación a Distancia</a
                  >
                </div>
              </div>
            </li>

-            <li class="nav-item">
-              <a class="nav-link text-white" href="#" @click="difusion()"
+            <!-- <li class="nav-item">
+              <a class="nav-link text-white" @click="difusion()"
                >Difusión Editorial</a
              >
-            </li>
+            </li>-->
          </ul>
        </div>

@@ -180,7 +177,7 @@ export default {
  },
  methods: {
    async descripcion(idLibro) {
-      console.log(` Este es el id del libro ${idLibro}`);
+      //console.log(` Este es el id del libro ${idLibro}`);
      localStorage.clear();
      window.localStorage.setItem("idLibro", idLibro);
      this.$router.push("/desc").catch(() => {
@@ -326,6 +323,13 @@ nav {
  padding: 12px 16px;
 }

+.navbar-toggler {
+  font-size: 1rem;
+}
+.navbar-dark .navbar-toggler {
+  border: none;
+}
+
@media (max-width: 450px) {
  .menuText,
  .buscador {
@@ -0,0 +1,220 @@
+<template>
+  <div class="divMaster azulUnam row d-flex justify-content-center">
+    <div class="col-10 offset-1">
+      <nav class="navbar navbar-expand-sm navbar-dark  ">
+        <button
+          @click="method()"
+          class="navbar-toggler col-5"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarTogglerDemo03"
+          aria-controls="navbarTogglerDemo03"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon blanco d-flex"></span>
+          <!-- <span class="mx-2"> spa</span> -->
+        </button>
+
+        <div class="collapse navbar-collapse " id="navbarTogglerDemo03">
+          <ul
+            class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-between mt-0 mt-lg-0"
+          >
+            <li class="nav-item">
+              <a class="nav-link text-white" @click="comite()"
+                >Comité Editorial</a
+              >
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" @click="lineamientos()"
+                >Política Editorial y Lineamentos</a
+              >
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" @click="proceso()"
+                >Proceso Editorial y Organismos</a
+              >
+            </li>
+
+            <li class="nav-item">
+              <a class="nav-link text-white" @click="puntos()"
+                >Puntos de Venta</a
+              >
+            </li>
+            <li class="nav-item">
+              <a class="nav-link text-white" @click="contacto()">Contáctanos</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+export default {
+  data() {
+    return {
+      isExist: true,
+      libros: [],
+      nombre: ""
+    };
+  },
+  methods: {
+    comite() {
+      this.$router.push("/comite").catch(() => {
+        location.reload();
+      });
+    },
+    lineamientos() {
+      this.$router.push("/lineamientos").catch(() => {
+        location.reload();
+      });
+    },
+    proceso() {
+      this.$router.push("/proceso").catch(() => {
+        location.reload();
+      });
+    },
+    puntos() {
+      this.$router.push("/puntos").catch(() => {
+        location.reload();
+      });
+    },
+    contacto() {
+      this.$router.push("/contacto").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>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.divMaster {
+  /* max-width: 1280px; */
+  height: auto;
+  margin: 0 auto;
+}
+nav {
+  padding: 0.5rem 0;
+}
+
+.azulUnam {
+  background-color: #1e3c70;
+}
+
+.doradoUnam {
+  background-color: #bb8800;
+}
+
+.dropdown-item:hover {
+  background-color: #1e3c70;
+}
+
+.dropdown-itemBusqueda:hover {
+  background-color: #bb8800;
+  color: white;
+}
+
+.nav-link:focus {
+  background-color: #bb8800;
+  border-radius: 1rem;
+}
+
+.nav-link:hover {
+  background-color: #bb8800;
+  color: white;
+  border-radius: 0.2rem;
+}
+
+.nav-link {
+  transition: 0.3s;
+  font-size: 15px;
+}
+
+.dropdown-item {
+  padding: 0.3rem 1rem;
+}
+
+.menuText {
+  display: none;
+}
+
+/* 
+.dropdown-menu {
+  width: 10% !important;
+} */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  height: auto;
+}
+
+.dropdown-content {
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  /* padding: 12px 16px; */
+  top: 0.8rem;
+  left: -10rem;
+  display: block;
+}
+.rescont {
+  z-index: 2;
+}
+
+.list-group-item {
+  padding: 12px 16px;
+}
+
+.navbar-toggler {
+  font-size: 1rem;
+}
+.navbar-dark .navbar-toggler {
+  border: none;
+}
+
+@media (max-width: 450px) {
+  .menuText,
+  .buscador {
+    display: block !important;
+  }
+
+  .dropdown-menu {
+    width: 80vw !important;
+  }
+  .nav-link {
+    font-size: 20px;
+    margin-top: 1rem;
+  }
+}
+</style>
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <b-nav vertical class="mt-3">
+            <b-nav-item class="m-2">
+                <div class="accordion" role="tablist">
+                    <b-card no-body >
+                        <b-card-header header-tag="header"   role="tab">
+                            <b-button block squared v-b-toggle.user   class="p-1 azulUnam">
+                                <b-icon icon="person-fill" style="margin-bottom: 4px;"></b-icon>
+                                    {{user}}
+                            </b-button>
+                        </b-card-header>
+                        <b-collapse id="user"  accordion="my-accordion" role="tabpanel">
+                            <b-card-body>
+                                <b-button block variant="light" class="p-1 m-0 rojo" @click="cerrarSesion()">Cerrar sesión</b-button>
+                            </b-card-body>
+                        </b-collapse>
+                    </b-card>
+                </div>
+              
+            </b-nav-item>
+            <b-nav-item class="m-2">
+                <div class="accordion" role="tablist">
+                    <b-card no-body >
+                        <b-card-header header-tag="header"   role="tab">
+                            <b-button block squared v-b-toggle.banner   @click="$store.commit('cambiarNav','EditarBanner')" class="p-1 azulUnam">Banner principal</b-button>
+                        </b-card-header>
+                        <b-collapse id="banner"  accordion="my-accordion" role="tabpanel">
+                            <b-card-body>
+                            </b-card-body>
+                        </b-collapse>
+                    </b-card>
+                </div>
+            </b-nav-item>
+            <b-nav-item  class="m-2">
+                <div class="accordion" role="tablist">
+                    <b-card no-body >
+                        <b-card-header header-tag="header"   role="tab">
+                            <b-button block squared v-b-toggle.libros class="p-1 azulUnam">Libros</b-button>
+                        </b-card-header>
+                        <b-collapse id="libros"  accordion="my-accordion" role="tabpanel">
+                            <b-card-body>
+                            <b-button block variant="light" class="p-1 m-0" @click="$store.commit('cambiarNav','EditarLibro')">Editar</b-button>
+                            <b-button block variant="light" class="p-1 m-0" @click="$store.commit('cambiarNav','AgregarLibro')">Agregar</b-button>
+                            </b-card-body>
+                        </b-collapse>
+                    </b-card>
+                </div>
+            </b-nav-item>
+        </b-nav>
+    </div>
+</template>
+<script>
+import Swal from 'sweetalert2'
+export default {
+    props:{
+        user: String
+    },
+    methods:{
+        cerrarSesion(){
+             const swalWithBootstrapButtons = Swal.mixin({
+                customClass: {
+                    confirmButton: 'btn btn-outline-success',
+                    cancelButton: 'btn btn-outline-danger'
+                },
+                buttonsStyling: false
+            })
+
+            swalWithBootstrapButtons.fire({
+                title: '¿Estás seguro de que quieres cerrar la sesión?',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Si, salir',
+                cancelButtonText: 'No',
+                reverseButtons: true
+            }).then(async (result) => {
+                if (result.isConfirmed) {
+                    localStorage.clear();
+                    this.$router.replace('/login');
+                }
+            });
+        }
+    }
+}
+</script>
+
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.azulUnam {
+  background-color: #1e3c70;
+}
+.rojo:hover{
+    background-color: #CA230C;
+    color: white;
+}
+
+</style>
@@ -1,174 +0,0 @@
-<template>
-  <nav
-    class="navbar navbar-expand-md navbar-light "
-    style="background-color:#BB8800;"
-  >
-    <div class="container">
-      <nav class=" ">
-        <button
-          class=" navbar-toggler van text-whitee btn-sm"
-          type="button"
-          id="toggle-menu"
-          data-toggle="collapse"
-          data-target="#navbarNav"
-          aria-controls="navbarNav"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-          v-on:click="toggle()"
-        >
-          <span
-            class=" navbar-toggler-icon x m-1 text-white"
-            style="color:white !important;"
-          ></span>
-          Menú
-        </button>
-      </nav>
-
-      <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
-          <li class="nav-item dropdown">
-            <router-link to="#" class="nav-item nav-link text-white "
-              ><a> Inicio</a></router-link
-            >
-          </li>
-          <li class="nav-item dropdown">
-            <router-link to="#" class="nav-item nav-link text-white"
-              ><a>Presentacion</a></router-link
-            >
-          </li>
-          <li class="nav-item dropdown">
-            <router-link to="#" class="nav-item nav-link text-white"
-              ><a>Libros</a></router-link
-            >
-          </li>
-          <li class="nav-item dropdown">
-            <router-link to="#" class="nav-item nav-link text-white"
-              ><a>Difusión Editorial</a></router-link
-            >
-          </li>
-        </ul>
-        <form class="form-inline  my-0 my-lg-0">
-          <div class="input-group input-group-sm mb-0">
-            <input
-              type="text"
-              class="form-control reIzq "
-              placeholder="Buscar"
-              aria-label="Recipient's username"
-              aria-describedby="basic-addon2"
-            />
-            <div class="input-group-append reDer bg-white">
-              <button class="btn  my-0" type="submit">
-                <svg
-                  width="1em"
-                  height="1em"
-                  viewBox="0 0 16 16"
-                  class="bi bi-search"
-                  fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
-                  />
-                  <path
-                    fill-rule="evenodd"
-                    d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </nav>
-</template>
-
-<script>
-export default {
-  methods: {
-    toggle: function() {
-      let element = document.getElementById("navbarNav");
-      element.classList.toggle("block");
-      element.classList.add("mystyle");
-    }
-  }
-};
-</script>
-
-<style scoped>
-.reDer {
-  border-top-right-radius: 20px 20px !important;
-  border-bottom-right-radius: 20px 20px !important;
-}
-.reIzq {
-  border-top-left-radius: 20px 20px !important;
-  border-bottom-left-radius: 20px 20px !important;
-}
-body {
-  overflow-x: hidden;
-}
-.mystyle {
-  text-align: left;
-}
-
-.block {
-  display: block;
-}
-a {
-  max-height: 100%;
-}
-.menu {
-  background-color: #bb8800;
-}
-
-.menu nav ul {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 0rem;
-}
-
-.menu nav ul div {
-  display: flex;
-  justify-content: space-between;
-}
-
-.menu nav ul li {
-  list-style: none;
-}
-
-.menu nav ul li a {
-  display: block;
-}
-
-a {
-  color: white;
-  transition: 0.5s;
-  padding-left: 0.3rem;
-  padding-right: 0.3rem;
-}
-
-a:hover {
-  background-color: #1e3c70;
-  color: white;
-}
-
-.active {
-  background-color: #936900;
-}
-
-.van {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.x {
-  color: white;
-}
-
-@media (min-width: 768px) {
-  .van {
-    display: none;
-  }
-}
-</style>
@@ -1,94 +0,0 @@
-<template>
-  <transition name="modal">
-    <div class="modal-backdrop" @click.self="close()">
-      <div
-        class="modal"
-        role="dialog"
-        aria-labelledby="modalTitle"
-        aria-describedby="modalDescription"
-      >
-        <section class="modal-body rounded" id="modalDescription">
-          <iframe
-            :src="PDF"
-            width="100%"
-            height="100%"
-            frameborder="0"
-          ></iframe>
-        </section>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-//import axios from "axios";
-import config from "../config/config.js";
-
-export default {
-  props: ["pdfPre"], //RUTA.pdf
-  name: "modal",
-  methods: {
-    close() {
-      this.$emit("close");
-    }
-  },
-
-  data() {
-    return {
-      PDF: ""
-    };
-  },
-  async created() {
-    try {
-      let path = `${config.api}/PDFget/${this.pdfPre}`;
-      this.PDF = path;
-      /*let PDF = await axios.get(`${config.api}/PDFget/${this.pdfPre}`, {
-           
-            responseType: 'blob', // 
-        })
-     
-     .then(response => {
-      
-       this.PDF = PDF
-   // this.user = response.data;
-    console.log("si se pudo", response.data)
-}).catch(e => {
-    console.log(e);
-})*/
-    } catch (error) {
-      console.log(`Ocurrio un error msj: ${error}`);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal {
-  background: #ffffff;
-  box-shadow: 2px 2px 20px 1px;
-  /* overflow-x: auto; */
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  width: 90%;
-  height: 90%;
-}
-
-.modal-body {
-  /* position: relative; */
-  padding: 20px 10px;
-}
-</style>
@@ -25,8 +25,6 @@
 import axios from "axios";
 import config from "../config/config.js";
 export default {
-  components: {},
-
  data() {
    return {
      categoria: "",
@@ -48,7 +46,7 @@ export default {
        `${config.api}/temaLibro?categoria=${this.categoria}`
      );
      similares = similares.data.data;
-      console.log(` este es el resutlado${similares}`);
+      //console.log(` este es el resutlado${similares}`);
      for (let i = 0; i < similares.length; i++) {
        let config = {
          // example url
@@ -33,9 +33,10 @@ export default {
  font-size: 30px;
 }

-@media screen and (max-width: 400px) {
+@media screen and (max-width: 450px) {
  .pTitulo {
    font-size: 20px;
+    padding: 0px 3px;
  }
  .bgAzul {
    width: 60%;
@@ -3,9 +3,12 @@ const config = {
  //api: "https://f8d86328e778.ngrok.io"

  //Local
-  //api: "http://localhost:3001"
+  //api: "http://localhost:3000"

  //Pruebas
-  api: "https://venus.acatlan.unam.mx/portal"
+  //api: "https://venus.acatlan.unam.mx/portal"
+
+  //Produccion
+  api: "https://venus.acatlan.unam.mx/portal_editorial"
 };
 module.exports = config;
@@ -1,20 +1,38 @@
-import Vue from "vue";
-import App from "./App.vue";
-import "bootstrap";
-import "bootstrap/dist/css/bootstrap.min.css";
-
-import VueRouter from "vue-router";
-import { routes } from "./routes";
-
-Vue.config.productionTip = false;
-
-Vue.use(VueRouter);
-const router = new VueRouter({
-  routes
-});
-
-new Vue({
-  el: "#app",
-  render: h => h(App),
-  router
-});
+import Vue from "vue";
+import App from "./App.vue";
+import "bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import Vuex from 'vuex'
+import VueRouter from "vue-router";
+import { routes } from "./routes";
+
+
+Vue.config.productionTip = false;
+Vue.use(Vuex)
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  routes
+});
+
+const store = new Vuex.Store({
+  state: {
+    selectNav: "EditarLibro", 
+  },
+  mutations: {
+    cambiarNav (state, selectNav) {
+      state.selectNav = selectNav
+    }
+  
+  }
+})
+
+new Vue({
+  el: "#app",
+  render: h => h(App),
+  router,
+  store: store,
+});
@@ -8,9 +8,12 @@ import comite from "./view/comite.vue";
 import presentacion from "./view/presentacion.vue";
 import proceso from "./view/proceso.vue";
 import puntos from "./view/puntos.vue";
+import contacto from "./view/contacto.vue";
+import panelAdmin from "./view/panelAdmin.vue";

 export const routes = [
-  { path: "/", component: home, name: "form" },
+  { path: "/", component: home, name: "/" },
+  { path: "/home", component: home, name: "home" },
  { path: "/login", component: login, name: "Login" },
  { path: "/desc", component: libroDescripcion, name: "LibroDesc" },
  { path: "/difusion", component: difusion, name: "difusion" },
@@ -18,6 +21,8 @@ export const routes = [
  { path: "/tema", component: tema, name: "tema" },
  { path: "/comite", component: comite, name: "comite" },
  { path: "/presentacion", component: presentacion, name: "presentacion" },
-  { path: "/proceso", component: proceso, name: proceso },
-  { path: "/puntos", component: puntos, name: puntos }
+  { path: "/proceso", component: proceso, name: "proceso" },
+  { path: "/puntos", component: puntos, name: "puntos" },
+  { path: "/contacto", component: contacto, name: "contacto" },
+  { path: "/panelAdmin", component: panelAdmin, name: "panelAdmin" }
 ];
@@ -2,17 +2,19 @@
  <div>
    <Header></Header>
    <Nav></Nav>
+    <Nav2 />

    <div class="my-4 gente">
      <h1 class="text-center">Comité Editorial</h1>
      <div class="row">
        <div class="col-10  mx-auto">
          <p class="text-justify">
-            El Comité Editorial de la Facultad de Estudios Superiores Acatlán es
-            el órgano colegiado que establece y regula los procedimientos para
-            la recepción, dictamen, selección, edición, impresión, difusión,
-            promoción, almacenamiento, preservación, distribución y
-            comercialización de sus publicaciones. (Art. 1, PyLE).
+            En este apartado, se muestran los 17 miembros que componen el Comité
+            Editorial de la Facultad de Estudios Superiores Acatlán, quienes, en
+            apego a las normativas institucionales, establecen y regulan los
+            procedimientos para la recepción, dictamen, selección, edición,
+            impresión, difusión, promoción, almacenamiento, preservación,
+            distribución y comercialización de sus publicaciones.
          </p>
        </div>
      </div>
@@ -79,6 +81,27 @@
        <p>D.G. Norma Guadalupe Rojas Borja</p>
        <strong> Secretaria de Actas</strong>
      </div>
+
+      <div>
+        <p>Lic. Yareth Pérez Salgado</p>
+        <strong>Jefa de la Unidad de la Oficina Jurídica</strong>
+      </div>
+
+      <div>
+        <p>Lic. Hugo Espinoza Rubio</p>
+        <strong
+          >Académico de la Facultad de Filosofía y Letras, UNAM / Miembro
+          externo
+        </strong>
+      </div>
+
+      <div>
+        <p>Dr. Gregorio Hernández Zamora</p>
+        <strong
+          >Académico de la Universidad Autónoma Metropolitana / Miembro
+          externo</strong
+        >
+      </div>
    </div>

    <Footer></Footer>
@@ -87,13 +110,14 @@

 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../esteticas/nav.vue";
-//import Nav from "./../components/navPrincipal.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
 import Footer from "./../components/footer.vue";
 export default {
  components: {
    Header,
    Nav,
+    Nav2,
    Footer
  }
 };
@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <Header></Header>
+    <Nav></Nav>
+    <Nav2 />
+    <div class="row">
+      <div class="my-5 col-10 offset-1">
+        <h1 class="mb-4">Contáctanos</h1>
+        <p class="text-justify">
+          En caso de tener dudas sobre el catálogo de publicaciones de Ediciones
+          Acatlán, los distintos puntos de venta, de nuestros procesos de
+          publicación, o acerca del cuerpo colegiado editorial de la Facultad de
+          Estudios Superiores Acatlán, favor de llenar los siguientes campos y
+          te responderemos a la brevedad.
+        </p>
+
+        <form class="my-5">
+          <div class="form-group row">
+            <div
+              class="col-12 col-md-12 col-xl-7 col-lg-7 d-flex flex-column justify-content-around "
+            >
+              <div
+                class="form-group row d-flex  justify-content-between align-items-center"
+              >
+                <label for="formGroupExampleInput">Nombre</label>
+                <div class="col-sm-8">
+                  <input
+                    type="text"
+                    class="form-control mb-4"
+                    id="formGroupExampleInput"
+                    v-model="nombre"
+                  />
+                </div>
+              </div>
+
+              <div class="form-group row d-flex   justify-content-between">
+                <label for="inputEmail3">Correo electrónico</label>
+                <div class="col-sm-8">
+                  <input
+                    type="email"
+                    class="form-control"
+                    id="inputEmail3"
+                    v-model="correo"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12 col-md-8 col-lg-8 col-xl-8 mx-auto mt-3">
+              <div class="form-group">
+                <label for="comment">Comentario</label>
+                <textarea
+                  class="form-control"
+                  rows="5"
+                  id="comment"
+                  v-model="mensaje"
+                ></textarea>
+              </div>
+            </div>
+          </div>
+        </form>
+        <button
+          class="btn btn-primary mt-5"
+          @click="enviar()"
+          v-show="nombre != '' && correo != '' && mensaje != ''"
+        >
+          Enviar
+        </button>
+      </div>
+    </div>
+
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
+import Footer from "./../components/footer.vue";
+
+import axios from "axios";
+import config from "../config/config.js";
+import Swal from "sweetalert2";
+
+export default {
+  name: "contacto",
+  components: {
+    Header,
+    Nav,
+    Nav2,
+    Footer
+  },
+  data() {
+    return {
+      nombre: "",
+      correo: "",
+      mensaje: ""
+    };
+  },
+
+  methods: {
+    async enviar() {
+      if (this.nombre == "") return alert("falta agregar nombre");
+      if (this.mensaje == "") return alert("falta agregar comentario");
+      if (this.correo == "") return alert("falta agregar correo");
+
+      let arroba = 0;
+
+      for (let i = 0; i < this.correo.length; i++) {
+        if (`${this.correo[i]}` === `@`) arroba = 1;
+      }
+
+      if (!arroba) return alert("El correo no es valido");
+
+      await axios
+        .post(`${config.api}/email`, {
+          correo: this.correo,
+          mensaje: this.mensaje,
+          nombre: this.nombre
+        })
+        .then(function() {
+          Swal.fire({
+            icon: "success",
+            title: "Correo enviado correctamente",
+            timer: 2000
+          });
+          //console.log(response);
+        })
+        .catch(function(error) {
+          Swal.fire({
+            icon: "error",
+            title: "Oops...",
+            text: "hubo un error. Intentalo más tarde "
+          });
+          console.log(error);
+        });
+    }
+  }
+};
+</script>
+
+<style></style>
@@ -2,9 +2,10 @@
  <div>
    <Header />
    <Nav />
+    <Nav2 />
    <!-- <div class="row">
    <div class="col-10 offset-1"> -->
-    <Title title="Conoce mas" class="mt-5" />
+    <Title title="Conoce más" class="mt-5" />
    <!-- </div>
 </div> -->
    <div class="container">
@@ -22,7 +23,7 @@
        <div
          class="texto col-10 col-sm-5 col-md-5 col-lg-5 col-xl-5 d-flex align-items-center justify-content-center flex-column"
        >
-          <h4>Descripcion:</h4>
+          <h4>Descripción:</h4>
          <p class="scroll">
            {{ de.descrip }}
          </p>
@@ -46,7 +47,8 @@

 <script>
 import Header from "../components/header.vue";
-import Nav from "../esteticas/nav.vue";
+import Nav from "../components/nav.vue";
+import Nav2 from "../components/nav2.vue";
 import Footer from "../components/footer.vue";
 import Title from "../components/titulo.vue";

@@ -54,6 +56,7 @@ export default {
  components: {
    Header,
    Nav,
+    Nav2,
    Footer,
    Title
  },
@@ -71,7 +74,7 @@ export default {
            conseguir el resultado de las variables. En este sentido, los
            términos se distinguen o separan por medio de signos, y en el caso
            de estar separadas por el signo de igualdad se llama ecuación.`,
-          video: "https://www.youtube.com/embed/gOsM-DYAEhY"
+          video: "https://www.youtube.com/embed/CHR9xhkv8u8"
        }
      ]
    };
@@ -2,6 +2,7 @@
  <div>
    <Header />
    <Nav />
+    <Nav2 />
    <Carr />
    <Title title="Recientes" />
    <Cart />
@@ -11,8 +12,8 @@

 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../esteticas/nav.vue";
-//import Nav from "./../components/navPrincipal.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
 import Footer from "./../components/footer.vue";
 import Carr from "../components/carrusel.vue";
 import Cart from "../components/cartLibro.vue";
@@ -23,6 +24,7 @@ export default {
  components: {
    Header,
    Nav,
+    Nav2,
    Footer,
    Carr,
    Cart,
@@ -2,6 +2,7 @@
  <div>
    <Header />
    <Nav />
+    <Nav2 />

    <Descrip />

@@ -11,7 +12,8 @@

 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../esteticas/nav.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
 import Descrip from "./../components/descripcion.vue";
 import Footer from "./../components/footer.vue";

@@ -20,6 +22,7 @@ export default {
  components: {
    Header,
    Nav,
+    Nav2,
    Descrip,
    Footer
  }
@@ -1,59 +1,78 @@
-<template>
-  <div>
-    <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">
-        <form class="row d-flex justify-content-center">
-          <input
-            type="text"
-            v-model="data.email"
-            id="login"
-            class="form-control col-8"
-            name="login"
-            placeholder="Usuario"
-          />
-          <input
-            type="password"
-            v-model="data.password"
-            id="password"
-            class="form-control col-8 my-3"
-            name="login"
-            placeholder="Contraseña"
-          />
-          <input
-            type="button"
-            @click="login"
-            class="btn bg-primary text-white col-5"
-            value="Ingresar"
-          />
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Header from "./../components/header.vue";
-
-export default {
-  data() {
-    return {
-      data: {
-        email: "",
-        password: ""
-      }
-    };
-  },
-  methods: {
-    login() {
-      alert(this.data.email);
-    }
-  },
-  components: {
-    Header
-  }
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <Header />
+    <h1 class="my-5">Inicia Sesión</h1>
+    <div class="row d-flex justify-content-center">
+      <div class="col-12 col-md-8 col-lg-6 col-xl-6">
+        <form class="row d-flex justify-content-center">
+          <input
+            type="text"
+            v-model="email"
+            class="form-control col-8"
+            name="login"
+            placeholder="Usuario"
+          />
+          <input
+            type="password"
+            v-model="password"
+            class="form-control col-8 my-3"
+            name="login"
+            placeholder="Contraseña"
+          />
+          <input
+            type="button"
+            @click="login"
+            class="btn bg-primary text-white col-5"
+            value="Ingresar"
+          />
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+import axios from "axios";
+import config from "../config/config.js";
+import Swal from 'sweetalert2'
+export default {
+  data() {
+    return {
+      email: "",
+      password: ""
+      
+    };
+  },
+  methods: {
+    login() {
+      const datos = {
+        usuario: this.email,
+        password: this.password
+      }
+      axios.post( `${config.api}/loginAdmin`,  datos ).then(async response =>{
+          localStorage.setItem('tokenPortal', response.data.token);
+          await Swal.fire(
+                'Bienvenido',
+                    '',
+                    'success'
+                );
+          this.$router.replace('/panelAdmin');
+
+      }).catch(() =>{
+          Swal.fire({
+              icon: 'error',
+              title: 'El usuario o la contraseña es incorrecta',
+              text: `Intentalo de nuevo.`,
+          });
+      });
+    }
+  },
+  components: {
+    Header
+  },
+ 
+};
+</script>
+
+<style></style>
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <Header />
+        <b-row>
+            <b-col cols="2" style="background-color: #bb8800;" class="p-0 m-0">
+                <div class="p-0 m-0">
+                   <NavAdmin v-bind:user="usuario"/>
+                </div>
+            </b-col>
+            <b-col  cols="10">
+                 <b-row v-if="this.$store.state.selectNav=='EditarBanner'">
+                   <EditarBanner />
+                </b-row>
+                <b-row v-if="this.$store.state.selectNav=='EditarLibro'">
+                    <EditarLibro />
+                </b-row>
+                 <b-row v-if="this.$store.state.selectNav=='AgregarLibro'">
+                    <AgregarLibro />
+                </b-row>
+            </b-col>
+        </b-row>
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+import Footer from "./../components/footer.vue";
+import EditarLibro from './../components/editarLibro.vue';
+import EditarBanner from './../components/editarBanner.vue';
+import AgregarLibro from './../components/agregarLibro.vue';
+import NavAdmin from './../components/navAdmin.vue';
+import axios from "axios";
+import config from "../config/config.js";
+import Swal from 'sweetalert2'
+export default {
+  name: "panelAdmin",
+  components: {
+    Header,
+    Footer,
+    EditarLibro,
+    NavAdmin,
+    EditarBanner,
+    AgregarLibro
+  },
+    data() {
+    return {
+     usuario: ""
+     
+    };
+  },
+   beforeCreate(){
+      let token = localStorage.getItem('tokenPortal');
+      console.log(token);
+      if(token === null) this.$router.replace('/login');
+      axios.post( `${config.api}/checkToken`,  {token: token}, {
+        headers: {
+            authorization: 'Bearer ' + token,
+        }}).then(async response =>{
+        console.log('lo que responde', response.data.datos.user.user);
+        this.usuario =  response.data.datos.user.user;
+      }).catch(async (error) =>{
+          console.log(error);
+          await Swal.fire({
+              icon: 'error',
+              title: 'La sesión ha expirado',
+              text: `Ingrese de nuevo.`,
+          });
+          this.$router.replace('/login')
+      });
+  }
+   
+};
+</script>
+
+
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>
@@ -2,29 +2,44 @@
  <div>
    <Header></Header>
    <Nav></Nav>
+    <Nav2 />
    <div>
      <h1 class="my-4">Presentación</h1>
      <div class="row presentacion">
        <div class="col-10 offset-1 text-justify mb-5">
          <p>
-            En atención al Programa Estratégico 3. Facultad del Siglo XXI, del
-            Plan de Desarrollo Institucional 2017-2021 de la Facultad de
-            Estudios Superiores Acatlán, en el cual, mediante la línea de acción
-            3.2. Modernización de la gestión, se establece la actualización del
-            portal editorial de la Facultad, la Coordinación de Servicios
-            Académicos, a través de la Unidad de Servicios Editoriales y la
-            Unidad del Centro de Desarrollo Tecnológico, tiene en desarrollo dos
-            proyectos: la Tienda Virtual Acatlán y el Portal Editorial de
-            Ediciones Acatlán.
+            Bienvenido/a al Portal Editorial de la Facultad de Estudios
+            Superiores Acatlán, el sitio en línea que presenta todo tópico
+            relacionado con la publicación y difusión de los materiales del
+            sello Ediciones Acatlán.
          </p>

          <p>
-            El primero de los proyectos, la
-            <a href="https://tienda.acatlan.unam.mx"> Tienda Virtual Acatlán</a
-            >, es la plataforma destinada a la venta de las publicaciones de
-            Ediciones Acatlán, habilitada desde el mes de marzo del presente
-            año.
+            Desarrollada por la Unidad del Centro de Desarrollo Tecnológico y la
+            Unidad de Servicios Editoriales, ambas pertenecientes a la
+            Coordinación de Servicios Académicos, esta plataforma fue creada
+            para dar a conocer el catálogo de publicaciones emanadas de esta
+            entidad multidisciplinaria.
          </p>
+
+          <p>
+            Actualmente, En atención al Programa Estratégico 3. Facultad del
+            Siglo XXI, del Plan de Desarrollo Institucional 2017-2021 de la
+            Facultad de Estudios Superiores Acatlán, en el cual, mediante la
+            línea de acción 3.2. Modernización de la gestión, se establece la
+            actualización del portal editorial de la Facultad, la Coordinación
+            de Servicios Académicos, a través de las áreas ya enunciadas, tiene
+            en desarrollo dos proyectos: la Tienda Virtual Acatlán y el Portal
+            Editorial de Ediciones Acatlán.
+          </p>
+
+          <p>
+            El primero de los proyectos, la Tienda Virtual Acatlán, es la
+            plataforma destinada a la venta de las publicaciones de Ediciones
+            Acatlán, habilitada desde el mes de marzo del presente año (véase
+            Puntos de Venta).
+          </p>
+
          <p>
            El segundo de ellos, el Portal Editorial, tiene el objetivo de
            difundir toda aquella información relacionada con los procesos y
@@ -40,11 +55,50 @@
            intelectual de la planta docente de esta entidad multidisciplinaria.
            De igual manera, tendrá a su disposición los lineamientos
            editoriales y la información concerniente al proceso de publicación
-            y las distintas partes institucionales involucradas. Por otra parte,
-            en caso de querer adquirir alguno de los títulos que ofrece el sello
-            editorial de Acatlán, están disponibles los datos de la Tienda
-            Virtual Acatlán y la Librería Universitaria, para compra de libros
-            en línea o de manera presencial, respectivamente.
+            así como las distintas partes institucionales involucradas. Por otra
+            parte, en caso de desear adquirir alguno de los títulos que ofrece
+            el sello editorial de Acatlán, están disponibles los datos de la
+            Tienda Virtual Acatlán y la Librería Universitaria, para compra de
+            libros en línea o de manera presencial, respectivamente.
+          </p>
+
+          <p>
+            De manera complementaria, la publicación, difusión, distribución y
+            venta de nuestros libros se hacen mediante diversas estrategias que
+            buscan involucrar a otras instancias universitarias e, incluso, a
+            editoras externas a la Universidad:
+          </p>
+          <ul>
+            <li>
+              Puntos de venta: Se pueden adquirir títulos de Ediciones Acatlán
+              de forma presencial y en línea. Para conocer más, favor de
+              dirigirse al apartado «Puntos de Venta»
+            </li>
+            <li>
+              Presencia de eventos culturales: En aras de compartir las
+              novedades editoriales de nuestra entidad, se ha buscado tener
+              presencia en eventos nacionales que promuevan la lectura y la
+              cultura del libro. Tal es el caso de la Feria Internacional del
+              Libro del Palacio de Minería.
+            </li>
+            <li>
+              Coediciones: En el caso de que una editorial universitaria o de
+              otro ámbito desee publicar con la FES Acatlán, bajo el seguimiento
+              de las instancias correspondientes, se puede gestionar la firma de
+              un contrato de coedición, mediante el cual se acordarían cómo
+              apoyaría en la edición y distribución cada una de las entidades
+              involucradas.
+            </li>
+            <li>
+              Venta interinstitucional: Por medio de la firma de una Bases de
+              Colaboración Interinstitucional, la FES Acatlán puede colocar a la
+              venta su producción editorial en otras instancias de la UNAM, y
+              viceversa.
+            </li>
+          </ul>
+          <p>
+            De tener alguno duda sobre lo anterior, favor de dirigirse al
+            apartado de Contacto.
          </p>
        </div>
      </div>
@@ -56,12 +110,14 @@

 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../esteticas/nav.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
 import Footer from "./../components/footer.vue";
 export default {
  components: {
    Header,
    Nav,
+    Nav2,
    Footer
  }
 };
@@ -2,6 +2,7 @@
  <div>
    <Header></Header>
    <Nav></Nav>
+    <Nav2 />

    <div class="row">
      <div class="col-10 offset-1 my-5">
@@ -14,9 +15,9 @@
        <div class="col-10 offset-1">
          <p class="mb-4">
            De manera paralela a la función que cumple el documento “Política y
-            lineamientos editoriales“, este apartado proporciona al lector / la
-            lectora el panorama de los etapas, instancias y participantes del
-            proceso de publicaciones de materiales universitarios, desde la
+            lineamientos editoriales“, este apartado proporciona al
+            lector/lectora el panorama de las etapas, instancias y participantes
+            del proceso de publicaciones de materiales universitarios, desde la
            presentación del original al área académica de adscripción del
            profesor/profesora hasta la puesta en venta del libro, ya sea en
            formato físico o electrónico.
@@ -28,7 +29,7 @@
            llevar a buen término la publicación de los resultados de los
            trabajos de docencia e investigación que realizan nuestros
            académicos/as. A grandes rasgos, los organismos que participan en la
-            ruta crítica de un libro son las siguientes:
+            ruta crítica de un libro son los siguientes:
          </p>

          <ul class="opciones">
@@ -52,43 +53,43 @@

            <li>
              Comité Editorial (cuerpo colegiado editorial máximo de la FES
-              Acatlán que emite juicio sobre la publicación y edición --impresa
-              o digital- de una propuesta)
+              Acatlán que emite juicio sobre la publicación y edición -impresa o
+              digital- de una propuesta)
            </li>

            <li>
-              Dirección General de Publicaciones y Fomento Editorial de la UNAM
-              (DGPyFE) Unidad de Servicios Editoriales
-            </li>
-
-            <li>
-              Dirección General de Asuntos Jurídicos de la UNAM (DGAJ) Unidad de
-              la Oficina Jurídica de la FES Acatlán
-            </li>
-
-            <li>
-              Otros organismos:
+              Organismos universitarios:
              <ul>
-                <li>Instituto Nacional del Derecho de Autor (INDAUTOR)</li>
+                <li>
+                  Dirección General de Publicaciones y Fomento Editorial de la
+                  UNAM (DGPyFE)
+                </li>
+                <li>
+                  Dirección General de Asuntos Jurídicos de la UNAM (DGAJ)
+                </li>
                <li>
                  Dirección General de Asuntos del Personal Académico de la UNAM
                  (DGAPA)
                </li>
              </ul>
            </li>
+
+            <li>
+              Otros organismos:
+              <ul>
+                <li>Instituto Nacional del Derecho de Autor (INDAUTOR)</li>
+              </ul>
+            </li>
          </ul>
        </div>
      </div>
-
-      <div class="col-12 my-3">
-        <a href="../assets/files/TripticoRuta.pdf" download="RutaCritica.pdf"
-          >Descargar Ruta Critica</a
-        >
-      </div>
    </div>

    <div class="row ">
-      <div class="col-10 offset-1 mb-5 pad">
+      <div class="col-10 offset-1 my-4 pad">
+        <div class="text-center doradoUnam headTable text-white">
+          <h4>Ruta Crítica</h4>
+        </div>
        <div id="accordion">
          <div class="card">
            <div
@@ -942,6 +943,19 @@
        </div>
      </div>
    </div>
+    <div class="col-12 d-flex justify-content-center mb-3">
+      <!-- <a href="assets/TripticoRuta.pdf" target="_blank" download
+        >Descargar Ruta Critica</a
+      > -->
+
+      <Enlace
+        class="enlaces w-auto my-3"
+        :linkW="linkW"
+        :linkD="linkD"
+        :img="img"
+        :title="title"
+      />
+    </div>

    <Footer></Footer>
  </div>
@@ -949,13 +963,26 @@

 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../esteticas/nav.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
 import Footer from "./../components/footer.vue";
+import Enlace from "./../components/enlace.vue";
+
 export default {
  components: {
    Header,
    Nav,
-    Footer
+    Nav2,
+    Footer,
+    Enlace
+  },
+  data() {
+    return {
+      title: "Ruta Crítica",
+      img: "assets/lineamientos/Ruta-critica.png",
+      linkD: "assets/TripticoRuta.pdf",
+      linkW: ""
+    };
  }
 };
 </script>
@@ -969,7 +996,7 @@ td {
 .title {
  text-align: center;
 }
-.azul {
+.doradoUnam {
  background-color: #bb8800;
 }
 .azul:hover {
@@ -1003,6 +1030,14 @@ p {
 .opciones li {
  margin: 1rem 0;
 }
+.headTable {
+  padding: 0.5rem 0;
+  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+}
+.headTable h4 {
+  padding: 0;
+  margin: 0;
+}

@media (max-width: 450px) {
  th,
@@ -2,42 +2,62 @@
  <div>
    <Header></Header>
    <Nav></Nav>
+    <Nav2 />

    <div>
-      <h1 class="my-4">Puntos de Venta</h1>
-
      <div class="row">
-        <div class="col-10 offset-1 text-justify mb-4">
-          <p>
+        <div class="col-10 offset-1 mb-5">
+          <h1 class="my-4">Puntos de Venta</h1>
+
+          <p class="mb-4">
            La venta y difusión de las publicaciones de Ediciones Acatlán se
-            llevan a cabo a partir de cuatro maneras:
+            llevan a cabo a partir de cuatro maneras. En caso de que desee
+            adquirir alguna de las publicaciones emanadas de esta entidad
+            multidisciplinaria, podría hacer a través de los puntos que se
+            enlistan continuación:
          </p>
+        </div>
+      </div>

-          <ul class="lugares">
-            <li>
-              Librería Universitaria: ubicada en las instalaciones de la FES
-              Acatlán, para la adquisición de publicaciones impresas, tanto de
-              nuestro sello como de otras editoriales.
-            </li>
+      <Title title="Compra presencial" />
+      <div class=" row marcos">
+        <div class="col-12 offset-0 mb-5 d-flex">
+          <div
+            class="col-12 offset-0 d-flex flex-wrap justify-content-center align-items-center px-0"
+          >
+            <Enlace
+              class="enlaces w-auto my-3"
+              v-for="link in Links"
+              :key="link.id"
+              v-show="link.mode == 'presencial'"
+              :linkW="link.linkW"
+              :linkD="link.linkD"
+              :img="link.img"
+              :text="link.text"
+              :title="link.title"
+            />
+          </div>
+        </div>
+      </div>

-            <li>
-              Tienda Virtual Acatlán: plataforma que soporta ventas en línea
-              (obras impresas y electrónicas), de reciente habilitación.
-            </li>
-
-            <li>
-              Librería Ambulante: extensión de la Librería Universitaria que, de
-              manera presencial, acude a los eventos institucionales con
-              publicaciones de temas afines a éstos.
-            </li>
-
-            <li>
-              Libros UNAM: plataforma en línea de la Universidad Nacional
-              Autónoma de México, mediante la cual se pueden adquirir todas las
-              publicaciones (impresas y electrónicas) de todas las dependencias
-              editoras.
-            </li>
-          </ul>
+      <Title title="Compra en Línea" />
+      <div class=" row marcos">
+        <div class="col-12 offset-0 mb-5 d-flex">
+          <div
+            class="col-12 offset-0 d-flex flex-wrap justify-content-center align-items-center px-0"
+          >
+            <Enlace
+              class="enlaces w-auto my-3"
+              v-for="link in Links"
+              :key="link.id"
+              v-show="link.mode == 'linea'"
+              :linkW="link.linkW"
+              :linkD="link.linkD"
+              :img="link.img"
+              :text="link.text"
+              :title="link.title"
+            />
+          </div>
        </div>
      </div>
    </div>
@@ -48,18 +68,84 @@

 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../esteticas/nav.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
 import Footer from "./../components/footer.vue";
+import Enlace from "./../components/enlace.vue";
+import Title from "../components/titulo.vue";
+
 export default {
  components: {
    Header,
    Nav,
-    Footer
+    Nav2,
+    Footer,
+    Enlace,
+    Title
+  },
+  data() {
+    return {
+      Links: [
+        {
+          id: 0,
+          title: "Librería Universitaria",
+          text:
+            "Ubicada en las instalaciones de la FES Acatlán, para la adquisición de publicaciones impresas, tanto de nuestro sello como de otras editoriales.",
+          img: "assets/puntos/LIBRERÍA-ACATLÁN.png",
+          linkW: "",
+          linkD: "",
+          mode: "presencial"
+        },
+        {
+          id: 1,
+          title: "Tienda Virtual Acatlán",
+          text:
+            "Plataforma que soporta ventas en línea (obras impresas), de reciente habilitación.",
+          img: "assets/puntos/logotienda.png",
+          linkW: "https://tienda.acatlan.unam.mx/",
+          linkD: "",
+          mode: "linea"
+        },
+        {
+          id: 2,
+          title: "Librería Ambulante",
+          text:
+            "Extensión de la Librería Universitaria que, de manera presencial, acude a los eventos institucionales con publicaciones de temas afines a éstos.",
+          img: "assets/puntos/LIBRERÍA-ACATLÁN-ambulante.png",
+          linkW: "",
+          linkD: "",
+          mode: "presencial"
+        },
+        {
+          id: 3,
+          title: "Libros UNAM",
+          text:
+            "Plataforma en línea de la Universidad Nacional Autónoma de México, mediante la cual se pueden adquirir todas las publicaciones (impresas y electrónicas) de todas las dependencias editoras.",
+          img: "assets/puntos/libros-unam.png",
+          linkW: "http://www.libros.unam.mx/",
+          linkD: "",
+          mode: "linea"
+        }
+      ]
+    };
  }
 };
 </script>
-<style>
+<style scoped>
 .lugares li {
  margin: 1rem 0;
 }
+.marcos div p {
+  text-align: left;
+}
+.marcos div a {
+  text-decoration: none;
+
+  text-align: left;
+  margin: 0.5rem 0;
+}
+.marcos div {
+  display: flex;
+  flex-direction: column;
+}
 </style>
@@ -2,6 +2,7 @@
  <div>
    <Header />
    <Nav />
+    <Nav2 />
    <Title title="Resultado" class="my-5" />
    <Cart />
    <Footer />
@@ -10,8 +11,8 @@

 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../esteticas/nav.vue";
-//import Nav from "./../components/navPrincipal.vue";
+import Nav from "./../components/nav.vue";
+import Nav2 from "./../components/nav2.vue";
 import Footer from "./../components/footer.vue";
 import Cart from "../components/temaLibro.vue";
 import Title from "../components/titulo.vue";
@@ -21,6 +22,7 @@ export default {
  components: {
    Header,
    Nav,
+    Nav2,
    Footer,
    Cart,
    Title
Author	SHA1	Message	Date
danielGe	9eafeab68e	Merge pull request 'pruebas' (#3 ) from pruebas into master Reviewed-on: #3	2021-01-19 22:24:26 +00:00
danielGe	220b44bd94	cambio de footer	2021-01-19 16:23:34 -06:00
danielGe	4667e34747	cargar el banner	2021-01-19 16:19:54 -06:00
danielGe	185669dd43	Merge pull request 'pruebas' (#2 ) from pruebas into master Reviewed-on: #2	2021-01-19 22:02:08 +00:00
danielGe	e8fe077b89	contruido con la ruta para produccion	2021-01-19 16:00:12 -06:00
danielGe	4b8defa41a	change loading libry	2021-01-14 21:05:06 -06:00
danielGe	ced0861cfb	add status of new libry	2021-01-14 04:09:04 -06:00
danielGe	bc0f37fd33	change placeholder of search bar	2021-01-12 19:08:30 -06:00
danielGe	f013f1535a	add progress bar	2021-01-12 18:47:40 -06:00
danielGe	2e7f9b5055	change meseje of bannerss image	2021-01-12 18:05:28 -06:00
danielGe	76537e91b2	login create and change version	2021-01-11 23:21:59 -06:00
danielGe	2e8938f863	change routes to update and create lib	2021-01-11 03:19:47 -06:00
danielGe	30d93847a5	construido para pruebas	2021-01-08 13:10:23 -06:00
danielGe	f92f0fcc32	panel admin	2021-01-07 23:58:49 -06:00
danielGe	4e10a9015f	front temrinado	2021-01-05 18:32:07 -06:00
danielGe	3322b667ee	panel admin	2021-01-03 02:50:25 -06:00
casnet1	827cfdbce9	cambio de link a tienda acatlan	2020-11-10 19:12:00 -06:00
casnet1	b5e7d26ed7	cambio de link a tienda acatlan	2020-11-10 19:08:50 -06:00
casnet1	9bb8b6a4fd	quitar console logs y arreglo de pagina antes de descripcion	2020-11-10 18:44:50 -06:00
danielGe	0ebd043a45	desabilitar difucion	2020-11-09 22:20:11 -06:00
danielGe	ab6f010966	construido para produccion	2020-11-09 22:07:26 -06:00
casnet1	857512a311	boton sin submit	2020-10-27 12:49:19 -06:00
casnet1	d8239668c8	auto reload fixed in correo	2020-10-26 21:36:08 -06:00
casnet1	d86b3b55c5	error reload fixed	2020-10-15 14:45:55 -05:00
eithan	ae0da8d77c	espacio input	2020-10-13 21:03:18 -05:00
eithan	3616a9bcf6	funciona enviar correo a editoriales	2020-10-13 20:45:55 -05:00
eithan	2505776935	descargar pdf	2020-10-09 19:55:26 -05:00
eithan	546791c162	cambios de nuevo	2020-10-09 19:47:40 -05:00
eithan	6057dfb914	cambios de nuevo	2020-10-09 19:46:22 -05:00
casnet1	6d53fe8d81	correcciones ortograficas	2020-10-06 01:01:35 -05:00
casnet1	13fa25d5f6	contacto y cambios	2020-10-02 18:19:28 -05:00
casnet1	86c74faf70	ruta api cambiada	2020-10-01 11:57:51 -05:00
casnet1	fdd745aca6	cambio de api a produccion	2020-10-01 15:44:26 -05:00
casnet1	8115e50888	arreglo	2020-10-01 11:53:58 -05:00
casnet1	dffe414e01	actualizacion puntos de venta y lineamientos	2020-10-01 02:27:10 -05:00
casnet1	0211f7c116	pdf si funciona	2020-09-24 15:24:57 -05:00
casnet1	da081fe762	prueba3	2020-09-24 15:00:05 -05:00
casnet1	c2c897e319	prueba 2	2020-09-24 14:26:50 -05:00
casnet1	a1c0a89101	prueba 2	2020-09-24 14:24:03 -05:00
casnet1	c727055990	prueba	2020-09-24 14:05:12 -05:00
danielGe	024dffa3eb	cambio de la ruta critica	2020-09-24 01:02:26 -05:00
casnet1	fd968e1d4f	cambios textuales	2020-09-23 15:32:58 -05:00
casnet1	312415c928	previsualizacion pdf	2020-09-21 20:22:35 -05:00
danielGe	2843a3ec89	pdfModal	2020-09-21 19:38:07 -05:00
casnet1	886d9f2bf9	ruta de peticion nueva	2020-09-21 15:18:00 -05:00