amikhalev/sprinklers3
1
1
Fork 0
Code Issues 9 Pull Requests 1 Releases Wiki Activity

improved section run progress display, especially with pausing and unpausing

Browse Source
This commit is contained in:
Alex Mikhalev 2018-06-29 11:54:49 -06:00
parent dbb5c37efe
commit ea00d497c6
4 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/SectionRunnerView.tsx
View File

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

2
common/Duration.ts
View File

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

2
common/sprinklers/SectionRunner.ts
View File

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

2
common/sprinklers/schema/index.ts
View File

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