Display current and remaining job time

package-lock.json

@@ -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",

package.json

@@ -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",

src/PrinterCard.vue

@@ -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 }}%
+          {{ status.progress.completion.toFixed(2) }}%
-        <progress
+          <progress :value="status.progress.completion" max="100"></progress>
-          v-if="status.progress.completion"
+        </div>
-          :value="status.progress.completion"
+        <div>
-          max="100"
+          Job Time: {{ formatDuration(status.progress.printTime) }} elapsed,
-        >
+          {{ formatDuration(status.progress.printTimeLeft) }} left
-          {{ status.progress.completion }}%
+        </div>
-        </progress>
-        <span v-else> - </span>
       </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>