Release v2.14.1

src/web/views/settings/media-library/list.hbs

@@ -173,4 +173,5 @@
 {{/modal-shell}}
 
 <script src="/assets/vendor/cropperjs/cropper.min.js"></script>
+<script src="/assets/js/shared/upload-utils.js?v={{appVersion}}"></script>
 <script type="module" src="/assets/js/settings/media-library.js?v={{appVersion}}"></script>

src/web/views/signage/slides/form.hbs

@@ -126,6 +126,7 @@
 
 <textarea id="slide-editor-data" hidden>{{json slideEditorData}}</textarea>
 <script src="/assets/js/shared/qr-code-svg.js?v={{appVersion}}"></script>
+<script src="/assets/js/shared/upload-utils.js?v={{appVersion}}"></script>
 <script src="/assets/vendor/cropperjs/cropper.min.js"></script>
 <script src="/assets/vendor/tinymce/tinymce.min.js"></script>
 <script src="/assets/vendor/qr-code-styling/qr-code-styling-loader.js?v={{appVersion}}"></script>

src/web/views/signage/slides/popup-preview.hbs

@@ -44,6 +44,11 @@
     background: transparent;
   }
 
+  #popup-preview-canvas .template-region.chart,
+  #popup-preview-canvas .slide-preview-chart-region {
+    background: transparent !important;
+  }
+
   .slide-preview-text-content {
     line-height: 1.5;
   }
@@ -74,6 +79,9 @@
   <div class="slide-preview-popup-canvas" id="popup-preview-canvas"></div>
 </div>
 
+<script src="/assets/vendor/chart.js/chart.umd.js"></script>
+<script src="/assets/js/regions/chart-data.js"></script>
+
 {{#if popupPreviewPayloadJson}}
 <script>
   window.__pulsePopupPreviewPayload = {{{popupPreviewPayloadJson}}};
@@ -123,6 +131,36 @@
       });
     }
 
+    function initializeCharts(root) {
+      if (!root || typeof window.Chart !== 'function') {
+        return;
+      }
+
+      root.querySelectorAll('.template-region.chart canvas, .slide-preview-chart-region canvas').forEach(function (chartCanvas) {
+        if (chartCanvas.__pulseChart) {
+          chartCanvas.__pulseChart.destroy();
+          chartCanvas.__pulseChart = null;
+        }
+
+        var data = {};
+        try {
+          data = JSON.parse(chartCanvas.getAttribute('data-chart-json') || '{}');
+        } catch (_error) {
+          data = {};
+        }
+
+        var chartData = data && (data.type === 'chart' || data.chart_type) && window.pulseChartData
+          ? window.pulseChartData.fromContent(data, window.__pulsePopupPreviewApiSources || [])
+          : data;
+
+        chartCanvas.__pulseChart = new window.Chart(chartCanvas.getContext('2d'), {
+          type: chartData.type || 'bar',
+          data: { labels: chartData.labels || [], datasets: chartData.datasets || [] },
+          options: window.pulseChartData.getChartOptions(chartData)
+        });
+      });
+    }
+
     function injectFontStylesheet(href) {
       var normalizedHref = String(href || '').trim();
       if (!normalizedHref) {
@@ -177,6 +215,7 @@
       }
 
       injectFontStylesheet(payload.fontStylesheetHref);
+      window.__pulsePopupPreviewApiSources = Array.isArray(payload.apiSources) ? payload.apiSources : [];
 
       var backgroundColor = String(payload.backgroundColor || '#111111').trim() || '#111111';
       var backgroundImagePath = String(payload.backgroundImagePath || '').trim();
@@ -216,6 +255,7 @@
 
       var scale = Math.min(stageRect.width / canvasWidth, stageRect.height / canvasHeight) || 1;
       canvas.style.transform = 'scale(' + scale + ')';
+      initializeCharts(canvas);
     }
 
     window.addEventListener('hashchange', applyPayload);

src/web/views/signage/templates/form.hbs

@@ -102,7 +102,7 @@
               <span class="form-label d-block">Background image</span>
               <div class="row g-3">
                 <div class="col-12 col-md-4">
-                  <input type="file" name="background_image" id="background-image" class="d-none" accept="image/*" />
+                  <input type="file" name="background_image" id="background-image" class="d-none" accept="image/*" data-image-max-bytes="{{imageUploadMaxBytes}}" data-upload-url="/templates/uploads" data-upload-hidden="existing-background-image-path" data-upload-cleanup-url="/templates/uploads/cleanup" />
                   <button type="button" class="btn btn-outline-secondary w-100" data-media-picker data-media-picker-type="image" data-media-picker-hidden="existing-background-image-path" data-media-picker-file-input="background-image"><i class="bi bi-images me-1" aria-hidden="true"></i>Choose</button>
                 </div>
                 <div class="col-12 col-md-4">
@@ -144,6 +144,7 @@
 {{/modal-shell}}
 
 <script src="/assets/js/shared/qr-code-svg.js?v={{appVersion}}"></script>
+<script src="/assets/js/shared/upload-utils.js?v={{appVersion}}"></script>
 <script src="/assets/vendor/qr-code-styling/qr-code-styling-loader.js?v={{appVersion}}"></script>
 
 {{#> modal-shell modalId="region-add-modal" modalLabelId="region-add-modal-label" modalDialogClass="modal-dialog-centered"}}