Toner levels

This commit is contained in:
Douglas Barone 2023-06-29 13:14:31 -04:00
parent 410555a40f
commit 73799af53f
6 changed files with 103 additions and 25 deletions

View File

@ -1,9 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vuetify 3</title> <title>Vuetify 3</title>
</head> </head>
@ -12,5 +11,4 @@
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
web/public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -7,18 +7,10 @@
<div> <div>
<v-list density="compact"> <v-list density="compact">
<v-list-item> <v-list-item>
<template v-slot:prepend>
<v-icon icon="mdi-printer"></v-icon>
</template>
<v-list-item-title>{{ printer.serialNumber }}</v-list-item-title> <v-list-item-title>{{ printer.serialNumber }}</v-list-item-title>
<v-list-item-subtitle>{{ printer.model }}</v-list-item-subtitle> <v-list-item-subtitle>{{ printer.model }}</v-list-item-subtitle>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<template v-slot:prepend>
<v-icon icon="mdi-map"></v-icon>
</template>
<v-list-item-title> <v-list-item-title>
{{ printer.location || '-' }} {{ printer.location || '-' }}
</v-list-item-title> </v-list-item-title>
@ -27,9 +19,14 @@
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<template v-slot:prepend> <v-list-item-title>
<v-icon icon="mdi-clock"></v-icon> {{
</template> new Intl.NumberFormat('pt-BR').format(printer.status[0].counter)
}}
</v-list-item-title>
<v-list-item-subtitle>Contador</v-list-item-subtitle>
</v-list-item>
<v-list-item>
<v-list-item-title> <v-list-item-title>
{{ new Date(printer.updatedAt).toLocaleString() }} {{ new Date(printer.updatedAt).toLocaleString() }}
</v-list-item-title> </v-list-item-title>
@ -39,18 +36,19 @@
</div> </div>
<div class="flex-grow-1"> <div class="flex-grow-1">
<v-list density="compact"> <v-list density="compact">
<v-list-subheader>Toner</v-list-subheader>
<v-list-item> <v-list-item>
<v-list-item-title> <v-list-item-title>
<v-progress-linear <v-progress-linear
:title="`${printer.status[0].tonerBlackLevel}%`" :title="`${printer.status[0].tonerBlackLevel}%`"
class="mb-1" class="mb-1"
height="5" height="6"
color="black"
:model-value="printer.status[0].tonerBlackLevel" :model-value="printer.status[0].tonerBlackLevel"
/> ></v-progress-linear>
</v-list-item-title> </v-list-item-title>
<v-list-item-subtitle> <v-list-item-subtitle>
{{ printer.blackTonerModel }} {{ printer.blackTonerModel }}
<v-chip <v-chip
size="x-small" size="x-small"
title="Nível do toner" title="Nível do toner"
@ -67,12 +65,88 @@
</v-chip> </v-chip>
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item v-if="printer.status[0].tonerCyanLevel">
<v-list-item-title> <v-list-item-title>
{{ printer.location || '-' }} <v-progress-linear
:title="`${printer.status[0].tonerCyanLevel}%`"
class="mb-1"
height="6"
:model-value="printer.status[0].tonerCyanLevel"
color="cyan"
/>
</v-list-item-title> </v-list-item-title>
<v-list-item-subtitle> <v-list-item-subtitle>
{{ printer.ip }} ({{ printer.network.name }}) {{ printer.cyanTonerModel }}
<v-chip
size="x-small"
title="Nível do toner"
variant="tonal"
:color="
printer.status[0].tonerCyanLevel < 10
? 'error'
: printer.status[0].tonerCyanLevel < 20
? 'warning'
: ''
"
>
{{ printer.status[0].tonerCyanLevel }}%
</v-chip>
</v-list-item-subtitle>
</v-list-item>
<v-list-item v-if="printer.status[0].tonerMagentaLevel">
<v-list-item-title>
<v-progress-linear
:title="`${printer.status[0].tonerMagentaLevel}%`"
class="mb-1"
height="6"
:model-value="printer.status[0].tonerMagentaLevel"
color="pink"
/>
</v-list-item-title>
<v-list-item-subtitle>
{{ printer.magentaTonerModel }}
<v-chip
size="x-small"
title="Nível do toner"
variant="tonal"
:color="
printer.status[0].tonerMagentaLevel < 10
? 'error'
: printer.status[0].tonerMagentaLevel < 20
? 'warning'
: ''
"
>
{{ printer.status[0].tonerMagentaLevel }}%
</v-chip>
</v-list-item-subtitle>
</v-list-item>
<v-list-item v-if="printer.status[0].tonerYellowLevel">
<v-list-item-title>
<v-progress-linear
:title="`${printer.status[0].tonerYellowLevel}%`"
class="mb-1"
height="6"
:model-value="printer.status[0].tonerYellowLevel"
color="yellow darken-3"
/>
</v-list-item-title>
<v-list-item-subtitle>
{{ printer.yellowTonerModel }}
<v-chip
size="x-small"
title="Nível do toner"
variant="tonal"
:color="
printer.status[0].tonerYellowLevel < 10
? 'error'
: printer.status[0].tonerYellowLevel < 20
? 'warning'
: ''
"
>
{{ printer.status[0].tonerYellowLevel }}%
</v-chip>
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item> </v-list-item>
</v-list> </v-list>

View File

@ -1,5 +1,11 @@
<template> <template>
<v-app> <v-app>
<v-progress-linear
v-if="appStore.loadingPrinters"
style="position: fixed; z-index: 9999"
color="primary"
indeterminate
/>
<v-app-bar :elevation="0"> <v-app-bar :elevation="0">
<v-text-field <v-text-field
class="ml-2" class="ml-2"

View File

@ -1,7 +1,7 @@
<template> <template>
<v-container fluid> <v-container fluid>
<v-row> <v-row>
<v-col cols="12" v-for="printer in appStore.printers" :key="printer.id"> <v-col cols="6" v-for="printer in appStore.printers" :key="printer.id">
<printer-card :printer="printer" /> <printer-card :printer="printer" />
</v-col> </v-col>
</v-row> </v-row>