Toner levels
This commit is contained in:
Douglas Barone
parent
410555a40f
commit
73799af53f
|
|
@ -1,9 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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" />
|
||||
<title>Vuetify 3</title>
|
||||
</head>
|
||||
|
|
@ -12,5 +11,4 @@
|
|||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
BIN
web/public/favicon.png
Normal file
BIN
web/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -7,18 +7,10 @@
|
|||
<div>
|
||||
<v-list density="compact">
|
||||
<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-subtitle>{{ printer.model }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-icon icon="mdi-map"></v-icon>
|
||||
</template>
|
||||
|
||||
<v-list-item-title>
|
||||
{{ printer.location || '-' }}
|
||||
</v-list-item-title>
|
||||
|
|
@ -27,9 +19,14 @@
|
|||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-icon icon="mdi-clock"></v-icon>
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{
|
||||
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>
|
||||
{{ new Date(printer.updatedAt).toLocaleString() }}
|
||||
</v-list-item-title>
|
||||
|
|
@ -39,18 +36,19 @@
|
|||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<v-list density="compact">
|
||||
<v-list-subheader>Toner</v-list-subheader>
|
||||
<v-list-item>
|
||||
<v-list-item-title>
|
||||
<v-progress-linear
|
||||
:title="`${printer.status[0].tonerBlackLevel}%`"
|
||||
class="mb-1"
|
||||
height="5"
|
||||
height="6"
|
||||
color="black"
|
||||
:model-value="printer.status[0].tonerBlackLevel"
|
||||
/>
|
||||
></v-progress-linear>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
{{ printer.blackTonerModel }}
|
||||
|
||||
<v-chip
|
||||
size="x-small"
|
||||
title="Nível do toner"
|
||||
|
|
@ -67,12 +65,88 @@
|
|||
</v-chip>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item v-if="printer.status[0].tonerCyanLevel">
|
||||
<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-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>
|
||||
</v-list>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-progress-linear
|
||||
v-if="appStore.loadingPrinters"
|
||||
style="position: fixed; z-index: 9999"
|
||||
color="primary"
|
||||
indeterminate
|
||||
/>
|
||||
<v-app-bar :elevation="0">
|
||||
<v-text-field
|
||||
class="ml-2"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<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" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user