Ajay map updates

api/woeip/urls.py

@@ -1,6 +1,8 @@
 from django.contrib import admin
 from django.urls import include
 from django.urls import path
+from django.conf.urls.static import static
+from django.conf import settings
 from rest_framework import routers
 
 from .apps.air_quality import views
@@ -26,3 +28,4 @@
 ]
 
 urlpatterns += swagger_urlpatterns
+urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

web/src/components/Map/ControlPanel/elements.tsx

@@ -59,7 +59,19 @@ export const NoDataText = styled.label`
   font-weight: bold;
 `
 
+export const SessionDataContainer = styled.div`
+  position: relative;
+  height: 100%;
+`
+
 export const SessionLabel = styled.p`
   text-decoration: underline;
   cursor: pointer;
 `
+
+export const ViewDataLabel = styled.p`
+  text-decoration: underline;
+  cursor: pointer;
+  position: absolute;
+  bottom: 0;
+`

web/src/components/Map/ControlPanel/index.tsx

@@ -12,6 +12,7 @@ const ControlPanel = ({
   date,
   setDate,
   setPollutants,
+  setLoading,
   collections,
   currentCollection,
   setCurrentCollection,
@@ -36,15 +37,25 @@ const ControlPanel = ({
     setPollutants([])
     const source = axios.CancelToken.source()
     setCurrentCollection(collection)
+    setLoading(true)
     getPollutants(source.token, collectionId)
-      .then(pollutants =>
-        pollutants
-          ? setPollutants(pollutants as Pollutant[])
-          : setPollutants([])
-      )
+      .then(pollutants => {
+        if (pollutants) {
+          setPollutants(pollutants as Pollutant[])
+        } else {
+          setPollutants([])
+        }
+        setLoading(false)
+      })
       .catch((error: Error) => console.log(error))
   }
 
+  const openData = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault()
+    window.open(`${currentCollection.collection_files[0]}`)
+    window.open(`${currentCollection.collection_files[1]}`)
+  }
+
   const sessionTime = (starts_at: string) => {
     const parsed = moment(starts_at)
     return parsed.format('h:mm A')
@@ -71,7 +82,7 @@ const ControlPanel = ({
   const sessionInformation = () => {
     if (currentCollection) {
       return (
-        <div>
+        <Elements.SessionDataContainer>
           <Elements.LabelContainer>
             <Elements.BoldedLabel>Session:</Elements.BoldedLabel>
             <Elements.TextLabel>
@@ -102,7 +113,14 @@ const ControlPanel = ({
               <Elements.NoDataText>None</Elements.NoDataText>
             )}
           </Elements.SessionLabelContainer>
-        </div>
+          <Elements.ViewDataLabel
+            onClick={e => {
+              openData(e)
+            }}
+          >
+            Download Raw Data
+          </Elements.ViewDataLabel>
+        </Elements.SessionDataContainer>
       )
     } else {
       return (

web/src/components/Map/ControlPanel/types.ts

@@ -6,6 +6,7 @@ export type ControlPanelProps = {
   date: moment.Moment
   setDate: (date: moment.Moment) => void
   setPollutants: (pollutants: Pollutant[]) => void
+  setLoading: (loading: boolean) => void
   collections: Array<Collection>
   currentCollection: Collection
   setCurrentCollection: (collection: Collection) => void

web/src/components/Map/elements.tsx

@@ -1,5 +1,5 @@
 import styled from 'theme'
-import { Container } from 'semantic-ui-react'
+import { Container, Segment } from 'semantic-ui-react'
 
 export const StyledContainer = styled(Container)`
   margin-top: 30px;
@@ -14,10 +14,15 @@ export const LowerHalfContainer = styled.div`
   display: flex;
 `
 
-export const MapContainer = styled.div`
-  height: 548px;
-  width: 65%;
-`
+export const MapContainer = styled(Segment)`
+         height: 548px;
+         width: 65%;
+         margin: 0px !important;
+         padding: 0px !important;
+         border-radius: 0px !important;
+         border: none !important;
+         box-shadow: none !important;
+       `
 
 export const ControlPanelContainer = styled.div`
   height: 548px;
@@ -28,3 +33,6 @@ export const ControlPanelContainer = styled.div`
 export const FormMessage = styled.h3`
   font-size: 1.5rem;
 `
+
+export const LoadingContainer = styled.div`
+`

web/src/components/Map/index.tsx

@@ -1,7 +1,9 @@
 import axios, { AxiosResponse, CancelToken } from 'axios'
 import React, { FunctionComponent, useEffect, useState } from 'react'
+import { useLocation, useHistory } from 'react-router-dom'
 import ReactMapGL from 'react-map-gl'
 import moment from 'moment-timezone'
+import { Dimmer, Loader, Segment } from 'semantic-ui-react'
 import { Collection, Coordinates } from 'components/Map/types'
 import { initialViewport, getPollutants } from 'components/Map/utils'
 import * as Elements from 'components/Map/elements'
@@ -11,12 +13,15 @@ import Pin from 'components/Map/Pin'
 import { Pollutant, Viewport } from 'components/Map/types'
 import { MAPBOX_ACCESS_TOKEN, MAP_STYLE, API_URL } from '../../constants'
 
-const Map: FunctionComponent<{}> = () => {
+const Map: FunctionComponent<{}> = props => {
   const [date, setDate] = useState<moment.Moment>(moment())
   const [currentCollection, setCurrentCollection] = useState<Collection>()
   const [collections, setCollections] = useState<Array<Collection>>([])
   const [pollutants, setPollutants] = useState<Array<Pollutant>>([])
   const [viewport, setViewport] = useState<Viewport>(initialViewport)
+  const [loading, setLoading] = useState<boolean>(false)
+  const location = useLocation()
+  const history = useHistory()
 
   const markers = pollutants.map((coordinates: Coordinates, index: number) => (
     <Pin key={index} coordinates={coordinates} />
@@ -35,13 +40,25 @@ const Map: FunctionComponent<{}> = () => {
           )
           setCollections(collections)
           const firstCollection = collections[0]
-          setCurrentCollection(collections[0])
+          const lastCollection = collections[collections.length - 1]
+
+          //if we are coming from a push from the upload page - i.e there
+          //exists a location state that's not empty, set most recent collection
+          location.state !== undefined && Object.keys(location.state).length > 0
+            ? setCurrentCollection(lastCollection)
+            : setCurrentCollection(firstCollection)
+          //clears location state so now just first collection is set
+          history.replace({ pathname: '/maps', state: {} })
+          setLoading(true)
           getPollutants(token, firstCollection.id)
-            .then(pollutants =>
-              pollutants
-                ? setPollutants(pollutants as Pollutant[])
-                : setPollutants([])
-            )
+            .then(pollutants => {
+              if (pollutants) {
+                setPollutants(pollutants as Pollutant[])
+              } else {
+                setPollutants([])
+              }
+              setLoading(false)
+            })
             .catch((error: Error) => console.log(error))
         } else {
           setPollutants([])
@@ -51,8 +68,15 @@ const Map: FunctionComponent<{}> = () => {
       })
       .catch(error => console.log(error))
   }
+  //if pushed from upload, sets date to date from upload
+  useEffect(() => {
+    if (location.state) {
+      if (!moment(location.state.date).isSame(date)) {
+        setDate(moment(location.state.date))
+      }
+    }
+  }, [])
 
-  // Request pollutant values on mount
   useEffect(() => {
     const source = axios.CancelToken.source()
     getCollections(source.token)
@@ -74,14 +98,17 @@ const Map: FunctionComponent<{}> = () => {
               mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
             >
               {markers.length ? markers : null}
-              {/* <MapFilters /> */}
             </ReactMapGL>
+            <Dimmer active={loading}>
+              <Loader indeterminate>Loading Pollutant Data...</Loader>
+            </Dimmer>
           </Elements.MapContainer>
           <Elements.ControlPanelContainer>
             <ControlPanel
               date={date}
               setDate={setDate}
               setPollutants={setPollutants}
+              setLoading={setLoading}
               collections={collections}
               currentCollection={currentCollection as Collection}
               setCurrentCollection={setCurrentCollection}

web/src/components/Upload/Confirmation/index.tsx

@@ -144,7 +144,12 @@ const Confirmation = ({
       })
       .then(d => {
         console.log('response data is:', d)
-        history.push('/maps')
+        history.push({
+          pathname: '/maps',
+          state: {
+            date: dustrakStart.format('MM/DD/YYYY')
+          }
+        })
       })
       .catch(error => {
         console.error(error)