Commit d5bb1b92 authored by Jacob Cain's avatar Jacob Cain
Browse files

Loading screen for footprints, message when none

parent a189cc43

src/components/presentational/FootprintResults.jsx

+110 −68
Original line number Diff line number Diff line
@@ -10,6 +10,7 @@ import PreviewIcon from "@mui/icons-material/Preview"; 
import LaunchIcon from "@mui/icons-material/Launch";

import OpenInFullIcon from "@mui/icons-material/OpenInFull";

import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";

import TravelExploreIcon from '@mui/icons-material/TravelExplore'; // Footprints.]



// object with results

import { getFeatures } from "../../js/ApiJsonCollection";
@@ -17,6 +18,54 @@ import { getFeatures } from "../../js/ApiJsonCollection"; 
// geotiff thumbnail viewer

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

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

import { Skeleton } from "@mui/material";





/**

 * Skeleton to show when footprints are loading

 */

function LoadingFootprints() {

  

  return (

    <div className="resultsList">

      { Array(5).fill(null).map((_, i) => (

        <div className="resultContainer" key={i}>

          <div className="resultImgDiv">

            <Skeleton variant="rectangular" width={32} height={32}/>

          </div>

          <div className="resultData">

            <Skeleton/>

            <Skeleton/>

            <Skeleton/>

            <Skeleton/>

            <Skeleton/>

          </div>

          <div className="resultLinks">

            <Stack direction="row" spacing={1} sx={{marginTop:1}}>

              <Skeleton variant="rounded" width={100} height={20} sx={{borderRadius:5}}/>

              <Skeleton variant="rounded" width={100} height={20} sx={{borderRadius:5}}/>

            </Stack>

          </div>

        </div>

      ))}

    </div>

  );

}



function NoFootprints(){

  return(

    <div style={{padding: 10, maxWidth: 268}}>

      <p>

        This target has no footprints. To see 

        footprints, go to the dropdown menu 

        in the upper left and pick a target 

        body with the <TravelExploreIcon sx={{fontSize: 16, verticalAlign: "middle"}}/> icon next to it.

      </p>

    </div>

  );

}







/**

 * Controls css styling for this component using js to css
@@ -45,14 +94,11 @@ export default function FootprintResults(props) { 


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



  const [footprintListComponent, setFootprintListComponent] = React.useState(() => {

    return(

      <div>Loading...</div>

    );

  })

  const [isLoading, setIsLoading] = React.useState(true);

  const [hasFootprints, setHasFootprints] = React.useState(true);



  // Metadata Popup

  const geoTiffViewer = new GeoTiffViewer("GeoTiffAsset");



  const showMetadata = (value) => () => {

    geoTiffViewer.displayGeoTiff(value.assets.thumbnail.href);

    geoTiffViewer.changeMetaData(
@@ -69,8 +115,14 @@ export default function FootprintResults(props) { 
    // If target has collections (of footprints)

    if (props.target.collections.length > 0) {



      // Set Loading

      setIsLoading(true);

      setHasFootprints(true);



      // Promise tracking

      let fetchPromise = {};

      let jsonPromise = {};

      // Result

      let jsonRes = {};



      let itemCollectionUrls = [];
@@ -106,12 +158,6 @@ export default function FootprintResults(props) { 
        await jsonPromise[targetUrl];

      } 



      function extractFootprints(resultsArr) {

        for(const result in resultsArr){



        }

      }



      async function fetchAndWait() {

        // Start fetching

        for(const itemCollectionUrl of itemCollectionUrls) {
@@ -123,13 +169,12 @@ export default function FootprintResults(props) { 
          await awaitFetch(itemCollectionUrl);

        }

        

        // Extract footprints into array

        let resultsArr = [];

        let myFeatures = [];



        for(const itemCollectionUrl of itemCollectionUrls) {

          myFeatures.push(jsonRes[itemCollectionUrl]);

        }



        for(const featCollection of myFeatures) {

          resultsArr.push(...featCollection.features)

        }
@@ -137,32 +182,24 @@ export default function FootprintResults(props) { 
        return resultsArr;

      }



      



      (async () => {

        // Wait

        let myFeatures = await fetchAndWait()

        setFeatures(myFeatures);

        setFootprintListComponent(

          <>

            <div>Footprints!</div>

          </>

        );

        setHasFootprints(myFeatures.length > 0);

        setIsLoading(false);

      })();



      



      



    } else {

      setFootprintListComponent(<div>No footprints for this Target.</div>)

      setIsLoading(false);

      setHasFootprints(false);

    }

    

    // setTimeout(() => {

    //   setFeatures(getFeatures);

    // }, 1000); 



  }, []);

  }, [props.target.name]);



  return (

    <div style={css.root} className="scroll-parent">
@@ -182,7 +219,9 @@ export default function FootprintResults(props) { 
          />

        </span>

      </div>

      {footprintListComponent}

      {isLoading ? 

        <LoadingFootprints/>

      : hasFootprints ?   

        <div className="resultsList">

          {features.map((feature) => (

            <div className="resultContainer" key={feature.id}>
@@ -226,6 +265,9 @@ export default function FootprintResults(props) { 
            </div>

          ))}

        </div>

      :

        <NoFootprints/>

      }

    </div>

  );

}