diff options
| author | Georgios Andreadis <info@gandreadis.com> | 2020-07-07 09:55:10 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2020-08-24 19:47:25 +0200 |
| commit | b4bdf9fde013bb7ff9579693b64ff575f7b00e44 (patch) | |
| tree | 5e05ceba918849391a639bbeeab37d290a86523c /frontend/src/components/app/timeline | |
| parent | 7331e9baf2cfe7bdfb24effcf0a4801da1e7ea4d (diff) | |
Rename simulations to projects and remove experiment view
Diffstat (limited to 'frontend/src/components/app/timeline')
5 files changed, 0 insertions, 234 deletions
diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js deleted file mode 100644 index 7968c68d..00000000 --- a/frontend/src/components/app/timeline/PlayButtonComponent.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' - -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> -) - -export default PlayButtonComponent diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass deleted file mode 100644 index 2d2cb979..00000000 --- a/frontend/src/components/app/timeline/Timeline.sass +++ /dev/null @@ -1,116 +0,0 @@ -@import ../../../style-globals/_variables.sass -@import ../../../style-globals/_mixins.sass - -$container-size: 500px -$play-btn-size: 40px -$border-width: 1px -$timeline-border: $border-width solid $gray-semi-dark - -.timeline-bar - display: block - position: absolute - left: 0 - bottom: 20px - width: 100% - text-align: center - z-index: 2000 - - pointer-events: none - -.timeline-container - display: inline-block - margin: 0 auto - text-align: left - - width: $container-size - -.timeline-labels - display: block - height: 25px - line-height: 25px - - div - display: inline-block - - .start-time-label - margin-left: $play-btn-size - $border-width - padding-left: 4px - - .end-time-label - padding-right: 4px - float: right - -.timeline-controls - display: flex - border: $timeline-border - overflow: hidden - - pointer-events: all - - +border-radius($standard-border-radius) - - .play-btn - width: $play-btn-size - height: $play-btn-size + $border-width - line-height: $play-btn-size + $border-width - text-align: center - float: left - margin-top: -$border-width - - font-size: 16pt - background: #333 - color: #eee - - +transition(background, $transition-length) - +user-select - +clickable - - .play-btn:hover - background: #656565 - - .play-btn:active - background: #000 - - .timeline - position: relative - flex: 1 - height: $play-btn-size - line-height: $play-btn-size - float: right - - background: $blue-light - - z-index: 500 - - div - +transition(all, $transition-length) - - .time-marker - position: absolute - top: 0 - left: 0 - - width: 6px - height: 100% - - background: $blue-very-dark - - +border-radius(2px) - - z-index: 503 - - pointer-events: none - - .section-marker - position: absolute - top: 0 - left: 0 - - width: 3px - height: 100% - - background: #222222 - - z-index: 504 - - pointer-events: none diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js deleted file mode 100644 index c183c0e8..00000000 --- a/frontend/src/components/app/timeline/TimelineComponent.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import TimelineControlsContainer from '../../../containers/app/timeline/TimelineControlsContainer' -import TimelineLabelsContainer from '../../../containers/app/timeline/TimelineLabelsContainer' -import './Timeline.css' - -class TimelineComponent extends React.Component { - componentDidMount() { - this.interval = setInterval(() => { - if (!this.props.isPlaying) { - return - } - - if (this.props.currentTick < this.props.lastSimulatedTick) { - this.props.incrementTick() - } else { - this.props.pauseSimulation() - } - }, 1000) - } - - componentWillUnmount() { - clearInterval(this.interval) - } - - render() { - return ( - <div className="timeline-bar"> - <div className="timeline-container"> - <TimelineLabelsContainer/> - <TimelineControlsContainer/> - </div> - </div> - ) - } -} - -export default TimelineComponent diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js deleted file mode 100644 index 01911aff..00000000 --- a/frontend/src/components/app/timeline/TimelineControlsComponent.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' -import PlayButtonContainer from '../../../containers/app/timeline/PlayButtonContainer' -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) - } - - 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, - ), - }} - /> - </div> - </div> - ) - } -} - -export default TimelineControlsComponent diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js deleted file mode 100644 index 55818d24..00000000 --- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -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> - </div> -) - -export default TimelineLabelsComponent |
