Commit 01bdb8a3 authored by Scott Ames's avatar Scott Ames
Browse files

commented ui code

parents 03cdec0d ab9a63d8

app/jsdoc.json

0 → 100644
+22 −0
Original line number Diff line number Diff line 
{

  "tags": {

    "allowUnknownTags": true,

    "dictionaries": ["jsdoc", "closure"]

  },

  "source": {

    "include": ["src"],

    "includePattern": ".+\\.js(doc|x)?$",

    "excludePattern": "(^|\\/|\\\\)_"

  },

  "plugins": ["plugins/markdown", "better-docs/component"],

  "templates": {

    "better-docs": {

      "name": "My React components"

    }

  },

  "opts": {

    "destination": "documentation",

    "recurse": true,

    "readme": "README.md"

  }

}

app/package.json

+5 −2
Original line number Diff line number Diff line
@@ -33,7 +33,8 @@ 
    "build": "webpack --config webpack.prod.js",

    "lint": "eslint --ext .js src",

    "fix": "npm run lint -- --fix",

    "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"

    "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}",

    "generate-docs": "node_modules/.bin/jsdoc src/js/ -d docs -t node_modules/braintree-jsdoc-template/"

  },

  "devDependencies": {

    "@babel/core": "^7.8.3",
@@ -44,6 +45,8 @@ 
    "babel-loader": "^8.0.6",

    "babel-plugin-import": "^1.13.0",

    "babel-preset-airbnb": "^4.4.0",

    "better-docs": "^1.4.7",

    "braintree-jsdoc-template": "^3.3.0",

    "clean-webpack-plugin": "^3.0.0",

    "css-loader": "^3.4.2",

    "eslint": "^6.1.0",
@@ -71,6 +74,7 @@ 
    "@material-ui/lab": "^4.0.0-alpha.41",

    "jquery": "^3.4.1",

    "leaflet": "^1.6.0",

    "leaflet-draw": "1.0.4",

    "leaflet-fullscreen": "^1.0.2",

    "leaflet-sidebar-v2": "^3.2.2",

    "proj4": "^2.6.0",
@@ -78,7 +82,6 @@ 
    "react": "^16.12.0",

    "react-dom": "^16.12.0",

    "typeface-roboto": "0.0.75",

    "leaflet-draw": "1.0.4",

    "wicket": "1.3.5"

  }

}

app/src/components/container/App.jsx

+16 −1
Original line number Diff line number Diff line
@@ -11,17 +11,32 @@ import MapContainer from "./MapContainer.jsx"; 
import ListSubheader from "@material-ui/core/ListSubheader";

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



/**

 * Controls css styling for this component using js to css

 */

const useStyles = makeStyles(theme => ({

  formControl: {

    margin: theme.spacing(1),

    minWidth: 120

    minWidth: 125

  }

}));



/**

 * App is the parent component for all of the other components in the project. It

 * imports and creates all of the map and console components and contains the

 * target selector.

 *

 * @component

 */

export default function App() {

  const classes = useStyles();

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



  /**

   * Handles target selection

   *

   * @param {*} event selection event

   */

  const handleChange = event => {

    setTargetPlanet(event.target.value);

  };

app/src/components/container/ConsoleContainer.jsx

+9 −0
Original line number Diff line number Diff line
@@ -2,6 +2,9 @@ import React from "react"; 
import ConsoleAppBar from "../presentational/ConsoleAppBar.jsx";

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



/**

 * Controls css styling for this component using js to css

 */

const useStyles = makeStyles({

  root: {

    maxWidth: 800,
@@ -15,6 +18,12 @@ const useStyles = makeStyles({ 
  }

});



/**

 * Container component that holds the ConsoleAppBar and all of its subcomponents

 *

 * @component

 *

 */

export default function ConsoleContainer(props) {

  const classes = useStyles();

  return (

app/src/components/container/MapContainer.jsx

+21 −3
Original line number Diff line number Diff line
@@ -5,14 +5,29 @@ import MousePosition from "../../js/MousePosition"; 
import Draw from "../../js/Draw";

import "leaflet";



/**

 * Component that uses back end JS files to invoke and display the

 * map. The container handles update events and is the root element

 * for the map.

 *

 *

 * @class MapContainer

 * @extends {Component}

 */

export default class MapContainer extends Component {

  /**

   *

   * @param {*} props target - target body name

   */

  constructor(props) {

    super(props);

    this.state = {};

  }



  handleFullScreenChange() {}



  /**

   * Invokes when the component is successfully mounted to the DOM, then

   * handles all of the map intialization and creation.

   */

  componentDidMount() {

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

    new Projection().addTo(map);
@@ -36,9 +51,12 @@ export default class MapContainer extends Component { 
    }).addTo(map);



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

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

  }



  /**

   * Invoked after the component's state has changed when the

   * target selector passes down a new target name from props.

   */

  componentDidUpdate() {

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

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