improved section run progress display, especially with pausing and unpausing

app/components/SectionRunnerView.tsx

@@ -82,25 +82,29 @@ class SectionRunView extends React.Component<{
 
     render() {
         const { run, sections } = this.props;
-        let now = this.state.now;
+        const startTime = run.unpauseTime ? run.unpauseTime : run.startTime;
+        const now = this.state.now;
         const section = sections[run.section];
         const duration = Duration.fromSeconds(run.duration);
         const cancel = run.cancel;
-        const description = `'${section.name}' for ${duration.toString()}`;
         let running: boolean = false; // tslint:disable-line:no-unused-variable
         let paused: boolean = false;
         let progressBar: React.ReactNode | undefined;
-        if (run.startTime != null) {
+        if (startTime != null) {
-            running = true;
+            let elapsed = (run.totalDuration - run.duration);
             if (run.pauseTime) {
-                now = run.pauseTime.valueOf();
                 paused = true;
+            } else {
+                running = true;
+                elapsed += (now - startTime.valueOf()) / 1000;
             }
-            const elapsed = (now.valueOf() - run.startTime.valueOf()) / 1000;
+            const percentage = elapsed / run.totalDuration;
-            const percentage = elapsed / run.duration;
             progressBar =
                 <Progress color={paused ? "yellow" : "blue"} size="tiny" percent={percentage * 100}/>;
         }
+        const description = `'${section.name}' for ${duration.toString()}` +
+            (paused ? " (paused)" : "") +
+            (running ? " (running)" : "");
         return (
             <Segment className="sectionRun">
                 <div className="flex-horizontal-space-between">

common/Duration.ts

@@ -36,6 +36,6 @@ export class Duration {
     }
 
     toString(): string {
-        return `${this.minutes}M ${this.seconds}S`;
+        return `${this.minutes}M ${this.seconds.toFixed(1)}S`;
     }
 }

common/sprinklers/SectionRunner.ts

@@ -5,9 +5,11 @@ export class SectionRun {
     readonly sectionRunner: SectionRunner;
     readonly id: number;
     section: number;
+    totalDuration: number = 0;
     duration: number = 0;
     startTime: Date | null = null;
     pauseTime: Date | null = null;
+    unpauseTime: Date | null = null;
 
     constructor(sectionRunner: SectionRunner, id: number = 0, section: number = 0) {
         this.sectionRunner = sectionRunner;

common/sprinklers/schema/index.ts

@@ -34,9 +34,11 @@ export const sectionRun: ModelSchema<s.SectionRun> = {
     props: {
         id: primitive(),
         section: primitive(),
+        totalDuration: common.duration,
         duration: common.duration,
         startTime: common.date,
         pauseTime: common.date,
+        unpauseTime: common.date,
     },
 };