Elements: Weather PR refactor (#1927)

xibosignage · Jul 20, 2023 · aa92dde · aa92dde
1 parent f92ad9a
commit aa92dde
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 3 deletions.
diff --git a/modules/assets/template-thumbnails/forecast/elements/weather-date.png b/modules/assets/template-thumbnails/forecast/elements/weather-date.png
diff --git a/modules/templates/forecast-elements.xml b/modules/templates/forecast-elements.xml
@@ -262,6 +262,22 @@ if (meta && meta.hasOwnProperty('Attribution')) {
         <thumbnail>weather-condition-bg-image</thumbnail>
         <startWidth>480</startWidth>
         <startHeight>600</startHeight>
+        <properties>
+            <property id="roundBorder" type="checkbox">
+                <title>Round Border</title>
+                <default>0</default>
+                <helpText>Should the square have rounded corners?</helpText>
+            </property>
+            <property id="borderRadius" type="number">
+                <title>Border Radius</title>
+                <default>20</default>
+                <visibility>
+                    <test type="and">
+                        <condition field="roundBorder" type="eq">1</condition>
+                    </test>
+                </visibility>
+            </property>
+        </properties>
         <stencil>
             <hbs><![CDATA[
 {{#if data.icon}}
@@ -309,6 +325,9 @@ if (meta && meta.hasOwnProperty('Attribution')) {
     left: 0;
     top: 0;
     z-index: -1;
+    {{#if roundBorder}}
+        {{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
+    {{/if}}
 }
 {{else}}
 .bg-cloudy, .bg-partly-cloudy-day, .bg-clear-day, .bg-fog, .bg-sleet, .bg-clear-night, .bg-partly-cloudy-night, .bg-rain, .bg-snow, .bg-wind {
@@ -339,9 +358,15 @@ if (meta && meta.hasOwnProperty('Attribution')) {
         <type>element</type>
         <dataType>forecast</dataType>
         <canRotate>true</canRotate>
-        <thumbnail>weather-date-thumb</thumbnail>
+        <thumbnail>weather-date</thumbnail>
         <startWidth>420</startWidth>
         <startHeight>100</startHeight>
+        <properties>
+            <property id="dateFormat" type="text" variant="dateFormat">
+                <title>Date Format</title>
+                <default>M d</default>
+            </property>
+        </properties>
         <onTemplateRender><![CDATA[
 // Match all affected elements and get date div value
 $(target).find('.date').each(function(_idx, dateEl){
@@ -355,7 +380,7 @@ $(target).find('.date').each(function(_idx, dateEl){
 });
         ]]></onTemplateRender>
         <assets>
-            <asset id="weather-date-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/date.png" />
+            <asset id="weather-date" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/weather-date.png" />
         </assets>
     </template>
 </templates>
diff --git a/modules/templates/global-elements.xml b/modules/templates/global-elements.xml
@@ -200,7 +200,7 @@
             </property>
             <property id="dateFormat" type="text" variant="dateFormat">
                 <title>Date Format</title>
-                <default>DD/MM/YYYY HH:mm:ss</default>
+                <default>d/m/Y H:i:s</default>
             </property>
             <property id="fontFamily" type="fontSelector">
                 <title>Font Family</title>

diff --git a/ui/bundle_tools.js b/ui/bundle_tools.js
@@ -1,3 +1,4 @@
 // --- Add global TOOLS for the CMS ----
 window.formHelpers = require('./src/helpers/form-helpers.js');
 window.transformer = require('./src/helpers/transformer.js');
+window.DateFormatHelper = require('./src/helpers/date-format-helper.js');
diff --git a/ui/src/helpers/date-format-helper.js b/ui/src/helpers/date-format-helper.js
@@ -0,0 +1,65 @@
+const DateFormatHelper = function(options) {
+  this.timezone = null;
+  this.systemFormat = 'Y-m-d H:i:s';
+
+  this.convertPhpToMomentFormat = function(format) {
+    if (String(format).length === 0) {
+      return '';
+    }
+
+    const replacements = {
+      d: 'DD',
+      D: 'ddd',
+      j: 'D',
+      l: 'dddd',
+      N: 'E',
+      S: 'o',
+      w: 'e',
+      z: 'DDD',
+      W: 'W',
+      F: 'MMMM',
+      m: 'MM',
+      M: 'MMM',
+      n: 'M',
+      t: '', // no equivalent
+      L: '', // no equivalent
+      o: 'YYYY',
+      Y: 'YYYY',
+      y: 'YY',
+      a: 'a',
+      A: 'A',
+      B: '', // no equivalent
+      g: 'h',
+      G: 'H',
+      h: 'hh',
+      H: 'HH',
+      i: 'mm',
+      s: 'ss',
+      u: 'SSS',
+      e: 'zz', // deprecated since version 1.6.0 of moment.js
+      I: '', // no equivalent
+      O: '', // no equivalent
+      P: '', // no equivalent
+      T: '', // no equivalent
+      Z: '', // no equivalent
+      c: '', // no equivalent
+      r: '', // no equivalent
+      U: 'X',
+    };
+    let convertedFormat = '';
+
+    String(format).split('').forEach(function(char) {
+      if (Object.keys(replacements).indexOf(char) === -1) {
+        convertedFormat += char;
+      } else {
+        convertedFormat += replacements[char];
+      }
+    });
+
+    return convertedFormat;
+  };
+
+  return this;
+};
+
+module.exports = new DateFormatHelper();
diff --git a/ui/src/layout-editor/viewer.js b/ui/src/layout-editor/viewer.js
@@ -1388,6 +1388,15 @@ Viewer.prototype.renderElementContent = function(
           // Add property to properties object
           convertedProperties[property.id] = (property.value == undefined) ?
             property.default : property.value;
+
+          // Convert variant=dateFormat from PHP to Moment format
+          if (property.id === 'dateFormat' &&
+            convertedProperties.hasOwnProperty(property.id)) {
+            convertedProperties[property.id] = DateFormatHelper
+              .convertPhpToMomentFormat(String(
+                convertedProperties[property.id],
+              ));
+          }
         }
       }