Prepare Printer page
This commit is contained in:
parent
cf5575265d
commit
d818c8b935
107
package-lock.json
generated
107
package-lock.json
generated
|
@ -1439,6 +1439,19 @@
|
||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/apexcharts": {
|
||||||
|
"version": "3.41.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.41.0.tgz",
|
||||||
|
"integrity": "sha512-FJXA7NVjxs1q+ptR3b1I+pN8K/gWuXn+qLZjFz8EHvJOokdgcuwa/HSe5aC465HW/LWnrjWLSTsOQejQbQ42hQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.draggable.js": "^2.2.2",
|
||||||
|
"svg.easing.js": "^2.0.0",
|
||||||
|
"svg.filter.js": "^2.0.2",
|
||||||
|
"svg.pathmorphing.js": "^0.1.3",
|
||||||
|
"svg.resize.js": "^1.4.3",
|
||||||
|
"svg.select.js": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/arg": {
|
"node_modules/arg": {
|
||||||
"version": "4.1.3",
|
"version": "4.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
|
||||||
|
@ -4533,6 +4546,89 @@
|
||||||
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/svg.draggable.js": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.easing.js": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": ">=2.3.x"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.filter.js": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.js": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
|
||||||
|
},
|
||||||
|
"node_modules/svg.pathmorphing.js": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.4.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.resize.js": {
|
||||||
|
"version": "1.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||||
|
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.6.5",
|
||||||
|
"svg.select.js": "^2.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.resize.js/node_modules/svg.select.js": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.select.js": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.6.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/text-table": {
|
"node_modules/text-table": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||||
|
@ -4990,6 +5086,15 @@
|
||||||
"typescript": "*"
|
"typescript": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vue3-apexcharts": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.1.tgz",
|
||||||
|
"integrity": "sha512-96qP8JDqB9vwU7bkG5nVU+E0UGQn7yYQVqUUCLQMYWDuQyu2vE77H/UFZ1yI+hwzlSTBKT9BqnNG8JsFegB3eg==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"apexcharts": "> 3.0.0",
|
||||||
|
"vue": "> 3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vuetify": {
|
"node_modules/vuetify": {
|
||||||
"version": "3.3.5",
|
"version": "3.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.5.tgz",
|
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.5.tgz",
|
||||||
|
@ -5263,10 +5368,12 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "7.0.96",
|
"@mdi/font": "7.0.96",
|
||||||
|
"apexcharts": "^3.41.0",
|
||||||
"pinia": "^2.0.23",
|
"pinia": "^2.0.23",
|
||||||
"roboto-fontface": "*",
|
"roboto-fontface": "*",
|
||||||
"vue": "^3.2.0",
|
"vue": "^3.2.0",
|
||||||
"vue-router": "^4.0.0",
|
"vue-router": "^4.0.0",
|
||||||
|
"vue3-apexcharts": "^1.4.1",
|
||||||
"vuetify": "^3.0.0",
|
"vuetify": "^3.0.0",
|
||||||
"webfontloader": "^1.0.0"
|
"webfontloader": "^1.0.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { Router, Request, Response } from 'express'
|
||||||
import { prisma } from '../prisma.js'
|
import { prisma } from '../prisma.js'
|
||||||
import { PrinterStatusService } from '../services/PrinterStatusService.js'
|
import { PrinterStatusService } from '../services/PrinterStatusService.js'
|
||||||
import { hasRolesMiddleware } from '../middlewares/hasRolesMiddleware.js'
|
import { hasRolesMiddleware } from '../middlewares/hasRolesMiddleware.js'
|
||||||
|
import { distributedCopy } from '../utils/distributedCopy.js'
|
||||||
|
|
||||||
const router = Router()
|
const router = Router()
|
||||||
|
|
||||||
|
@ -15,10 +16,33 @@ class PrinterStatusController {
|
||||||
|
|
||||||
res.json({ message: 'Updating printer status' })
|
res.json({ message: 'Updating printer status' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static async status(req: Request, res: Response) {
|
||||||
|
const { printerId } = req.params
|
||||||
|
|
||||||
|
const { take = 32, days = 60 } = req.query
|
||||||
|
|
||||||
|
const gte = new Date(Date.now() - 1000 * 60 * 60 * 24 * Number(days))
|
||||||
|
|
||||||
|
const status = await prisma.printerStatus.findMany({
|
||||||
|
where: {
|
||||||
|
printerId: Number(printerId),
|
||||||
|
timestamp: {
|
||||||
|
gte
|
||||||
|
}
|
||||||
|
},
|
||||||
|
orderBy: { timestamp: 'desc' }
|
||||||
|
})
|
||||||
|
|
||||||
|
const distributedStatus = distributedCopy(status, Number(take))
|
||||||
|
|
||||||
|
res.json(distributedStatus)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
router.use(hasRolesMiddleware(['ADMIN', 'INSPECTOR']))
|
router.use(hasRolesMiddleware(['ADMIN', 'INSPECTOR']))
|
||||||
|
|
||||||
router.post('/update', PrinterStatusController.update)
|
router.post('/update', PrinterStatusController.update)
|
||||||
|
router.get('/:printerId', PrinterStatusController.status)
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|
|
@ -3,7 +3,6 @@ import bodyParser from 'body-parser'
|
||||||
import cors from 'cors'
|
import cors from 'cors'
|
||||||
|
|
||||||
import { populateUserMiddleware } from './middlewares/populateUserMiddleware.js'
|
import { populateUserMiddleware } from './middlewares/populateUserMiddleware.js'
|
||||||
import { authMiddleware } from './middlewares/authMiddleware.js'
|
|
||||||
import { loggerMiddleware } from './middlewares/loggerMiddleware.js'
|
import { loggerMiddleware } from './middlewares/loggerMiddleware.js'
|
||||||
|
|
||||||
import LoginRouter from './controllers/LoginController.js'
|
import LoginRouter from './controllers/LoginController.js'
|
||||||
|
@ -21,7 +20,7 @@ app.use('/api', bodyParser.json())
|
||||||
|
|
||||||
app.use('/api/login', LoginRouter)
|
app.use('/api/login', LoginRouter)
|
||||||
app.use('/api/printer', PrinterRouter)
|
app.use('/api/printer', PrinterRouter)
|
||||||
app.use('/api/printer-status', PrinterStatusRouter)
|
app.use('/api/status', PrinterStatusRouter)
|
||||||
app.use('/api/discovery', PrinterDiscoveryRouter)
|
app.use('/api/discovery', PrinterDiscoveryRouter)
|
||||||
|
|
||||||
app.use('/', express.static('public'))
|
app.use('/', express.static('public'))
|
||||||
|
|
|
@ -9,10 +9,12 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "7.0.96",
|
"@mdi/font": "7.0.96",
|
||||||
|
"apexcharts": "^3.41.0",
|
||||||
"pinia": "^2.0.23",
|
"pinia": "^2.0.23",
|
||||||
"roboto-fontface": "*",
|
"roboto-fontface": "*",
|
||||||
"vue": "^3.2.0",
|
"vue": "^3.2.0",
|
||||||
"vue-router": "^4.0.0",
|
"vue-router": "^4.0.0",
|
||||||
|
"vue3-apexcharts": "^1.4.1",
|
||||||
"vuetify": "^3.0.0",
|
"vuetify": "^3.0.0",
|
||||||
"webfontloader": "^1.0.0"
|
"webfontloader": "^1.0.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card variant="outlined" class="printer-card">
|
<v-card
|
||||||
<div class="d-flex align-center">
|
variant="outlined"
|
||||||
<div class="flex-shrink-1 fill-height" style="width: 128px">
|
class="printer-card"
|
||||||
|
:to="{ name: 'Printer', params: { id: printer.id } }"
|
||||||
|
>
|
||||||
|
<v-row no-gutters wrap>
|
||||||
|
<v-col cols="2" align-self="center">
|
||||||
<v-icon
|
<v-icon
|
||||||
v-if="printerAlert"
|
v-if="printerAlert"
|
||||||
class="ma-1 alert"
|
class="ma-1 alert"
|
||||||
|
@ -10,8 +14,8 @@
|
||||||
size="large"
|
size="large"
|
||||||
/>
|
/>
|
||||||
<printer-img class="pa-2" :model="printer.model" />
|
<printer-img class="pa-2" :model="printer.model" />
|
||||||
</div>
|
</v-col>
|
||||||
<div>
|
<v-col cols="4">
|
||||||
<v-list density="compact">
|
<v-list density="compact">
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-title>{{ printer.serialNumber }}</v-list-item-title>
|
<v-list-item-title>{{ printer.serialNumber }}</v-list-item-title>
|
||||||
|
@ -45,8 +49,8 @@
|
||||||
<v-list-item-subtitle>Última atualização</v-list-item-subtitle>
|
<v-list-item-subtitle>Última atualização</v-list-item-subtitle>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</div>
|
</v-col>
|
||||||
<div class="flex-grow-1">
|
<v-col cols="6" align-self="center">
|
||||||
<v-list density="compact">
|
<v-list density="compact">
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
|
@ -162,12 +166,13 @@
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</div>
|
</v-col>
|
||||||
</div>
|
</v-row>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import PrinterImg from '@/components/PrinterImg.vue'
|
import PrinterImg from '@/components/PrinterImg.vue'
|
||||||
|
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
@ -189,7 +194,7 @@ const printerAlert = computed(() => {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.printer-card {
|
.printer-card {
|
||||||
border-color: #efefef;
|
border-color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
|
|
53
web/src/components/PrinterChart.vue
Normal file
53
web/src/components/PrinterChart.vue
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<apexchart
|
||||||
|
type="line"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="chartSeries"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const chartOptions = ref({
|
||||||
|
chart: {
|
||||||
|
// id: 'chart',
|
||||||
|
type: 'line',
|
||||||
|
|
||||||
|
toolbar: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
curve: 'smooth'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
row: {
|
||||||
|
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const chartSeries = ref([
|
||||||
|
{
|
||||||
|
name: 'A',
|
||||||
|
data: [
|
||||||
|
{ x: 'test1', y: 32 },
|
||||||
|
{ x: 'test2', y: 35 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'B',
|
||||||
|
data: [
|
||||||
|
{ x: 'test1', y: 11 },
|
||||||
|
{ x: 'test2', y: 15 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
</script>
|
|
@ -29,6 +29,14 @@
|
||||||
hide-details
|
hide-details
|
||||||
/>
|
/>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
icon="mdi-refresh"
|
||||||
|
class="mr-1"
|
||||||
|
color="primary"
|
||||||
|
title="Atualizar"
|
||||||
|
@click="appStore.fetchPrinters"
|
||||||
|
:disabled="appStore.loadingPrinters"
|
||||||
|
></v-btn>
|
||||||
|
|
||||||
<v-chip color="primary">
|
<v-chip color="primary">
|
||||||
<v-avatar
|
<v-avatar
|
||||||
|
|
|
@ -7,6 +7,8 @@
|
||||||
// Components
|
// Components
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
|
import VueApexCharts from 'vue3-apexcharts'
|
||||||
|
|
||||||
// Composables
|
// Composables
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
|
@ -17,4 +19,6 @@ const app = createApp(App)
|
||||||
|
|
||||||
registerPlugins(app)
|
registerPlugins(app)
|
||||||
|
|
||||||
|
app.use(VueApexCharts)
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
|
@ -19,7 +19,7 @@ const routes = [
|
||||||
component: () => import('@/layouts/default/Default.vue'),
|
component: () => import('@/layouts/default/Default.vue'),
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: 'home',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
// route level code-splitting
|
// route level code-splitting
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
@ -27,6 +27,15 @@ const routes = [
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "home" */ '@/views/Home.vue')
|
import(/* webpackChunkName: "home" */ '@/views/Home.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: ':id',
|
||||||
|
name: 'Printer',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "home" */ '@/views/Printer.vue')
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/:pathMatch(.*)*',
|
path: '/:pathMatch(.*)*',
|
||||||
|
|
3
web/src/views/Printer.vue
Normal file
3
web/src/views/Printer.vue
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div>Hello</div>
|
||||||
|
</template>
|
Loading…
Reference in New Issue
Block a user