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.
---
 .../app/timeline/TimelineControlsComponent.js      | 49 ++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 frontend/src/components/app/timeline/TimelineControlsComponent.js

(limited to 'frontend/src/components/app/timeline/TimelineControlsComponent.js')

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;
-- 
cgit v1.2.3