summaryrefslogtreecommitdiff
path: root/frontend/src/components/app/timeline
diff options
context:
space:
mode:
authorGeorgios Andreadis <info@gandreadis.com>2020-07-07 09:55:10 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2020-08-24 19:47:25 +0200
commitb4bdf9fde013bb7ff9579693b64ff575f7b00e44 (patch)
tree5e05ceba918849391a639bbeeab37d290a86523c /frontend/src/components/app/timeline
parent7331e9baf2cfe7bdfb24effcf0a4801da1e7ea4d (diff)
Rename simulations to projects and remove experiment view
Diffstat (limited to 'frontend/src/components/app/timeline')
-rw-r--r--frontend/src/components/app/timeline/PlayButtonComponent.js30
-rw-r--r--frontend/src/components/app/timeline/Timeline.sass116
-rw-r--r--frontend/src/components/app/timeline/TimelineComponent.js37
-rw-r--r--frontend/src/components/app/timeline/TimelineControlsComponent.js36
-rw-r--r--frontend/src/components/app/timeline/TimelineLabelsComponent.js15
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