From 90fae26aa4bd0e0eb3272ff6e6524060e9004fbb Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
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.
---
 .../components/app/timeline/PlayButtonComponent.js |  30 ++++++
 frontend/src/components/app/timeline/Timeline.sass | 116 +++++++++++++++++++++
 .../components/app/timeline/TimelineComponent.js   |  37 +++++++
 .../app/timeline/TimelineControlsComponent.js      |  49 +++++++++
 .../app/timeline/TimelineLabelsComponent.js        |  15 +++
 5 files changed, 247 insertions(+)
 create mode 100644 frontend/src/components/app/timeline/PlayButtonComponent.js
 create mode 100644 frontend/src/components/app/timeline/Timeline.sass
 create mode 100644 frontend/src/components/app/timeline/TimelineComponent.js
 create mode 100644 frontend/src/components/app/timeline/TimelineControlsComponent.js
 create mode 100644 frontend/src/components/app/timeline/TimelineLabelsComponent.js

(limited to 'frontend/src/components/app/timeline')

diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js
new file mode 100644
index 00000000..1a9b0ced
--- /dev/null
+++ b/frontend/src/components/app/timeline/PlayButtonComponent.js
@@ -0,0 +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();
+        }
+      }
+    }}
+  >
+    {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
new file mode 100644
index 00000000..4c99a218
--- /dev/null
+++ b/frontend/src/components/app/timeline/Timeline.sass
@@ -0,0 +1,116 @@
+@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
new file mode 100644
index 00000000..0f88b8f4
--- /dev/null
+++ b/frontend/src/components/app/timeline/TimelineComponent.js
@@ -0,0 +1,37 @@
+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
new file mode 100644
index 00000000..f3d55154
--- /dev/null
+++ b/frontend/src/components/app/timeline/TimelineControlsComponent.js
@@ -0,0 +1,49 @@
+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
+              )
+            }}
+          />
+          {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/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js
new file mode 100644
index 00000000..6943a86f
--- /dev/null
+++ b/frontend/src/components/app/timeline/TimelineLabelsComponent.js
@@ -0,0 +1,15 @@
+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;
-- 
cgit v1.2.3