4 files changed, 119 insertions, 0 deletions
diff --git a/frontend/src/containers/app/timeline/PlayButtonContainer.js b/frontend/src/containers/app/timeline/PlayButtonContainer.js
new file mode 100644
index 00000000..4e3c3d81
--- /dev/null
+++ b/frontend/src/containers/app/timeline/PlayButtonContainer.js
@@ -0,0 +1,27 @@
+import { connect } from "react-redux";
+import {
+  pauseSimulation,
+  playSimulation
+} from "../../../actions/simulation/playback";
+import PlayButtonComponent from "../../../components/app/timeline/PlayButtonComponent";
+
+const mapStateToProps = state => {
+  return {
+    isPlaying: state.isPlaying,
+    currentTick: state.currentTick,
+    lastSimulatedTick: state.lastSimulatedTick
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onPlay: () => dispatch(playSimulation()),
+    onPause: () => dispatch(pauseSimulation())
+  };
+};
+
+const PlayButtonContainer = connect(mapStateToProps, mapDispatchToProps)(
+  PlayButtonComponent
+);
+
+export default PlayButtonContainer;
diff --git a/frontend/src/containers/app/timeline/TimelineContainer.js b/frontend/src/containers/app/timeline/TimelineContainer.js
new file mode 100644
index 00000000..74d37d58
--- /dev/null
+++ b/frontend/src/containers/app/timeline/TimelineContainer.js
@@ -0,0 +1,41 @@
+import { connect } from "react-redux";
+import { pauseSimulation } from "../../../actions/simulation/playback";
+import { incrementTick } from "../../../actions/simulation/tick";
+import { setCurrentDatacenter } from "../../../actions/topology/building";
+import TimelineComponent from "../../../components/app/timeline/TimelineComponent";
+
+const mapStateToProps = state => {
+  let sections = [];
+  if (state.currentExperimentId !== -1) {
+    const sectionIds =
+      state.objects.path[
+        state.objects.experiment[state.currentExperimentId].pathId
+      ].sectionIds;
+
+    if (sectionIds) {
+      sections = sectionIds.map(sectionId => state.objects.section[sectionId]);
+    }
+  }
+
+  return {
+    isPlaying: state.isPlaying,
+    currentTick: state.currentTick,
+    lastSimulatedTick: state.lastSimulatedTick,
+    currentDatacenterId: state.currentDatacenterId,
+    sections
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    incrementTick: () => dispatch(incrementTick()),
+    pauseSimulation: () => dispatch(pauseSimulation()),
+    setCurrentDatacenter: id => dispatch(setCurrentDatacenter(id))
+  };
+};
+
+const TimelineContainer = connect(mapStateToProps, mapDispatchToProps)(
+  TimelineComponent
+);
+
+export default TimelineContainer;
diff --git a/frontend/src/containers/app/timeline/TimelineControlsContainer.js b/frontend/src/containers/app/timeline/TimelineControlsContainer.js
new file mode 100644
index 00000000..ac851b2e
--- /dev/null
+++ b/frontend/src/containers/app/timeline/TimelineControlsContainer.js
@@ -0,0 +1,36 @@
+import { connect } from "react-redux";
+import { goToTick } from "../../../actions/simulation/tick";
+import TimelineControlsComponent from "../../../components/app/timeline/TimelineControlsComponent";
+
+const mapStateToProps = state => {
+  let sectionTicks = [];
+  if (state.currentExperimentId !== -1) {
+    const sectionIds =
+      state.objects.path[
+        state.objects.experiment[state.currentExperimentId].pathId
+      ].sectionIds;
+    if (sectionIds) {
+      sectionTicks = sectionIds
+        .filter(sectionId => state.objects.section[sectionId].startTick !== 0)
+        .map(sectionId => state.objects.section[sectionId].startTick);
+    }
+  }
+
+  return {
+    currentTick: state.currentTick,
+    lastSimulatedTick: state.lastSimulatedTick,
+    sectionTicks
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    goToTick: tick => dispatch(goToTick(tick))
+  };
+};
+
+const TimelineControlsContainer = connect(mapStateToProps, mapDispatchToProps)(
+  TimelineControlsComponent
+);
+
+export default TimelineControlsContainer;
diff --git a/frontend/src/containers/app/timeline/TimelineLabelsContainer.js b/frontend/src/containers/app/timeline/TimelineLabelsContainer.js
new file mode 100644
index 00000000..9d7f268d
--- /dev/null
+++ b/frontend/src/containers/app/timeline/TimelineLabelsContainer.js
@@ -0,0 +1,15 @@
+import { connect } from "react-redux";
+import TimelineLabelsComponent from "../../../components/app/timeline/TimelineLabelsComponent";
+
+const mapStateToProps = state => {
+  return {
+    currentTick: state.currentTick,
+    lastSimulatedTick: state.lastSimulatedTick
+  };
+};
+
+const TimelineLabelsContainer = connect(mapStateToProps)(
+  TimelineLabelsComponent
+);
+
+export default TimelineLabelsContainer;