npm run build

src/App.vue

@@ -1,21 +1,20 @@
 <template lang="pug">
   #app
-    um-header(v-if="!['login'].includes($route.name)")
+    um-header(v-if="!['login','blacklist'].includes($route.name)")
     transition(name="router-anim" enter-active-class="animated slideInLeft")
       router-view
 </template>
 
 <script>
-import UmFooter from './layout/Footer.vue'
-import UmHeader from './layout/Header.vue'
-require('vue2-animate/dist/vue2-animate.min.css')
+import UmFooter from "./layout/Footer.vue";
+import UmHeader from "./layout/Header.vue";
+require("vue2-animate/dist/vue2-animate.min.css");
 export default {
-  name: 'app',
+  name: "app",
   components: { UmHeader, UmFooter }
-}
+};
 </script>
 
 <style lang="scss">
-@import './scss/main.scss';
-
+@import "./scss/main.scss";
 </style>

src/layout/Bans.vue

@@ -0,0 +1,122 @@
+<template lang="pug">
+  div
+    .columns
+      .column.is-10.is-offset-1
+        br
+        br
+        br
+        br
+        p.is-size-3 Blacklist
+        .field
+          .control
+            input.input(type="text" placeholder="Nombre" v-model="nombre")
+        .field
+          .control
+            input.input(type="text" placeholder="Cuenta" v-model="cuenta")
+        .field
+          .control
+            input.input(type="text" placeholder="Nacimiento" v-model="nacimiento")
+        .field
+          .control
+            input.input(type="text" placeholder="Motivo" v-model="motivo")
+        .field
+          .control
+            input.input(type="text" placeholder="Folio" v-model="folio")
+        .field
+          .control
+            button.button.is-info(v-on:click="registro") Enviar
+    .columns
+      .column.is-10.is-offset-1
+        table.table
+          thead
+            tr
+              td Nombre
+              td Cuenta
+              td Nacimiento
+              td Motivo
+              td Folio
+          tbody
+            tr(v-for="i in data")
+              td {{i.nombre}}
+              td {{i.cuenta}}
+              td {{i.nacimiento}}
+              td {{i.motivo}}
+              td 
+                .field
+                  .control
+                    input.input(type="text" placeholder="Folio" v-model="i.folio")
+              td
+                button.button.is-info( v-on:click="update(i.idBlacklist,i.folio)") Guardar
+
+</template>
+
+<script>
+import axios from "axios";
+import api from "../api";
+export default {
+  data() {
+    return {
+      data: "",
+      nombre: "",
+      cuenta: "",
+      nacimiento: "",
+      motivo: "",
+      folio: ""
+    };
+  },
+  methods: {
+    update: function(id, folio) {
+      console.log(id, folio);
+      let body = {
+        idBlacklist: id,
+        folio
+      };
+      axios
+        .put(api.url + "/blacklist", body)
+        .then(res => {
+          console.log(res.data);
+          this.trae();
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    registro: function() {
+      let body = {
+        nombre: this.nombre,
+        cuenta: this.cuenta,
+        nacimiento: this.nacimiento,
+        motivo: this.motivo,
+        folio: this.folio
+      };
+      console.log(body);
+      axios
+        .post(api.url + "/blacklist", body)
+        .then(res => {
+          console.log(res.data);
+          this.trae();
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    trae: function() {
+      axios
+        .get(api.url + "/blacklist")
+        .then(res => {
+          console.log(res.data);
+          this.data = res.data;
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
+  },
+  created() {
+    this.trae();
+  }
+};
+</script>
+
+<style>
+</style>

src/layout/Blacklist.vue

@@ -0,0 +1,49 @@
+<template lang="pug">
+  .columns
+    .column.is-10.is-offset-1
+      br
+      br
+      p.is-size-3 Blacklist
+      table.table
+        thead
+          tr
+            td Nombre
+            td Cuenta
+            td Nacimiento
+            td Motivo
+            td Folio
+        tbody
+          tr(v-for="i in data")
+            td {{i.nombre}}
+            td {{i.cuenta}}
+            td {{i.nacimiento}}
+            td {{i.motivo}}
+            td {{i.folio}}
+
+</template>
+
+<script>
+import axios from "axios";
+import api from "../api";
+export default {
+  data() {
+    return {
+      data: ""
+    };
+  },
+  created() {
+    axios
+      .get(api.url + "/blacklist")
+      .then(res => {
+        console.log(res.data);
+        this.data = res.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+};
+</script>
+
+<style>
+</style>

src/layout/Header.vue

@@ -9,6 +9,7 @@
         router-link.navbar-item(to="/carrito") Carrito
         router-link.navbar-item(to="/usuario") Usuarios
         router-link.navbar-item(to="/multa") Multas
+        router-link.navbar-item(v-if="$store.getters.permiso" to="/bans") Blacklist
       .navbar-end
         .navbar-item
           p {{`Bienvenido : ${this.usuario}`}}
@@ -20,27 +21,26 @@
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       env: process.env.NODE_ENV,
       usuario: this.$store.getters.usuario
-    }
+    };
   },
   methods: {
-    salir: function () {
-      this.$store.commit('close')
-      this.$router.push('login')
+    salir: function() {
+      this.$store.commit("close");
+      this.$router.push("login");
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
-  .navbar{
-    width: 100%;
-    border-bottom: #B08100 solid 5px;
-    box-shadow: 0px 13px 21px 2px rgba(0,0,0,0.21);
-    position:fixed;
-    top:0;
-
-  }
+.navbar {
+  width: 100%;
+  border-bottom: #b08100 solid 5px;
+  box-shadow: 0px 13px 21px 2px rgba(0, 0, 0, 0.21);
+  position: fixed;
+  top: 0;
+}
 </style>

src/layout/Login.vue

@@ -8,7 +8,7 @@
       .columns
         .column.is-4.is-offset-4.has-text-centered
           br
-          img(src="../assets/arqui.png" width="300px")
+          img(src="../assets/pcpuma.jpg" width="300px")
           br
           un-notification(v-if='this.status' v-bind:msj='this.err' status=true)
           br
@@ -36,52 +36,52 @@
 </template>
 
 <script>
-import UnNotification from '../components/general/Notificacion.vue'
-import api from '../api'
-const axios = require('axios')
+import UnNotification from "../components/general/Notificacion.vue";
+import api from "../api";
+const axios = require("axios");
 export default {
   components: {
     UnNotification
   },
-  data () {
+  data() {
     return {
-      user: '',
-      pass: '',
-      err: '',
+      user: "",
+      pass: "",
+      err: "",
       status: false,
-      kiosko: ''
-    }
+      kiosko: ""
+    };
   },
   methods: {
-    Login: function (event) {
-      if (event) event.preventDefault()
+    Login: function(event) {
+      if (event) event.preventDefault();
       axios({
-        method: 'post',
-        url: api.url + '/login',
+        method: "post",
+        url: api.url + "/login",
         data: {
           usuario: this.user,
           pass: this.pass
         }
       })
         .then(response => {
-          console.log(response.data)
-          console.log("kiosko",this.kiosko)
-          this.$store.commit('login', response.data)
-          this.$store.commit('kiosko', this.kiosko)
-          this.$router.push('/')
+          console.log(response.data);
+          console.log("kiosko", this.kiosko);
+          this.$store.commit("login", response.data);
+          this.$store.commit("kiosko", this.kiosko);
+          this.$router.push("/");
         })
         .catch(error => {
-          this.err = error.response.data.err
-          this.status = !error.response.data.status
-        })
+          this.err = error.response.data.err;
+          this.status = !error.response.data.status;
+        });
     }
   }
-}
+};
 </script>
 
 <style lang="css" scoped>
-.navbar{
-    border-bottom: #B08100 solid 5px;
-    box-shadow: 0px 13px 21px 2px rgba(0,0,0,0.21);
-  }
+.navbar {
+  border-bottom: #b08100 solid 5px;
+  box-shadow: 0px 13px 21px 2px rgba(0, 0, 0, 0.21);
+}
 </style>

src/routes.js

@@ -1,39 +1,46 @@
-import Vue from 'vue'
-import store from './store.js'
-import VueRouter from 'vue-router'
-import Carrito from './layout/Carrito.vue'
-import Inicio from './layout/Inicio.vue'
-import Login from './layout/Login.vue'
-import Usuario from './layout/Usuario.vue'
-import Equipo from './layout/Equipo.vue'
-import Multa from './layout/Multa.vue'
+import Vue from "vue";
+import store from "./store.js";
+import VueRouter from "vue-router";
+import Carrito from "./layout/Carrito.vue";
+import Inicio from "./layout/Inicio.vue";
+import Login from "./layout/Login.vue";
+import Usuario from "./layout/Usuario.vue";
+import Equipo from "./layout/Equipo.vue";
+import Multa from "./layout/Multa.vue";
+import Blacklist from "./layout/Blacklist.vue";
+import Bans from "./layout/Bans.vue";
 
 const routes = [
-  { path: '/', component: Inicio, name: 'inicio' },
-  { path: '/login', component: Login, name: 'login', meta: { isPublic: true } },
-  { path: '/carrito', component: Carrito, name: 'carrito' },
-  { path: '/usuario', component: Usuario, name: 'usuario' },
-  { path: '/equipo/', component: Equipo, name: 'equipo' },
-  { path: '/multa', component: Multa, name: 'multa' }
-]
-Vue.use(VueRouter)
+  { path: "/", component: Inicio, name: "inicio" },
+  { path: "/login", component: Login, name: "login", meta: { isPublic: true } },
+  { path: "/carrito", component: Carrito, name: "carrito" },
+  { path: "/usuario", component: Usuario, name: "usuario" },
+  { path: "/equipo/", component: Equipo, name: "equipo" },
+  { path: "/multa", component: Multa, name: "multa" },
+  { path: "/blacklist", component: Blacklist, name: "blacklist" },
+  { path: "/bans", component: Bans, name: "bans" }
+];
+Vue.use(VueRouter);
 
-const router = new VueRouter({ mode: 'history', routes })
+const router = new VueRouter({ mode: "history", routes });
 
-const isAuthenticated = function () {
-  return store.getters.isLoggedIn
-}
+const isAuthenticated = function() {
+  return store.getters.isLoggedIn;
+};
 
 router.beforeEach((to, from, next) => {
+  if (to.name === "blacklist") {
+    return next();
+  }
   if (!to.meta.isPublic && !isAuthenticated()) {
-    return next({ name: 'login' })
+    return next({ name: "login" });
   }
 
-  if (to.name === 'login' && isAuthenticated()) {
-    return next({ name: 'home' })
+  if (to.name === "login" && isAuthenticated()) {
+    return next({ name: "home" });
   }
 
-  return next()
-})
+  return next();
+});
 
-export default router
+export default router;