Commit c3d194b2 authored by zchkfmn's avatar zchkfmn
Browse files

Popup viewer

parent 1243700b

app/src/components/container/App.jsx

+2 −1
Original line number Diff line number Diff line
@@ -28,7 +28,7 @@ export default function App() { 
  const [targetPlanet, setTargetPlanet] = React.useState("Mars");

  const [showSortBar, setShowSortBar] = React.useState(true);

  const [sortBarStyle, setSortBarStyle] = React.useState(css.hidden);

  const geoTiffViewer = new GeoTiffViewer("geoTiff-Container");

  // const geoTiffViewer = new GeoTiffViewer("geoTiff-Container");



  const ShowHideSort = () => {

    setShowSortBar(!showSortBar);
@@ -50,6 +50,7 @@ export default function App() { 
          <ConsoleAppBar target={targetPlanet} bodyChange={handleTargetBodyChange}  />

        </div>

        <MapContainer target={targetPlanet} />

        

        <div id="bottom-bar">

          <QueryConsole />

          <CreditsDisplay />

app/src/components/presentational/ConsoleAppBar.jsx

+2 −0
Original line number Diff line number Diff line
@@ -24,6 +24,8 @@ let css = { 
 */

export default function ConsoleAppBar(props) {







  return (

    <AppBar

      sx={css.appbar}

app/src/components/presentational/GeoTiffViewer.jsx

+66 −15
Original line number Diff line number Diff line
@@ -5,6 +5,11 @@ import Container from '@mui/material/Container'; 
import ButtonBase from "@mui/material/ButtonBase";

import imageAsset from "../../assets/img/ImageIcon.png";

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

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

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

import PropTypes from 'prop-types';

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

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





let css = {
@@ -19,9 +24,28 @@ let css = { 
    },

  };







function DisplayGeoTiff(props) {



  const { open, onClose } = props;



  const handleClose = () => {

    onClose();

  };



    

    return (

      <Dialog onClose={handleClose} open = {open}>

        <DialogTitle>

          Cloud Optimized GeoTiff

        </DialogTitle>

        <Container>

          <div id = "geoTiff-Asset">

          </div>

        </Container>

      </Dialog>

      /*

        <div id="geoTiff-Container">

        <Container>

          <AppBar position="relative">
@@ -36,20 +60,23 @@ function DisplayGeoTiff(props) { 
                >

                  Displayed GeoTiff

                </Typography>

                <button 

                  id="geoTiffClose">

                    CLOSE

                </button>

            </Container>

          </AppBar>

          <div id = "geoTiff-Asset">

          </div>

        </Container>

      </div>

      */

        );



}



DisplayGeoTiff.propTypes = {

  open: PropTypes.bool.isRequired,

  onClose: PropTypes.func.isRequired,

  GeoTiffURL: PropTypes.string.isRequired

};





/**

 * Main component that displays the geoTiff Viewer
@@ -57,19 +84,43 @@ function DisplayGeoTiff(props) { 
 *

 * @component

 */

 export default function GeoTiffViewer() {

 export default function GeoTiffViewer(props) {

  

  const [dialogOpen, setDialogOpen] = React.useState(false);

  

  const handleDialogOpen = () => {

    setDialogOpen(true);

  }



  const handleClose = () => {

    setDialogOpen(false);

    props.close();

  }







    return (

        <div>

        <Grid

        container

        item

        justifyContent="center"

        alignItems="center"

        xs

      >

          <ButtonBase

                id="geoTiffViewerButton"

                focusRipple

                sx={css.button}

                onClick={handleDialogOpen}

              >

                <img style={css.img} src={imageAsset} />

          </ButtonBase>



        </div>

          <DisplayGeoTiff

            open={dialogOpen}

            onClose={handleClose}

            GeoTiffURL = {""}

          />

        </Grid>



    );

 }
 
 No newline at end of file