Merge pull request #96 from RENCI/move-help-about

Move help about
RENCI · Jun 13, 2024 · ebc573d · ebc573d
2 parents 1e27665 + 349ad41
commit ebc573d
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 79 deletions.
diff --git a/src/components/help-about/helpAboutTray.js b/src/components/help-about/helpAboutTray.js
diff --git a/src/components/trays/help_about/helpAboutTray.js b/src/components/trays/help_about/helpAboutTray.js
@@ -0,0 +1,93 @@
+import React, {Fragment} from 'react';
+import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography } from '@mui/joy';
+/**
+ * This component renders the help/about try
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const HelpAboutTray = () => {
+    // used to collapse other open accordions
+    const [index, setIndex] = React.useState(0);
+
+    // render the form
+    return (
+
+        <Fragment>
+            <Stack gap={ 3 }>
+                <AccordionGroup sx={{size: "sm", variant: "soft"}}>
+                <Typography level="title-lg"> About </Typography>
+                    <Stack spacing={1}>
+                        <Accordion expanded={index === 0} onChange={(event, expanded) => { setIndex(expanded ? 0 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg"> Application version </Typography> </AccordionSummary>
+                            <AccordionDetails> Version: {process.env.REACT_APP_VERSION}</AccordionDetails>
+                        </Accordion>
+                        <Accordion expanded={index === 1} onChange={(event, expanded) => { setIndex(expanded ? 1 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg"> Application description </Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+                    </Stack>
+                 </AccordionGroup>
+            </Stack>
+
+            <Stack>
+                <AccordionGroup sx={{size: "sm", variant: "soft"}}>
+                    <Typography level="h4">FAQs</Typography>
+                    <Stack spacing={1}>
+
+                        <Accordion expanded={index === 3} onChange={(event, expanded) => { setIndex(expanded ? 3 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">What FAQs should we put in here?</Typography> </AccordionSummary>
+                            <AccordionDetails> What sort of things should we be putting in the FAQs? Below are some examples... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 4} onChange={(event, expanded) => { setIndex(expanded ? 4 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">What are some features of this application?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 5} onChange={(event, expanded) => { setIndex(expanded ? 5 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">How do I add/remove Layers on the map?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 6} onChange={(event, expanded) => { setIndex(expanded ? 6 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">How do I move through synoptic cycles?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 7} onChange={(event, expanded) => { setIndex(expanded ? 7 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">What do the icons on the left mean?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 8} onChange={(event, expanded) => { setIndex(expanded ? 8 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">What are some user settings?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 9} onChange={(event, expanded) => { setIndex(expanded ? 9 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">How do I change the base map?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 10} onChange={(event, expanded) => { setIndex(expanded ? 10 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">How do I view observation data?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 11} onChange={(event, expanded) => { setIndex(expanded ? 11 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">How do I show/hide layers?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion expanded={index === 12} onChange={(event, expanded) => { setIndex(expanded ? 12 : null); }}>
+                            <AccordionSummary> <Typography level="title-lg">How do I reorder layers on the map?</Typography> </AccordionSummary>
+                            <AccordionDetails> Add some content here... </AccordionDetails>
+                        </Accordion>
+
+                    </Stack>
+                </AccordionGroup>
+            </Stack>
+        </Fragment>
+    );
+};
diff --git a/src/components/trays/help_about/help_about.js b/src/components/trays/help_about/help_about.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { HelpAboutTray } from "@help-about/helpAboutTray.js";
+import { HelpAboutTray } from "./helpAboutTray.js";
 
 /**
  * component that renders the help/about tray.

diff --git a/webpack.config.js b/webpack.config.js
@@ -100,7 +100,7 @@ module.exports = {
       '@content': path.resolve(__dirname, 'src/content/'),
       '@context': path.resolve(__dirname, 'src/context/'),
       '@dialog': path.resolve(__dirname, 'src/components/dialog'),
-      '@help-about': path.resolve(__dirname, 'src/components/help-about/'),
+      '@help-about': path.resolve(__dirname, 'src/components/trays/help-about/'),
       '@hooks': path.resolve(__dirname, 'src/hooks/'),
       '@images': path.resolve(__dirname, 'src/images/'),
       '@model-selection': path.resolve(__dirname, 'src/components/trays/model-selection'),