Commit f018a6b7 authored by Laura, Jason R's avatar Laura, Jason R
Browse files

Merge branch 'fullscreen' into 'main' 

Fullscreen

Closes #10

See merge request asc/geostac!3
parents 4f261c22 cad43f02

src/components/container/GeoStacApp.jsx

+30 −42
Original line number Diff line number Diff line
@@ -9,25 +9,19 @@ import FootprintResults from "../presentational/FootprintResults.jsx"; 
import { getFeatures } from "../../js/ApiJsonCollection";

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

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

import MenuBar from "../presentational/Menubar.jsx";



const css = {

  expanded: {

    display: "flex",

    flexDirection: "row",

    alignItems: "flex-start",

    background: "#f8f9fa",

  },

  stacked: {

    display: "flex",

    flexDirection: "column",

    alignItems: "flex-start",

    background: "#f8f9fa",

  },

  shown: {

    display: "flex",

/**

 * Controls css styling for this component using js to css

 */

let css = {

  appFlex: {

    position: "relative",

  },

  hidden: {

    display: "none",

  appFull: {

    position: "fixed",

    height: "100%",

    width: "100%",

  },

};
@@ -41,24 +35,14 @@ const css = { 
export default function GeoStacApp() {

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



  const [showSidePanel, setShowSidePanel] = React.useState(false);

  const [sidePanelVisStyle, setSidePanelVisStyle] = React.useState(css.shown);



  const [expandResults, setExpandResults] = React.useState(true);

  const [resultsExpandStyle, setResultsExpandStyle] = React.useState(

    css.expanded

  );



  const [footprintData, setFootprintData] = React.useState([]);



  const showHideSort = () => {

    setShowSidePanel(!showSidePanel);

    setSidePanelVisStyle(showSidePanel ? css.shown : css.hidden);

  };

  const [appFullWindow, setAppFullWindow] = React.useState(true);

  const [appViewStyle, setAppViewStyle] = React.useState(css.appFlex);



  const handlePanelLayout = (event) => {

    setExpandResults((expandResults) => !expandResults);

    setResultsExpandStyle(expandResults ? css.expanded : css.stacked);

  const handleAppViewChange = () => {

    setAppFullWindow(!appFullWindow);

    setAppViewStyle(appFullWindow ? css.appFull : css.appFlex);

  };



  /**
@@ -75,23 +59,27 @@ export default function GeoStacApp() { 
  };



  return (

    <div id="app-container" className="scroll-parent">

      <div id="main-column">

        <div id="top-bar">

    <div style={appViewStyle} className="flex col scroll-parent">

      <MenuBar

        handleAppViewChange={handleAppViewChange}

        appFullWindow={appFullWindow}

      />

      <div className="flex row scroll-parent">

        <div className="flex col">

          <ConsoleAppBar

            target={targetPlanet}

            bodyChange={handleTargetBodyChange}

          />

        </div>

          <div id="map-area">

            <MapContainer target={targetPlanet} />

          </div>

        <div id="bottom-bar">

          <QueryConsole />

          <CreditsDisplay />

        </div>

        <Sidebar

          target={targetPlanet}

          footprintNavClick={handleFootprintClick}

        />

      </div>

      <Sidebar target={targetPlanet} footprintNavClick={handleFootprintClick} />

      <DisplayGeoTiff />

    </div>

  );

src/components/presentational/ConsoleAppBar.jsx

+6 −7
Original line number Diff line number Diff line
@@ -10,8 +10,8 @@ import Divider from "@mui/material/Divider"; 
 */

let css = {

  appbar: {

    background: "#f8f9fa"

  }

    background: "#f8f9fa",

  },

};



/**
@@ -21,21 +21,20 @@ let css = { 
 * @component

 */

export default function ConsoleAppBar(props) {



  return (

    <div className="flexbar">

      <div className="flexbar-item">

        <ConsoleTargetInfo target={props.target} bodyChange={props.bodyChange} />

        <ConsoleTargetInfo

          target={props.target}

          bodyChange={props.bodyChange}

        />

      </div>

      <Divider orientation="vertical" />

      <div className="flexbar-item">

        <ConsoleCoordinates />

      </div>

      <Divider orientation="vertical" />

      <div className="flexbar-item">

        <ConsoleProjectionButtons />

      </div>

      <Divider orientation="vertical" />

      <div className="flexbar-item">

        <ConsoleLonLatSelects />

      </div>

src/components/presentational/ConsoleTargetInfo.jsx

+0 −1
Original line number Diff line number Diff line
@@ -13,7 +13,6 @@ import ListItem from "@mui/material/ListItem"; 
import ListItemAvatar from "@mui/material/ListItemAvatar";

import ListItemText from "@mui/material/ListItemText";

import { blue } from "@mui/material/colors";

import Link from "@mui/material/Link";



// Icons

import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";

src/components/presentational/FootprintResults.jsx

+0 −2
Original line number Diff line number Diff line
@@ -10,11 +10,9 @@ 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 PhotoIcon from "@mui/icons-material/AddAPhoto";



// object with results

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

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



// geotiff thumbnail viewer

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

src/components/presentational/Menubar.jsx

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

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

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

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

import HelpOutlineIcon from "@mui/icons-material/HelpOutline";

import GeoStacWhiteIcon from "../../images/logos/geostac-logo-white.svg";



import Button from "@mui/material/Button";

import Dialog from "@mui/material/Dialog";

import DialogActions from "@mui/material/DialogActions";

import DialogContent from "@mui/material/DialogContent";

import DialogContentText from "@mui/material/DialogContentText";

import DialogTitle from "@mui/material/DialogTitle";



export default function MenuBar(props) {

  const [showAbout, setShowAbout] = React.useState(false);



  const handleOpenAbout = () => {

    setShowAbout(true);

  };



  const handleCloseAbout = () => {

    setShowAbout(false);

  };



  return (

    <div id="menu-bar">

      <div className="menu-item" onClick={handleOpenAbout}>

        <SvgIcon

          viewBox="15 15 375 375"

          style={{

            width: 20,

            height: 20,

            position: "relative",

          }}

          component={GeoStacWhiteIcon}

        />

        <span className="menu-item-text">GeoSTAC</span>

      </div>

      <a

        className="menu-link"

        target="_blank"

        href="https://www.ceias.nau.edu/capstone/projects/CS/2022/GeoSTAC/documents/usermanual.pdf"

      >

        <div className="menu-item">

          <HelpOutlineIcon fontSize="small" />

          <span className="menu-item-text">Help</span>

        </div>

      </a>

      <div className="menu-item" onClick={props.handleAppViewChange}>

        {props.appFullWindow ? (

          <>

            <OpenInFullIcon fontSize="small" />

            <span className="menu-item-text">Expand</span>

          </>

        ) : (

          <>

            <CloseFullscreenIcon fontSize="small" />

            <span className="menu-item-text">Collapse</span>

          </>

        )}

      </div>



      <Dialog open={showAbout} onClose={handleCloseAbout} scroll="paper">

        <DialogTitle id="scroll-dialog-title">About</DialogTitle>

        <DialogContent dividers={scroll === "paper"}>

          <DialogContentText id="scroll-dialog-description" tabIndex={-1}>

            GeoSTAC is a map for finding planetary data. It was created

            initially as a series of Capstone projects at NAU by the CartoCosmos

            and GeoSTAC teams, using React and Leaflet. It is now maintained by

            the USGS.

          </DialogContentText>

        </DialogContent>

        <DialogActions>

          <Button onClick={handleCloseAbout}>Dismiss</Button>

        </DialogActions>

      </Dialog>

    </div>

  );

}