From ea00d497c6cd0bf6511dd703fbdc25c7d132018b Mon Sep 17 00:00:00 2001
From: Alex Mikhalev <alexmikhalevalex@gmail.com>
Date: Fri, 29 Jun 2018 11:54:49 -0600
Subject: [PATCH] improved section run progress display, especially with
 pausing and unpausing

---
 app/components/SectionRunnerView.tsx | 18 +++++++++++-------
 common/Duration.ts                   |  2 +-
 common/sprinklers/SectionRunner.ts   |  2 ++
 common/sprinklers/schema/index.ts    |  2 ++
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/components/SectionRunnerView.tsx b/app/components/SectionRunnerView.tsx
index 91e7150..163bab4 100644
--- a/app/components/SectionRunnerView.tsx
+++ b/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) {
-            running = true;
+        if (startTime != null) {
+            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.duration;
+            const percentage = elapsed / run.totalDuration;
             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">
diff --git a/common/Duration.ts b/common/Duration.ts
index 6c64e30..9d4ed01 100644
--- a/common/Duration.ts
+++ b/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`;
     }
 }
diff --git a/common/sprinklers/SectionRunner.ts b/common/sprinklers/SectionRunner.ts
index a05a90a..6f875ed 100644
--- a/common/sprinklers/SectionRunner.ts
+++ b/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;
diff --git a/common/sprinklers/schema/index.ts b/common/sprinklers/schema/index.ts
index 5589286..32a1a40 100644
--- a/common/sprinklers/schema/index.ts
+++ b/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,
     },
 };