From 6edcfd4559ba2f6acc613354d613b9aa8e9a823a Mon Sep 17 00:00:00 2001
From: KIKIN <enrique.mg.cd@gmail.com>
Date: Sun, 9 Aug 2020 20:30:49 -0500
Subject: [PATCH] plantillas listas de las vistas principales

---
 package-lock.json           |  13 +++
 package.json                |   3 +-
 src/components/Footer.vue   |   8 +-
 src/components/Header.vue   |  44 +++----
 src/img/select-triangle.png | Bin 0 -> 309 bytes
 src/routes.js               |   8 +-
 src/views/AddEquip.vue      | 194 ++++++++++++++++++++++++++++++-
 src/views/UpdateEquip.vue   | 223 ++++++++++++++++++++++++++++++++++++
 src/views/User.vue          |  96 ++++++++++------
 9 files changed, 525 insertions(+), 64 deletions(-)
 create mode 100644 src/img/select-triangle.png
 create mode 100644 src/views/UpdateEquip.vue

diff --git a/package-lock.json b/package-lock.json
index e69913b..0a70062 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6484,6 +6484,11 @@
         "whet.extend": "~0.9.9"
       }
     },
+    "sweetalert2": {
+      "version": "9.17.1",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.17.1.tgz",
+      "integrity": "sha512-D/VE2lT/bKd64/RBglLUtQ+3nsftzjzIiP2iqN6zPzPwf+2djIY+4k8Bg430zxRUn4DkZzyIuU58q3n0J43lvw=="
+    },
     "tapable": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.9.tgz",
@@ -6931,6 +6936,14 @@
         "loader-utils": "^1.0.2"
       }
     },
+    "vue-sweetalert2": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-3.0.6.tgz",
+      "integrity": "sha512-uT+UrASTlwVCeNCZwPVdzN28KQfnVDEYXdfJr3OJwt77bWfcVZrNDOqezZq0Y45SWpkpYKjrQr1/mjieuriWmg==",
+      "requires": {
+        "sweetalert2": "9.x"
+      }
+    },
     "vue-template-compiler": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
diff --git a/package.json b/package.json
index b8514f6..38bc6a1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.16.0",
     "vue": "^2.5.11",
-    "vue-router": "^3.3.4"
+    "vue-router": "^3.3.4",
+    "vue-sweetalert2": "^3.0.6"
   },
   "browserslist": [
     "> 1%",
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 6cea3ca..f97f92a 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-    <footer id="footer">
+    <footer id="footer" v-if="['login'].includes($route.name)">
         <div class="separador"></div>
             <div class="contenedor-footer p-3">
                 <div class="cont-text-foo text-white text-center">
@@ -17,6 +17,12 @@
     </footer>
 </template>
 
+<script>
+export default {
+    
+}
+</script>
+
 <style scoped>
 * {
     margin: 0px;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index b02cbf3..069706a 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -21,30 +21,30 @@
                 </a>
             </div>
         </div>
-<!-- 
-        <div class="header-f">
-            <nav class="navbar navbar-expand-lg navbar-dark container">
-                <a class="navbar-brand">USUARIO</a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarNav">
-                    <ul class="navbar-nav">
-                        <li class="nav-item active">
-                            <a class="nav-link" href="#">Añadir equipo</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#">Consultar</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#"><span class="badge badge-danger p-2">Cerrar Sesión</span></a>
-                        </li>
-                    </ul>
+        
+        <div
+            class="header-f"
+            v-if="!['login'].includes($route.name)"
+        >
+        
+            <div class="container d-flex justify-content-between py-1">
+                
+                <div class="d-flex">
+                    <span class="text-white mr-3 my-auto mr-md-4">Nombre de Usuario</span>
+                    <div>
+                        <!-- <router-link to="login" class="text-white align-middle">Añadir equipo</router-link> -->
+                        <b-dropdown id="dropdown-left" text="Añadir " variant="info" class="m-2">
+                            <b-dropdown-item> <router-link to="addEquip" class="text-decoration-none text-body"> Computadora </router-link></b-dropdown-item>
+                            <b-dropdown-item> <router-link to="addPrinter" class="text-decoration-none text-body"> Impresora </router-link></b-dropdown-item>
+                        </b-dropdown>
+                    </div>
                 </div>
+                <div class="my-auto">
+                    <router-link to="./login" class="badge badge-danger py-2 px-3" style="font-size:14px, font-family: Arial">Cerrar sesión</router-link>
+                </div>
+            </div>
 
-            </nav>
         </div>
--->
 
     </header>
 </template>
@@ -86,7 +86,7 @@ export default {
 }
 
 .header-f {
-    padding: 0.5rem 0;
+    padding: 0.1rem 0;
     background-color: #bb8800;
 
 }
diff --git a/src/img/select-triangle.png b/src/img/select-triangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..c39c3ce671e54a23b25c97133f3d9ca6df23ed24
GIT binary patch
literal 309
zcmV-50m}Y~P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00006VoOIv0RI60
z0RN!9r;`8x0P0CZK~zYI?a@6hL{S)k;qM5Qs3bzBQP_e)JE5V#3T7MZf;CLV5;S%&
zg$+z{iy<PS5EUNHiCi(c?%X-W6u#=5=6%jj#Q!YB;1rc|Q{f~cB4uC_5nF}NJxM9`
zmh$Gla6BU7;d_NXJ_|k(9R1)hEEpgDx)0XzSRnp{jj4}@K>=XU_%pbfBYunY7qE@j
z4)HhaG{$Slc?aOERXhXB7|jsB!%Ax)BfEHS5&yv6Oz|3W*#fxe6wkma#trcbYn_3N
z95w*QbH!`O^_2Kkk$46+@m!0)pjQmY$U**(G4_kb7ka(`UN%>t45>@U00000NkvXX
Hu0mjf!u5k8

