Merge pull request #36 from alDuncanson/feature/map-formatting

Formatted database data in InfoWindows on Sighting Map.

package.json

@@ -9,6 +9,7 @@
     "firebase-admin": "^6.0.0",
     "flamelink": "^0.19.2",
     "google-maps-react": "^2.0.2",
+    "moment": "^2.22.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-quiz-component": "0.2.0",

src/components/SightingMap.js

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
+import moment from 'moment'
 import Typography from '@material-ui/core/Typography';
 import firebase from '../firebase.js';
 
@@ -12,6 +13,128 @@ const mapStyles = {
     height: '100%'
 }
 
+/** 
+  * Types of sightings. Label is what is
+  * viewed in the application, value is
+  * what is stored in the database.
+  */
+const sightingTypes = [
+    {
+        value: 'visual',
+        label: 'Visual',
+    },
+    {
+        value: 'roadkill',
+        label: 'Roadkill',
+    },
+    {
+        value: 'trapped',
+        label: 'Trapped',
+    },
+    {
+        value: 'viewed_tracks',
+        label: 'Viewed Tracks',
+    },
+    {
+        value: 'photo',
+        label: 'Photo',
+    },
+    {
+        value: 'other',
+        label: 'Other',
+    },
+];
+
+/** 
+ * Types of sightings. Label is what is
+ * viewed in the application, value is
+ * what is stored in the database.
+*/
+const timeTypes = [
+    {
+        value: 'unknown',
+        label: 'Unknown',
+    },
+    {
+        value: 'morning',
+        label: 'Morning',
+    },
+    {
+        value: 'midday',
+        label: 'Midday',
+    },
+    {
+        value: 'evening',
+        label: 'Evening',
+    },
+    {
+        value: 'night',
+        label: 'Night',
+    },
+];
+
+/** 
+ * Levels of confidence. Label is what is
+ * viewed in the application, value is
+ * what is stored in the database.
+*/
+const confidenceLevels = [
+    {
+        value: '1',
+        label: '1 - Strongly unconfident',
+    },
+    {
+        value: '2',
+        label: '2 - Unconfident',
+    },
+    {
+        value: '3',
+        label: '3 - Somewhat confident',
+    },
+    {
+        value: '4',
+        label: '4 - Confident',
+    },
+    {
+        value: '5',
+        label: '5 - Very confident',
+    },
+];
+
+/**
+ * Gets formatted confidence value.
+ */
+function getConfidence(item) {
+    for (var i = 0; i < confidenceLevels.length; i++) {
+        if (confidenceLevels[i].value === item) {
+            return confidenceLevels[i].label;
+        }
+    }
+
+}
+
+/**
+ * Gets formatted time value.
+ */
+function getTime(item) {
+    for (var i = 0; i < timeTypes.length; i++) {
+        if (timeTypes[i].value === item) {
+            return timeTypes[i].label;
+        }
+    }
+}
+
+/**
+ * Gets formatted type value.
+ */
+function getType(item) {
+    for (var i = 0; i < sightingTypes.length; i++) {
+        if (sightingTypes[i].value === item) {
+            return sightingTypes[i].label;
+        }
+    }
+}
+
 export class MapContainer extends Component {
 
     // Get the user's location using Google's geolocation
@@ -85,6 +208,10 @@ export class MapContainer extends Component {
         }
     }
 
+    formatDate = date => {
+        return (moment(date, "YYYY-MM").format("MMMM YYYY").toString())
+    }
+
     // Set the state of the component to contain user coordinates and initial 
     // marker and info window information
     state = {
@@ -101,55 +228,55 @@ export class MapContainer extends Component {
     render() {
         return (
             // Render the Google Map, Marker, and InfoWindow components
-            <div className = "sighting-google-map-container">
+            <div className="sighting-google-map-container">
                 <Map
-                    style = { mapStyles }
+                    style={mapStyles}
-                    google = { this.props.google }
+                    google={this.props.google}
-                    initialCenter = { this.state.myLatLng }
+                    initialCenter={this.state.myLatLng}
-                    center = { this.state.myLatLng }
+                    center={this.state.myLatLng}
-                    defaultZoom = { 15 }
+                    defaultZoom={15}
-                    onClick = { this.onMapClick } >
+                    onClick={this.onMapClick} >
 
                     <Marker
-                        position = { this.state.myLatLng }
+                        position={this.state.myLatLng}
-                        onClick = { this.onMarkerClick }
+                        onClick={this.onMarkerClick}
-                        type = { 'You are here' } 
+                        type={'You are here'}
                     />
 
-                    { this.state.sightings.map((sighting) => {
+                    {this.state.sightings.map((sighting) => {
                         return (
                             <Marker
-                                key={ sighting.id }
+                                key = {sighting.id}
-                                position={{ lat: sighting.lat, lng:sighting.lng }}
+                                position = {{ lat: sighting.lat, lng: sighting.lng }}
-                                onClick = { this.onMarkerClick }
+                                onClick = {this.onMarkerClick}
-                                type = { 'Type: ' + sighting.type }
+                                type = {'Type: ' + getType(sighting.type)}
-                                confidence = { 'Confidence: ' + sighting.confidence }
+                                confidence = {<Fragment><b>Confidence:</b> {getConfidence(sighting.confidence)}</Fragment>}
-                                date = { 'Date: ' + sighting.date }
+                                date = {<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
-                                time = { 'Time: ' + sighting.time }
+                                time = {<Fragment><b>Time:</b> {getTime(sighting.time)}</Fragment>}
-                                description = { 'Description: ' + sighting.desc }
+                                description = {<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
                             />
                         )
                     })}
 
                     <InfoWindow
-                        marker = { this.state.activeMarker }
+                        marker={this.state.activeMarker}
-                        visible = { this.state.showingInfoWindow } >
+                        visible={this.state.showingInfoWindow} >
 
                         <Fragment>
-                            <Typography variant = "display1" gutterBottom>
+                            <Typography variant="display1" gutterBottom>
-                                { this.state.selectedPlace.type }
+                                {this.state.selectedPlace.type}
                             </Typography>
-                            <Typography variant = "subheading" gutterBottom>
+                            <Typography variant="subheading" gutterBottom>
-                                { this.state.selectedPlace.confidence }
+                                {this.state.selectedPlace.confidence}
                             </Typography>
-                            <Typography variant = "subheading" gutterBottom>
+                            <Typography variant="subheading" gutterBottom>
-                                { this.state.selectedPlace.date }
+                                {this.state.selectedPlace.date}
                             </Typography>
-                            <Typography variant = "subheading" gutterBottom>
+                            <Typography variant="subheading" gutterBottom>
-                                { this.state.selectedPlace.time }
+                                {this.state.selectedPlace.time}
                             </Typography>
-                            <Typography variant = "subheading" gutterBottom>
+                            <Typography variant="subheading" gutterBottom>
-                                { this.state.selectedPlace.description }
+                                {this.state.selectedPlace.description}
                             </Typography>
                         </Fragment>
                     </InfoWindow>