diff options
Diffstat (limited to 'src/components/app/timeline')
4 files changed, 99 insertions, 75 deletions
diff --git a/src/components/app/timeline/PlayButtonComponent.js b/src/components/app/timeline/PlayButtonComponent.js index 2b8e5328..1a9b0ced 100644 --- a/src/components/app/timeline/PlayButtonComponent.js +++ b/src/components/app/timeline/PlayButtonComponent.js @@ -1,20 +1,30 @@ import React from "react"; -const PlayButtonComponent = ({isPlaying, currentTick, lastSimulatedTick, onPlay, onPause}) => ( - <div className="play-btn" onClick={() => { - if (isPlaying) { - onPause(); - } else { - if (currentTick !== lastSimulatedTick) { - onPlay(); - } +const PlayButtonComponent = ({ + isPlaying, + currentTick, + lastSimulatedTick, + onPlay, + onPause +}) => ( + <div + className="play-btn" + onClick={() => { + if (isPlaying) { + onPause(); + } else { + if (currentTick !== lastSimulatedTick) { + onPlay(); } - }}> - {isPlaying ? - <span className="fa fa-pause"/> : - <span className="fa fa-play"/> - } - </div> + } + }} + > + {isPlaying ? ( + <span className="fa fa-pause" /> + ) : ( + <span className="fa fa-play" /> + )} + </div> ); export default PlayButtonComponent; diff --git a/src/components/app/timeline/TimelineComponent.js b/src/components/app/timeline/TimelineComponent.js index 950a25bd..0f88b8f4 100644 --- a/src/components/app/timeline/TimelineComponent.js +++ b/src/components/app/timeline/TimelineComponent.js @@ -4,34 +4,34 @@ import TimelineLabelsContainer from "../../../containers/app/timeline/TimelineLa import "./Timeline.css"; class TimelineComponent extends React.Component { - componentDidMount() { - this.interval = setInterval(() => { - if (!this.props.isPlaying) { - return; - } + componentDidMount() { + this.interval = setInterval(() => { + if (!this.props.isPlaying) { + return; + } - if (this.props.currentTick < this.props.lastSimulatedTick) { - this.props.incrementTick(); - } else { - this.props.pauseSimulation(); - } - }, 1000); - } + if (this.props.currentTick < this.props.lastSimulatedTick) { + this.props.incrementTick(); + } else { + this.props.pauseSimulation(); + } + }, 1000); + } - componentWillUnmount() { - clearInterval(this.interval); - } + componentWillUnmount() { + clearInterval(this.interval); + } - render() { - return ( - <div className="timeline-bar"> - <div className="timeline-container"> - <TimelineLabelsContainer/> - <TimelineControlsContainer/> - </div> - </div> - ); - } + render() { + return ( + <div className="timeline-bar"> + <div className="timeline-container"> + <TimelineLabelsContainer /> + <TimelineControlsContainer /> + </div> + </div> + ); + } } export default TimelineComponent; diff --git a/src/components/app/timeline/TimelineControlsComponent.js b/src/components/app/timeline/TimelineControlsComponent.js index 72fc4a60..f3d55154 100644 --- a/src/components/app/timeline/TimelineControlsComponent.js +++ b/src/components/app/timeline/TimelineControlsComponent.js @@ -1,39 +1,49 @@ import React from "react"; import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer"; -import {convertTickToPercentage} from "../../../util/timeline"; +import { convertTickToPercentage } from "../../../util/timeline"; class TimelineControlsComponent extends React.Component { - onTimelineClick(e) { - const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth; - const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1)); - this.props.goToTick(tick); - } + onTimelineClick(e) { + const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth; + const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1)); + this.props.goToTick(tick); + } - render() { - return ( - <div className="timeline-controls"> - <PlayButtonContainer/> - <div - className="timeline" - ref={timeline => this.timeline = timeline} - onClick={this.onTimelineClick.bind(this)} - > - <div - className="time-marker" - style={{left: convertTickToPercentage(this.props.currentTick, this.props.lastSimulatedTick)}} - /> - {this.props.sectionTicks.map(sectionTick => ( - <div - key={sectionTick} - className="section-marker" - style={{left: convertTickToPercentage(sectionTick, this.props.lastSimulatedTick)}} - title="Topology changes at this tick" - /> - ))} - </div> - </div> - ); - } + render() { + return ( + <div className="timeline-controls"> + <PlayButtonContainer /> + <div + className="timeline" + ref={timeline => (this.timeline = timeline)} + onClick={this.onTimelineClick.bind(this)} + > + <div + className="time-marker" + style={{ + left: convertTickToPercentage( + this.props.currentTick, + this.props.lastSimulatedTick + ) + }} + /> + {this.props.sectionTicks.map(sectionTick => ( + <div + key={sectionTick} + className="section-marker" + style={{ + left: convertTickToPercentage( + sectionTick, + this.props.lastSimulatedTick + ) + }} + title="Topology changes at this tick" + /> + ))} + </div> + </div> + ); + } } export default TimelineControlsComponent; diff --git a/src/components/app/timeline/TimelineLabelsComponent.js b/src/components/app/timeline/TimelineLabelsComponent.js index e795691f..6943a86f 100644 --- a/src/components/app/timeline/TimelineLabelsComponent.js +++ b/src/components/app/timeline/TimelineLabelsComponent.js @@ -1,11 +1,15 @@ import React from "react"; -import {convertSecondsToFormattedTime} from "../../../util/date-time"; +import { convertSecondsToFormattedTime } from "../../../util/date-time"; -const TimelineLabelsComponent = ({currentTick, lastSimulatedTick}) => ( - <div className="timeline-labels"> - <div className="start-time-label">{convertSecondsToFormattedTime(currentTick)}</div> - <div className="end-time-label">{convertSecondsToFormattedTime(lastSimulatedTick)}</div> +const TimelineLabelsComponent = ({ currentTick, lastSimulatedTick }) => ( + <div className="timeline-labels"> + <div className="start-time-label"> + {convertSecondsToFormattedTime(currentTick)} </div> + <div className="end-time-label"> + {convertSecondsToFormattedTime(lastSimulatedTick)} + </div> + </div> ); export default TimelineLabelsComponent; |