Commit 466d8169 authored by Scott Ames's avatar Scott Ames
Browse files

GUI base functionality complete

parent 9249df6a

src/components/container/ConsoleContainer.jsx

+39 −10
Original line number Diff line number Diff line
@@ -3,41 +3,70 @@ 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 { makeStyles, ThemeProvider } from "@material-ui/core/styles";

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 => ({

  root: {

    width: 800,

    height: 100

    height: 100,

    padding: theme.spacing(0.75)

  },

  paper: {

    padding: theme.spacing(0.5),

    maxWidth: "100%",

    maxHeight: "100%",

    maxHeight: 100,

    background: "#DCEED1",

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

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

  },

  grid: {

    maxHeight: 100,

    width: "inherit"

  }

}));



export default function ConsoleContainer(props) {

  const classes = useStyles();

  return (

    <div className={classes.root}>

    <Container className={classes.root}>

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

        <Grid container spacing={0}>

          <Grid container item xs direction="column" alignItems="flex-start">

        <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 direction="column" xs alignItems="center">

          <Grid

            container

            item

            justify="space-evenly"

            direction="column"

            className={classes.grid}

            xs={3}

            alignItems="center"

          >

            <ConsoleTargetInfo targetName="Mars" />

          </Grid>

          <Grid container item direction="column" xs alignItems="flex-end">

          <Grid

            container

            item

            className={classes.grid}

            xs={7}

            justify="space-evenly"

            alignItems="flex-end"

            spacing={1}

          >

            <ConsoleLonLatSelects />

          </Grid>

        </Grid>

      </Paper>

    </div>

    </Container>

  );

}

src/components/presentational/ConsoleLonLatSelects.jsx

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

import React from "react";

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

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

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

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

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



export default class ConsoleProjectionButtons extends Component {

  constructor() {

    super();



    this.state = {};

const useStyles = makeStyles({

  grid: {

    maxHeight: "100%",

    width: "inherit",

    margin: "auto"

  },

  buttons: {

    backgroundColor: "#afafef",

    width: 120

  }

});



  render() {

    return <div></div>;

  }

export default function ConsoleLonLatSelects(props) {

  const classes = useStyles();

  return (

    <React.Fragment>

      <Grid className={classes.grid} item xs>

        <FormControl>

          <Select id="console-ocentric-ographic-select" defaultValue="ocentric">

            <MenuItem value="ocentric">Planetocentric</MenuItem>

            <MenuItem value="ographic">Planetographic</MenuItem>

          </Select>

        </FormControl>

      </Grid>

      <Grid className={classes.grid} item xs>

        <FormControl>

          <Select id="console-latititude-select" defaultValue="180">

            <MenuItem value={180}>-180&deg; to 180&deg;</MenuItem>

            <MenuItem value={360}>0&deg; to 360&deg;</MenuItem>

          </Select>

        </FormControl>

      </Grid>

      <Grid className={classes.grid} item xs>

        <FormControl>

          <Select id="console-ocentric-ographic-select" defaultValue="east">

            <MenuItem value="east">Positive East</MenuItem>

            <MenuItem value="west">Positive West</MenuItem>

          </Select>

        </FormControl>

      </Grid>

    </React.Fragment>

  );

}

src/components/presentational/ConsoleProjectionButtons.jsx

+3 −3
Original line number Diff line number Diff line
@@ -23,21 +23,21 @@ export default function ConsoleProjectionButtons(props) { 
  const classes = useStyles();

  return (

    <React.Fragment>

      <Grid item xs={4}>

      <Grid item xs>

        <div className={classes.image}>

          <ButtonBase>

            <img className={classes.img} src={northPolar} />

          </ButtonBase>

        </div>

      </Grid>

      <Grid item xs={4}>

      <Grid item xs>

        <div className={classes.image}>

          <ButtonBase>

            <img className={classes.img} src={simpleCylindrical} />

          </ButtonBase>

        </div>

      </Grid>

      <Grid item xs={4}>

      <Grid item xs>

        <div className={classes.image}>

          <ButtonBase>

            <img className={classes.img} src={southPolar} />

src/components/presentational/ConsoleTargetInfo.jsx

+28 −9
Original line number Diff line number Diff line 
import React, { Component, Fragment } from "react";

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";
@@ -7,7 +7,22 @@ import marsLogo from "../../assets/img/marsLogo.png"; 
const useStyles = makeStyles({

  img: {

    width: 30,

    height: 30

    height: 30,

    float: "left"

  },

  title: {

    float: "right"

  },

  container: {

    paddingTop: 5

  },

  grid: {

    height: 100,

    width: "100%",

    margin: "auto"

  },

  h6: {

    paddingTop: 5

  }

});
@@ -15,14 +30,18 @@ export default function ConsoleTargetInfo(props) { 
  const classes = useStyles();

  return (

    <React.Fragment>

      <Grid item xs={3}>

        <Typography variant="h5">{props.targetName}</Typography>

      </Grid>

      <Grid item xs={3}>

      <Grid className={classes.grid} item xs={6}>

        <div className={classes.container}>

          <img className={classes.img} src={marsLogo} />

          <Typography className={classes.title} variant="h5">

            {props.targetName}

          </Typography>

        </div>

      </Grid>

      <Grid item xs={3}>

        <Typography varient="h6">Lon, Lat: </Typography>

      <Grid className={classes.grid} item xs={6}>

        <Typography className={classes.h6} variant="subtitle1">

          Lon, Lat:{" "}

        </Typography>

      </Grid>

    </React.Fragment>

  );

src/styles.css

+2 −2
Original line number Diff line number Diff line 
#console {

  width: 800px;

  height: 100px;

  max-width: 800px;

  max-height: 100px;

  flex: 1;

}