diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-04-25 16:01:14 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-04-25 16:01:14 +0200 |
| commit | cd0b45627f0d8da8c8dc4edde223f3c36e9bcfbf (patch) | |
| tree | 6ae1681630a0e270c23804e6dbb3bd414ebe5d6e /opendc-web/opendc-web-ui/src/pages | |
| parent | 128a1db017545597a5c035b7960eb3fd36b5f987 (diff) | |
build: Migrate to flat project structure
This change updates the project structure to become flattened.
Previously, the simulator, frontend and API each lived into their own
directory.
With this change, all modules of the project live in the top-level
directory of the repository. This should improve discoverability of
modules of the project.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/App.js | 137 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/Home.js | 33 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/Home.sass | 9 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/NotFound.js | 14 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/NotFound.sass | 11 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/Profile.js | 35 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/Projects.js | 43 |
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 |
