From 8aa174e70c01631ae4e00a6d208966fcd77cf972 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Fri, 10 Jul 2020 10:21:46 +0200
Subject: Add implementation of portfolio and scenario UI structure

---
 frontend/src/pages/App.js | 78 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 54 insertions(+), 24 deletions(-)

(limited to 'frontend/src/pages')

diff --git a/frontend/src/pages/App.js b/frontend/src/pages/App.js
index 8f99d1bd..3ccae29d 100644
--- a/frontend/src/pages/App.js
+++ b/frontend/src/pages/App.js
@@ -3,9 +3,8 @@ import React from 'react'
 import DocumentTitle from 'react-document-title'
 import { connect } from 'react-redux'
 import { ShortcutManager } from 'react-shortcuts'
-import { openExperimentSucceeded } from '../actions/experiments'
+import { openPortfolioSucceeded } from '../actions/portfolios'
 import { openProjectSucceeded } from '../actions/projects'
-import { resetCurrentTopology } from '../actions/topology/building'
 import ToolPanelComponent from '../components/app/map/controls/ToolPanelComponent'
 import LoadingScreen from '../components/app/map/LoadingScreen'
 import ScaleIndicatorContainer from '../containers/app/map/controls/ScaleIndicatorContainer'
@@ -18,25 +17,33 @@ import EditRackNameModal from '../containers/modals/EditRackNameModal'
 import EditRoomNameModal from '../containers/modals/EditRoomNameModal'
 import KeymapConfiguration from '../shortcuts/keymap'
 import NewTopologyModal from '../containers/modals/NewTopologyModal'
-import { openNewTopologyModal } from '../actions/modals/topology'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 import ProjectSidebarContainer from '../containers/app/sidebars/project/ProjectSidebarContainer'
+import { openScenarioSucceeded } from '../actions/scenarios'
+import NewPortfolioModal from '../containers/modals/NewPortfolioModal'
+import NewScenarioModal from '../containers/modals/NewScenarioModal'
 
 const shortcutManager = new ShortcutManager(KeymapConfiguration)
 
 class AppComponent extends React.Component {
     static propTypes = {
         projectId: PropTypes.string.isRequired,
-        experimentId: PropTypes.number,
+        portfolioId: PropTypes.string,
+        scenarioId: PropTypes.string,
         projectName: PropTypes.string,
-        onViewTopologies: PropTypes.func,
     }
     static childContextTypes = {
         shortcuts: PropTypes.object.isRequired,
     }
 
     componentDidMount() {
-        this.props.openProjectSucceeded(this.props.projectId)
+        if (this.props.scenarioId) {
+            this.props.openScenarioSucceeded(this.props.projectId, this.props.portfolioId, this.props.scenarioId)
+        } else if (this.props.portfolioId) {
+            this.props.openPortfolioSucceeded(this.props.projectId, this.props.portfolioId)
+        } else {
+            this.props.openProjectSucceeded(this.props.projectId)
+        }
     }
 
     getChildContext() {
@@ -46,26 +53,51 @@ class AppComponent extends React.Component {
     }
 
     render() {
+        const constructionElements = this.props.topologyIsLoading ? (
+            <div className="full-height d-flex align-items-center justify-content-center">
+                <LoadingScreen/>
+            </div>
+        ) : (
+            <div className="full-height">
+                <MapStage/>
+                <ScaleIndicatorContainer/>
+                <ToolPanelComponent/>
+                <ProjectSidebarContainer/>
+                <TopologySidebarContainer/>
+            </div>
+        )
+
+        const portfolioElements = (
+            <div className="full-height">
+                <ProjectSidebarContainer/>
+                <h2>Portfolio loading</h2>
+            </div>
+        )
+
+        const scenarioElements = (
+            <div className="full-height">
+                <ProjectSidebarContainer/>
+                <h2>Scenario loading</h2>
+            </div>
+        )
+
         return (
             <DocumentTitle
                 title={this.props.projectName ? this.props.projectName + ' - OpenDC' : 'Simulation - OpenDC'}
             >
                 <div className="page-container full-height">
-                    <AppNavbarContainer fullWidth={true} />
-                    {this.props.topologyIsLoading ? (
-                        <div className="full-height d-flex align-items-center justify-content-center">
-                            <LoadingScreen/>
-                        </div>
-                    ) : (
-                        <div className="full-height">
-                            <MapStage/>
-                            <ScaleIndicatorContainer/>
-                            <ToolPanelComponent/>
-                            <ProjectSidebarContainer/>
-                            <TopologySidebarContainer/>
-                        </div>
+                    <AppNavbarContainer fullWidth={true}/>
+                    {this.props.scenarioId ? (
+                        scenarioElements
+                    ) : (this.props.portfolioId ? (
+                            portfolioElements
+                        ) : (
+                            constructionElements
+                        )
                     )}
                     <NewTopologyModal/>
+                    <NewPortfolioModal/>
+                    <NewScenarioModal/>
                     <EditRoomNameModal/>
                     <DeleteRoomModal/>
                     <EditRackNameModal/>
@@ -91,11 +123,9 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        resetCurrentTopology: () => dispatch(resetCurrentTopology()),
-        openProjectSucceeded: (id) => dispatch(openProjectSucceeded(id)),
-        onViewTopologies: () => dispatch(openNewTopologyModal()),
-        openExperimentSucceeded: (projectId, experimentId) =>
-            dispatch(openExperimentSucceeded(projectId, experimentId)),
+        openProjectSucceeded: (projectId) => dispatch(openProjectSucceeded(projectId)),
+        openPortfolioSucceeded: (projectId, portfolioId) => dispatch(openPortfolioSucceeded(projectId, portfolioId)),
+        openScenarioSucceeded: (projectId, portfolioId, scenarioId) => dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId)),
     }
 }
 
-- 
cgit v1.2.3