Toner level layout
This commit is contained in:
parent
f8031e0037
commit
3df3a3f400
|
@ -57,128 +57,37 @@
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" sm="6" align-self="center">
|
<v-col cols="12" sm="6" align-self="center" class="pa-4">
|
||||||
<v-list density="compact">
|
<toner-level-bar
|
||||||
<v-list-item>
|
:level="printer.status[0].tonerBlackLevel"
|
||||||
<v-list-item-title>
|
:model="printer.blackTonerModel"
|
||||||
<v-progress-linear
|
color="black"
|
||||||
:title="`${printer.status[0].tonerBlackLevel}%`"
|
/>
|
||||||
class="mb-1"
|
<toner-level-bar
|
||||||
height="6"
|
v-if="printer.status[0].tonerCyanLevel"
|
||||||
color="black"
|
:level="printer.status[0].tonerCyanLevel"
|
||||||
:model-value="printer.status[0].tonerBlackLevel"
|
:model="printer.cyanTonerModel"
|
||||||
></v-progress-linear>
|
color="cyan"
|
||||||
</v-list-item-title>
|
/>
|
||||||
<v-list-item-subtitle>
|
<toner-level-bar
|
||||||
{{ printer.blackTonerModel }}
|
v-if="printer.status[0].tonerMagentaLevel"
|
||||||
|
:level="printer.status[0].tonerMagentaLevel"
|
||||||
<v-chip
|
:model="printer.magentaTonerModel"
|
||||||
size="x-small"
|
color="magenta"
|
||||||
title="Nível do toner"
|
/>
|
||||||
variant="tonal"
|
<toner-level-bar
|
||||||
:color="
|
v-if="printer.status[0].tonerYellowLevel"
|
||||||
printer.status[0].tonerBlackLevel < 10
|
:level="printer.status[0].tonerYellowLevel"
|
||||||
? 'error'
|
:model="printer.yellowTonerModel"
|
||||||
: printer.status[0].tonerBlackLevel < 20
|
color="yellow"
|
||||||
? '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"
|
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</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 TonerLevelBar from '@/components/TonerLevelBar.vue'
|
||||||
|
|
||||||
import { computed } from '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