Is valid gps input new & setLayout

src/client/app/components/RadarChartComponent.tsx

@@ -4,7 +4,6 @@
 
 import { values } from 'lodash';
 import * as moment from 'moment';
-import { Layout } from 'plotly.js';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
 import { Icons } from 'plotly.js';
@@ -26,6 +25,7 @@ import getGraphColor from '../utils/getGraphColor';
 import { lineUnitLabel } from '../utils/graphics';
 import { useTranslate } from '../redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
+import {setHelpLayout} from '../utils/setLayout';
 
 /**
  * @returns radar plotly component
@@ -189,31 +189,13 @@ export default function RadarChartComponent() {
 		}
 	}
 
-	let layout: Partial<Layout>;
+	let layout = {};
 	// TODO See 3D code for functions that can be used for layout and notices.
 	if (datasets.length === 0) {
 		// There are no meters so tell user.
 		// Customize the layout of the plot
 		// See https://community.plotly.com/t/replacing-an-empty-graph-with-a-message/31497 for showing text not plot.
-		layout = {
-			'xaxis': {
-				'visible': false
-			},
-			'yaxis': {
-				'visible': false
-			},
-			'annotations': [
-				{
-					'text': `${translate('select.meter.group')}`,
-					'xref': 'paper',
-					'yref': 'paper',
-					'showarrow': false,
-					'font': {
-						'size': 28
-					}
-				}
-			]
-		};
+		layout = setHelpLayout(translate('select.meter.group'), 28);
 	} else {
 		// Plotly scatterpolar plots have the unfortunate attribute that if a smaller number of plotting
 		// points is done first then that impacts the labeling of the polar coordinate where you can get
@@ -230,25 +212,7 @@ export default function RadarChartComponent() {
 			// There is no data so tell user - likely due to date range outside where readings.
 			// Remove plotting data even though none there is an empty r & theta that gives empty graphic.
 			datasets.splice(0, datasets.length);
-			layout = {
-				'xaxis': {
-					'visible': false
-				},
-				'yaxis': {
-					'visible': false
-				},
-				'annotations': [
-					{
-						'text': `${translate('radar.no.data')}`,
-						'xref': 'paper',
-						'yref': 'paper',
-						'showarrow': false,
-						'font': {
-							'size': 28
-						}
-					}
-				]
-			};
+			layout = setHelpLayout(translate('radar.no.data'),28);
 		} else {
 			// Check if all the values for the dates are compatible. Plotly does not like having different dates in different
 			// scatterpolar lines. Lots of attempts to get this to work failed so not going to allow since not that common.
@@ -265,25 +229,9 @@ export default function RadarChartComponent() {
 				// Remove plotting data.
 				datasets.splice(0, datasets.length);
 				// The lines are not compatible so tell user.
-				layout = {
-					'xaxis': {
-						'visible': false
-					},
-					'yaxis': {
-						'visible': false
-					},
-					'annotations': [
-						{
-							'text': `${translate('radar.lines.incompatible')}`,
-							'xref': 'paper',
-							'yref': 'paper',
-							'showarrow': false,
-							'font': {
-								'size': 28
-							}
-						}
-					]
-				};
+				//Change layout to use function from utils
+				//Then look at other chart components and do it similar way
+				layout = setHelpLayout(translate('radar.lines.incompatible'),28);
 			} else {
 				// Data available and okay so plot.
 				// Maximum number of ticks, represents 12 months. Too many is cluttered so this seems good value.

src/client/app/components/ThreeDComponent.tsx

@@ -31,6 +31,7 @@ import Plot from 'react-plotly.js';
 import { Icons } from 'plotly.js';
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import Locales from '../types/locales';
+import {setHelpLayout} from '../utils/setLayout';
 
 /**
  * Component used to render 3D graphics
@@ -191,7 +192,6 @@ function formatThreeDData(
 		const readingValue = readings === null ? null : readings.toPrecision(6);
 		return `${translate('threeD.date')}: ${date}<br>${translate('threeD.time')}: ${time}<br>${unitLabel}: ${readingValue}`;
 	}));
-
 	const formattedData = [{
 		type: 'surface',
 		showlegend: false,
@@ -206,39 +206,13 @@ function formatThreeDData(
 	return [formattedData, layout];
 }
 
-/**
- * Utility to get/ set help text plotlyLayout
- * @param helpText 3D data to be formatted
- * @param fontSize current application state
- * @returns plotly layout object.
- */
-function setHelpLayout(helpText: string = 'Help Text Goes Here', fontSize: number = 28) {
-	return {
-		'xaxis': {
-			'visible': false
-		},
-		'yaxis': {
-			'visible': false
-		},
-		'annotations': [
-			{
-				'text': helpText,
-				'xref': 'paper',
-				'yref': 'paper',
-				'showarrow': false,
-				'font': { 'size': fontSize }
-			}
-		]
-	};
-}
-
 /**
  * Utility to get / set 3D graphic plotlyLayout
  * @param zLabelText 3D data to be formatted
  * @param yDataToRender Data range for yaxis
  * @returns plotly layout object.
  */
