2
0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-10 18:45:08 -05:00

Display current and remaining job time

This commit is contained in:
Adam Goldsmith 2020-09-25 18:55:58 -04:00
parent 393c8746a0
commit e2cecc27bf
3 changed files with 29 additions and 11 deletions

13
package-lock.json generated
View File

@ -4904,6 +4904,11 @@
"json-parse-better-errors": "^1.0.1"
}
},
"parse-ms": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz",
"integrity": "sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA=="
},
"parse5": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
@ -5438,6 +5443,14 @@
"dev": true,
"optional": true
},
"pretty-ms": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.1.tgz",
"integrity": "sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==",
"requires": {
"parse-ms": "^2.1.0"
}
},
"process": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",

View File

@ -22,6 +22,7 @@
"node-fetch": "^2.6.1",
"node-gyp": "^7.1.0",
"parcel-bundler": "^1.12.4",
"pretty-ms": "^7.0.1",
"ts-node": "^9.0.0",
"vue": "^2.6.12",
"vue-class-component": "^7.2.5",

View File

@ -5,17 +5,16 @@
<div v-if="status">
<div>{{ status.state.text }}</div>
<div>Job File Name: {{ status.job.file.name || 'None' }}</div>
<div v-if="status.progress.completion">
<div>
Job Completion:
{{ status.progress.completion }}%
<progress
v-if="status.progress.completion"
:value="status.progress.completion"
max="100"
>
{{ status.progress.completion }}%
</progress>
<span v-else> - </span>
{{ status.progress.completion.toFixed(2) }}%
<progress :value="status.progress.completion" max="100"></progress>
</div>
<div>
Job Time: {{ formatDuration(status.progress.printTime) }} elapsed,
{{ formatDuration(status.progress.printTimeLeft) }} left
</div>
</div>
<div>User: {{ status.job.user || '-' }}</div>
</div>
@ -24,6 +23,7 @@
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import prettyMilliseconds from 'pretty-ms';
import * as octoprint from './octoprint';
@ -31,6 +31,10 @@ import * as octoprint from './octoprint';
export default class PrinterCard extends Vue {
@Prop(String) readonly name!: string;
@Prop(Object) readonly status?: octoprint.CurrentOrHistoryPayload;
formatDuration(seconds: number): string {
return prettyMilliseconds(seconds * 1000);
}
}
</script>