nueva forma

package-lock.json

@@ -14770,6 +14770,11 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vue2-animate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue2-animate/-/vue2-animate-2.1.0.tgz",
+      "integrity": "sha512-OEuwx9Y2dmx3+hQ/K7zLc514v4xhc8tGDQl/ZTJh06r+/EG/oYQkhy2Fo4OOhDwiRJYFuTfkFhGlDtTnT4XGsw=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -17,7 +17,8 @@
     "i": "^0.3.6",
     "npm": "^6.4.1",
     "vue": "^2.5.17",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vue2-animate": "^2.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.1.1",

src/App.vue

@@ -1,11 +1,18 @@
 <template lang="pug">
   #app
-    router-view
+    um-header
+    transition(name="router-anim" enter-active-class="animated slideInLeft")
+      router-view
+    um-footer
 </template>
 
 <script>
+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>
 

src/api.js

@@ -1,7 +1,7 @@
 const api = {}
 
-// api.url = 'http://09e6c379.ngrok.io'
-api.url = 'http://venus.acatlan.unam.mx:3010'
+api.url = 'http://0e40ddb2.ngrok.io'
+// api.url = 'http://venus.acatlan.unam.mx:3010'
 api.isAuth = function () {
   if (window.localStorage.pcpumaT && window.localStorage.pcpumaU) {
     return true

src/layout/Carrito.vue

@@ -0,0 +1,131 @@
+<template lang="pug">
+  main
+    div.container
+      .columns
+        .column.is-8.is-offset-1
+          br
+          h1.is-size-1 Carritos
+      .columns
+        .column.is-3.is-offset-1
+          .field
+            .control.has-icons-left
+              input.input(v-model="search" placeholder="Buscar")
+              span.icon.is-small.is-left
+                font-awesome-icon(icon="search")
+        .column.is-2
+          .field
+            p.control.has-icons-left
+              span.select.is-fullwidth
+                select.is-fullwidth(v-model="tipo")
+                  option laptop
+                  option ipad
+                  option chromebook
+              span.icon.is-small.is-left
+                font-awesome-icon(icon="laptop")
+        .column.is-2
+          .field
+            p.control.has-icons-left
+              span.select.is-fullwidth
+                select.is-fullwidth(v-model="car")
+                  option(v-for="car in carrito") {{ car.carrito }}
+              span.icon.is-small.is-left
+                font-awesome-icon(icon="shopping-cart")
+      .columns
+        .column.is-10.is-offset-1
+          br
+          br
+          table.table.is-fullwidth.is-hoverable.is-narrow
+            thead
+              tr
+                th ID de Carrito
+                th Carrito
+                th No Serie
+                th No Inventario
+                th Tipo
+                th Editar
+                th Ver
+            tbody
+              tr(v-for="dt in filteredEquipo")
+                td {{dt["carritos.equipos.equipo_carrito"]}}
+                td {{dt["carritos.id"]}}
+                td {{dt["carritos.equipos.no_serie"]}}
+                td {{dt["carritos.equipos.no_inventario"]}}
+                td {{dt["carritos.equipos.equipo"]}}
+                td
+                  router-link.navbar-item(v-bind:to="'/equipo/'+dt.id")
+                    a.button.is-u-blue.is-outlined
+                      span.icon.is-small
+                        font-awesome-icon(icon="pen")
+                td
+                  router-link.navbar-item(v-bind:to="'/equipo/'+dt.id")
+                    a.button.is-u-blue.is-outlined
+                      span.icon.is-small
+                        font-awesome-icon(icon="eye")
+</template>
+
+<script>
+import UmHeader from '../layout/Header.vue'
+import UmFooter from '../layout/Footer.vue'
+import api from '../api'
+const axios = require('axios')
+export default {
+  components: {
+    UmFooter,
+    UmHeader
+  },
+  name: 'equipo',
+  data () {
+    return {
+      search: '',
+      msg: 'hola',
+      data: [],
+      carrito: [],
+      tipo: '',
+      car: ''
+    }
+  },
+  mounted () {
+    axios.get(api.url + '/equipo/?kiosko=' + window.localStorage.pcpumaK, {
+      headers: {
+        'token': window.localStorage.pcpumaT
+      }
+    })
+      .then(response => {
+        console.log(response)
+        this.data = response.data.data
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  },
+  methods: {
+    count: function (arr) {
+      return `${arr.length}`
+    }
+  },
+  computed: {
+    filteredEquipo: function () {
+      return this.data.filter(dat => {
+        if (this.tipo !== '') {
+          if (this.tipo !== dat['carritos.equipos.equipo']) {
+            return false
+          }
+        }
+        if (this.car !== '') {
+          if (parseInt(this.car) !== dat.carrito) {
+            return false
+          }
+        }
+        let reg = new RegExp(this.search)
+        if (reg.test(dat['carritos.equipos.no_serie']) || reg.test(dat['carritos.equipos.no_inventario']) || reg.test(dat.id)) {
+          return true
+        }
+        return false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>

src/layout/Equipo.vue

@@ -1,125 +1,10 @@
 <template lang="pug">
   main
-    um-header
-    div.container
-      .columns
-        .column.is-8.is-offset-1
-          br
-          h1.is-size-1 Equipo
-      .columns
-        .column.is-3.is-offset-1
-          .field
-            .control.has-icons-left
-              input.input(v-model="search" placeholder="Buscar")
-              span.icon.is-small.is-left
-                font-awesome-icon(icon="search")
-        .column.is-2
-          .field
-            p.control.has-icons-left
-              span.select.is-fullwidth
-                select.is-fullwidth(v-model="tipo")
-                  option laptop
-                  option ipad
-                  option chromebook
-              span.icon.is-small.is-left
-                font-awesome-icon(icon="laptop")
-        .column.is-2
-          .field
-            p.control.has-icons-left
-              span.select.is-fullwidth
-                select.is-fullwidth(v-model="car")
-                  option(v-for="car in carrito") {{ car.carrito }}
-              span.icon.is-small.is-left
-                font-awesome-icon(icon="shopping-cart")
-      .columns
-        .column.is-10.is-offset-1
-          br
-          br
-          table.table.is-fullwidth.is-hoverable.is-narrow
-            thead
-              tr
-                th Id
-                th Carrito
-                th Equipo
-                th N° Inventario
-                th N° Serie
-                th Editar
-                th Ver
-            tbody
-              tr(v-for="dt in filteredEquipo")
-                td {{dt.id}}
-                td {{dt.carrito}}
-                td {{dt.equipo}}
-                td {{dt.no_inventario}}
-                td {{dt.no_serie}}
-                td
-                  a.button.is-u-blue.is-outlined
-                    span.icon.is-small
-                      font-awesome-icon(icon="pen")
-                td
-                  a.button.is-u-blue.is-outlined
-                    span.icon.is-small
-                      font-awesome-icon(icon="eye")
-    um-footer
+    p {{$route.params.id}}
 </template>
 
 <script>
-import UmHeader from '../layout/Header.vue'
-import UmFooter from '../layout/Footer.vue'
-import api from '../api'
-const axios = require('axios')
 export default {
-  components: {
-    UmFooter,
-    UmHeader
-  },
-  name: 'equipo',
-  data () {
-    return {
-      search: '',
-      msg: 'hola',
-      data: [],
-      carrito: [],
-      tipo: '',
-      car: ''
-    }
-  },
-  mounted () {
-    axios.get(api.url + '/equipo', {
-      headers: {
-        'token': window.localStorage.pcpumaT
-      }
-    })
-      .then(response => {
-        console.log(response)
-        this.data = response.data.data
-        this.carrito = response.data.data2
-      })
-      .catch(error => {
-        console.log(error)
-      })
-  },
-  computed: {
-    filteredEquipo: function () {
-      return this.data.filter(dat => {
-        if (this.tipo !== '') {
-          if (this.tipo !== dat.equipo) {
-            return false
-          }
-        }
-        if (this.car !== '') {
-          if (parseInt(this.car) !== dat.carrito) {
-            return false
-          }
-        }
-        let reg = new RegExp(this.search)
-        if (reg.test(dat['no_serie']) || reg.test(dat['no_inventario']) || reg.test(dat.id)) {
-          return true
-        }
-        return false
-      })
-    }
-  }
 }
 </script>
 

src/layout/Header.vue

@@ -5,7 +5,7 @@
     div.navbar-menu
       div.navbar-start
         router-link.navbar-item(to="/") Inicio
-        router-link.navbar-item(to="/equipo") Equipos
+        router-link.navbar-item(to="/carrito") Carrito
         router-link.navbar-item(to="/usuario") Usuarios
       div.navbar-end
         div.navbar-item
@@ -20,6 +20,14 @@ export default {
       window.localStorage.removeItem('pcpumaU')
       this.$router.push('login')
     }
+  },
+  computed: {
+    login: function () {
+      if (window.localStorage.pcpumaT) {
+        return true
+      }
+      return false
+    }
   }
 }
 </script>

src/layout/Inicio.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
   main
-    um-header
     section
       .container
         br
@@ -17,7 +16,6 @@
         div.columns
           .column.is-8.is-offset-2
             equipo
-    um-footer
 </template>
 
 <script>

src/layout/Login.vue

@@ -54,6 +54,7 @@ export default {
           console.log(response.data.data)
           window.localStorage.pcpumaT = response.data.data.token
           window.localStorage.pcpumaU = response.data.data.usuario
+          window.localStorage.pcpumaK = response.data.data.id
           this.$router.push('/')
         })
         .catch(error => {

src/layout/Usuario.vue

@@ -1,8 +1,6 @@
 <template lang="pug">
   main
-    um-header
     h1 Usuario
-    um-footer
 </template>
 
 <script>

src/routes.js

@@ -1,14 +1,16 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Equipo from './layout/Equipo.vue'
+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'
 const routes = [
   { path: '/', component: Inicio, name: 'inicio' },
-  { path: '/equipo', component: Equipo, name: 'equipo' },
+  { path: '/carrito', component: Carrito, name: 'carrito' },
   { path: '/login', component: Login, name: 'login' },
-  { path: '/usuario', component: Usuario, name: 'usuario' }
+  { path: '/usuario', component: Usuario, name: 'usuario' },
+  { path: '/equipo/:id', component: Equipo, name: 'equipo' }
 ]
 Vue.use(VueRouter)