-function setThreeDLayout(zLabelText: string = 'Resource Usage', yDataToRender: string[]) {
+export function setThreeDLayout(zLabelText: string = 'Resource Usage', yDataToRender: string[]) {
 	// Convert date strings to JavaScript Date objects and then get dataRange
 	const dateObjects = yDataToRender.map(dateStr => new Date(dateStr));
 	const dataMin = Math.min(...dateObjects.map(date => date.getTime()));
@@ -296,3 +270,5 @@ function setThreeDLayout(zLabelText: string = 'Resource Usage', yDataToRender: s
 	} as Partial<Plotly.Layout>;
 }
 
+
+

src/client/app/components/groups/CreateGroupModalComponent.tsx

@@ -197,7 +197,8 @@ export default function CreateGroupModalComponent() {
 		// If the user input a value then gpsInput should be a string.
 		// null came from the DB and it is okay to just leave it - Not a string.
 		if (typeof gpsInput === 'string') {
-			if (isValidGPSInput(gpsInput)) {
+			const {validGps,message} = isValidGPSInput(gpsInput);
+			if (validGps) {
 				// Clearly gpsInput is a string but TS complains about the split so cast.
 				const gpsValues = (gpsInput as string).split(',').map((value: string) => parseFloat(value));
 				// It is valid and needs to be in this format for routing.
@@ -207,10 +208,7 @@ export default function CreateGroupModalComponent() {
 				};
 				// gpsInput must be of type string but TS does not think so so cast.
 			} else if ((gpsInput as string).length !== 0) {
-				// GPS not okay. Only true if some input.
-				// TODO isValidGPSInput currently pops up an alert so not doing it here, may change
-				// so leaving code commented out.
-				// showErrorNotification(translate('input.gps.range') + state.gps + '.');
+				showErrorNotification(message);
 				inputOk = false;
 			}
 		}

src/client/app/components/groups/EditGroupModalComponent.tsx

@@ -288,7 +288,8 @@ export default function EditGroupModalComponent(props: EditGroupModalComponentPr
 			// If the user input a value then gpsInput should be a string
 			// null came from DB and it is okay to just leave it - Not a String.
 			if (typeof gpsInput === 'string') {
-				if (isValidGPSInput(gpsInput)) {
+				const {validGps,message} = isValidGPSInput(gpsInput);
+				if (validGps) {
 					// Clearly gpsInput is a string but TS complains about the split so cast.
 					const gpsValues = (gpsInput as string).split(',').map((value: string) => parseFloat(value));
 					// It is valid and needs to be in this format for routing
@@ -297,10 +298,7 @@ export default function EditGroupModalComponent(props: EditGroupModalComponentPr
 						latitude: gpsValues[latitudeIndex]
 					};
 				} else if ((gpsInput as string).length !== 0) {
-					// GPS not okay and there since non-zero length value.
-					// TODO isValidGPSInput currently pops up an alert so not doing it here, may change
-					// so leaving code commented out.
-					// showErrorNotification(translate('input.gps.range') + groupState.gps + '.');
+					showErrorNotification(message);
 					inputOk = false;
 				}
 			}

src/client/app/components/maps/MapCalibrationInfoDisplayComponent.tsx

@@ -88,7 +88,8 @@ export default class MapCalibrationInfoDisplayComponent extends React.Component<
 		const longitudeIndex = 1;
 		if (this.props.currentCartesianDisplay === 'x: undefined, y: undefined') { return; }
 		const input = this.state.value;
-		if (isValidGPSInput(input)) {
+		const {validGps} = isValidGPSInput(input);
+		if (validGps) {
 			const array = input.split(',').map((value: string) => parseFloat(value));
 			const gps: GPSPoint = {
 				longitude: array[longitudeIndex],

src/client/app/components/meters/CreateMeterModalComponent.tsx

@@ -124,7 +124,8 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 		// If the user input a value then gpsInput should be a string.
 		// null came from the DB and it is okay to just leave it - Not a string.
 		if (typeof gpsInput === 'string') {
-			if (isValidGPSInput(gpsInput)) {
+			const {validGps, message} = isValidGPSInput(gpsInput);
+			if (validGps) {
 				const gpsValues = gpsInput.split(',').map(value => parseFloat(value));
 				// It is valid and needs to be in this format for routing.
 				gps = {
@@ -133,9 +134,7 @@ export default function CreateMeterModalComponent(props: CreateMeterModalProps):
 				};
 			} else if (gpsInput.length !== 0) {
 				// GPS not okay. Only true if some input.
-				// TODO isValidGPSInput currently pops up an alert so not doing it here, may change
-				// so leaving code commented out.
-				// showErrorNotification(translate('input.gps.range') + state.gps + '.');
+				showErrorNotification(message);
 				inputOk = false;
 			}
 		}

src/client/app/components/meters/EditMeterModalComponent.tsx

@@ -105,7 +105,8 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 			// If the user input a value then gpsInput should be a string.
 			// null came from the DB and it is okay to just leave it - Not a string.
 			if (typeof gpsInput === 'string') {
-				if (isValidGPSInput(gpsInput)) {
+				const {validGps, message} = isValidGPSInput(gpsInput);
+				if (validGps) {
 					// Clearly gpsInput is a string but TS complains about the split so cast.
 					const gpsValues = (gpsInput as string).split(',').map((value: string) => parseFloat(value));
 					// It is valid and needs to be in this format for routing.
@@ -116,9 +117,7 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 					// gpsInput must be of type string but TS does not think so so cast.
 				} else if ((gpsInput as string).length !== 0) {
 					// GPS not okay.
-					// TODO isValidGPSInput currently tops up an alert so not doing it here, may change
-					// so leaving code commented out.
-					// showErrorNotification(translate('input.gps.range') + state.gps + '.');
+					showErrorNotification(message);
 					inputOk = false;
 				}
 			}

src/client/app/translations/data.ts

@@ -176,6 +176,8 @@ const LocaleTranslationData = {
 		"failed.to.submit.changes": "Failed to submit changes",
 		"false": "False",
 		"gps": "GPS: latitude, longitude",
+		"gps.missing.comma": "GPS Input is missing a comma",
+		"gps.many.comma": "GPS Input has too many commas",
 		"graph": "Graph",
 		"graph.settings": "Graph Settings",
 		"graph.type": "Graph Type",
@@ -698,6 +700,8 @@ const LocaleTranslationData = {
 		"failed.to.submit.changes": "Échec de l'envoi des modifications",
 		"false": "Faux",
 		"gps": "GPS: latitude, longitude\u{26A1}",
+		"gps.missing.comma": "GPS Input is missing a comma\u{26A1}",
+		"gps.many.comma": "GPS Input has too many commas\u{26A1}",
 		"graph": "Graphique",
 		"graph.settings": "Graph Settings\u{26A1}",
 		"graph.type": "Type du Diagramme",
@@ -1221,6 +1225,8 @@ const LocaleTranslationData = {
 		"failed.to.submit.changes": "No se pudo entregar los cambios",
 		"false": "Falso",
 		"gps": "GPS: latitud, longitud",
+		"gps.missing.comma": "GPS Input is missing a comma\u{26A1}",
+		"gps.many.comma": "GPS Input has too many commas\u{26A1}",
 		"graph": "Gráfico",
 		"graph.settings": "Graph Settings\u{26A1}",
 		"graph.type": "Tipo de gráfico",

src/client/app/utils/calibration.ts

@@ -2,7 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { showErrorNotification } from './notifications';
 import { logToServer } from '../redux/actions/logs';
 import { DataType } from '../types/Datasources';
 import { MapMetadata } from '../types/redux/map';
@@ -68,7 +67,8 @@ export interface Dimensions {
 }
 
 /**
- * Returns true if item (meter or group) and map and reasonably defined and false otherwise.
+ * Returns true if item (meter or group) and map and reasonably defined
+ * Returns false and a message about the reason the input is invalid otherwise
  * @param itemID ID to be used for logging errors
  * @param type DataType to distinguish between meter and group
  * @param map map info to check
@@ -78,7 +78,8 @@ export interface Dimensions {
 export function itemMapInfoOk(itemID: number, type: DataType, map: MapMetadata, gps?: GPSPoint): boolean {
 	if (map === undefined) { return false; }
 	if ((gps === null || gps === undefined) || map.origin === undefined || map.opposite === undefined) { return false; }
-	if (!isValidGPSInput(`${gps.latitude},${gps.longitude}`)) {
+	const {validGps} = isValidGPSInput(`${gps.latitude},${gps.longitude}`);
+	if (!validGps) {
 		logToServer('error', `Found invalid ${type === DataType.Meter ? 'meter' : 'group'} gps stored in database, id = ${itemID}`)();
 		return false;
 	}
@@ -106,25 +107,33 @@ export function itemDisplayableOnMap(size: Dimensions, point: CartesianPoint): b
  * @param input The string to check for GPS values
  * @returns true if string is GPS and false otherwise.
  */
-export function isValidGPSInput(input: string): boolean {
+export function isValidGPSInput(input: string){
+	let message = '';
+	let validGps = true;
 	if (input.indexOf(',') === -1) { // if there is no comma
 		// TODO It would be nice to tell user that comma is missing but need to check all uses to be sure don't get ''.
-		return false;
+		message = translate('gps.missing.comma');
+		validGps = false;
 	} else if (input.indexOf(',') !== input.lastIndexOf(',')) { // if there are multiple commas
-		return false;
+		message = translate('gps.many.comma');
+		validGps = false;
 	}
-	// Works if value is not a number since parseFloat returns a NaN so treated as invalid later.
-	const array = input.split(',').map((value: string) => parseFloat(value));
-	const latitudeIndex = 0;
-	const longitudeIndex = 1;
-	const latitudeConstraint = array[latitudeIndex] >= -90 && array[latitudeIndex] <= 90;
-	const longitudeConstraint = array[longitudeIndex] >= -180 && array[longitudeIndex] <= 180;
-	const result = latitudeConstraint && longitudeConstraint;
-	if (!result) {
-		// TODO It would be nice to return the error and then notify as desired.
-		showErrorNotification(translate('input.gps.range') + input);
+	if(validGps){
+		// Works if value is not a number since parseFloat returns a NaN so treated as invalid later.
+		const array = input.split(',').map((value: string) => parseFloat(value));
+		const latitudeIndex = 0;
+		const longitudeIndex = 1;
+		const latitudeConstraint = array[latitudeIndex] >= -90 && array[latitudeIndex] <= 90;
+		const longitudeConstraint = array[longitudeIndex] >= -180 && array[longitudeIndex] <= 180;
+		const result = latitudeConstraint && longitudeConstraint;
+		if (!result) {
+			// TODO It would be nice to return the error and then notify as desired.
+			//showErrorNotification(translate('input.gps.range') + input);
+			validGps = false;
+			message = translate('input.gps.range') + input;
+		}
 	}
-	return result;
+	return {validGps,message};
 }
 
 /**

src/client/app/utils/setLayout.ts

@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+/**
+ * Utility to get/ set help text plotlyLayout
+ * @param helpText 3D data to be formatted
+ * @param fontSize current application state
+ * @returns plotly layout object.
+ */
+export function setHelpLayout(helpText: string = 'Help Text Goes Here', fontSize: number = 28) {
+	return {
+		'xaxis': {
+			'visible': false
+		},
+		'yaxis': {
+			'visible': false
+		},
+		'annotations': [
+			{
+				'text': helpText,
+				'xref': 'paper',
+				'yref': 'paper',
+				'showarrow': false,
+				'font': { 'size': fontSize }
+			}
+		]
+	};
+}
+