(#2755) Auto-select day when month/year is changed

quince-science · Dec 28, 2023 · a86cbe2 · a86cbe2
1 parent e633ff2
commit a86cbe2
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 17 deletions.
diff --git a/WebApp/WebContent/WEB-INF/templates/calibration.xhtml b/WebApp/WebContent/WEB-INF/templates/calibration.xhtml
@@ -10,6 +10,7 @@
    - #{sessionScope[beanName].instrumentName}</ui:define>
   <ui:define name="localHead">
     <h:outputScript name="script/calibration.js" />
+    <h:outputScript name="script/dateFormat.js" />
     <h:outputScript name="script/vis-timeline-graph2d.min.js" />
     <h:outputStylesheet name="style/vis-timeline-graph2d.min.css" />
     <h:outputStylesheet name="style/calibration.css" />
@@ -25,7 +26,7 @@
         <p:remoteCommand name="newCalibration"
           action="#{sessionScope[beanName].loadSelectedCalibration}"
           process="calibrationId editAction" update="@(form :not(.noupdate))"
-          oncomplete="PF('deploymentDialog').show()"/>
+          oncomplete="PF('deploymentDialog').show();"/>
 
         <div id="timelineContainer" class="noupdate"></div>
         <script>
@@ -119,12 +120,14 @@
 
           <div id="deploymentPanelContent">
             <div id="deploymentCalendar">
-              <p:calendar id="deploymentDate" widgetVar="deploymentDate"
-                mode="inline"
+              <p:datePicker id="deploymentDate" widgetVar="deploymentDate"
+                inline="true" monthNavigator="true" yearNavigator="true"
+                onMonthChange="autoSelectDay"
+                onYearChange="autoSelectDay"
                 value="#{sessionScope[beanName].calibration.deploymentDate}"
                 pattern="yyyy-MM-dd HH:mm:ss" navigator="true">
                 <f:converter converterId="localDateTimeConverter" />
-              </p:calendar>
+              </p:datePicker>
             </div>
             <div id="deploymentFields">
               <table>

diff --git a/WebApp/WebContent/dataset/new_dataset.xhtml b/WebApp/WebContent/dataset/new_dataset.xhtml
@@ -52,16 +52,20 @@
             pt:data-platform-code="#{dataSetsBean.currentInstrument.platformCode}" />
           <p:outputLabel for="startDate" value="Start Date" />
           <p:outputLabel for="endDate" value="End Date" />
-          <p:datePicker id="startDate" widgetVar="pStartDate"
+          <p:datePicker id="startDate" widgetVar="startDate"
             value="#{dataSetsBean.newDataSet.start}" timeInput="true"
             pattern="yyyy-MM-dd HH:mm:ss"
             monthNavigator="true" yearNavigator="true"
+            onMonthChange="autoSelectDay"
+            onYearChange="autoSelectDay"
             onchange="processNewDataSet('start');">
           </p:datePicker>
-          <p:datePicker id="endDate" widgetVar="pEndDate"
+          <p:datePicker id="endDate" widgetVar="endDate"
             value="#{dataSetsBean.newDataSet.end}" timeInput="true"
             pattern="yyyy-MM-dd HH:mm:ss"
             monthNavigator="true" yearNavigator="true"
+            onMonthChange="autoSelectDay"
+            onYearChange="autoSelectDay"
             onchange="processNewDataSet();">
           </p:datePicker>
         </h:panelGrid>

diff --git a/WebApp/WebContent/resources/script/calibration.js b/WebApp/WebContent/resources/script/calibration.js
@@ -6,7 +6,7 @@ function addDeployment() {
   hideSelectionDetails();
   $('#deploymentForm\\:calibrationId').val(-1);
   $('#deploymentForm\\:editAction').val(ADD);
-  newCalibration();
+  newCalibration(); // PF remoteCommand in calibration.xhtml
 }
 
 function selectDeployment(item) {

diff --git a/WebApp/WebContent/resources/script/dataSets.js b/WebApp/WebContent/resources/script/dataSets.js
@@ -30,16 +30,16 @@ function processNewDataSet(eventType) {
   // Remove the existing entry
   timeline.itemsData.getDataSet().remove(newDataSetItem);
 
-  if (null == PF('pStartDate').getDate()) {
+  if (null == PF('startDate').getDate()) {
     newDataSetItem['start'] = null;
   } else {
-    newDataSetItem['start'] = getDateField('pStartDate');
+    newDataSetItem['start'] = getDateField('startDate');
   }
 
-  if (null == PF('pEndDate').getDate()) {
+  if (null == PF('endDate').getDate()) {
     newDataSetItem['end'] = null;
   } else {
-    newDataSetItem['end'] = getDateField('pEndDate');
+    newDataSetItem['end'] = getDateField('endDate');
   }
   let validData = validateNewDataSet();
   if (validData) {
@@ -277,8 +277,8 @@ function setRangeFromClick(date, datasets) {
     max = max_file_date
   }
   if (!inside_existing) {
-    setDateField('pStartDate', min);
-    setDateField('pEndDate', max);
+    setDateField('startDate', min);
+    setDateField('endDate', max);
   }
   else {
     alert('You clicked on an area that already has a data set defined');

diff --git a/WebApp/WebContent/resources/script/dateFormat.js b/WebApp/WebContent/resources/script/dateFormat.js
@@ -1,11 +1,15 @@
+const MAX_MONTH_DATES = [31, -1, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
 // Some date formatting functions for getting strings in the UTC timezone.
 // If this get too big we should consider switch to a library such as Moment.js
 // but at the minute that's overkill.
 
+// Also stuff for PrimeFaces DatePicker
+
 // Convert a date to yyyy-MM-dd HH:mm:ss format
 // in the UTC timezone
 function makeUTCDateTime(date) {
-  var string = date.getUTCFullYear();
+  let string = date.getUTCFullYear();
   string += '-';
   string += new String(date.getUTCMonth() + 1).padStart(2, '0');
   string += '-';
@@ -23,15 +27,15 @@ function makeUTCDateTime(date) {
 //Convert a date to yyyyMMdd format
 //in the UTC timezone
 function makeUTCyyyymmdd(date) {
-  var string = date.getUTCFullYear();
+  let string = date.getUTCFullYear();
   string += new String(date.getUTCMonth() + 1).padStart(2, '0');
   string += new String(date.getUTCDate()).padStart(2, '0');
 
   return string;
 }
 
 function formatForTable(date) {
-  var string = date.getFullYear();
+  let string = date.getFullYear();
   string += '-';
   string += new String(date.getMonth() + 1).padStart(2, '0');
   string += '-';
@@ -44,4 +48,42 @@ function formatForTable(date) {
   string += new String(date.getSeconds()).padStart(2, '0');
 
   return string;
-}
+}
+
+/*
+ * Functions for PrimeFaces DatePicker
+ */
+function isLeapYear(year) {
+  return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
+}
+
+function autoSelectDay(newMonthOneBased, newYear) {
+  let pickerId = event.currentTarget.id;
+  let regex = /.*:(.*)_panel/
+  let inputName = regex.exec(pickerId)[1];
+
+  let currentDate = PF(inputName).getDate();
+  if (currentDate) {
+    let newMonth = newMonthOneBased - 1;
+    let newDay = currentDate.getDate();
+
+    let maxDay = -1;
+    if (newMonth == 1) {
+      if (isLeapYear(newYear)) {
+        maxDay = 29;
+      } else {
+        maxDay = 28;
+      }
+    } else {
+      maxDay = MAX_MONTH_DATES[newMonth];
+    }
+
+    if (newDay > maxDay) {
+      newDay = maxDay;
+    }
+
+    let newDate = new Date(newYear, newMonth, newDay, currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
+    PF(inputName).setDate(newDate);
+  }	
+}
+