Adds fallbacks for resource title display

src/components/SelectedTap/SelectedTap.js

@@ -14,7 +14,7 @@ import './SelectedTap.css';
 
 import { Paper, SwipeableDrawer } from '@mui/material';
 
-import SelectedTapDetails from '../SelectedTapMobile/SelectedTapDetails';
+import SelectedTapDetails from '../SelectedTapDetails/SelectedTapDetails';
 
 import useIsMobile from 'hooks/useIsMobile';
 

src/components/SelectedTapMobile/SelectedTapDetails.js → src/components/SelectedTapDetails/SelectedTapDetails.js

@@ -1,7 +1,7 @@
 import { Button, Collapse, IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React, { useState } from 'react';
-import styles from './SelectedTapMobileInfo.module.scss';
+import styles from './SelectedTapDetails.module.scss';
 import CloseIcon from '@mui/icons-material/Close';
 
 import { ReactComponent as DirectionIcon } from '../images/ArrowElbowUpRight.svg';
@@ -41,6 +41,28 @@ function SelectedTapDetails(props) {
  return <div></div>;
  }
 
+ const latLongFormatted = getFormattedLatLong(resource.latitude, resource.longitude);
+
+ // Assign title and subtitles, using fallbacks when data is missing
+ let resourceTitle = "", resourceSubtitleOne, resourceSubtitleTwo;
+ if (resource.name !== undefined && resource.name.trim().length > 0 &&
+ resource.address !== undefined && resource.address.trim().length > 0) {
+ resourceTitle = resource.name;
+ resourceSubtitleOne = resource.address;
+ resourceSubtitleTwo = latLongFormatted;
+ }
+ else if (resource.name !== undefined && resource.name.trim().length > 0) {
+ resourceTitle = resource.name;
+ resourceSubtitleOne = latLongFormatted;
+ }
+ else if (resource.address !== undefined && resource.address.trim().length > 0) {
+ resourceTitle = resource.address;
+ resourceSubtitleOne = latLongFormatted;
+ }
+ else if ((resource.latitude !== undefined) && resource.longitude !== undefined) {
+ resourceTitle = latLongFormatted;
+ }
+
  let icon;
  switch (resource.resource_type) {
  case WATER_RESOURCE_TYPE:
@@ -177,17 +199,17 @@ function SelectedTapDetails(props) {
  />
  <div className={styles.mainHalfInfoText}>
  <h2 className={styles.organization} data-cy="tap-organization-name">
- {resource.name}
+ {resourceTitle}
  </h2>
- <p>{resource.address}</p>
+ <p className={styles.subtitles}>{resourceSubtitleOne}<br />{resourceSubtitleTwo}</p>
  {props.children}
  <Button
  onClick={() =>
  window.open(
  'https://www.google.com/maps/dir/?api=1&destination=' +
-  resource.latitude +
-  ',' +
-  resource.longitude,
+ resource.latitude +
+ ',' +
+ resource.longitude,
  '_blank'
  )
  }
@@ -272,4 +294,71 @@ function getTagsFromResource(resource) {
  return tags.filter(Boolean).sort(); // Tags are optional, so filter out missing tags too
 }
 
+/**
+ * Converts degrees given in decimal to DMS (degrees, minutes, and seconds), where seconds are
+ * rounded to the tenth place. The returned degrees are not clamped or wrapped in any way.
+ *
+ * @param {number} degrees Degrees given in decimal
+ */
+function decimalDegreesToDMS(decimalDegrees) {
+ let integralDegrees = Math.trunc(decimalDegrees);
+ const fractionalDegrees = Math.abs(decimalDegrees) - Math.abs(integralDegrees);
+ const fractionalDegreesInMinutes = fractionalDegrees * 60;
+ let minutes = Math.trunc(fractionalDegreesInMinutes);
+ const remainingFractionalDegreesInMinutes = fractionalDegreesInMinutes - minutes;
+ const seconds = remainingFractionalDegreesInMinutes * 60;
+ let roundedSeconds = Number(seconds.toFixed(1));
+ // Account for rounding edge case
+ if (roundedSeconds === 60) {
+ minutes += 1;
+ roundedSeconds = 0;
+ }
+ if (minutes === 60) {
+ integralDegrees += 1;
+ minutes = 0;
+ }
+ return {
+ deg: integralDegrees,
+ min: minutes,
+ sec: roundedSeconds
+ }
+}
+
+/**
+ * Returns a formatted string with the latitude and longitude.
+ * Example return value: 13°39'49.7"N 45°9'35.6"E
+ *
+ * Clamps latitude values to be within [-90, 90] and wraps longitude
+ * values to be within [-180, 180).
+ *
+ * @param {number} latitude Latitude given as a decimal
+ * @param {number} longitude Longitude given as a decimal
+ * @returns {string} A formatted string with the latitude and logitude
+ */
+function getFormattedLatLong(latitude, longitude) {
+ let clampedLatitude, wrappedLongitude;
+
+ if (latitude < -90)
+ clampedLatitude = -90;
+ else if (latitude > 90)
+ clampedLatitude = 90;
+ else
+ clampedLatitude = latitude;
+
+ wrappedLongitude = longitude % 180;
+
+ const latitudeDMS = decimalDegreesToDMS(clampedLatitude);
+ const longitudeDMS = decimalDegreesToDMS(wrappedLongitude);
+
+ const latitudeDir = latitudeDMS.deg < 0 ? 'S' : 'N';
+ const longitudeDir = longitudeDMS.deg < 0 ? 'W' : 'E';
+
+ const latitudeFormatted =
+ `${latitudeDMS.deg}\u00B0${latitudeDMS.min}'${latitudeDMS.sec}"${latitudeDir}`;
+ const longitudeFormatted =
+ `${longitudeDMS.deg}\u00B0${longitudeDMS.min}'${longitudeDMS.sec}"${longitudeDir}`;
+
+ return `${latitudeFormatted} ${longitudeFormatted}`;
+}
+
 export default SelectedTapDetails;

src/components/SelectedTapMobile/SelectedTapMobileInfo.module.scss → src/components/SelectedTapDetails/SelectedTapDetails.module.scss

@@ -96,4 +96,8 @@ $lighter-grey: #e9eef4;
  display: flex;
  justify-content: space-between;
  }
+
+ .subtitles {
+ line-height: 20px;
+ }
 }