Prepare Printer page

package-lock.json

@@ -1439,6 +1439,19 @@
         "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": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -4533,6 +4546,89 @@
         "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": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -4990,6 +5086,15 @@
         "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": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.5.tgz",
@@ -5263,10 +5368,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@mdi/font": "7.0.96",
+        "apexcharts": "^3.41.0",
         "pinia": "^2.0.23",
         "roboto-fontface": "*",
         "vue": "^3.2.0",
         "vue-router": "^4.0.0",
+        "vue3-apexcharts": "^1.4.1",
         "vuetify": "^3.0.0",
         "webfontloader": "^1.0.0"
       },

src/controllers/PrinterStatusController.ts

@@ -2,6 +2,7 @@ import { Router, Request, Response } from 'express'
 import { prisma } from '../prisma.js'
 import { PrinterStatusService } from '../services/PrinterStatusService.js'
 import { hasRolesMiddleware } from '../middlewares/hasRolesMiddleware.js'
+import { distributedCopy } from '../utils/distributedCopy.js'
 
 const router = Router()
 
@@ -15,10 +16,33 @@ class PrinterStatusController {
 
     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.post('/update', PrinterStatusController.update)
+router.get('/:printerId', PrinterStatusController.status)
 
 export default router

src/server.ts

@@ -3,7 +3,6 @@ import bodyParser from 'body-parser'
 import cors from 'cors'
 
 import { populateUserMiddleware } from './middlewares/populateUserMiddleware.js'
-import { authMiddleware } from './middlewares/authMiddleware.js'
 import { loggerMiddleware } from './middlewares/loggerMiddleware.js'
 
 import LoginRouter from './controllers/LoginController.js'
@@ -21,7 +20,7 @@ app.use('/api', bodyParser.json())
 
 app.use('/api/login', LoginRouter)
 app.use('/api/printer', PrinterRouter)
-app.use('/api/printer-status', PrinterStatusRouter)
+app.use('/api/status', PrinterStatusRouter)
 app.use('/api/discovery', PrinterDiscoveryRouter)
 
 app.use('/', express.static('public'))

web/package.json

@@ -9,10 +9,12 @@
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
+    "apexcharts": "^3.41.0",
     "pinia": "^2.0.23",
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
+    "vue3-apexcharts": "^1.4.1",
     "vuetify": "^3.0.0",
     "webfontloader": "^1.0.0"
   },

web/src/components/PrinterCard.vue

@@ -1,7 +1,11 @@
 <template>
-  <v-card variant="outlined" class="printer-card">
-    <div class="d-flex align-center">
-      <div class="flex-shrink-1 fill-height" style="width: 128px">
+  <v-card
+    variant="outlined"
+    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-if="printerAlert"
           class="ma-1 alert"
@@ -10,8 +14,8 @@
           size="large"
         />
         <printer-img class="pa-2" :model="printer.model" />
-      </div>
-      <div>
+      </v-col>
+      <v-col cols="4">
         <v-list density="compact">
           <v-list-item>
             <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>
         </v-list>
-      </div>
-      <div class="flex-grow-1">
+      </v-col>
+      <v-col cols="6" align-self="center">
         <v-list density="compact">
           <v-list-item>
             <v-list-item-title>
@@ -162,12 +166,13 @@
             </v-list-item-subtitle>
           </v-list-item>
         </v-list>
-      </div>
-    </div>
+      </v-col>
+    </v-row>
   </v-card>
 </template>
 <script lang="ts" setup>
 import PrinterImg from '@/components/PrinterImg.vue'
+
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -189,7 +194,7 @@ const printerAlert = computed(() => {
 
 <style scoped>
 .printer-card {
-  border-color: #efefef;
+  border-color: #555;
 }
 
 .alert {

web/src/components/PrinterChart.vue

@@ -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>

web/src/layouts/default/View.vue

@@ -29,6 +29,14 @@
         hide-details
       />
       <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-avatar

web/src/main.ts

@@ -7,6 +7,8 @@
 // Components
 import App from './App.vue'
 
+import VueApexCharts from 'vue3-apexcharts'
+
 // Composables
 import { createApp } from 'vue'
 
@@ -17,4 +19,6 @@ const app = createApp(App)
 
 registerPlugins(app)
 
+app.use(VueApexCharts)
+
 app.mount('#app')

web/src/router/index.ts

@@ -19,7 +19,7 @@ const routes = [
     component: () => import('@/layouts/default/Default.vue'),
     children: [
       {
-        path: '',
+        path: 'home',
         name: 'Home',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
@@ -27,6 +27,15 @@ const routes = [
         component: () =>
           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(.*)*',

web/src/views/Printer.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Hello</div>
+</template>