Commit 1243700b authored by zchkfmn's avatar zchkfmn
Browse files

Added Asset Viewer Button To App Bar

parent c253aa18

app/src/assets/img/ImageIcon.png

0 → 100644
+15.7 KiB
Loading image diff...

app/src/components/container/App.jsx

+0 −33
Original line number Diff line number Diff line
@@ -5,9 +5,6 @@ import QueryConsole from "../presentational/QueryConsole.jsx"; 
import CreditsDisplay from "../presentational/CreditsDisplay.jsx";

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

import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';

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

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

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

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



const css = {
@@ -68,36 +65,6 @@ export default function App() { 
            <SearchAndFilterInput target={targetPlanet}/>

          </div>

      </div>



      <div id="geoTiff-Container">

        <Container>

          <AppBar position="relative">

            <Container sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}>

              <Typography 

                variant="h6"

                id="geoTiff-Asset-name"

                noWrap

                component="div"

                align="center"

                sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}

                >

                  Displayed GeoTiff

                </Typography>

                <button onClick={geoTiffViewer.toggleViewer} 

                  id="geoTiffClose">

                    CLOSE

                </button>

            </Container>

          </AppBar>

          <div id = "geoTiff-Asset">

          </div>

          <AppBar position="relative">

            <Container>

              <button id="download-button">Download Asset</button>

            </Container>

          </AppBar>

        </Container>

      </div>

    </div>

  );

}

app/src/components/presentational/ConsoleAppBar.jsx

+5 −0
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx"; 
import ConsoleCoordinates from "./ConsoleCoordinates.jsx";

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

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

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



/**

 * Controls css styling for this component using js to css
@@ -46,6 +47,10 @@ export default function ConsoleAppBar(props) { 
          <div className="flexbar-item">

            <ConsoleLonLatSelects />

          </div>

          <Divider orientation="vertical" />

          <div className = "flex-bar-item">

            <GeoTiffViewer />

          </div>



        </div>

    </AppBar>

app/src/components/presentational/GeoTiffViewer.jsx

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

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

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

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";





let css = {

    img: {

      width: "100%",

      height: "100%"

    },

    button: {

        display: "inline",

        width: "10%",

        height: "10%"

    },

  };



function DisplayGeoTiff(props) {

    

    return (

        <div id="geoTiff-Container">

        <Container>

          <AppBar position="relative">

            <Container sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}>

              <Typography 

                variant="h6"

                id="geoTiff-Asset-name"

                noWrap

                component="div"

                align="center"

                sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}

                >

                  Displayed GeoTiff

                </Typography>

                <button 

                  id="geoTiffClose">

                    CLOSE

                </button>

            </Container>

          </AppBar>

          <div id = "geoTiff-Asset">

          </div>

        </Container>

      </div>

        );



}





/**

 * Main component that displays the geoTiff Viewer

 * user click events.

 *

 * @component

 */

 export default function GeoTiffViewer() {



    return (

        <div>

        <ButtonBase

              id="geoTiffViewerButton"

              focusRipple

              sx={css.button}

            >

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

        </ButtonBase>



        </div>



    );

 }
 
 No newline at end of file

app/src/styles.css

+1 −1
Original line number Diff line number Diff line
@@ -279,7 +279,7 @@ summary { 
  width: 400px;

  text-align: center;

  margin: 0 auto;

  display: none;

  display: block;

}



#geoTiff-Asset-name {