diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-31 06:55:53 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-31 06:55:53 +0800 |
commit | 96fcbeaba6cb63cb25af34a7c8264bd30ddf91be (patch) | |
tree | 1f00c8ec6a05d6f0d11d1b9065554ab5d0f04037 | |
parent | d21487d0c07de307bbe9de459f8d3b00e15dc8dc (diff) | |
download | dexon-0x-contracts-96fcbeaba6cb63cb25af34a7c8264bd30ddf91be.tar dexon-0x-contracts-96fcbeaba6cb63cb25af34a7c8264bd30ddf91be.tar.gz dexon-0x-contracts-96fcbeaba6cb63cb25af34a7c8264bd30ddf91be.tar.bz2 dexon-0x-contracts-96fcbeaba6cb63cb25af34a7c8264bd30ddf91be.tar.lz dexon-0x-contracts-96fcbeaba6cb63cb25af34a7c8264bd30ddf91be.tar.xz dexon-0x-contracts-96fcbeaba6cb63cb25af34a7c8264bd30ddf91be.tar.zst dexon-0x-contracts-96fcbeaba6cb63cb25af34a7c8264bd30ddf91be.zip |
Showing time
-rw-r--r-- | packages/instant/src/components/simulated_progress_bar.tsx | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx index 5742cd474..e9e547cbe 100644 --- a/packages/instant/src/components/simulated_progress_bar.tsx +++ b/packages/instant/src/components/simulated_progress_bar.tsx @@ -43,6 +43,7 @@ export interface SimulatedProgressState { percentageDone: number; intervalId?: number; tickingStatus: TickingStatus; + elapsedTimeMs: number; } export class SimulatedProgressBar extends React.Component<SimulatedProgressBarProps, SimulatedProgressState> { public constructor(props: SimulatedProgressBarProps) { @@ -59,6 +60,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr percentageDone: 0, intervalId, tickingStatus: { runState: TickingRunState.Running }, + elapsedTimeMs: 0, }; } @@ -98,13 +100,15 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr // TODO: Consider moving to seperate component const estimatedTimeSeconds = Math.ceil((this.props.expectedEndTimeUnix - this.props.startTimeUnix) / 1000); + const elapsedTimeSeconds = Math.floor(this.state.elapsedTimeMs / 1000); return ( <Container padding="20px 20px 0px 20px" width="100%"> <Container marginBottom="5px"> {/* TODO: consider moving to separate component */} <Flex justify="space-between"> + {/* TODO: should do nice display of these (i.e. 'minutes' and 00:xx) */} <Text>Est. Time ({estimatedTimeSeconds} seconds)</Text> - <Text>x</Text> + <Text>Time: {elapsedTimeSeconds}</Text> </Flex> </Container> <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px"> @@ -126,6 +130,7 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr percentageDone: 0, intervalId, tickingStatus: { runState: TickingRunState.Running }, + elapsedTimeMs: 0, }; } @@ -138,8 +143,11 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr this.state.tickingStatus.runState === TickingRunState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE; const percentageDone = Math.min(rawPercentageDone, maxPercentage); + const elapsedTimeMs = Math.max(curTimeUnix() - this.props.startTimeUnix, 0); + this.setState({ percentageDone, + elapsedTimeMs, }); if (percentageDone >= 100) { |