panel admin
This commit is contained in:
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class=" divMaster row row d-flex flex-wrap justify-content-center">
|
||||
<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" ></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, idx) in Libros" :class="{ active: idx == 0 }">
|
||||
<b-card class="mb-3" style="width: 14rem; height: 22rem;">
|
||||
<b-card-img :src="libro.img" alt="Image" style="max-width: 20rem; height: 15rem;" no-body ></b-card-img>
|
||||
<template #footer>
|
||||
<b-button variant="outline-warning" class="float-left">Editar</b-button>
|
||||
<b-button variant="outline-danger" class="float-right">Eliminar</b-button>
|
||||
</template>
|
||||
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import config from "../config/config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Libros: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async descripcion(idLibro) {
|
||||
//console.log(` Este es el id del libro ${idLibro}`);
|
||||
localStorage.clear();
|
||||
window.localStorage.setItem("idLibro", idLibro);
|
||||
this.$router.push("/desc");
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
let novedades = await axios.get(`${config.api}/librosNovedades`);
|
||||
let path = `${config.api}/libroImagen?idLibro=`;
|
||||
novedades = novedades.data.data;
|
||||
//console.log(`${novedades}`);
|
||||
for (let i = 0; i < novedades.length; i++) {
|
||||
//alert(novedades[i].titulo);
|
||||
//this.Libros[i].title = novedades[i].titulo;
|
||||
let config = {
|
||||
// example url
|
||||
url: `${path}${novedades[i].idLibro}`,
|
||||
method: "GET",
|
||||
responseType: "blob"
|
||||
};
|
||||
try {
|
||||
await axios(config).then(response => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(response.data);
|
||||
reader.onload = () => {
|
||||
this.Libros.push({
|
||||
id: novedades[i].idLibro,
|
||||
title: novedades[i].titulo,
|
||||
img: reader.result
|
||||
});
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(`No existe esa imagen`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(`Ocurrio un error ${error}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.divMaster {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -3,11 +3,15 @@ import App from "./App.vue";
|
||||
import "bootstrap";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
|
||||
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
|
||||
|
||||
import VueRouter from "vue-router";
|
||||
import { routes } from "./routes";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(BootstrapVue);
|
||||
Vue.use(IconsPlugin);
|
||||
Vue.use(VueRouter);
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
|
||||
+3
-1
@@ -9,6 +9,7 @@ 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: "/" },
|
||||
@@ -22,5 +23,6 @@ export const routes = [
|
||||
{ path: "/presentacion", component: presentacion, name: "presentacion" },
|
||||
{ path: "/proceso", component: proceso, name: "proceso" },
|
||||
{ path: "/puntos", component: puntos, name: "puntos" },
|
||||
{ path: "/contacto", component: contacto, name: "contacto" }
|
||||
{ path: "/contacto", component: contacto, name: "contacto" },
|
||||
{ path: "/panelAdmin", component: panelAdmin, name: "panelAdmin" }
|
||||
];
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header />
|
||||
<b-container fluid class="bv-example-row ml-0">
|
||||
<b-row>
|
||||
<b-col cols="3" style="background:red;">
|
||||
<div>
|
||||
<b-nav vertical class="w-25">
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="9">
|
||||
<b-row>
|
||||
<div>
|
||||
<b-nav tabs fill>
|
||||
<b-nav-item active>Editar</b-nav-item>
|
||||
<b-nav-item>Agregar</b-nav-item>
|
||||
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<div class="divMaster row ">
|
||||
<div class=" d-flex flex-wrap " style="justify-content: space-between;">
|
||||
<div v-bind:key="libro.id" v-for="(libro, idx) in Libros" :class="{ active: idx == 0 }">
|
||||
<b-card class="mb-3" style="width: 28rem;">
|
||||
<b-card-img :src="libro.img" alt="Image" ></b-card-img>
|
||||
<b-card-footer><b-button variant="danger">Eliminar</b-button></b-card-footer>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<EditarLibro />
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
|
||||
</b-container>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./../components/header.vue";
|
||||
import Footer from "./../components/footer.vue";
|
||||
import axios from "axios";
|
||||
import config from "../config/config.js";
|
||||
import EditarLibro from './../components/editarLibro.vue';
|
||||
export default {
|
||||
name: "panelAdmin",
|
||||
components: {
|
||||
Header,
|
||||
Footer,
|
||||
EditarLibro,
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user