Unverified Commit 7556d35b authored by Scott Ames's avatar Scott Ames Committed by GitHub
Browse files

Merge pull request #22 from scottaames/master 

GUI done
parents 6f1485fb 0a0cd7a4

package.json

+1 −1
Original line number Diff line number Diff line
@@ -55,7 +55,6 @@ 
    "html-webpack-plugin": "^3.2.0",

    "jsdoc": "^3.6.3",

    "onchange": "^6.1.0",

    "postcss-loader": "^3.0.0",

    "precss": "^4.0.0",

    "prettier": "^1.19.1",

    "prop-types": "^15.7.2",
@@ -69,6 +68,7 @@ 
  "dependencies": {

    "@material-ui/core": "^4.9.0",

    "@material-ui/icons": "^4.5.1",

    "@material-ui/lab": "^4.0.0-alpha.41",

    "leaflet": "^1.6.0",

    "proj4": "^2.6.0",

    "proj4leaflet": "^1.0.2",

src/App.jsx

0 → 100644
+30 −0
Original line number Diff line number Diff line 
import React, { Component } from "react";

import Paper from "@material-ui/core/Paper";

import AstroMap from "./js/AstroMap.js";

import Projection from "./js/Projection.js";

import ConsoleContainer from "./components/container/ConsoleContainer.jsx";

import "leaflet";

import "proj4leaflet";

import "proj4";



export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {};

  }



  componentDidMount() {

    let map = new AstroMap("map-container", "Mars", {});

    let projectionControl = new Projection();

    projectionControl.addTo(map);

  }



  render() {

    return (

      <Paper elevation={10}>

        <ConsoleContainer />

        <div id="map-container" />

      </Paper>

    );

  }

}

src/components/container/ConsoleContainer.jsx

+12 −59
Original line number Diff line number Diff line 
import React from "react";

import ConsoleTargetInfo from "../presentational/ConsoleTargetInfo.jsx";

import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons.jsx";

import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";

import Grid from "@material-ui/core/Grid";

import ConsoleAppBar from "../presentational/ConsoleAppBar.jsx";

import { makeStyles } from "@material-ui/core/styles";

import Paper from "@material-ui/core/Paper";

import Container from "@material-ui/core/Container";



const useStyles = makeStyles(theme => ({

const useStyles = makeStyles({

  root: {

    width: 800,

    maxWidth: 800,

    height: 100,

    padding: theme.spacing(0.75)

    width: "100%"

  },

  paper: {

    maxWidth: "100%",

    maxHeight: 100,

    background: "#DCEED1",

    background: "linear-gradient(to right, #E2E2E2, #DCEED1)",

    background: "linear-gradient(to right, #E2E2E2, #DCEED1)"

  },

  grid: {

    maxHeight: 100,

    width: "inherit"

  consAppbar: {

    maxWidth: 800,

    height: 100,

    width: "auto"

  }

}));

});



export default function ConsoleContainer(props) {

  const classes = useStyles();

  return (

    <Container className={classes.root}>

      <Paper elevation={10} className={classes.paper}>

        <Grid container justify="space-evenly" spacing={1}>

          <Grid

            className={classes.grid}

            container

            item

            xs={1}

            justify="space-evenly"

            direction="column"

            alignItems="flex-start"

          >

            <ConsoleProjectionButtons />

          </Grid>

          <Grid

            container

            item

            justify="space-evenly"

            direction="column"

            className={classes.grid}

            xs={3}

            alignItems="center"

          >

            <ConsoleTargetInfo targetName="Mars" />

          </Grid>

          <Grid

            container

            item

            className={classes.grid}

            xs={7}

            justify="space-evenly"

            alignItems="flex-end"

            spacing={1}

          >

            <ConsoleLonLatSelects />

          </Grid>

        </Grid>

      </Paper>

    </Container>

    <div className={classes.root}>

      <ConsoleAppBar className={classes.consAppbar} />

    </div>

  );

}

src/components/container/MapContainer.jsx

deleted100644 → 0
+0 −13
Original line number Diff line number Diff line 
import React from "react";

import Paper from "@material-ui/core/Paper";

import Container from "@material-ui/core/Container";



export default function MapContainer(props) {

  return (

    <Container>

      <Paper>

        <div id="map-container" />

      </Paper>

    </Container>

  );

}

src/components/presentational/ConsoleAppBar.jsx

0 → 100644
+48 −0
Original line number Diff line number Diff line 
import React from "react";

import ConsoleTargetInfo from "../presentational/ConsoleTargetInfo.jsx";

import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons.jsx";

import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";

import AppBar from "@material-ui/core/AppBar";

import Toolbar from "@material-ui/core/Toolbar";

import Grid from "@material-ui/core/Grid";

import { fade, makeStyles } from "@material-ui/core/styles";



const useStyles = makeStyles(theme => ({

  root: {

    height: 100,

    width: "100%"

  },

  appbar: {

    background: "#96DEDA",

    background: "-webkit-linear-gradient(to right, #96DEDA, #86fde8)",

    background: "linear-gradient(to right, #96DEDA, #86fde8)"

  },

  toolbar: {

    height: "100%",

    maxWidth: 800,

    width: "auto",

    padding: 0

  },

  grid: {

    maxWidth: 800,

    height: 100

  }

}));



export default function ConsoleAppBar(props) {

  const classes = useStyles();



  return (

    <div className={classes.root}>

      <AppBar className={classes.appbar} position="static" color="inherit">

        <Toolbar className={classes.toolbar}>

          <Grid className={classes.grid} container>

            <ConsoleProjectionButtons />

            <ConsoleTargetInfo targetName="Mars" />

            <ConsoleLonLatSelects />

          </Grid>

        </Toolbar>

      </AppBar>

    </div>

  );

}