3 Commits

Author SHA1 Message Date
Marcorv6 88b67420dc router 2020-10-06 22:05:01 -05:00
Marcorv6 ae37b32845 Primer avance 2020-10-06 22:01:38 -05:00
Marcorv6 02130c107a Hola 2020-09-29 22:30:35 -05:00
12 changed files with 869 additions and 87 deletions
+151 -80
View File
@@ -1054,6 +1054,32 @@
"to-fast-properties": "^2.0.0"
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.32",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
"integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.32",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
"integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.32"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.1",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
"integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.32"
}
},
"@fortawesome/vue-fontawesome": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz",
"integrity": "sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg=="
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1744,17 +1770,6 @@
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
"dev": true
},
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
"dev": true,
"optional": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1781,34 +1796,6 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1830,25 +1817,6 @@
"path-exists": "^4.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1913,16 +1881,6 @@
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1939,18 +1897,6 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
@@ -8018,6 +7964,12 @@
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
"dev": true
},
"klona": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
"integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
"dev": true
},
"last-run": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/last-run/-/last-run-1.1.1.tgz",
@@ -11364,6 +11316,38 @@
}
}
},
"sass-loader": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.2.tgz",
"integrity": "sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==",
"dev": true,
"requires": {
"klona": "^2.0.3",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^2.7.1",
"semver": "^7.3.2"
},
"dependencies": {
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"semver": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
"integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
"dev": true
}
}
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -13298,6 +13282,88 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
"dev": true,
"optional": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-qrcode-reader": {
"version": "2.3.13",
"resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-2.3.13.tgz",
@@ -13309,6 +13375,11 @@
"webrtc-adapter": "7.7.0"
}
},
"vue-router": {
"version": "3.4.5",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",
"integrity": "sha512-ioRY5QyDpXM9TDjOX6hX79gtaMXSVDDzSlbIlyAmbHNteIL81WIVB2e+jbzV23vzxtoV0krdS2XHm+GxFg+Nxg=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
+7 -1
View File
@@ -8,6 +8,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/vue-fontawesome": "^2.0.0",
"axios": "^0.20.0",
"bootstrap": "^4.5.2",
"bootstrap-vue": "^2.17.3",
@@ -16,7 +19,8 @@
"sweetalert2": "^10.3.5",
"validator": "^13.1.17",
"vue": "^2.6.11",
"vue-qrcode-reader": "^2.3.13"
"vue-qrcode-reader": "^2.3.13",
"vue-router": "^3.4.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
@@ -28,6 +32,8 @@
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-sass": "^4.1.0",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
+54 -6
View File
@@ -1,14 +1,62 @@
<template>
<div id="app">
<p>hol</p>
</div>
<router-view></router-view>
</template>
<script>
import validator from 'validator'
//import axios from 'axios'
//import Swal from 'sweetalert2'
export default {
name: "App",
};
data() {
return { password: '', noCuenta: '' }
},
methods: {
mostrarBoton() {
if (this.password && this.noCuenta) return true
return false
},
login() {
},
esNumero(numero) {
const ultimaLetra = numero.length - 1
if (numero && !validator.isNumeric(numero[ultimaLetra]))
return numero.substr(0, ultimaLetra)
return numero
},
maxLength(str, max) {
if (str.length > max) return str.substr(0, max)
return str
}
},
watch: {
noCuenta() {
this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
this.noCuenta = this.esNumero(this.noCuenta)
this.noCuenta = this.maxLength(this.noCuenta, 9)
}
},
beforeCreate() {
if (
localStorage.getItem('noCuenta') &&
localStorage.getItem('nombreCompleto') &&
localStorage.getItem('tipoUsuario')
)
this.$router.push('./usuario')
else {
localStorage.removeItem('noCuenta')
localStorage.removeItem('nombreCompleto')
localStorage.removeItem('tipoUsuario')
}
}
}
</script>
<style></style>
<style scoped>
.btn .btn-primary{
color: BB8921;
}
</style>>
+101
View File
@@ -0,0 +1,101 @@
<template>
<div>
<b-button class="btn btn-light" v-b-toggle.sidebar-1>
<font-awesome-icon icon="bars" />
</b-button>
<b-sidebar id="sidebar-1" shadow>
<div class="px-3 py-2">
<b-navbar-nav class="navegacion" >
<div class="row">
<div class="col-4">
<font-awesome-icon icon="user" class="redonda d-inline" />
</div>
<div class="col-8">
<p class="h5 d-inline">{{name}}</p>
<p>Operador</p>
</div>
</div>
<br><br><br>
<b-nav-item :to="{name: 'Login'}">Inicio</b-nav-item>
<b-nav-item :to="{name: 'Prestamos'}">Prestamos</b-nav-item>
<b-nav-item :to="{name: 'Prestamos'}">Prestamo</b-nav-item>
<b-nav-item :to="{name: 'Prestamos'}">Devolución</b-nav-item>
<b-nav-item :to="{name: 'Prestamos'}">Equipos</b-nav-item>
<b-nav-item :to="{name: 'Usuarios'}">Usuarios</b-nav-item>
<b-dropdown id="dropdown" variant="white" class="m-2" text="Administrador">
<b-dropdown-item href="#">Operadores</b-dropdown-item>
<b-dropdown-item href="#">Carga Masiva</b-dropdown-item>
<b-dropdown-item href="#">Multas</b-dropdown-item>
</b-dropdown>
<b-button @click="cerrarSesion()" class="fixed-bottom boton" block>
<p class="px-4 py-2 mb-0">Cerrar Sesion</p>
</b-button>
</b-navbar-nav>
</div>
</b-sidebar>
</div>
</template>
<script>
export default {
data(){
return{
name: localStorage.getItem('nombreCompleto')
? localStorage.getItem('nombreCompleto')
: ''
}
},
methods:{
cerrarSesion() {
localStorage.removeItem('noCuenta')
localStorage.removeItem('nombreCompleto')
localStorage.removeItem('token')
localStorage.removeItem('tipoUsuario')
localStorage.removeItem('qrPedido')
localStorage.removeItem('qrOtorgado')
localStorage.removeItem('qrSalonPedido')
localStorage.removeItem('qrSalonOtorgado')
localStorage.removeItem('equipo')
localStorage.removeItem('salon')
localStorage.removeItem('idPrestamo')
localStorage.removeItem('horaMaxEntrega')
localStorage.removeItem('horaPedido')
localStorage.removeItem('dosHrs')
localStorage.removeItem('cincoMin')
this.$router.push('./')
}
}
}
</script>
<style scoped>
.m-2{
display: flex;
align-items: start;
}
.redonda{
width:50px;
height:50px;
border-radius:150px;
}
.navegacion{
margin: 5%;
}
.imgLogo{
width: 20px;
height: 20px;
padding-bottom: 4px;
}
.navbar-dark .navbar-nav .nav-link{
color:#bb8821
}
.boton{
background-color: #bb8821
}
.boton:hover{
background-color: #bb8821;
color:black;
}
</style>
+27
View File
@@ -0,0 +1,27 @@
<template>
<div class="tabla">
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
props:{
items: Array,
},
mounted:{
vencido(){
for(let i=0; i<this.items.length; i++)
if((this.items[i].fin - this.items[i].fin) > 2){
this.items[i]._rowVariant = 'danger';
}
}
}
}
</script>
<style scoped>
.tabla{
display: flex;
}
</style>
+8
View File
@@ -0,0 +1,8 @@
const config = {
// api: 'https://venus.acatlan.unam.mx/ss-pruebas/',
// api: 'https://12704064.ngrok.io/',
// api: 'http://localhost:3000/',
api: 'https://venus.acatlan.unam.mx/serviciosocial',
}
module.exports = config
+22
View File
@@ -1,8 +1,30 @@
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faSearch,
faBars,
faUser
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSearch)
library.add(faBars)
library.add(faUser)
Vue.use(BootstrapVue)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
+114
View File
@@ -0,0 +1,114 @@
<template>
<section class="container absoluto">
<div class="row align-items-center full-height justify-content-center general">
<div class="col">
<div class="row justify-content-center">
<div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center">
<img
src="../../static/icon.png"
alt="logo_pcpuma"
class="img-fluid mb-3"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-10 col-sm-8 col-md-6 col-lg-4 form-group">
<input
type="text"
placeholder="Usuario"
class="form-control campo"
v-model="usuario"
min="0"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-10 col-sm-8 col-md-6 col-lg-4 form-group">
<input
type="password"
placeholder="Contraseña"
class="form-control campo"
v-model="password"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6 col-sm-5 col-md-4 col-lg-3">
<button
class="btn btn-primary btn-block"
@click="login()"
v-if="mostrarBoton()"
>
Iniciar Sesión
</button>
<button class="btn btn-primary disabled btn-block" disabled v-else>
Iniciar Sesión
</button>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import config from '../../config/config.js'
import axios from 'axios'
import Swal from 'sweetalert2'
export default {
data() {
return { usuario: '', password: '' }
},
methods: {
mostrarBoton() {
if (this.password && this.usuario) return true
return false
},
login() {
let data={
id: this.usuario,
secreto: this.password
}
axios
.post(`${config.api}login`,data)
.then(res => {
localStorage.setItem(
'nombreCompleto',
`${res.data.apellidoPaterno} ${res.data.apellidoMaterno} ${res.data.nombre}`
)
localStorage.setItem('noCuenta',this.noCuenta)
localStorage.setItem('tipoUsuario',res.data.tipoUsuario.id)
localStorage.setItem('token',res.data.token)
this.$router.push('./')
})
// eslint-disable-next-line no-unused-vars
.catch(err => {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Usuario o contraseña invalidos'
})
})
},
},
watch: {
usuario() {
this.usuario = this.maxLength(this.usuario, 40)
}
},
}
</script>
<style scoped>
.general{
margin-top: 15%;
}
.botonLogin{
color: #bb8821
}
</style>
+140
View File
@@ -0,0 +1,140 @@
<template>
<div>
<div class="container">
<div class="row titulo">
<div class="col-8">
<responsiveMenu
class="d-inline"
/>
<p class="h3 d-inline">Prestamos</p>
</div>
<div class="col-4">
<p class="d-inline nombre">{{nombre}}</p>
<font-awesome-icon icon="user" class="redonda d-inline" />
</div>
</div>
<div class="row buscador align-items-center full-height justify-content-center">
<div class="col-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<img
class="imagenBuscador"
src="https://maxcdn.icons8.com/Share/icon/p1em/Very_Basic/search1600.png"
>
</span>
</div>
<input
type="number"
class="form-control"
v-model="noCuenta"
placeholder="Buscar usuario"
min="0"
aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row align-items-center full-height justify-content-center">
<div class="col-2">
<b-button @click="tabla = true" variant="light" class="btn-block">Equipos</b-button>
</div>
<div class="col-2">
<b-button @click="tabla = false" variant="light" class="btn-block">Salas</b-button>
</div>
<div class="col-12">
<tablaPrestamos :items="Salas" v-if="tabla == false" ></tablaPrestamos>
<tablaPrestamos :items="Equipos" v-if="tabla == true" v-bind:nombre="name"></tablaPrestamos>
</div>
</div>
</div>
</div>
</template>
<script>
import validator from 'validator'
import responsiveMenu from '../../components/prestamos/menu'
import tablaPrestamos from '../../components/prestamos/tabla'
export default {
components: {
responsiveMenu,
tablaPrestamos,
},
data: () => ({
nombre: localStorage.getItem('nombreCompleto')
? localStorage.getItem('nombreCompleto')
: '',
noCuenta: '',
tabla: true,
Equipos: [
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: 11, fin:4, _rowVariant: ''},
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' },
{ Fecha: '10/11/20', usuario: '301568791', equipo: 2, carrito: 1, tipo: 'Laptop', inicio: '4:13', fin:'7:12' }
],
Salas: [
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
{ Fecha: '10/11/20', usuario: '301568791', numero: 25, tipo: 'Salón', inicio: '09:00', fin:'11:00' },
],
}),
methods:{
esNumero(numero) {
const ultimaLetra = numero.length - 1
if (numero && !validator.isNumeric(numero[ultimaLetra]))
return numero.substr(0, ultimaLetra)
return numero
},
maxLength(str, max) {
if (str.length > max) return str.substr(0, max)
return str
}
},
watch: {
noCuenta() {
this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
this.noCuenta = this.esNumero(this.noCuenta)
this.noCuenta = this.maxLength(this.noCuenta, 9)
}
},
}
</script>
<style scoped>
.titulo{
padding: 30px 10px;
}
.h3{
margin-left: 15px;
}
.buscador{
padding: 50px 20px;
border-radius: 50%;
}
.imagenBuscador{
height: 15px;
width: 15px;
}
.redonda{
width:50px;
height:50px;
border-radius:150px;
}
.nombre{
margin-right: 5%;
}
</style>
+217
View File
@@ -0,0 +1,217 @@
<template>
<div class="container">
<div class="row titulo ">
<div class="col-8">
<responsiveMenu
class="d-inline"
/>
<p class="h3 d-inline">Usuarios</p>
</div>
<div class="col-4">
<p class="d-inline nombre">{{nombre}}</p>
<font-awesome-icon icon="user" class="redonda d-inline" />
</div>
</div>
<div class="datosPersonales container">
<div class="buscador col-4">
<span>Usuario</span>
<div class="row">
<div class="col-10">
<input
type="number"
class="form-control d-inline"
v-model="noCuenta"
placeholder="Buscar usuario"
min="0" >
</div>
<div class="col-2">
<b-button class="botonBuscador">
<font-awesome-icon icon="search" />
</b-button>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div>
<span class="h5">Datos personales</span>
</div>
<br>
<div>
<span>Nombre: </span>
<span class="d-block">{{user.name}}</span>
</div>
<br>
<div>
<span>Carrera: </span>
<span class="d-block">{{user.carrera}}</span>
</div>
<br>
<div>
<span>Tipo: </span>
<span class="d-block">{{user.tipo}}</span>
</div>
</div>
<div class="col-4">
<span class="h5">Prestamos</span>
<br><br>
<div>
<span>#Prestamos:</span>
<span class="d-block">{{user.noPrestamos}}</span>
</div>
<br>
<div>
<span>Multa PC PUMA:</span>
<span class="d-block">{{user.multaPCPUMA}}</span>
</div>
<br>
<div>
<span>Multa red:</span>
<span class="d-block">{{user.multaRed}}</span>
</div>
</div>
<div class="col-4">
<span class="h5">Administrador</span>
<div class="Multa">
<br>
<div>
<span>Multa PC PUMA</span>
<br>
<span class="d-block">{{user.fechaMultaPCPUMA}}</span>
<br>
<b-button-group>
<b-button class="multar" variant="light" @click="user.multaPCPUMA = true">Multar</b-button>
<b-button class="quitar" variant="light" @click="user.multaPCPUMA = false">Quitar</b-button>
</b-button-group>
<br><br>
<span>Multa red</span>
<br>
<span class="d-block">{{user.fechaMultaRed}}</span>
<br>
<b-button-group>
<b-button class="multar" variant="light" @click="user.multaRed = true">Multar</b-button>
<b-button class="quitar" variant="light" @click="user.multaRed = false">Quitar</b-button>
</b-button-group>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<tablaPrestamos :items="user.prestamos"></tablaPrestamos>
</div>
</div>
</template>
<script>
import tablaPrestamos from '../../components/prestamos/tabla'
import validator from 'validator'
import responsiveMenu from '../../components/prestamos/menu'
export default {
components: {
tablaPrestamos,
responsiveMenu
},
data: () => ({
nombre:
localStorage.getItem('nombreCompleto')
? localStorage.getItem('nombreCompleto')
: '',
noCuenta: null,
user:{
name: 'Arturo Guerrero',
carrera: 'MAC',
tipo: 'Estudiante',
noPrestamos: 112,
multaPCPUMA: false,
multaRed: false,
fechaMultaPCPUMA: '10/10/2020',
fechaMultaRed: '10/10/2020',
prestamos: [
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
{fecha: '10/10/2020', accion: 41511232, operador: 2, tipo: 1, carrito: 'laptop', equipo: '4:13', multa: '7:12'},
]
},
}),
methods:{
esNumero(numero) {
const ultimaLetra = numero.length - 1
if (numero && !validator.isNumeric(numero[ultimaLetra]))
return numero.substr(0, ultimaLetra)
return numero
},
maxLength(str, max) {
if (str.length > max) return str.substr(0, max)
return str
}
},
watch: {
noCuenta() {
this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
this.noCuenta = this.esNumero(this.noCuenta)
this.noCuenta = this.maxLength(this.noCuenta, 9)
}
},
}
</script>
<style scoped>
.titulo{
padding: 30px 10px;
background: #f9f9f9;
margin-bottom: 2%;
}
.h3{
margin-left: 15px;
}
.buscador{
padding: 50px 20px;
border-radius: 50%;
}
.imagenBuscador{
height: 15px;
width: 15px;
}
.redonda{
width:40px;
height:40px;
border-radius:150px;
}
.nombre{
margin-right: 5%;
}
.multar{
color: green;
margin-right:20%;
}
.quitar{
color: red;
}
.datosPersonales{
border-radius:10px;
box-shadow:
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
padding-left: 3%;
padding-bottom: 3%;
}
.h5{
color: gray
}
.botonBuscador{
background-color: #bb8921;
}
</style>
+28
View File
@@ -0,0 +1,28 @@
import Vue from 'vue'
import Router from 'vue-router'
import Prestamos from './pages/prestamos/index.vue'
import Login from './pages/login/index.vue'
import Usuarios from './pages/usuarios/index.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/prestamos',
name: 'Prestamos',
component: Prestamos
},
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/usuarios',
name: 'Usuarios',
component: Usuarios
},
]
})
Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB