From 3bf073f46e74667df4d2be9488a9f8f44ac84421 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 22 Sep 2017 08:48:38 +0200
Subject: Make timeline clickable

---
 .../sidebars/topology/rack/BackToRoomComponent.js  |  2 +-
 .../sidebars/topology/rack/RackSidebarComponent.js |  2 +-
 .../topology/rack/RackSidebarComponent.sass        |  3 ++
 .../topology/room/BackToBuildingComponent.js       |  2 +-
 .../sidebars/topology/room/RoomSidebarComponent.js |  2 +-
 src/components/timeline/TimelineComponent.js       | 10 +---
 .../timeline/TimelineControlsComponent.js          | 56 ++++++++++++----------
 7 files changed, 40 insertions(+), 37 deletions(-)

(limited to 'src/components')

diff --git a/src/components/sidebars/topology/rack/BackToRoomComponent.js b/src/components/sidebars/topology/rack/BackToRoomComponent.js
index 9bb719a3..252e95b7 100644
--- a/src/components/sidebars/topology/rack/BackToRoomComponent.js
+++ b/src/components/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 const BackToRoomComponent = ({onClick}) => (
-    <div className="btn btn-secondary btn-block" onClick={onClick}>
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
         Back to room
     </div>
 );
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js
index 398b3c13..6a36972f 100644
--- a/src/components/sidebars/topology/rack/RackSidebarComponent.js
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js
@@ -10,7 +10,7 @@ import "./RackSidebarComponent.css";
 const RackSidebarComponent = ({inSimulation, rackId}) => {
     return (
         <div className="rack-sidebar-container flex-column">
-            <div style={{flex: 0}}>
+            <div className="rack-sidebar-header-container">
                 <RackNameContainer/>
                 <BackToRoomContainer/>
                 {inSimulation ?
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
index 192929cf..822804bc 100644
--- a/src/components/sidebars/topology/rack/RackSidebarComponent.sass
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
@@ -3,6 +3,9 @@
   height: 100%
   max-height: 100%
 
+.rack-sidebar-header-container
+  flex: 0
+
 .machine-list-container
   flex: 1
   overflow-y: scroll
diff --git a/src/components/sidebars/topology/room/BackToBuildingComponent.js b/src/components/sidebars/topology/room/BackToBuildingComponent.js
index 12dc15dd..85d2adcd 100644
--- a/src/components/sidebars/topology/room/BackToBuildingComponent.js
+++ b/src/components/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 const BackToBuildingComponent = ({onClick}) => (
-    <div className="btn btn-secondary btn-block" onClick={onClick}>
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
         Back to building
     </div>
 );
diff --git a/src/components/sidebars/topology/room/RoomSidebarComponent.js b/src/components/sidebars/topology/room/RoomSidebarComponent.js
index 04df4372..fb3c3296 100644
--- a/src/components/sidebars/topology/room/RoomSidebarComponent.js
+++ b/src/components/sidebars/topology/room/RoomSidebarComponent.js
@@ -16,8 +16,8 @@ const RoomSidebarComponent = ({roomId, roomType, inSimulation}) => {
     return (
         <div>
             <RoomNameContainer/>
-            <BackToBuildingContainer/>
             <RoomTypeContainer/>
+            <BackToBuildingContainer/>
             {inSimulation ?
                 <div>
                     <LoadBarContainer objectType="room" objectId={roomId}/>
diff --git a/src/components/timeline/TimelineComponent.js b/src/components/timeline/TimelineComponent.js
index b400a378..119c396b 100644
--- a/src/components/timeline/TimelineComponent.js
+++ b/src/components/timeline/TimelineComponent.js
@@ -11,15 +11,9 @@ class TimelineComponent extends React.Component {
             }
 
             if (this.props.currentTick < this.props.lastSimulatedTick) {
-                for (let i in this.props.sections.reverse()) {
-                    if (this.props.currentTick + 1 >= this.props.sections[i].startTick) {
-                        if (this.props.currentDatacenterId !== this.props.sections[i].datacenterId) {
-                            this.props.setCurrentDatacenter(this.props.sections[i].datacenterId);
-                        }
-                        break;
-                    }
-                }
                 this.props.incrementTick();
+            } else {
+                this.props.pauseSimulation();
             }
         }, 1000);
     }
diff --git a/src/components/timeline/TimelineControlsComponent.js b/src/components/timeline/TimelineControlsComponent.js
index 2e093583..bd98afc3 100644
--- a/src/components/timeline/TimelineControlsComponent.js
+++ b/src/components/timeline/TimelineControlsComponent.js
@@ -1,33 +1,39 @@
 import React from "react";
 import PlayButtonContainer from "../../containers/timeline/PlayButtonContainer";
+import {convertTickToPercentage} from "../../util/timeline";
 
-function getXPercentage(tick, maxTick) {
-    if (maxTick === 0) {
-        return "0%";
-    } else if (tick > maxTick) {
-        return ((maxTick / (maxTick + 1)) * 100) + "%";
+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);
     }
 
-    return ((tick / (maxTick + 1)) * 100) + "%";
-}
-
-const TimelineControlsComponent = ({currentTick, lastSimulatedTick, sectionTicks}) => (
-    <div className="timeline-controls">
-        <PlayButtonContainer/>
-        <div className="timeline">
-            <div
-                className="time-marker"
-                style={{left: getXPercentage(currentTick, lastSimulatedTick)}}
-            />
-            {sectionTicks.map(sectionTick => (
+    render() {
+        return (
+            <div className="timeline-controls">
+                <PlayButtonContainer/>
                 <div
-                    key={sectionTick}
-                    className="section-marker"
-                    style={{left: getXPercentage(sectionTick, lastSimulatedTick)}}
-                />
-            ))}
-        </div>
-    </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