From f8f617c97fcb2df3dbefc9527d974151e367cb60 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Mon, 18 Sep 2017 16:52:11 +0200 Subject: Implement basic experiment mode with timeline The timeline doesn't trigger anything yet, but the visual element is in place and connected. --- src/components/map/groups/RackGroup.js | 2 +- src/components/map/groups/TileGroup.js | 2 +- src/components/navigation/AppNavbar.js | 8 +- .../sidebars/topology/rack/MachineComponent.js | 2 +- src/components/timeline/PlayButtonComponent.js | 12 +++ src/components/timeline/Timeline.js | 15 +++ src/components/timeline/Timeline.sass | 108 +++++++++++++++++++++ .../timeline/TimelineControlsComponent.js | 33 +++++++ src/components/timeline/TimelineLabelsComponent.js | 11 +++ 9 files changed, 186 insertions(+), 7 deletions(-) create mode 100644 src/components/timeline/PlayButtonComponent.js create mode 100644 src/components/timeline/Timeline.js create mode 100644 src/components/timeline/Timeline.sass create mode 100644 src/components/timeline/TimelineControlsComponent.js create mode 100644 src/components/timeline/TimelineLabelsComponent.js (limited to 'src/components') diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js index 648c74d7..a34a5543 100644 --- a/src/components/map/groups/RackGroup.js +++ b/src/components/map/groups/RackGroup.js @@ -9,7 +9,7 @@ import TileObject from "../elements/TileObject"; const RackGroup = ({tile, inSimulation, rackLoad}) => { let color = RACK_BACKGROUND_COLOR; - if (inSimulation) { + if (inSimulation && rackLoad) { color = convertLoadToSimulationColor(rackLoad); } diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js index 3de712d1..c7991507 100644 --- a/src/components/map/groups/TileGroup.js +++ b/src/components/map/groups/TileGroup.js @@ -20,7 +20,7 @@ const TileGroup = ({tile, newTile, inSimulation, roomLoad, onClick}) => { let color = ROOM_DEFAULT_COLOR; if (newTile) { color = ROOM_IN_CONSTRUCTION_COLOR; - } else if (inSimulation) { + } else if (inSimulation && roomLoad) { color = convertLoadToSimulationColor(roomLoad); } diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js index 94eaa7fa..4f669723 100644 --- a/src/components/navigation/AppNavbar.js +++ b/src/components/navigation/AppNavbar.js @@ -11,10 +11,10 @@ const AppNavbar = ({simulationId, inSimulation}) => ( - Build + Construction : undefined @@ -23,10 +23,10 @@ const AppNavbar = ({simulationId, inSimulation}) => ( - Simulate + Experiments : undefined diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js index b6e9791d..c9211115 100644 --- a/src/components/sidebars/topology/rack/MachineComponent.js +++ b/src/components/sidebars/topology/rack/MachineComponent.js @@ -15,7 +15,7 @@ const UnitIcon = ({id, type}) => ( const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => { let color = "white"; - if (inSimulation) { + if (inSimulation && machineLoad) { color = convertLoadToSimulationColor(machineLoad); } const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length diff --git a/src/components/timeline/PlayButtonComponent.js b/src/components/timeline/PlayButtonComponent.js new file mode 100644 index 00000000..6ec70cc3 --- /dev/null +++ b/src/components/timeline/PlayButtonComponent.js @@ -0,0 +1,12 @@ +import React from "react"; + +const PlayButtonComponent = ({isPlaying, onPlay, onPause}) => ( +
isPlaying ? onPause() : onPlay()}> + {isPlaying ? + : + + } +
+); + +export default PlayButtonComponent; diff --git a/src/components/timeline/Timeline.js b/src/components/timeline/Timeline.js new file mode 100644 index 00000000..a2a858eb --- /dev/null +++ b/src/components/timeline/Timeline.js @@ -0,0 +1,15 @@ +import React from "react"; +import TimelineControlsContainer from "../../containers/timeline/TimelineControlsContainer"; +import TimelineLabelsContainer from "../../containers/timeline/TimelineLabelsContainer"; +import "./Timeline.css"; + +const Timeline = ({currentTick, lastSimulatedTick}) => ( +
+
+ + +
+
+); + +export default Timeline; diff --git a/src/components/timeline/Timeline.sass b/src/components/timeline/Timeline.sass new file mode 100644 index 00000000..eed3174e --- /dev/null +++ b/src/components/timeline/Timeline.sass @@ -0,0 +1,108 @@ +@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 + +.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 + + +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 + + .section-marker + position: absolute + top: 0 + left: 0 + + width: 3px + height: 100% + + background: #222222 + + z-index: 504 diff --git a/src/components/timeline/TimelineControlsComponent.js b/src/components/timeline/TimelineControlsComponent.js new file mode 100644 index 00000000..3f37c3bc --- /dev/null +++ b/src/components/timeline/TimelineControlsComponent.js @@ -0,0 +1,33 @@ +import React from "react"; +import PlayButtonContainer from "../../containers/timeline/PlayButtonContainer"; + +function getXPercentage(tick, maxTick) { + if (maxTick === 0) { + return "0%"; + } else if (tick > maxTick) { + return "100%"; + } + + return (tick / maxTick) + "%"; +} + +const TimelineControlsComponent = ({currentTick, lastSimulatedTick, sectionTicks}) => ( +
+ +
+
+ {sectionTicks.map(sectionTick => ( +
+ ))} +
+
+); + +export default TimelineControlsComponent; diff --git a/src/components/timeline/TimelineLabelsComponent.js b/src/components/timeline/TimelineLabelsComponent.js new file mode 100644 index 00000000..1f6053a1 --- /dev/null +++ b/src/components/timeline/TimelineLabelsComponent.js @@ -0,0 +1,11 @@ +import React from "react"; +import {convertSecondsToFormattedTime} from "../../util/date-time"; + +const TimelineLabelsComponent = ({currentTick, lastSimulatedTick}) => ( +
+
{convertSecondsToFormattedTime(currentTick)}
+
{convertSecondsToFormattedTime(lastSimulatedTick)}
+
+); + +export default TimelineLabelsComponent; -- cgit v1.2.3