Commit 49310d09 authored by Scott Ames's avatar Scott Ames
Browse files

created title bar at bottom - TODO: link creation.

parent 039590eb

app/src/components/container/App.jsx

+2 −0
Original line number Diff line number Diff line
@@ -10,6 +10,7 @@ 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";



/**

 * Controls css styling for this component using js to css
@@ -87,6 +88,7 @@ export default function App() { 
        <ConsoleContainer target={targetPlanet} />

        <MapContainer target={targetPlanet} />

        <WellKnownTextInput />

        <CreditsDisplay style={{ width: 800, maxWidth: 800 }} />

      </Paper>

    </div>

  );

app/src/components/presentational/ConsoleAppBar.jsx

+6 −1
Original line number Diff line number Diff line
@@ -43,7 +43,12 @@ export default function ConsoleAppBar(props) { 


  return (

    <div className={classes.root}>

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

      <AppBar

        className={classes.appbar}

        variant="outlined"

        position="static"

        color="inherit"

      >

        <Toolbar className={classes.toolbar}>

          <Grid

            className={classes.grid}

app/src/components/presentational/ConsoleCoordinates.jsx

+19 −10
Original line number Diff line number Diff line
@@ -17,12 +17,14 @@ const useStyles = makeStyles({ 
  },

  title: {

    color: "#343a40",

    fontSize: 14,

    fontSize: "0.7rem",

    lineHeight: "1rem",

    fontWeight: 600

  },

  coords: {

    color: "#343a40",

    fontSize: 14

    lineHeight: "1.5rem"

    //fontSize: "0.7rem"

  },

  container: {

    display: "flex",
@@ -32,9 +34,9 @@ const useStyles = makeStyles({ 
      margin: 0,

      padding: 0,

      width: "47.5%",

      height: "50%",

      //maxHeight: 50,

      //maxWidth: "100%",

      height: "100%",

      maxHeight: "3rem",

      maxWidth: "47.5%",

      backgroundColor: "#f1f3f5",

      textAlign: "center"

    }
@@ -76,7 +78,8 @@ export default function ConsoleCoordinates() { 
        <StyledTooltip

          title={

            <Typography variant="subtitle1">

              Displays coordinates in the form: (Lon, Lat).

              Displays the longitude and latitude of the area on the map

              underneath the cursor.

            </Typography>

          }

          enterDelay={800}
@@ -86,21 +89,27 @@ export default function ConsoleCoordinates() { 
        >

          <div className={classes.container}>

            <Paper variant="outlined" square>

              <Typography className={classes.title}>Longitude</Typography>

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

                Longitude

              </Typography>

              <Divider variant="fullWidth" />

              <Typography

                noWrap

                className={classes.coords}

                id="lonCoordinateDisplay"

                variant="subtitle1"

                variant="subtitle2"

              />

            </Paper>

            <Paper variant="outlined" square>

              <Typography className={classes.title}>Latitude</Typography>

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

                Latitude

              </Typography>

              <Divider variant="fullWidth" />

              <Typography

                noWrap

                className={classes.coords}

                id="latCoordinateDisplay"

                variant="subtitle1"

                variant="subtitle2"

              />

            </Paper>

          </div>

app/src/components/presentational/CreditsDisplay.jsx

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

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

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

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

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

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

import GitHubIcon from "@material-ui/icons/GitHub";

import WbSunnyIcon from "@material-ui/icons/WbSunny";



/**

 * Controls css styling for this component using js to css

 */

const useStyles = makeStyles(theme => ({

  root: {

    backgroundColor: "#f8f9fa",

    width: 800,

    maxWidth: 800,

    maxHeight: 25,

    height: 25,

    borderTop: `1px solid ${theme.palette.divider}`,

    color: "#343a40",

    textAlign: "center",

    "& hr": {

      //margin: theme.spacing(0, 1),

      height: 25

    },

    "& svg": {

      margin: theme.spacing(0.25)

    },

    "& > *": {

      maxHeight: 25

    }

  }

}));



