7 files changed, 282 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/pages/App.js b/opendc-web/opendc-web-ui/src/pages/App.js
new file mode 100644
index 00000000..cbc805b8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/App.js
@@ -0,0 +1,137 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+import { connect } from 'react-redux'
+import { ShortcutManager } from 'react-shortcuts'
+import { openPortfolioSucceeded } from '../actions/portfolios'
+import { openProjectSucceeded } from '../actions/projects'
+import ToolPanelComponent from '../components/app/map/controls/ToolPanelComponent'
+import LoadingScreen from '../components/app/map/LoadingScreen'
+import ScaleIndicatorContainer from '../containers/app/map/controls/ScaleIndicatorContainer'
+import MapStage from '../containers/app/map/MapStage'
+import TopologySidebarContainer from '../containers/app/sidebars/topology/TopologySidebarContainer'
+import DeleteMachineModal from '../containers/modals/DeleteMachineModal'
+import DeleteRackModal from '../containers/modals/DeleteRackModal'
+import DeleteRoomModal from '../containers/modals/DeleteRoomModal'
+import EditRackNameModal from '../containers/modals/EditRackNameModal'
+import EditRoomNameModal from '../containers/modals/EditRoomNameModal'
+import KeymapConfiguration from '../shortcuts/keymap'
+import NewTopologyModal from '../containers/modals/NewTopologyModal'
+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'
+import PortfolioResultsContainer from '../containers/app/results/PortfolioResultsContainer'
+
+const shortcutManager = new ShortcutManager(KeymapConfiguration)
+
+class AppComponent extends React.Component {
+    static propTypes = {
+        projectId: PropTypes.string.isRequired,
+        portfolioId: PropTypes.string,
+        scenarioId: PropTypes.string,
+        projectName: PropTypes.string,
+    }
+    static childContextTypes = {
+        shortcuts: PropTypes.object.isRequired,
+    }
+
+    componentDidMount() {
+        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() {
+        return {
+            shortcuts: shortcutManager,
+        }
+    }
+
+    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 app-page-container">
+                <ProjectSidebarContainer />
+                <div className="container-fluid full-height">
+                    <PortfolioResultsContainer />
+                </div>
+            </div>
+        )
+
+        const scenarioElements = (
+            <div className="full-height app-page-container">
+                <ProjectSidebarContainer />
+                <div className="container-fluid full-height">
+                    <h2>Scenario loading</h2>
+                </div>
+            </div>
+        )
+
+        return (
+            <DocumentTitle
+                title={this.props.projectName ? this.props.projectName + ' - OpenDC' : 'Simulation - OpenDC'}
+            >
+                <div className="page-container full-height">
+                    <AppNavbarContainer fullWidth={true} />
+                    {this.props.scenarioId
+                        ? scenarioElements
+                        : this.props.portfolioId
+                        ? portfolioElements
+                        : constructionElements}
+                    <NewTopologyModal />
+                    <NewPortfolioModal />
+                    <NewScenarioModal />
+                    <EditRoomNameModal />
+                    <DeleteRoomModal />
+                    <EditRackNameModal />
+                    <DeleteRackModal />
+                    <DeleteMachineModal />
+                </div>
+            </DocumentTitle>
+        )
+    }
+}
+
+const mapStateToProps = (state) => {
+    let projectName = undefined
+    if (state.currentProjectId !== '-1' && state.objects.project[state.currentProjectId]) {
+        projectName = state.objects.project[state.currentProjectId].name
+    }
+
+    return {
+        topologyIsLoading: state.currentTopologyId === '-1',
+        projectName,
+    }
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        openProjectSucceeded: (projectId) => dispatch(openProjectSucceeded(projectId)),
+        openPortfolioSucceeded: (projectId, portfolioId) => dispatch(openPortfolioSucceeded(projectId, portfolioId)),
+        openScenarioSucceeded: (projectId, portfolioId, scenarioId) =>
+            dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId)),
+    }
+}
+
+const App = connect(mapStateToProps, mapDispatchToProps)(AppComponent)
+
+export default App
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.js b/opendc-web/opendc-web-ui/src/pages/Home.js
new file mode 100644
index 00000000..6fc940c0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/Home.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+import ContactSection from '../components/home/ContactSection'
+import IntroSection from '../components/home/IntroSection'
+import JumbotronHeader from '../components/home/JumbotronHeader'
+import ModelingSection from '../components/home/ModelingSection'
+import SimulationSection from '../components/home/SimulationSection'
+import StakeholderSection from '../components/home/StakeholderSection'
+import TeamSection from '../components/home/TeamSection'
+import TechnologiesSection from '../components/home/TechnologiesSection'
+import HomeNavbar from '../components/navigation/HomeNavbar'
+import './Home.sass'
+
+function Home() {
+    return (
+        <div>
+            <HomeNavbar />
+            <div className="body-wrapper page-container">
+                <JumbotronHeader />
+                <IntroSection />
+                <StakeholderSection />
+                <ModelingSection />
+                <SimulationSection />
+                <TechnologiesSection />
+                <TeamSection />
+                <ContactSection />
+                <DocumentTitle title="OpenDC" />
+            </div>
+        </div>
+    )
+}
+
+export default Home
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.sass b/opendc-web/opendc-web-ui/src/pages/Home.sass
new file mode 100644
index 00000000..79cb9698
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/Home.sass
@@ -0,0 +1,9 @@
+.body-wrapper
+    position: relative
+    overflow-y: hidden
+
+.intro-section, .modeling-section, .technologies-section
+    background-color: #fff
+
+.stakeholder-section, .simulation-section, .team-section
+    background-color: #f2f2f2
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.js b/opendc-web/opendc-web-ui/src/pages/NotFound.js
new file mode 100644
index 00000000..72be7342
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+import TerminalWindow from '../components/not-found/TerminalWindow'
+import './NotFound.sass'
+
+const NotFound = () => (
+    <DocumentTitle title="Page Not Found - OpenDC">
+        <div className="not-found-backdrop">
+            <TerminalWindow />
+        </div>
+    </DocumentTitle>
+)
+
+export default NotFound
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.sass b/opendc-web/opendc-web-ui/src/pages/NotFound.sass
new file mode 100644
index 00000000..59231f7a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.sass
@@ -0,0 +1,11 @@
+.not-found-backdrop
+    position: absolute
+    left: 0
+    top: 0
+
+    margin: 0
+    padding: 0
+    width: 100%
+    height: 100%
+
+    background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6)
diff --git a/opendc-web/opendc-web-ui/src/pages/Profile.js b/opendc-web/opendc-web-ui/src/pages/Profile.js
new file mode 100644
index 00000000..0d94b519
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/Profile.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+import { connect } from 'react-redux'
+import { openDeleteProfileModal } from '../actions/modals/profile'
+import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
+import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+
+const ProfileContainer = ({ onDelete }) => (
+    <DocumentTitle title="My Profile - OpenDC">
+        <div className="full-height">
+            <AppNavbarContainer fullWidth={false} />
+            <div className="container text-page-container full-height">
+                <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
+                    Delete my account on OpenDC
+                </button>
+                <p className="text-muted text-center">
+                    This does not delete your Google account, but simply disconnects it from the OpenDC platform and
+                    deletes any project info that is associated with you (projects you own and any authorizations you
+                    may have on other projects).
+                </p>
+            </div>
+            <DeleteProfileModal />
+        </div>
+    </DocumentTitle>
+)
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        onDelete: () => dispatch(openDeleteProfileModal()),
+    }
+}
+
+const Profile = connect(undefined, mapDispatchToProps)(ProfileContainer)
+
+export default Profile
diff --git a/opendc-web/opendc-web-ui/src/pages/Projects.js b/opendc-web/opendc-web-ui/src/pages/Projects.js
new file mode 100644
index 00000000..bb54aaa5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/Projects.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+import { connect } from 'react-redux'
+import { openNewProjectModal } from '../actions/modals/projects'
+import { fetchAuthorizationsOfCurrentUser } from '../actions/users'
+import ProjectFilterPanel from '../components/projects/FilterPanel'
+import NewProjectModal from '../containers/modals/NewProjectModal'
+import NewProjectButtonContainer from '../containers/projects/NewProjectButtonContainer'
+import VisibleProjectList from '../containers/projects/VisibleProjectAuthList'
+import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+
+class ProjectsContainer extends React.Component {
+    componentDidMount() {
+        this.props.fetchAuthorizationsOfCurrentUser()
+    }
+
+    render() {
+        return (
+            <DocumentTitle title="My Projects - OpenDC">
+                <div className="full-height">
+                    <AppNavbarContainer fullWidth={false} />
+                    <div className="container text-page-container full-height">
+                        <ProjectFilterPanel />
+                        <VisibleProjectList />
+                        <NewProjectButtonContainer />
+                    </div>
+                    <NewProjectModal />
+                </div>
+            </DocumentTitle>
+        )
+    }
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        fetchAuthorizationsOfCurrentUser: () => dispatch(fetchAuthorizationsOfCurrentUser()),
+        openNewProjectModal: () => dispatch(openNewProjectModal()),
+    }
+}
+
+const Projects = connect(undefined, mapDispatchToProps)(ProjectsContainer)
+
+export default Projects