erp5_web_renderjs_ui: unify the behavior of timezone calculation between both interfaces

Causing the browser time to be used instead of the calculated time of the server, which was incoherent with previous behavior (fix 5c4a03f6)

Display the timezone (if the field is configured like that) in both editable and non-editable mode

See merge request !1113

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_datetimefield_js.js

@@ -31,6 +31,28 @@
     ["GMT+12", "+1200"]
   ];
 
+  function formatDateToLocaleFormatString(date, language) {
+    /* Ideally we would like to use {timeStyle: "short"} as option
+     * to hide seconds. Unfortunately it doesn't work in older
+     * versions of firefox. Luckily, by using
+     *   {hour: "numeric", minute: "numeric"}
+     * it hides seconds, and still respects the locale.
+     * >> date = new Date(2019, 1, 1, 1, 1)
+     * >> date.toLocaleTimeString(
+     *      'en', {hour: "numeric", minute: "numeric"}
+     *    )
+     *    "1:01 AM"
+     * >> date.toLocaleTimeString(
+     *      'fr', {hour: "numeric", minute: "numeric"}
+     *    )
+     *    "01:01"
+     */
+    return date.toLocaleTimeString(
+      language,
+      {hour: "numeric", minute: "numeric"}
+    );
+  }
+
   rJS(window)
     .declareAcquiredMethod('getSelectedLanguage', 'getSelectedLanguage')
     .declareMethod('render', function (options) {
@@ -232,44 +254,23 @@
               gadget_list = result_list[1],
               text_content = "",
               state_date,
-              locale_formatted_state_date,
               offset_time_zone;
             if (gadget.state.value) {
               state_date = new Date(gadget.state.value);
-              /* Ideally we would like to use {timeStyle: "short"} as option
-               * to hide seconds. Unfortunately it doesn't work in older
-               * versions of firefox. Luckily, by using
-               *   {hour: "numeric", minute: "numeric"}
-               * it hides seconds, and still respects the locale.
-               * >> date = new Date(2019, 1, 1, 1, 1)
-               * >> date.toLocaleTimeString(
-               *      'en', {hour: "numeric", minute: "numeric"}
-               *    )
-               *    "1:01 AM"
-               * >> date.toLocaleTimeString(
-               *      'fr', {hour: "numeric", minute: "numeric"}
-               *    )
-               *    "01:01"
-               */
-              locale_formatted_state_date = state_date.toLocaleTimeString(
-                language,
-                {hour: "numeric", minute: "numeric"}
-              );
+              //get timezone difference between server and local browser
+              offset_time_zone = timezone +
+                                  (state_date.getTimezoneOffset() / 60);
+              //adjust hour in order to get correct date time string
+              state_date.setUTCHours(state_date.getUTCHours() +
+                                      offset_time_zone);
+              text_content = state_date.toLocaleDateString(language);
+              if (!gadget.state.date_only) {
+                text_content += " " +
+                  formatDateToLocaleFormatString(state_date, language);
+              }
               if (gadget.state.timezone_style) {
-                text_content = state_date.toLocaleDateString(language);
-                if (!gadget.state.date_only) {
-                  text_content += " " + locale_formatted_state_date;
-                }
-              } else {
-                //get timezone difference between server and local browser
-                offset_time_zone = timezone +
-                                   (state_date.getTimezoneOffset() / 60);
-                //adjust hour in order to get correct date time string
-                state_date.setUTCHours(state_date.getUTCHours() +
-                                       offset_time_zone);
-                text_content = state_date.toLocaleDateString(language);
                 if (!gadget.state.date_only) {
-                  text_content += " " + locale_formatted_state_date;
+                  text_content += " " + ZONE_LIST[timezone + 12][0];
                 }
               }
             }
@@ -402,4 +403,4 @@
       return true;
     }, {mutex: 'changestate'});
 
-}(window, rJS, RSVP));
\ No newline at end of file
+}(window, rJS, RSVP));

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_datetimefield_js.xml

@@ -228,7 +228,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.20840.63890.24627</string> </value>
+                      <value> <string>983.56055.11203.16827</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -246,8 +246,8 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1583399782.26</float>
-                              <string>UTC</string>
+                              <float>1589358221.58</float>
+                              <string>GMT+0</string>
                             </tuple>
                           </state>
                         </object>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_date_time_field_zuite/testDisplayWithAndWithoutTimeZone.zpt

@@ -82,6 +82,18 @@
   <td></td>
 </tr>
 
+<tr>
+  <td>assertText</td>
+  <td>//div[@data-gadget-scope='field_my_stop_date']//div[@data-gadget-scope='field']//p</td>
+  <td>glob:*12:00*GMT+5</td>
+</tr>
+
+<tr>
+  <td>assertElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_stop_date']//div[@data-gadget-scope='field']//p[@data-date='2016-12-21T12:00:00']</td>
+  <td></td>
+</tr>
+
 <tr>
   <td>storeLocation</td>
   <td>url</td>
@@ -126,6 +138,12 @@
 </tr>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_app_loaded" />
 
+<tr>
+  <td>assertElementPresent</td>
+  <td>//div[@data-gadget-scope='field_my_stop_date']//div[@data-gadget-scope='field']//p[contains(text(), '12:00')]</td>
+  <td></td>
+</tr>
+
 <tr>
   <td>assertElementPresent</td>
   <td>//div[@data-gadget-scope='field_my_stop_date']//div[@data-gadget-scope='field']//p[@data-date='2016-12-21T12:00:00']</td>