export default function CreditsDisplay() {

  const classes = useStyles();



  return (

    <div>

      <Grid

        container

        alignItems="center"

        alignContent="center"

        justify="space-evenly"

        className={classes.root}

        wrap="nowrap"

      >

        <Grid item xs={2}>

          <Link

            color="inherit"

            style={{ fontSize: 12, fontWeight: 600 }}

            variant="caption"

            href=""

          >

            Documentation

          </Link>

        </Grid>

        <Divider orientation="vertical" />

        <Grid item xs={2}>

          <Link

            color="inherit"

            style={{ fontSize: 12, fontWeight: 600 }}

            variant="caption"

            href=""

          >

            User Manual

          </Link>

        </Grid>

        <Divider orientation="vertical" />

        <Grid item xs={4}>

          <Typography

            style={{ fontSize: 12, fontStyle: "italic" }}

            variant="caption"

          >

            Made by{" "}

          </Typography>

          <Link

            variant="caption"

            color="inherit"

            style={{ fontSize: 12, fontWeight: 600 }}

            href="https://cefns.nau.edu/capstone/projects/CS/2020/CartoCosmos-S20/#/"

          >

            CartoCosmos

          </Link>

        </Grid>

        <Divider orientation="vertical" />

        <Grid item xs={2}>

          <Link

            color="inherit"

            style={{ fontSize: 12, fontWeight: 600 }}

            variant="caption"

            href=""

          >

            Jupyter Notebooks

          </Link>

        </Grid>

        <Divider orientation="vertical" />

        <Grid item xs={2}>

          <Link href="https://github.com/CartoCosmos/CartoCosmos">

            <GitHubIcon style={{ color: "#343a40", fontSize: 20 }} />

          </Link>

        </Grid>

      </Grid>

    </div>

  );

}

app/src/components/presentational/WellKnownTextInput.jsx

+54 −24
Original line number Diff line number Diff line
@@ -2,7 +2,10 @@ import React from "react"; 
import Typography from "@material-ui/core/Typography";

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

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

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

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

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

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

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



/**

 * Controls css styling for this component using js to css
@@ -10,13 +13,13 @@ import { makeStyles, fade } from "@material-ui/core/styles"; 
const useStyles = makeStyles(theme => ({

  root: {

    textAlign: "center",

    maxHeight: 100,

    height: 100,

    maxHeight: 80,

    height: 80,

    backgroundColor: "#f8f9fa",

    overflow: "hidden"

  },

  container: {

    padding: "0.2rem",

    padding: "1rem",

    height: 50,

    width: "75%",

    display: "flex",
@@ -50,6 +53,19 @@ const useStyles = makeStyles(theme => ({ 
  }

}));



/**

 * Custom Component that uses Tooltip with modified css styling

 */

const StyledTooltip = withStyles(theme => ({

  tooltip: {

    backgroundColor: "#f5f5f9",

    color: "rgba(0, 0, 0, 0.87)",

    maxWidth: 250,

    fontSize: 12,

    border: "1px solid #dadde9"

  }

}))(Tooltip);



/**

 * Component that accepts user input of Well-Known Text

 *
@@ -60,12 +76,25 @@ const useStyles = makeStyles(theme => ({ 
 */

export default function WellKnownTextInput() {

  const classes = useStyles();

  const wktLink =

    "https://www.vertica.com/docs/9.2.x/HTML/Content/Authoring/AnalyzingData/Geospatial/Spatial_Definitions/WellknownTextWKT.htm";



  return (

    <div className={classes.root}>

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

        Well-Known Text Input

      <StyledTooltip

        title={

          <Typography variant="subtitle1">

            Enter a <Link href={wktLink}>Well-Known Text</Link>

            &ensp;string then press "Draw on Map" to plot the polygon on the

            map.

          </Typography>

        }

        enterDelay={800}

        leaveDelay={250}

        interactive

        arrow

        TransitionComponent={Zoom}

      >

        <div className={classes.container}>

          <TextField

            className={classes.textbox}
@@ -83,6 +112,7 @@ export default function WellKnownTextInput() { 
            Draw On Map

          </Button>

        </div>

      </StyledTooltip>

    </div>

  );

}