Toner level layout
This commit is contained in:
Douglas Barone
parent
f8031e0037
commit
3df3a3f400
|
|
@ -57,128 +57,37 @@
|
|||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" align-self="center">
|
||||
<v-list density="compact">
|
||||
<v-list-item>
|
||||
<v-list-item-title>
|
||||
<v-progress-linear
|
||||
:title="`${printer.status[0].tonerBlackLevel}%`"
|
||||
class="mb-1"
|
||||
height="6"
|
||||
<v-col cols="12" sm="6" align-self="center" class="pa-4">
|
||||
<toner-level-bar
|
||||
:level="printer.status[0].tonerBlackLevel"
|
||||
:model="printer.blackTonerModel"
|
||||
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"
|
||||
variant="tonal"
|
||||
:color="
|
||||
printer.status[0].tonerBlackLevel < 10
|
||||
? 'error'
|
||||
: printer.status[0].tonerBlackLevel < 20
|
||||
? 'warning'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ printer.status[0].tonerBlackLevel }}%
|
||||
</v-chip>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="printer.status[0].tonerCyanLevel">
|
||||
<v-list-item-title>
|
||||
<v-progress-linear
|
||||
:title="`${printer.status[0].tonerCyanLevel}%`"
|
||||
class="mb-1"
|
||||
height="6"
|
||||
:model-value="printer.status[0].tonerCyanLevel"
|
||||
/>
|
||||
<toner-level-bar
|
||||
v-if="printer.status[0].tonerCyanLevel"
|
||||
:level="printer.status[0].tonerCyanLevel"
|
||||
:model="printer.cyanTonerModel"
|
||||
color="cyan"
|
||||
/>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
{{ 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"
|
||||
<toner-level-bar
|
||||
v-if="printer.status[0].tonerMagentaLevel"
|
||||
:level="printer.status[0].tonerMagentaLevel"
|
||||
:model="printer.magentaTonerModel"
|
||||
color="magenta"
|
||||
/>
|
||||
</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"
|
||||
<toner-level-bar
|
||||
v-if="printer.status[0].tonerYellowLevel"
|
||||
:level="printer.status[0].tonerYellowLevel"
|
||||
:model="printer.yellowTonerModel"
|
||||
color="yellow"
|
||||
/>
|
||||
</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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import PrinterImg from '@/components/PrinterImg.vue'
|
||||
import TonerLevelBar from '@/components/TonerLevelBar.vue'
|
||||
|
||||
import { computed } from 'vue'
|
||||
|
||||
|
|
|
|||
51
web/src/components/TonerLevelBar.vue
Normal file
51
web/src/components/TonerLevelBar.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="mb-1">
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1 align-self-center">
|
||||
<v-progress-linear
|
||||
:title="`${level}%`"
|
||||
:height="8"
|
||||
:color="bgColor"
|
||||
:model-value="level"
|
||||
/>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<v-chip
|
||||
size="x-small"
|
||||
class="justify-center align-self-center ml-1"
|
||||
style="width: 32px"
|
||||
:color="level < 10 ? 'error' : level < 20 ? 'waring' : 'grey'"
|
||||
variant="text"
|
||||
>
|
||||
{{ level }}%
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-grey-darken-1">
|
||||
{{ model }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
level: number
|
||||
color: 'black' | 'cyan' | 'magenta' | 'yellow'
|
||||
model: string
|
||||
}>()
|
||||
|
||||
const bgColor = computed(() => {
|
||||
switch (props.color) {
|
||||
case 'cyan':
|
||||
return 'cyan'
|
||||
case 'magenta':
|
||||
return 'pink'
|
||||
case 'yellow':
|
||||
return 'yellow-darken-1'
|
||||
default:
|
||||
return 'black'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user