diff options
Diffstat (limited to 'src/components')
7 files changed, 40 insertions, 37 deletions
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; |