diff options
Diffstat (limited to 'frontend/src/components/app')
24 files changed, 109 insertions, 440 deletions
diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js index 1fd470fc..03daa692 100644 --- a/frontend/src/components/app/map/LoadingScreen.js +++ b/frontend/src/components/app/map/LoadingScreen.js @@ -4,7 +4,7 @@ import FontAwesome from 'react-fontawesome' const LoadingScreen = () => ( <div className="display-4"> <FontAwesome name="refresh" className="mr-4" spin/> - Loading your topology... + Loading your project... </div> ) diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js index 6de939a9..5d4ee5e2 100644 --- a/frontend/src/components/app/map/groups/RackGroup.js +++ b/frontend/src/components/app/map/groups/RackGroup.js @@ -4,23 +4,17 @@ import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFi import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer' import Shapes from '../../../../shapes/index' import { RACK_BACKGROUND_COLOR } from '../../../../util/colors' -import { convertLoadToSimulationColor } from '../../../../util/simulation-load' import TileObject from '../elements/TileObject' -const RackGroup = ({ tile, inSimulation, rackLoad }) => { - let color = RACK_BACKGROUND_COLOR - if (inSimulation && rackLoad >= 0) { - color = convertLoadToSimulationColor(rackLoad) - } - +const RackGroup = ({ tile }) => { return ( <Group> <TileObject positionX={tile.positionX} positionY={tile.positionY} - color={color} + color={RACK_BACKGROUND_COLOR} /> - <Group opacity={inSimulation ? 0.3 : 1}> + <Group> <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js index 54f4ae17..e984f05b 100644 --- a/frontend/src/components/app/map/groups/TileGroup.js +++ b/frontend/src/components/app/map/groups/TileGroup.js @@ -4,10 +4,9 @@ import { Group } from 'react-konva' import RackContainer from '../../../../containers/app/map/RackContainer' import Shapes from '../../../../shapes/index' import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors' -import { convertLoadToSimulationColor } from '../../../../util/simulation-load' import RoomTile from '../elements/RoomTile' -const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { +const TileGroup = ({ tile, newTile, roomLoad, onClick }) => { let tileObject if (tile.rackId) { tileObject = <RackContainer tile={tile}/> @@ -18,8 +17,6 @@ const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { let color = ROOM_DEFAULT_COLOR if (newTile) { color = ROOM_IN_CONSTRUCTION_COLOR - } else if (inSimulation && roomLoad >= 0) { - color = convertLoadToSimulationColor(roomLoad) } return ( diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js deleted file mode 100644 index 01005085..00000000 --- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js +++ /dev/null @@ -1,22 +0,0 @@ -import classNames from 'classnames' -import React from 'react' - -const LoadBarComponent = ({ percent, disabled }) => ( - <div className="mt-1"> - <strong>Current load</strong> - <div className={classNames('progress', { disabled })}> - <div - className="progress-bar" - role="progressbar" - aria-valuenow={percent} - aria-valuemin="0" - aria-valuemax="100" - style={{ width: percent + '%' }} - > - {percent}% - </div> - </div> - </div> -) - -export default LoadBarComponent diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js new file mode 100644 index 00000000..d6e39ff6 --- /dev/null +++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js @@ -0,0 +1,12 @@ +import React from 'react' +import Sidebar from '../Sidebar' +import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer' + +const ProjectSidebarComponent = () => ( + <Sidebar isRight={false}> + <TopologyListContainer/> + <h2>Portfolios</h2> + </Sidebar> + ) + +export default ProjectSidebarComponent diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js new file mode 100644 index 00000000..98615711 --- /dev/null +++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js @@ -0,0 +1,63 @@ +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../../../shapes' +import FontAwesome from 'react-fontawesome' + +class TopologyListComponent extends React.Component { + static propTypes = { + show: PropTypes.bool.isRequired, + topologies: PropTypes.arrayOf(Shapes.Topology), + currentTopologyId: PropTypes.string, + onChooseTopology: PropTypes.func.isRequired, + onNewTopology: PropTypes.func.isRequired, + onDeleteTopology: PropTypes.func.isRequired, + } + + onChoose(id) { + this.props.onChooseTopology(id) + } + + onDuplicate() { + this.props.onNewTopology( + this.textInput.value, + this.originTopology.value, + ) + } + + onDelete(id) { + this.props.onDeleteTopology(id) + } + + render() { + return ( + <div className="pb-3"> + <h2> + Topologies + <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}> + <FontAwesome name="plus"/> + </button> + </h2> + + {this.props.topologies.map((topology, idx) => ( + <div key={topology._id} className="row mb-1"> + <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}> + {topology.name} + </div> + <div className="col-4 text-right"> + <span + className="btn btn-outline-primary mr-1 fa fa-play" + onClick={() => this.onChoose(topology._id)} + /> + <span + className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')} + onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined} + /> + </div> + </div> + ))} + </div> + ) + } +} + +export default TopologyListComponent diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js deleted file mode 100644 index 30990a13..00000000 --- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' - -const ExperimentMetadataComponent = ({ - experimentName, - topologyName, - traceName, - schedulerName, - }) => ( - <div> - <h2>{experimentName}</h2> - <p> - Topology: <strong>{topologyName}</strong> - </p> - <p> - Trace: <strong>{traceName}</strong> - </p> - <p> - Scheduler: <strong>{schedulerName}</strong> - </p> - </div> -) - -export default ExperimentMetadataComponent diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js deleted file mode 100644 index 6ee6a3b9..00000000 --- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from '../../../../util/colors' -import { LOAD_NAME_MAP } from '../../../../util/simulation-load' - -const LoadMetricComponent = ({ loadMetric }) => ( - <div> - <div> - Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong> - </div> - <div className="btn-group mb-2" style={{ display: 'flex' }}> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }} - title="0-25%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }} - title="25-50%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }} - title="50-75%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }} - title="75-100%" - /> - </div> - </div> -) - -export default LoadMetricComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js deleted file mode 100644 index dba75eb2..00000000 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer' -import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer' -import Sidebar from '../Sidebar' -import './SimulationSidebarComponent.css' - -const SimulationSidebarComponent = () => { - return ( - <Sidebar isRight={false}> - <div className="simulation-sidebar-container flex-column"> - <ExperimentMetadataContainer/> - <LoadMetricContainer/> - </div> - </Sidebar> - ) -} - -export default SimulationSidebarComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass deleted file mode 100644 index 6490cf8d..00000000 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass +++ /dev/null @@ -1,8 +0,0 @@ -.simulation-sidebar-container - display: flex - height: 100% - max-height: 100% - -.trace-container - flex: 1 - overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index 00965c18..4cc87798 100644 --- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -2,18 +2,11 @@ import React from 'react' import NewRoomConstructionContainer from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer' -const BuildingSidebarComponent = ({ inSimulation }) => { +const BuildingSidebarComponent = () => { return ( <div> <h2>Building</h2> - {inSimulation ? ( - <div className="alert alert-info"> - <span className="fa fa-info-circle mr-2"/> - <strong>Click on individual rooms</strong> to see their stats! - </div> - ) : ( - <NewRoomConstructionContainer/> - )} + <NewRoomConstructionContainer/> </div> ) } diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index 66c8c84f..d78c20eb 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,24 +1,15 @@ import React from 'react' -import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' -import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer' import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer' import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer' import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer' -const MachineSidebarComponent = ({ inSimulation, machineId }) => { +const MachineSidebarComponent = ({ machineId }) => { return ( <div> <MachineNameContainer/> <BackToRackContainer/> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="machine" objectId={machineId}/> - <LoadChartContainer objectType="machine" objectId={machineId}/> - </div> - ) : ( - <DeleteMachineContainer/> - )} + <DeleteMachineContainer/> <UnitTabsContainer/> </div> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index bde6d444..3953347a 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -53,14 +53,10 @@ class UnitComponent extends React.Component { data-content={unitInfo} data-html="true" /> - {this.props.inSimulation ? ( - undefined - ) : ( - <span - className="btn btn-outline-danger fa fa-trash" - onClick={this.props.onDelete} - /> - )} + <span + className="btn btn-outline-danger fa fa-trash" + onClick={this.props.onDelete} + /> </span> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index da65da23..fcd3e03b 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,7 +1,7 @@ import React from 'react' import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer' -const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( +const UnitListComponent = ({ unitType, unitIds }) => ( <ul className="list-group mt-1"> {unitIds.length !== 0 ? ( unitIds.map((unitId, index) => ( @@ -14,13 +14,9 @@ const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( )) ) : ( <div className="alert alert-info"> - {inSimulation ? ( - <strong>No units of this type in this machine</strong> - ) : ( - <span> - <strong>No units...</strong> Add some with the menu above! - </span> - )} + <span> + <strong>No units...</strong> Add some with the menu above! + </span> </div> )} </ul> diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index df7eeb77..c774036f 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -2,7 +2,7 @@ import React from 'react' import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer' import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer' -const UnitTabsComponent = ({ inSimulation }) => ( +const UnitTabsComponent = () => ( <div> <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> <li className="nav-item"> @@ -43,19 +43,19 @@ const UnitTabsComponent = ({ inSimulation }) => ( </ul> <div className="tab-content"> <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>} + <UnitAddContainer unitType="cpu"/> <UnitListContainer unitType="cpu"/> </div> <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>} + <UnitAddContainer unitType="gpu"/> <UnitListContainer unitType="gpu"/> </div> <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>} + <UnitAddContainer unitType="memory"/> <UnitListContainer unitType="memory"/> </div> <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>} + <UnitAddContainer unitType="storage"/> <UnitListContainer unitType="storage"/> </div> </div> diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index f182a78c..03b44aa6 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,18 +1,14 @@ import React from 'react' -const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( +const EmptySlotComponent = ({ position, onAdd }) => ( <li className="list-group-item d-flex justify-content-between align-items-center"> <span className="badge badge-default badge-info mr-1 disabled"> {position} </span> - {inSimulation ? ( - <span className="badge badge-default badge-success">Empty Slot</span> - ) : ( - <button className="btn btn-outline-primary" onClick={onAdd}> - <span className="fa fa-plus mr-2"/> - Add machine - </button> - )} + <button className="btn btn-outline-primary" onClick={onAdd}> + <span className="fa fa-plus mr-2"/> + Add machine + </button> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index b4204136..cec3c912 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,6 +1,5 @@ import React from 'react' import Shapes from '../../../../../shapes' -import { convertLoadToSimulationColor } from '../../../../../util/simulation-load' const UnitIcon = ({ id, type }) => ( <div> @@ -16,14 +15,8 @@ const UnitIcon = ({ id, type }) => ( const MachineComponent = ({ position, machine, - inSimulation, - machineLoad, onClick, }) => { - let color = 'white' - if (inSimulation && machineLoad >= 0) { - color = convertLoadToSimulationColor(machineLoad) - } const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + @@ -35,7 +28,7 @@ const MachineComponent = ({ <li className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" onClick={onClick} - style={{ backgroundColor: color }} + style={{ backgroundColor: 'white' }} > <span className="badge badge-default badge-info mr-1">{position}</span> <div className="d-inline-flex"> diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index 47d99254..23e8e743 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -1,28 +1,17 @@ import React from 'react' -import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' -import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' import BackToRoomContainer from '../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer' import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer' import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer' import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer' import './RackSidebarComponent.css' -const RackSidebarComponent = ({ inSimulation, rackId }) => { +const RackSidebarComponent = () => { return ( <div className="rack-sidebar-container flex-column"> <div className="rack-sidebar-header-container"> <RackNameContainer/> <BackToRoomContainer/> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="rack" objectId={rackId}/> - <LoadChartContainer objectType="rack" objectId={rackId}/> - </div> - ) : ( - <div> - <DeleteRackContainer/> - </div> - )} + <DeleteRackContainer/> </div> <div className="machine-list-container mt-2"> <MachineListContainer/> diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index d8a805cb..a23ac381 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -1,29 +1,18 @@ import React from 'react' -import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' -import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' import BackToBuildingContainer from '../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer' import DeleteRoomContainer from '../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer' import EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer' import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer' import RoomNameContainer from '../../../../../containers/app/sidebars/topology/room/RoomNameContainer' -const RoomSidebarComponent = ({ roomId, inSimulation }) => { +const RoomSidebarComponent = () => { return ( <div> <RoomNameContainer/> <BackToBuildingContainer/> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="room" objectId={roomId}/> - <LoadChartContainer objectType="room" objectId={roomId}/> - </div> - ) : ( - <div> - <RackConstructionContainer/> - <EditRoomContainer/> - <DeleteRoomContainer/> - </div> - )} + <RackConstructionContainer/> + <EditRoomContainer/> + <DeleteRoomContainer/> </div> ) } diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js deleted file mode 100644 index 7968c68d..00000000 --- a/frontend/src/components/app/timeline/PlayButtonComponent.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' - -const PlayButtonComponent = ({ - isPlaying, - currentTick, - lastSimulatedTick, - onPlay, - onPause, - }) => ( - <div - className="play-btn" - onClick={() => { - if (isPlaying) { - onPause() - } else { - if (currentTick !== lastSimulatedTick) { - onPlay() - } - } - }} - > - {isPlaying ? ( - <span className="fa fa-pause"/> - ) : ( - <span className="fa fa-play"/> - )} - </div> -) - -export default PlayButtonComponent diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass deleted file mode 100644 index 2d2cb979..00000000 --- a/frontend/src/components/app/timeline/Timeline.sass +++ /dev/null @@ -1,116 +0,0 @@ -@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 - - pointer-events: none - -.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 - - pointer-events: all - - +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 - - pointer-events: none - - .section-marker - position: absolute - top: 0 - left: 0 - - width: 3px - height: 100% - - background: #222222 - - z-index: 504 - - pointer-events: none diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js deleted file mode 100644 index c183c0e8..00000000 --- a/frontend/src/components/app/timeline/TimelineComponent.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import TimelineControlsContainer from '../../../containers/app/timeline/TimelineControlsContainer' -import TimelineLabelsContainer from '../../../containers/app/timeline/TimelineLabelsContainer' -import './Timeline.css' - -class TimelineComponent extends React.Component { - componentDidMount() { - this.interval = setInterval(() => { - if (!this.props.isPlaying) { - return - } - - if (this.props.currentTick < this.props.lastSimulatedTick) { - this.props.incrementTick() - } else { - this.props.pauseSimulation() - } - }, 1000) - } - - componentWillUnmount() { - clearInterval(this.interval) - } - - render() { - return ( - <div className="timeline-bar"> - <div className="timeline-container"> - <TimelineLabelsContainer/> - <TimelineControlsContainer/> - </div> - </div> - ) - } -} - -export default TimelineComponent diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js deleted file mode 100644 index 01911aff..00000000 --- a/frontend/src/components/app/timeline/TimelineControlsComponent.js +++ /dev/null @@ -1,36 +0,0 @@ -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, - ), - }} - /> - </div> - </div> - ) - } -} - -export default TimelineControlsComponent diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js deleted file mode 100644 index 55818d24..00000000 --- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import { convertSecondsToFormattedTime } from '../../../util/date-time' - -const TimelineLabelsComponent = ({ currentTick, lastSimulatedTick }) => ( - <div className="timeline-labels"> - <div className="start-time-label"> - {convertSecondsToFormattedTime(currentTick)} - </div> - <div className="end-time-label"> - {convertSecondsToFormattedTime(lastSimulatedTick)} - </div> - </div> -) - -export default TimelineLabelsComponent |