Weather widget: Convert placeholders format from PHP to Moment

relates to xibosignage/xibo#3167
xibosignage · Oct 19, 2023 · 7e321d7 · 7e321d7
1 parent 7963955
commit 7e321d7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 7 deletions.
diff --git a/modules/forecastio.xml b/modules/forecastio.xml
@@ -126,9 +126,7 @@ moment.locale(globalOptions.locale);
 var makeReplacement = (html, item) => {
     // Make replacements [] with item data
     return html.replace(/\[([^\]]+)\]/g, (match, key) => {
-        // If its [time] or [time|format] then return the time
         if (key === 'time' || key.indexOf('time|') === 0) {
-            // If its [time|format] then return the time with format
             if (key.indexOf('time|') === 0) {
                 return moment.unix(item.time).format(key.split('|')[1]);
             }

diff --git a/modules/src/xibo-legacy-template-render.js b/modules/src/xibo-legacy-template-render.js
@@ -19,6 +19,48 @@
  * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+// Based on https://github.com/octalmage/phptomoment/tree/master
+const PHP_TO_MOMENT = {
+  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: '',
+  L: '',
+  o: 'YYYY',
+  Y: 'YYYY',
+  y: 'YY',
+  a: 'a',
+  A: 'A',
+  B: '',
+  g: 'h',
+  G: 'H',
+  h: 'hh',
+  H: 'HH',
+  i: 'mm',
+  s: 'ss',
+  u: 'SSS',
+  e: 'zz',
+  I: '',
+  O: '',
+  P: '',
+  T: '',
+  Z: '',
+  c: '',
+  r: '',
+  U: 'X',
+  '\\': '',
+};
+
 jQuery.fn.extend({
   xiboLegacyTemplateRender: function(options, widget) {
     // Default options
@@ -51,6 +93,16 @@ jQuery.fn.extend({
             'data-days-offset="' + offset + '"></div>',
           ));
         }
+
+        // Check if we have a time placeholder
+        $(element).html(
+          $(element).html().replace(/\[time\|.*?\]/g, function(match) {
+            const oldFormat = match.split('|')[1].replace(']', '');
+            const newFormat = PHP_TO_MOMENT[oldFormat];
+
+            return '[time|' + newFormat + ']';
+          }),
+        );
       }
 
       // Social Media

diff --git a/modules/templates/forecast-static.xml b/modules/templates/forecast-static.xml
@@ -360,7 +360,7 @@
         <div class="container-row">
             <div class="details-box text-center shadowed">
                 <div class="big-icon"><i class="wi [wicon]"></i></div>
-                <div class="big-day">[time|D]</div>
+                <div class="big-day">[time|ddd]</div>
                 <div class="big-temp">[temperatureRound]&deg;[temperatureUnit]</div>
             </div>
             <div class="forecast-container" data-days-num="4"></div>
@@ -375,7 +375,7 @@
     <div class="upcoming-days shadowed">
         <div class="small-icon"><i class="wi [wicon]"></i></div>
         <div class="small-temp">[temperatureMaxRound] &deg; [temperatureUnit]</div>
-        <div class="small-day">[time|D]</div>
+        <div class="small-day">[time|ddd]</div>
     </div>
 </div>
 
@@ -2935,7 +2935,7 @@ body {
     <div class="row  main-panel">
         <div class="offset-xs-1 weather-col col-3">
             <div class="row">
-                <div class="date">[time|ddd] [time|d]</div>
+                <div class="date">[time|ddd] [time|DD]</div>
                 <div class="month">[time|MMM]</div>
                 <div class="current-temp">[temperatureRound]<sup>&deg;[temperatureUnit]</sup></div>
             </div>
@@ -6401,6 +6401,10 @@ body {
                 <helpText>The color of the footer text</helpText>
                 <default></default>
             </property>
+            <property id="fontSize" type="number">
+                <title>Font Size</title>
+                <default>13</default>
+            </property>
             <property id="background-image" type="dropdown" mode="single">
                 <title>Background Image</title>
                 <helpText>The background image to use</helpText>
@@ -6534,7 +6538,7 @@ body {
     width: 100%;
     padding: 4px 0;
     color: #000;
-    font-size: 13px;
+    font-size: {{fontSize}}px;
     text-align: center;
     background-color: white;
     background-color: rgba(255, 255, 255, 0.787);
@@ -6589,6 +6593,10 @@ body {
                 <helpText>The color of the icons</helpText>
                 <default></default>
             </property>
+            <property id="fontSize" type="number">
+                <title>Font Size</title>
+                <default>13</default>
+            </property>
             <property id="background-image" type="dropdown" mode="single">
                 <title>Background Image</title>
                 <helpText>The background image to use</helpText>
@@ -6803,7 +6811,7 @@ text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  width: 100%;
  padding: 4px 0;
   color: #000;
-  font-size: 13px;
+    font-size: {{fontSize}}px;
  text-align: center;
   background-color: white;
   background-color: rgba(255, 255, 255, 0.787);