literal 0
HcmV?d00001

diff --git a/src/routes.js b/src/routes.js
index c0ff2d1..b6b7455 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import Login from './views/Login.vue'
 import User from './views/User.vue'
 import AddEquip from './views/AddEquip.vue'
+import UpdateEquip from './views/UpdateEquip.vue'
 
 const routes = [{
         path: '/',
@@ -24,7 +25,12 @@ const routes = [{
         path: '/addEquip',
         component: AddEquip,
         name: 'addEquip'
-    }
+    },
+    {
+        path: '/updateEquip',
+        component: UpdateEquip,
+        name: 'updateEquip'
+    },
 ]
 
 Vue.use(VueRouter)
diff --git a/src/views/AddEquip.vue b/src/views/AddEquip.vue
index 8d9b9f8..9c2b7fd 100644
--- a/src/views/AddEquip.vue
+++ b/src/views/AddEquip.vue
@@ -1,15 +1,199 @@
 <template>
-  <div>
-      <h1 class="serv-title m-4 text-center">Agregar un equipo</h1>
-  </div>
+  <div class="container mt-5">
+  
+            <div class="d-flex flex-column">           
+                <h1 class="text-center">Agregar equipo</h1>
+
+                <h3 class="text-left mt-4">Datos generales:</h3>
+                
+                <form
+                  class="mb-5 form-add-user pl-0"
+                  enctype="multipart/form-data"
+                >
+                  <input
+                    type="text"
+                    class="pb-2 my-4"
+                    placeholder="Número de inventario:"
+                  /> 
+
+                  <select class="py-2 my-4 sel-form-add">
+                    <option value="" hidden>Unidad responsable:</option>
+                    <option value="">Opcion 1</option>
+                  </select>
+                </form>
+
+              <div>
+                <h3>Computadora</h3>
+
+                <form
+                  class="mb-5 form-add-user pl-0"
+                  enctype="multipart/form-data"
+                >
+                  <select class="py-2 my-4 sel-form-add">
+                    <option value="" hidden>Sistema operativo:</option>
+                    <option value="">Opcion 1</option>
+                  </select>
+
+                  <input
+                    type="text"
+                    class="pb-2 my-4"
+                    placeholder="Memoria:"
+                  /> 
+
+                </form>
+
+              </div>
+              
+              <div class="">
+                
+                <button
+                    class="btn btn-lg btn-primary mr-4"
+                    @click="$router.push('./user')"
+                >
+                  Regresar
+                </button>
+                <button
+                  class="btn btn-lg btn-success"
+                  @click.prevent="addEquip()"  
+                >
+                  Añadir
+                </button>
+
+              </div>
+            </div>
+
+            <div
+                style="margin-top:200px; left: 0px; position: absolute;"
+                class="container-fluid px-0"
+            >
+                <footer id="footer" style="left: 0px;" class="text-center">
+                    <div class="separador"></div>
+                    <div class="contenedor-footer p-3">
+                        <div class="text-white mt-3" style="font-size: 11px;">
+                            <p>
+                                Hecho en México, todos los derechos reservados 2020.
+                                <br />
+                                Esta página puede ser reproducida con fines no
+                                lucrativos, siempre y cuando no se mutile, se cite
+                                la fuente
+                                <br />
+                                completa y su dirección electrónica. De otra forma,
+                                requiere permiso previo por escrito de la
+                                institución.
+                            </p>
+                        </div>
+                    </div>
+                </footer>
+            </div>
+  </div>  
 </template>
 
 <script>
-export default {
+import Swal from 'sweetalert2'
 
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    addEquip() {
+        Swal.fire({
+        title: '¿Está seguro de querer añadir este equipo?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Si, estoy seguro',
+        cancelButtonText: 'Cancelar'
+      }).then((result) => {
+        if (result.value) {
+          Swal.fire({
+            title: '¡Equipo añadido!',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  },
 }
 </script>
 
-<style scope>
+<style scoped>
+select {
+    padding: 10px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    display: block;
+    margin: 30px 0;
+    padding: 10px 50px 10px 10px;
+    background: url('../img/select-triangle.png') no-repeat 97% center !important;
+    background-color: #5c9cd8 !important;
+    cursor: pointer;
+    color: #fff;
+    border-radius: 2px;
+    border: none;
+    background-size: 12px !important;
+}
 
+.form-add-user input[type='text'],
+.form-add-user input[type='email'],
+.form-add-user input[type='date'] {
+    text-align: left;
+    width: 60%;
+    border: none;
+    border-bottom: 1.5px solid #000;
+    background-color: transparent;
+}
+
+.form-add-user input[type='text']:focus {
+    outline-color: transparent;
+}
+
+.sel-form-add {
+  width: 60%;
+}
+
+#footer {
+    bottom: 0px;
+    position: absolute;
+    width: 100%;
+}
+.separador {
+    width: 100%;
+    background: #2e5795;
+    height: 1rem;
+}
+
+.contenedor-footer {
+    width: 100%;
+}
+.cont-text-foo {
+    font-size: 12px;
+}
+footer {
+    background: #1b3d70;
+}
+@media (max-width: 577px) {
+    .form-add-user input[type='text'],
+    .form-add-user input[type='email'],
+    .form-add-user input[type='date'],
+    .sel-form-add{
+        width: 100%;
+    }
+}
+
+@media (min-width: 578px) and (max-width: 980px) {
+    .form-add-user input[type='text'],
+    .form-add-user input[type='email'],
+    .form-add-user input[type='date'],
+    .sel-form-add{
+        width: 75%;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/UpdateEquip.vue b/src/views/UpdateEquip.vue
new file mode 100644
index 0000000..4b52d67
--- /dev/null
+++ b/src/views/UpdateEquip.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="container mt-5">
+  
+            <div class="d-flex flex-column">           
+                <h1 class="text-center">Editar información del equipo</h1>
+
+                <h3 class="text-left mt-4">Datos generales:</h3>
+                
+                <form
+                  class="mb-5 form-add-user pl-0"
+                  enctype="multipart/form-data"
+                >
+                  <input
+                    type="text"
+                    class="pb-2 my-4"
+                    placeholder="Número de inventario:"
+                  /> 
+
+                  <select class="py-2 my-4 sel-form-add">
+                    <option value="" hidden>Unidad responsable:</option>
+                    <option value="">Opcion 1</option>
+                  </select>
+                </form>
+
+              <div>
+                <h3>Computadora</h3>
+
+                <form
+                  class="mb-5 form-add-user pl-0"
+                  enctype="multipart/form-data"
+                >
+                  <select class="py-2 my-4 sel-form-add">
+                    <option value="" hidden>Sistema operativo:</option>
+                    <option value="">Opcion 1</option>
+                  </select>
+
+                  <input
+                    type="text"
+                    class="pb-2 my-4"
+                    placeholder="Memoria:"
+                  /> 
+
+                </form>
+
+              </div>
+              
+              <div class="">
+                
+                <button
+                    class="btn btn-lg btn-primary"
+                    @click="$router.push('./user')"
+                >
+                  Regresar
+                </button>
+                <button
+                  class="btn btn-lg btn-danger mx-3"
+                  @click.prevent="deleteEquip()"  
+                >
+                  Eliminar
+                </button>
+                <button
+                  class="btn btn-lg btn-success mt-3 mt-sm-0"
+                  @click.prevent="saveChanges()"  
+                >
+                  Guardar cambios
+                </button>
+
+              </div>
+            </div>
+
+            <div
+                style="margin-top:200px; left: 0px; position: absolute;"
+                class="container-fluid px-0"
+            >
+                <footer id="footer" style="left: 0px;" class="text-center">
+                    <div class="separador"></div>
+                    <div class="contenedor-footer p-3">
+                        <div class="text-white mt-3" style="font-size: 11px;">
+                            <p>
+                                Hecho en México, todos los derechos reservados 2020.
+                                <br />
+                                Esta página puede ser reproducida con fines no
+                                lucrativos, siempre y cuando no se mutile, se cite
+                                la fuente
+                                <br />
+                                completa y su dirección electrónica. De otra forma,
+                                requiere permiso previo por escrito de la
+                                institución.
+                            </p>
+                        </div>
+                    </div>
+                </footer>
+            </div>
+  </div>
+</template>
+
+<script>
+import Swal from 'sweetalert2'
+
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    saveChanges() {
+        Swal.fire({
+        title: '¿Está seguro de querer guardar los cambios?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Si, estoy seguro',
+        cancelButtonText: 'Cancelar'
+      }).then((result) => {
+        if (result.value) {
+          Swal.fire({
+            title: '¡Información actualizada!',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    deleteEquip() {
+        Swal.fire({
+        title: '¿Está seguro de querer eliminar este equipo?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Si, estoy seguro',
+        cancelButtonText: 'Cancelar'
+      }).then((result) => {
+        if (result.value) {
+          Swal.fire({
+            title: '¡Información eliminada!',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style scoped>
+select {
+    padding: 10px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    display: block;
+    margin: 30px 0;
+    padding: 10px 50px 10px 10px;
+    background: url('../img/select-triangle.png') no-repeat 97% center !important;
+    background-color: #5c9cd8 !important;
+    cursor: pointer;
+    color: #fff;
+    border-radius: 2px;
+    border: none;
+    background-size: 12px !important;
+}
+
+.form-add-user input[type='text'],
+.form-add-user input[type='email'],
+.form-add-user input[type='date'] {
+    text-align: left;
+    width: 60%;
+    border: none;
+    border-bottom: 1.5px solid #000;
+    background-color: transparent;
+}
+
+.form-add-user input[type='text']:focus {
+    outline-color: transparent;
+}
+
+.sel-form-add {
+  width: 60%;
+}
+
+#footer {
+    bottom: 0px;
+    position: absolute;
+    width: 100%;
+}
+.separador {
+    width: 100%;
+    background: #2e5795;
+    height: 1rem;
+}
+
+.contenedor-footer {
+    width: 100%;
+}
+.cont-text-foo {
+    font-size: 12px;
+}
+footer {
+    background: #1b3d70;
+}
+@media (max-width: 577px) {
+    .form-add-user input[type='text'],
+    .form-add-user input[type='email'],
+    .form-add-user input[type='date'],
+    .sel-form-add{
+        width: 100%;
+    }
+}
+
+@media (min-width: 578px) and (max-width: 980px) {
+    .form-add-user input[type='text'],
+    .form-add-user input[type='email'],
+    .form-add-user input[type='date'],
+    .sel-form-add{
+        width: 75%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/User.vue b/src/views/User.vue
index d5415d3..4ee4a69 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -1,58 +1,37 @@
 <template>
     <div>
-        <div class="header-f">
-        
-            <div class="container d-flex justify-content-between py-1">
-                
-                <div class="d-flex">
-                    <span class="text-white mr-3 my-auto mr-md-4">Nombre de Usuario</span>
-                    <div>
-                        <!-- <router-link to="login" class="text-white align-middle">Añadir equipo</router-link> -->
-                        <b-dropdown id="dropdown-left" text="Añadir " variant="info" class="m-2">
-                            <b-dropdown-item> <router-link to="addEquip" class="text-decoration-none text-body"> Computadora </router-link></b-dropdown-item>
-                            <b-dropdown-item> <router-link to="addPrinter" class="text-decoration-none text-body"> Impresora </router-link></b-dropdown-item>
-                        </b-dropdown>
-                    </div>
-                </div>
-                <div class="my-auto">
-                    <a href="/">
-                        <span class="badge badge-danger py-2 px-3" style="font-size:14px, font-family: Arial">Cerrar sesión</span>
-                    </a>
-                </div>
-            </div>
 
-        </div>
-
-        <div class="container">
+        <div class="container mt-5">
             <div class="justify-content-center d-flex">           
                 <h1 style="text-align:center">Sistema de censo</h1>
             </div>
-        
-            <a href="#" class="btn bg-info">
-                <span class="text-white justi">Impresoras</span>
-            </a>
-            <div class="row" style="margin: 0px; margin-top:20px">
+                
+            <router-link to="#" class="btn btn-info mt-4">
+                Ver impresoras
+            </router-link>
+            
+            <div class="row m-0 mt-3 mb-4">
                 <div class="row">
                     <div class="col">
                         <input
                         type="text"
                         class="form-control input-login-form shadow-none"
-                        placeholder="Id: 2225491"
+                        placeholder="Número de inventario"
                         />
                     </div>
                 </div>
 
             </div>
             <div class="table-responsive table-fixed text-nowrap justify-content-md-center"
-                style="max-height: 130px;margin-top:30px; margin-bottom:15px">
+                style="max-height: 350px;">
                 <table class="table table-sm table-hover text-center" style="font-size:14px">
                     <thead class="thead-light text-uppercase">
                         <tr>
-                            <th v-for="tableHead in tableHeads">{{ tableHead }}</th>
+                            <th v-for="tableHead in tableHeads" class="sticky-top">{{ tableHead }}</th>
                         </tr>
                     </thead>
-                    <tbody class="overflow-auto"  v-for="(item, index) in inventory">
-                        <tr>
+                    <tbody class="overflow-auto t-hov"  v-for="(item, index) in inventory">
+                        <tr @click="watchRow()">
                             <td>
                                 <a href="#">{{ item.noInventario }}</a>
                             </td>
@@ -78,8 +57,32 @@
                     </tbody>
                 </table>
                 </div>
+                
+                <button class="btn btn-lg btn-success mt-3">Descargar</button>
+        </div>
 
-                <a class="btn btn-success" href="#" role="button">Descargar</a>
+        <div
+            style="margin-top:200px; left: 0px; position: absolute;"
+            class="container-fluid px-0"
+        >
+            <footer id="footer" style="left: 0px;" class="text-center">
+                <div class="separador"></div>
+                <div class="contenedor-footer p-3">
+                    <div class="text-white mt-3" style="font-size: 11px;">
+                        <p>
+                            Hecho en México, todos los derechos reservados 2020.
+                            <br />
+                            Esta página puede ser reproducida con fines no
+                            lucrativos, siempre y cuando no se mutile, se cite
+                            la fuente
+                            <br />
+                            completa y su dirección electrónica. De otra forma,
+                            requiere permiso previo por escrito de la
+                            institución.
+                        </p>
+                    </div>
+                </div>
+            </footer>
         </div>
 
     </div>
@@ -141,6 +144,9 @@ export default {
                     "resguardo": 5848
                 }
             }
+        },
+        watchRow() {
+            this.$router.push('./updateEquip')
         }
     },
 }
@@ -150,5 +156,27 @@ export default {
 .header-f {
     background-color: #bb8800;
 }
+.t-hov:hover {
+    cursor: pointer;
+}
+#footer {
+    bottom: 0px;
+    position: absolute;
+    width: 100%;
+}
+.separador {
+    width: 100%;
+    background: #2e5795;
+    height: 1rem;
+}
 
+.contenedor-footer {
+    width: 100%;
+}
+.cont-text-foo {
+    font-size: 12px;
+}
+footer {
+    background: #1b3d70;
+}
 </style>
\ No newline at end of file