Commit e57b9b56 authored by jrc632's avatar jrc632
Browse files

Footprint list populates on start 

 doesn't update yet, unstyled
parent a7e395fd

app/src/components/container/App.jsx

+2 −0
Original line number Diff line number Diff line
@@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography'; 
import AppBar from '@mui/material/AppBar';

import Container from '@mui/material/Container';

import GeoTiffViewer from "../../js/geoTiffViewer";

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



const css = {

  shown: {
@@ -66,6 +67,7 @@ export default function App() { 
        </div>

          <div style={sortBarStyle}>

            <SearchAndFilterInput target={targetPlanet}/>

            <FootprintResults/>

          </div>

      </div>

app/src/components/presentational/FootprintResults.jsx

0 → 100644
+95 −0
Original line number Diff line number Diff line 
import React, {useEffect} from "react";

// CSS

import { alpha } from "@mui/material/styles";

// Lists

import List from '@mui/material/List';

import ListItem from '@mui/material/ListItem';



import { getFeatures } from "../../js/ApiJsonCollection";





/**

 * Controls css styling for this component using js to css

 */

let css = {

  root: {

    backgroundColor: "#f8f9fa",

    overflow: "hidden",

    display: "flex",

    alignItems: "flex-start"

  },

  container: {

    padding: "1rem",

    height: "100vh",

    width: 225,

    display: "flex",

    flexDirection: "column",

    margin: "auto",

    padding: 0

  },

  textbox: {

    backgroundColor: "#e9ecef",

    "&:focus": {

      borderColor: "#1971c2"

    }

  },

  button: {

    width: "auto",

    color: "#fff",

    backgroundColor: "#1971c2",

    "&:hover": {

      backgroundColor: alpha("#1971c2", 0.7)

    }

  },

  buttonRemove: {

    width: "auto",

    color: "#fff",

    backgroundColor: "#64748B",

    "&:hover": {

      backgroundColor: alpha("#64748B", 0.7)

    }

  },

  title: {

    padding: "0.2rem",

    color: "#343a40",

    fontSize: 18,

    fontWeight: 600

  }

};



/**

 * Component that lets user view list of current footprints

 *

 * @component

 * @example

 * <FootprintResults />

 *

 */

export default function FootprintResults(props) {



  const [features, setFeatures] = React.useState([]);



  useEffect(() => {

    setTimeout(() => {

      setFeatures(getFeatures);

    }, 1000);

  });

  



  return (

    <div style={css.root}>

        <div style={css.container}>

          <div className="panelSection panelHeader">

            Footprint Results

          </div>

          <List>

            {features.map((feature) => (

              <div className="panelSection" key={feature.id}>

                <ListItem>{feature.id}</ListItem>

              </div>

            ))}

          </List>

        </div>

    </div>

  );

}

app/src/js/ApiJsonCollection.js

+20 −1
Original line number Diff line number Diff line 
var _maxNumberPages = 0;

var _currentPage = 1;

var _numberMatched = 0;

var _features = [];





function callAPI() {

  return fetch(
@@ -43,6 +45,23 @@ function getItemCollection(name, queryString) { 
  });

}



/**

 * @function setFeatures

 * @description Sets the value of the max number of pages possible

 */

 function setFeatures(features) {

  _features = features

}



/**

 * @function getFeatures

 * @description Gets the value of the max number of pages possible

 */

function getFeatures() {

  return _features;

}





/**

 * @function setNumberMatched

 * @description Sets the value of the return number of footprints
@@ -97,4 +116,4 @@ function getCurrentPage() { 
}





export { getItemCollection, getMaxNumberPages, setCurrentPage, getCurrentPage, setNumberMatched, getNumberMatched, setMaxNumberPages };
 
export { getItemCollection, getFeatures, setFeatures, getMaxNumberPages, setCurrentPage, getCurrentPage, setNumberMatched, getNumberMatched, setMaxNumberPages };

app/src/js/AstroMap.js

+4 −1
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ import L from "leaflet"; 
import "proj4leaflet";

import AstroProj from "./AstroProj";

import LayerCollection from "./LayerCollection";

import { getItemCollection, setNumberMatched, setMaxNumberPages, getCurrentPage, setCurrentPage } from "./ApiJsonCollection";

import { getItemCollection, setNumberMatched, setMaxNumberPages, getCurrentPage, setCurrentPage, setFeatures} from "./ApiJsonCollection";

import { MY_JSON_MAPS } from "./layers";

import stacLayer from 'stac-layer/src/index.js';
@@ -136,12 +136,14 @@ export default L.Map.AstroMap = L.Map.extend({ 
   */

  loadFootprintLayer: function(name, queryString) {

    var matched = 0;

    const features = [];

    getItemCollection(name, queryString).then(result => {

      if (result != undefined) {

        this._geoLayers = new Array(result.length);

        for (let i = 0; i < result.length; i++) {

          this._geoLayers[i] = L.geoJSON().on({click: handleClick}).addTo(this);

          matched += result[i].numberMatched;

          features.push(...result[i].features);

          for (let j = 0; j < result[i].features.length; j++) {

            this._footprintCollection[result[i].features[j].collection] = this._geoLayers[i];

            this._geoLayers[i].addData(result[i].features[j]);
@@ -152,6 +154,7 @@ export default L.Map.AstroMap = L.Map.extend({ 
          .addTo(this);

      }

      setNumberMatched(matched);

      setFeatures(features);

    });



    function handleClick(e) {