Add and style detail flyout

Author: rachelekm

demo/app/src/components/Map/DynamicMap.js

@@ -3,12 +3,14 @@ import Leaflet from 'leaflet';
 import * as ReactLeaflet from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import Footprint from './Footprint';
+import { useAppContext } from 'src/context/appContext';
 
 import styles from './Map.module.scss';
 
 const { MapContainer } = ReactLeaflet;
 
 const Map = ({ children, className, width, height, ...rest }) => {
+  const { selectedOpportunity } = useAppContext();
   let mapClassName = styles.map;
 
   if ( className ) {
@@ -27,7 +29,7 @@ const Map = ({ children, className, width, height, ...rest }) => {
   }, []);
 
   return (
-    <MapContainer className={mapClassName} {...rest}>
+    <MapContainer className={`${mapClassName} ${selectedOpportunity && styles.mapContainerDetailView}`} {...rest}>
       <Footprint />
       {children(ReactLeaflet, Leaflet)}
     </MapContainer>

demo/app/src/components/Map/Map.module.scss

@@ -1,8 +1,14 @@
 .map {
+  position: absolute;
   width: 100%;
   height: 100%;
 }
 
+.mapContainerDetailView {
+  left: 700px;
+  width: calc(100% - 700px) !important;
+}
+
 .footprintCircle {
   display: table-cell;
   text-align: center;

demo/app/src/components/Sidebar/Opportunity.js

@@ -6,13 +6,14 @@ export default function Opportunity({
     provider,
     start,
     end,
+    selected,
     onMouseEnter,
     onMouseLeave,
     onClick
 }) {
   return (
     <div
-        className={styles.opportunityPreview}
+        className={`${styles.opportunityPreview} ${selected && styles.selected}`}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}

demo/app/src/components/Sidebar/OpportunityDetail.js

@@ -1,24 +1,48 @@
 import styles from './Sidebar.module.scss'
 import { useAppContext } from 'src/context/appContext';
 import Button from '@components/Button';
+import {
+  ArrowRightLine
+} from '@vectopus/atlas-icons-react';
 
 export default function OpportunityDetail() {
   const { selectedOpportunity, setSelectedOpportunity, setHoveredOpportunity } = useAppContext();
-
   return (
     <div className={styles.opportunityDetail}>
         <div className={styles.topBar}>
-            <h3 className={styles.heading}>Detail</h3>
+            <h3 className={styles.heading}>Tasking Request Details</h3>
             <Button
+              className={`${styles.closeButton} ${styles.closeButtonDetail}`}
               onClick={() => {
                 setSelectedOpportunity(null);
                 setHoveredOpportunity(null);
             }}
             >
-              x
+              <ArrowRightLine size={12} />
             </Button>
         </div>
-        <div>{selectedOpportunity.id}</div>
+        <ul className={styles.detailList}>
+            <li>
+                <h3>{'ID'}</h3>
+                <p>{selectedOpportunity.id}</p>
+            </li>
+        {
+            Object.keys(selectedOpportunity.properties).map(key => {
+                return (
+                    selectedOpportunity.properties[key] &&
+                        <li>
+                            <h3>{key}</h3>
+                            <p>{key === 'datetime' ?
+                                selectedOpportunity.properties[key].split('/').map(utc => {
+                                    return new Date(utc).toLocaleString()
+                                }).join(' - ') :
+                                selectedOpportunity.properties[key]}
+                            </p>
+                        </li>
+                )
+            })
+        }
+        </ul>
     </div>
   );
 }

demo/app/src/components/Sidebar/OpportunityList.js

@@ -25,6 +25,7 @@ function mouseOutStyleChange(e) {
                   provider={provider}
                   start={start}
                   end={end}
+                  selected={selectedOpportunity===opp}
                   onMouseEnter={(e) => {
                     if(!selectedOpportunity){
                       mouseInStyleChange(e);
@@ -35,7 +36,10 @@ function mouseOutStyleChange(e) {
                       mouseOutStyleChange(e);
                       setHoveredOpportunity(null)}}
                     }
-                  onClick={(e) => setSelectedOpportunity(opportunities[provider][index])}
+                  onClick={() => {
+                    (selectedOpportunity===opp) ? setSelectedOpportunity(null) :
+                    setSelectedOpportunity(opportunities[provider][index]);
+                  }}
               />
             })
         })

demo/app/src/components/Sidebar/Sidebar.module.scss

@@ -1,15 +1,46 @@
 @import "@styles/settings/_settings";
 
-.sidebar {
+.sidebar,
+.opportunityDetail {
   position: absolute;
   top: 0;
   left: 0;
   width: 350px;
   height: 100%;
-  z-index: 1001;
+  z-index: 1000;
   background-color: white;
 }
 
+.opportunityDetail {
+  left: 350px;
+  padding: 25px;
+  border: 3px solid #1C5F78;
+
+  .detailList {
+    list-style: none;
+    position: relative;
+    padding: 0px;
+    margin: 0px;
+    text-align: left;
+  }
+
+  .detailList > li {
+    list-style: none;
+    display: inline-block;
+    margin-top: 20px;
+
+    h3, p {
+      margin: 2px;
+    }
+  }
+}
+
+.closeButtonDetail {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
 .loader {
   position: absolute;
   top: 0;
@@ -118,12 +149,18 @@
   height: 20%;
   width: 100%;
   padding: 10px;
-  margin-bottom: 10px;
   border-top: 1px solid grey;
   border-bottom: 1px solid grey;
   position: relative;
 }
 
+.selected {
+  border: 3px solid #1C5F78;
+  border-right: none;
+  box-shadow: 5px 0 0 0 white;
+  z-index: 1001;
+}
+
 .opportunityPreview > h1 {
   font-size: medium;
 }

demo/app/src/pages/index.js

@@ -14,7 +14,7 @@ const DEFAULT_CENTER = [38.907132, -77.036546];
 const DEFAULT_ZOOM = 3;
 
 export default function Home() {
-  const { isLoadingOpps, errorOpps, opportunities } = useAppContext();
+  const { isLoadingOpps, errorOpps, opportunities,  } = useAppContext();
   return (
     <Layout>
       <Head>