Unverified Commit 70cedc3f authored by Scott Ames's avatar Scott Ames Committed by GitHub
Browse files

Merge pull request #60 from scottaames/master 

added target switcher and updated coords
parents 86edff90 d3363e10

app/src/components/container/App.jsx

+68 −5
Original line number Diff line number Diff line 
import React, { Component } from "react";

import React from "react";

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

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

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

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

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

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

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

import ConsoleContainer from "./ConsoleContainer.jsx";

import MapContainer from "./MapContainer.jsx";

import "proj4leaflet";

import "proj4";

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



const useStyles = makeStyles(theme => ({

  formControl: {

    margin: theme.spacing(1),

    minWidth: 120

  }

}));



export default function App() {

  const classes = useStyles();

  const [targetPlanet, setTargetPlanet] = React.useState("Mercury");



  const handleChange = event => {

    setTargetPlanet(event.target.value);

  };



  return (

    <div>

      <FormControl className={classes.formControl}>

        <InputLabel htmlFor="grouped-select">Target Body</InputLabel>

        <Select

          defaultValue={1}

          onChange={handleChange}

          value={targetPlanet}

          input={<Input id="grouped-select" />}

        >

          <ListSubheader>Planets</ListSubheader>

          <MenuItem value="Mercury">Mercury</MenuItem>

          <MenuItem value="Venus">Venus</MenuItem>

          <MenuItem value="Earth">Earth</MenuItem>

          <MenuItem value="Mars">Mars</MenuItem>

          <MenuItem value="Jupiter">Jupiter</MenuItem>

          <MenuItem value="Saturn">Saturn</MenuItem>

          <MenuItem value="Uranus">Uranus</MenuItem>

          <MenuItem value="Neptune">Neptune</MenuItem>

          <MenuItem value="Pluto">Pluto (yeah, a planet)</MenuItem>

          <ListSubheader>Moons and Other Bodies</ListSubheader>

          <MenuItem value="Moon">Moon</MenuItem>

          <MenuItem value="Ceres">Ceres</MenuItem>

          <MenuItem value="Mimas">Mimas</MenuItem>

          <MenuItem value="Titan">Titan</MenuItem>

          <MenuItem value="Deimos">Deimos</MenuItem>

          <MenuItem value="Tethys">Tethys</MenuItem>

          <MenuItem value="Phoebe">Phoebe</MenuItem>

          <MenuItem value="Iapetus">Iapetus</MenuItem>

          <MenuItem value="Dione">Dione</MenuItem>

          <MenuItem value="Enceladus">Enceladus</MenuItem>

          <MenuItem value="Hyperion">Hyperion</MenuItem>

          <MenuItem value="Io">Io</MenuItem>

          <MenuItem value="Callisto">Callisto</MenuItem>

          <MenuItem value="Europa">Europa</MenuItem>

          <MenuItem value="Ganymede">Ganymede</MenuItem>

          <MenuItem value="Rhea">Rhea</MenuItem>

          <MenuItem value="Phobos">Phobos</MenuItem>

          <MenuItem value="Vesta">Vesta</MenuItem>

          <MenuItem value="Charon">Charon</MenuItem>

        </Select>

      </FormControl>

      <Paper elevation={10}>

      <ConsoleContainer />

      <MapContainer />

        <ConsoleContainer target={targetPlanet} />

        <MapContainer target={targetPlanet} />

      </Paper>

    </div>

  );

}

app/src/components/container/ConsoleContainer.jsx

+1 −1
Original line number Diff line number Diff line
@@ -19,7 +19,7 @@ export default function ConsoleContainer(props) { 
  const classes = useStyles();

  return (

    <div className={classes.root}>

      <ConsoleAppBar className={classes.consAppbar} />

      <ConsoleAppBar target={props.target} className={classes.consAppbar} />

    </div>

  );

}

app/src/components/container/MapContainer.jsx

+30 −3
Original line number Diff line number Diff line
@@ -13,21 +13,48 @@ export default class MapContainer extends Component { 
  handleFullScreenChange() {}



  componentDidMount() {

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

    let map = new AstroMap("map-container", this.props.target, {});

    new Projection().addTo(map);

    new MousePosition({

      numDigits: 2,

      targetPlanet: "mars"

      targetPlanet: this.props.target

    }).addTo(map);



    map.on("fullscreenchange", this.handleFullScreenChange());

  }



  componentDidUpdate() {

    // remove old map container and append new container to its parent

    let oldContainer = document.getElementById("map-container");

    let parent = oldContainer.parentNode;

    let newContainer = document.createElement("div");

    parent.removeChild(oldContainer);

    newContainer.setAttribute("id", "map-container");

    parent.appendChild(newContainer);



    // remove disabled classes from projection buttons so that the css is reset to default

    document.getElementById("projectionNorthPole").classList.remove("disabled");

    document

      .getElementById("projectionCylindrical")

      .classList.remove("disabled");

    document.getElementById("projectionSouthPole").classList.remove("disabled");



    // create new map with updated target

    let map = new AstroMap("map-container", this.props.target, {});

    new Projection().addTo(map);

    new MousePosition({

      numDigits: 2,

      targetPlanet: this.props.target

    }).addTo(map);

    new L.Control.Scale({ imperial: false }).addTo(map);

    map.on("fullscreenchange", this.handleFullScreenChange());

  }



  render() {

    return (

      <div>

        <div id="map-container" />

      </div>

    )

    );

  }

}

app/src/components/presentational/ConsoleAppBar.jsx

+1 −1
Original line number Diff line number Diff line
@@ -47,7 +47,7 @@ export default function ConsoleAppBar(props) { 
            <ConsoleProjectionButtons />

            <Divider orientation="vertical" />

            <Grid container item direction="column" xs>

              <ConsoleTargetInfo targetName="MARS" />

              <ConsoleTargetInfo target={props.target} />

              <Grid

                container

                item

app/src/components/presentational/ConsoleCoordinates.jsx

+10 −2
Original line number Diff line number Diff line
@@ -2,13 +2,16 @@ import React from "react"; 
import Grid from "@material-ui/core/Grid";

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

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

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

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



const useStyles = makeStyles({

  grid: {

    width: "100%",

    height: "100%",

    maxHeight: 60

  }

  },

  title: {}

});



export default function ConsoleCoordinates(props) {
@@ -24,7 +27,12 @@ export default function ConsoleCoordinates(props) { 
      xs={2}

    >

      <Grid item xs>

        <Typography noWrap id="coordinateDisplay" variant="subtitle1" />

        <Typography

          noWrap

          className={classes.title}

          id="coordinateDisplay"

          variant="subtitle1"

        />

      </Grid>

    </Grid>

  );