From 90fae26aa4bd0e0eb3272ff6e6524060e9004fbb Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Mon, 29 Jun 2020 15:47:09 +0200 Subject: Prepare frontend repository for monorepo This change prepares the frontend Git repository for the monorepo residing at https://github.com/atlarge-research.com/opendc. To accomodate for this, we move all files into a frontend subdirectory. --- src/components/app/timeline/PlayButtonComponent.js | 30 ------ src/components/app/timeline/Timeline.sass | 116 --------------------- src/components/app/timeline/TimelineComponent.js | 37 ------- .../app/timeline/TimelineControlsComponent.js | 49 --------- .../app/timeline/TimelineLabelsComponent.js | 15 --- 5 files changed, 247 deletions(-) delete mode 100644 src/components/app/timeline/PlayButtonComponent.js delete mode 100644 src/components/app/timeline/Timeline.sass delete mode 100644 src/components/app/timeline/TimelineComponent.js delete mode 100644 src/components/app/timeline/TimelineControlsComponent.js delete mode 100644 src/components/app/timeline/TimelineLabelsComponent.js (limited to 'src/components/app/timeline') diff --git a/src/components/app/timeline/PlayButtonComponent.js b/src/components/app/timeline/PlayButtonComponent.js deleted file mode 100644 index 1a9b0ced..00000000 --- a/src/components/app/timeline/PlayButtonComponent.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; - -const PlayButtonComponent = ({ - isPlaying, - currentTick, - lastSimulatedTick, - onPlay, - onPause -}) => ( -
{ - if (isPlaying) { - onPause(); - } else { - if (currentTick !== lastSimulatedTick) { - onPlay(); - } - } - }} - > - {isPlaying ? ( - - ) : ( - - )} -
-); - -export default PlayButtonComponent; diff --git a/src/components/app/timeline/Timeline.sass b/src/components/app/timeline/Timeline.sass deleted file mode 100644 index 4c99a218..00000000 --- a/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/src/components/app/timeline/TimelineComponent.js b/src/components/app/timeline/TimelineComponent.js deleted file mode 100644 index 0f88b8f4..00000000 --- a/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 ( -
-
- - -
-
- ); - } -} - -export default TimelineComponent; diff --git a/src/components/app/timeline/TimelineControlsComponent.js b/src/components/app/timeline/TimelineControlsComponent.js deleted file mode 100644 index f3d55154..00000000 --- a/src/components/app/timeline/TimelineControlsComponent.js +++ /dev/null @@ -1,49 +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 ( -
- -
(this.timeline = timeline)} - onClick={this.onTimelineClick.bind(this)} - > -
- {this.props.sectionTicks.map(sectionTick => ( -
- ))} -
-
- ); - } -} - -export default TimelineControlsComponent; diff --git a/src/components/app/timeline/TimelineLabelsComponent.js b/src/components/app/timeline/TimelineLabelsComponent.js deleted file mode 100644 index 6943a86f..00000000 --- a/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 }) => ( -
-
- {convertSecondsToFormattedTime(currentTick)} -
-
- {convertSecondsToFormattedTime(lastSimulatedTick)} -
-
-); - -export default TimelineLabelsComponent; -- cgit v1.2.3