From 216663c80b9a71806a03fd3a02bfd995281ec0b4 Mon Sep 17 00:00:00 2001 From: Brendon Ward Date: Mon, 27 May 2024 09:49:25 +1000 Subject: [PATCH] Wps default date (#7026) * refactor the DateTimeParameterEditor to be a functional component * add the proptypes check to appease the tests * format and minor code tidy * update CHANGES.MD * add the currentTime from timelineStack as the default date time in WPS params * no need to set dateValue when declaring it with useState * remove unnecessary call to updateParameters * check parameter.value when the DateTimeEditor reloads * use moment to correctly format the date/time * missing import for WebFeatureServiceCatalogGroupTraits * add CHANGES entry * clean up the initial load of DateTimeParameterEditor.jsx * make DateTimeParameterEditor a tsx, remove useState * clean up CHANGES * update CHANGES.md --- CHANGES.md | 5 +- .../Analytics/DateTimeParameterEditor.jsx | 91 ----------------- .../Analytics/DateTimeParameterEditor.tsx | 97 +++++++++++++++++++ 3 files changed, 101 insertions(+), 92 deletions(-) delete mode 100644 lib/ReactViews/Analytics/DateTimeParameterEditor.jsx create mode 100644 lib/ReactViews/Analytics/DateTimeParameterEditor.tsx diff --git a/CHANGES.md b/CHANGES.md index 723decfee61..9d3fbb2adf0 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,9 +2,12 @@ #### next release (8.7.3) +- Fix WPS date time widget reset bug +- Set default date for WPS date time widget on load +- Add NumberParameterEditor to enable WPS AllowedValues Ranges to be set and use DefaultValue + #### 8.7.2 - 2024-05-14 -- Add NumberParameterEditor to enable WPS AllowedValues Ranges to be set and use DefaultValue - Feature info template has access to activeStyle of item having TableTraits. - Updated a few dependencies to fix security warnings: `underscore`, `visx`, `shpjs`, `resolve-uri-loader`, `svg-sprite-loader` - Allow related maps UI strings to be translated. Translation support for related maps content is not included. diff --git a/lib/ReactViews/Analytics/DateTimeParameterEditor.jsx b/lib/ReactViews/Analytics/DateTimeParameterEditor.jsx deleted file mode 100644 index 67547115340..00000000000 --- a/lib/ReactViews/Analytics/DateTimeParameterEditor.jsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from "react"; -import defined from "terriajs-cesium/Source/Core/defined"; -import createReactClass from "create-react-class"; -import PropTypes from "prop-types"; - -import Styles from "./parameter-editors.scss"; -import CommonStrata from "../../Models/Definition/CommonStrata"; - -const DateTimeParameterEditor = createReactClass({ - displayName: "DateTimeParameterEditor", - - propTypes: { - previewed: PropTypes.object, - parameter: PropTypes.object - }, - - getInitialState() { - return this.getDateTime(); - }, - - getDateTime() { - const dateTimeBreakOut = {}; - const timeDate = this.props.parameter.value; - if (timeDate !== undefined) { - const splits = timeDate.split("T"); - dateTimeBreakOut.date = splits[0]; - if (splits[1].length === 0) { - dateTimeBreakOut.time = "00:00"; - } else { - dateTimeBreakOut.time = splits[1]; - } - } else { - dateTimeBreakOut.date = ""; - dateTimeBreakOut.time = "00:00"; - } - - this.setDateTime(dateTimeBreakOut); - - return dateTimeBreakOut; - }, - - setDateTime(dateTime) { - let value; - if (dateTime.date && dateTime.time) { - value = dateTime.date + "T" + dateTime.time; - } - this.props.parameter.setValue(CommonStrata.user, value); - }, - - onChangeDate(e) { - const dateTimeBreakOut = this.getDateTime(); - dateTimeBreakOut.date = e.target.value; - this.setDateTime(dateTimeBreakOut); - this.setState(dateTimeBreakOut); - }, - - onChangeTime(e) { - const dateTimeBreakOut = this.getDateTime(); - dateTimeBreakOut.time = e.target.value; - this.setDateTime(dateTimeBreakOut); - this.setState(dateTimeBreakOut); - }, - - render() { - const style = - defined(this.props.parameter) && defined(this.props.parameter.value) - ? Styles.field - : Styles.fieldDatePlaceholder; - - return ( -
- - -
- ); - } -}); - -module.exports = DateTimeParameterEditor; diff --git a/lib/ReactViews/Analytics/DateTimeParameterEditor.tsx b/lib/ReactViews/Analytics/DateTimeParameterEditor.tsx new file mode 100644 index 00000000000..acadc094e7c --- /dev/null +++ b/lib/ReactViews/Analytics/DateTimeParameterEditor.tsx @@ -0,0 +1,97 @@ +import React, { useEffect } from "react"; +import { observer } from "mobx-react"; +import { runInAction } from "mobx"; +import moment from "moment"; +import defined from "terriajs-cesium/Source/Core/defined"; +import Styles from "./parameter-editors.scss"; +import CommonStrata from "../../Models/Definition/CommonStrata"; +import DateTimeParameter from "../../Models/FunctionParameters/DateTimeParameter"; +import Terria from "../../Models/Terria"; + +interface DateTimeParameterEditorProps { + parameter: DateTimeParameter; + terria: Terria; +} + +const DateTimeParameterEditor: React.FC = ({ + parameter, + terria +}) => { + const style = + defined(parameter) && defined(parameter.value) + ? Styles.field + : Styles.fieldDatePlaceholder; + + useEffect(() => { + let newDateValue, newTimeValue; + if (parameter.value === undefined) { + const currentTime = defined(parameter.value) + ? parameter.value + : terria.timelineStack.clock.currentTime; + + if (currentTime) { + const ct = new Date(currentTime?.toString()); + + newDateValue = moment + .utc(ct.toISOString()) + .local() + .format("YYYY-MM-DD"); + newTimeValue = moment.utc(ct.toISOString()).local().format("HH:mm"); + } + } else { + const ct = new Date(parameter.value); + newDateValue = moment.utc(ct.toISOString()).local().format("YYYY-MM-DD"); + newTimeValue = moment.utc(ct.toISOString()).local().format("HH:mm"); + } + parameter.setValue(CommonStrata.user, `${newDateValue}T${newTimeValue}`); + }, [parameter, terria.timelineStack.clock.currentTime]); + + const isValidTime = (time: string): boolean => { + const timeFormat = /^([01]\d|2[0-3]):([0-5]\d)$/; + return timeFormat.test(time); + }; + + const isValidDate = (date: string, format = "YYYY-MM-DD"): boolean => { + return moment(date, format, true).isValid(); + }; + + const handleTimeChange = (e: React.ChangeEvent) => { + const time = e.target.value; + if (isValidTime(time)) { + runInAction(() => { + parameter.setValue(CommonStrata.user, `${dateValue}T${time}`); + }); + } + }; + + const handleDateChange = (e: React.ChangeEvent) => { + if (isValidDate(e.target.value)) { + runInAction(() => { + parameter.setValue(CommonStrata.user, `${e.target.value}T${timeValue}`); + }); + } + }; + + const value = parameter.value; + const dateValue = value ? value.split("T")[0] : ""; + const timeValue = value ? value.split("T")[1] : ""; + + return ( +
+ + +
+ ); +}; + +export default observer(DateTimeParameterEditor);