adam.goldsmith/PrinterStatus
2
0
Fork 0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-24 00:13:48 -05:00
Code Issues 1 Releases Wiki Activity

Use bootstrap progress bar instead of HTML progress bar

Browse Source
This commit is contained in:
Adam Goldsmith 2021-11-04 23:49:54 -04:00
parent 5b53c9b7e1
commit f10608ef63
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/PrinterCard.vue
View File

@ -12,10 +12,24 @@
<div>{{ status.state.text }}</div> <div>{{ status.state.text }}</div>
<div>Job File Name: {{ status.job.file.name || 'None' }}</div> <div>Job File Name: {{ status.job.file.name || 'None' }}</div>
<div v-if="status.progress.completion"> <div v-if="status.progress.completion">
<div> <div class="d-flex">
Job Completion: Job Completion:
{{ status.progress.completion.toFixed(2) }}% <div class="progress flex-fill ms-2" style="height: 2em">
<progress :value="status.progress.completion" max="100"></progress> <div
class="progress-bar"
:class="{
'progress-bar-striped': status.state.flags.printing,
'progress-bar-animated': status.state.flags.printing,
}"
role="progressbar"
:style="{ width: status.progress.completion + '%' }"
:aria-valuenow="status.progress.completion.toFixed(2)"
aria-valuemin="0"
aria-valuemax="100"
>
{{ status.progress.completion.toFixed(2) }}%
</div>
</div>
</div> </div>
<div> <div>
Job Time: {{ formatDuration(status.progress.printTime) }} elapsed, Job Time: {{ formatDuration(status.progress.printTime) }} elapsed,