Commit 3482c052 authored by jrc632's avatar jrc632
Browse files

Moved Target Body Dropdown into ConsoleTargetInfo.jsx 

Trying to consolidate interface so components don't take up more space than they need.
parent 0f638979

app/src/components/container/App.jsx

+14 −65
Original line number Diff line number Diff line 
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 ListSubheader from "@material-ui/core/ListSubheader";

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

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

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

import AdapterDateFns from '@mui/lab/AdapterDateFns';

import LocalizationProvider from '@mui/lab/LocalizationProvider';



/**

 * Controls css styling for this component using js to css
@@ -47,73 +38,31 @@ const useStyles = makeStyles(theme => ({ 
 */

export default function App() {

  const classes = useStyles();

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

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



  /**

   * Handles target selection

   *

   * @param {*} event selection event

   */

  const handleChange = event => {

  const handleTargetBodyChange = event => {

    setTargetPlanet(event.target.value);

  };







  return (

    <div className={classes.appPaper}>

      <div>

      <div className={classes.container}>

        <FormControl className={classes.formControl}>

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

          <Select

            defaultValue={1}

            onChange={handleChange}

            value={targetPlanet}

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

          >

            <ListSubheader value="Mercury">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 value="Moon">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>

        {/* <AutoCompleteInput className={classes.autoComplete} /> */}

      </div>

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

        <div>

          <ConsoleContainer target={targetPlanet} />

        <ConsoleContainer target={targetPlanet} bodyChange={handleTargetBodyChange}/>

        <MapContainer target={targetPlanet} />

        <WellKnownTextInput />

        <CreditsDisplay />

      </div>

      <div className={classes.rightSidebar}>

        

        <SearchAndFilterInput />

      </div>

      </Paper>

    </div>

  );

}

app/src/components/container/ConsoleContainer.jsx

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

  return (

    <div className={classes.root}>

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

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

    </div>

  );

}

app/src/components/presentational/ConsoleAppBar.jsx

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

            <Divider orientation="vertical" />

            <Grid container item direction="column" xs>

              <ConsoleTargetInfo target={props.target} />

              <ConsoleTargetInfo target={props.target} bodyChange={props.bodyChange} />

              <Grid

                container

                item

app/src/components/presentational/ConsoleTargetInfo.jsx

+58 −0
Original line number Diff line number Diff line
@@ -2,6 +2,12 @@ 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 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 ListSubheader from "@material-ui/core/ListSubheader";



/**

 * Controls css styling for this component using js to css
@@ -38,6 +44,17 @@ const useStyles = makeStyles({ 
 */

export default function ConsoleTargetInfo(props) {

  const classes = useStyles();

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



  /**

   * Handles target selection

   *

   * @param {*} event selection event

   */

  const handleChange = event => {

    setTargetPlanet(event.target.value);

  };



  return (

    <Grid

      container
@@ -52,6 +69,47 @@ export default function ConsoleTargetInfo(props) { 
          {props.target.toUpperCase()}

        </Typography>

      </Grid>

      <Grid item>

        <FormControl className={classes.formControl}>

          <Select

            defaultValue={1}

            onChange={props.bodyChange}

            value={props.target}

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

          >

            <ListSubheader value="Mercury">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 value="Moon">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>

      </Grid>

    </Grid>

  );

}