censo2020Front/src/views/User.vue

<template>
    <div>
        <b-modal id="session" ref="" hide-footer hide-header>
            <div class="d-block text-center">
                <h3>La sesión ha caducado</h3>
            </div>
            <b-button class="mt-3" variant="primary" block @click="$router.replace('/login')">¡Llévame al login!</b-button>
        </b-modal>

        <div class="container mt-5">
            <div class="justify-content-center d-flex">           
                <h1 class="justify-content-center">Sistema de censo</h1>
            </div>
                
            <button @click="changeView()" class="btn btn-info mt-4">
                <span v-if="pcView">Ver impresoras</span>
                <span v-else>Ver computadoras</span>
            </button>
            
            <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="Número de inventario"
                        />
                    </div>
                </div>

            </div>
            <div v-if="pcView" class="table-responsive table-fixed text-nowrap justify-content-md-center"
                style="max-height: 350px;">
                <table :class="['table', 'table-sm', 'text-center', { 'table-hover': admin(), 't-hov': admin() }]" style="font-size:14px">
                    <thead class="thead-light text-uppercase">
                        <tr>
                            <th v-for="pcHead in pcHeads" :key="pcHead" class="sticky-top">{{ pcHead }}</th>
                        </tr>
                    </thead>
                    <tbody class="overflow-auto thov"  v-for="item in respuesta" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)">
                            <td class="text-primary">{{ item.noInventario }}</td>
                            <td>{{ item.activoFijo }}</td>
                            <td>{{ item.modelo }}</td>
                            <td>{{ item.marca }}</td>
                            <td>{{ item.noSerie }}</td>
                            <td>{{ item.procesador }}</td>
                            <td>{{ item.hdd }}</td>
                            <td>{{ item.memoriasz }}</td>
                            <td>{{ item.memoria }}</td>
                            <td>{{ item.vMemoria }}</td>
                            <td>{{ item.graficos }}</td>
                            <td>{{ item.osname }}</td>
                            <td>{{ item.uResponsable }}</td>
                            <td>{{ item.ubicacion }}</td>
                            <td>{{ item.nombreResponsable }}</td>
                            <td>{{ item.uso }}</td>
                            <td>{{ item.noResguardo }}</td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <div class="text-center">
                    <b-spinner variant="primary" label="Spinning" v-if="loading"></b-spinner>
                </div>
            </div>

            <div v-else class="table-responsive table-fixed text-nowrap justify-content-md-center"
                id="myTableStyle">
                <table :class="['table', 'table-sm', 'text-center', { 't-hov': admin(),  'table-hover': admin()}]">
                    <thead class="thead-light text-uppercase">
                        <tr>
                            <th v-for="printerHead in printerHeads" :key="printerHead" class="sticky-top">{{ printerHead }}</th>
                        </tr>
                    </thead>
                    <tbody v-for="item in respuesta" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)">
                            <td class="text-primary">{{ item.noInventario }}</td>
                            <td>{{ item.tipo }}</td>
                            <td>{{ item.modelo }}</td>
                            <td>{{ item.marca }}</td>
                            <td>{{ item.noSerie }}</td>
                            <td>{{ item.descripcion }}</td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <div class="text-center">
                        <b-spinner variant="primary" label="Spinning" v-if="loading"></b-spinner>
                    </div>
            </div>
            
                <button 
                    v-on:click="onDescarga(respuesta)"
                    class="btn btn-lg btn-success mt-3">Descargar</button>
        </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 axios from 'axios';
import config from '../config/config';
/*import strinify from "csv-stringify";
import fs from "file-system";
*/
import MiXLSX from 'xlsx';

export default {
    data() {
        return {
            loading: null,
            pcView: true,
            alternativeView: 'Ver impresoras',
            pcHeads: [
                "Inventario",
                "Tipo",
                "Modelo",
                "Marca",
                "Serie",
                "Procesador",
                "ROM (GB)",
                "RAM (MB)",
                "Tipo de memoria",
                "Velocidad de memoria (MHz)",
                "Gráficos",
                "Sistema operativo",
                "Unidad responsable",
                "Ubicación",
                "Responsable",
                "Uso",
                "Resguardo"
            ],
            printerHeads: [
                "Inventario",
                "Tipo",
                "Modelo",
                "Marca",
                "Serie",
                "Descripción adicional"
            ],
            respuesta: [],
        }
    },

    created() {
        this.getComputers();
    },

    methods: {
        async getComputers() {
            this.loading = true;
            this.respuesta = [];
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/computers`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => {
                this.respuesta = res.data.equipo;
                this.loading = false;
            })
            .catch((error) => {
                if(error.response.status === 409) {
                    localStorage.clear();
                    this.$bvModal.show('session');
                }
            });
        },
        async getPrinters() {
            this.loading = true;
            this.respuesta = [];
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/printers`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => {
                this.respuesta = res.data.printers;
                this.loading = false;
            })
            .catch(error => {
                if(error.response.status === 409) {
                    localStorage.clear();
                    this.$bvModal.show('session');
                }
            });
        },
        watchRow(noInventario) {
            localStorage.setItem('noInventario', noInventario);
            if(this.pcView)
                this.$router.push('./updateEquip');
            else
                this.$router.push('./updatePrinter');
        },
        changeView() {
            this.loading = true;
            if (this.pcView) {
                this.pcView = !this.pcView;
                this.getPrinters();
            }
            else{
                this.pcView = !this.pcView;
                this.getComputers();
            }

        },
        admin() {
            // return !!window.localStorage.isAdmin;
            return JSON.parse(window.localStorage.isAdmin);
        },
        onDescarga(datos){
            console.log("Descargar");
            let miDato = MiXLSX.utils.json_to_sheet(datos);
            const LibroTrabajo = MiXLSX.utils.book_new();
            MiXLSX.utils.book_append_sheet(LibroTrabajo, miDato, "SalidaFalsa");
            MiXLSX.writeFile(LibroTrabajo, "SalidaFalsa.xlsx");
            console.log("Terminado");
            return JSON.parse(localStorage.isAdmin);
        }
    },
}
</script>

<style scoped>
.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;
}

#myTableStyle {
    max-height: 350px;
    font-size: 14px;
}

.black {
    background-color: black;
}

.red {
    background-color: red;
}
</style>