Widget fixes for Dashboard and DataSet (#2128)

* Dashboard: add a template so the widget can be added. fixes xibosignage/xibo#3176 * Widget: dataset no data message doesn't work fixes xibosignage/xibo#3177 * Widget: dataset include a string template on playlists (also image slideshow should be playlist only). * Fix playlist only, fix template icon.
xibosignage · Oct 3, 2023 · 90d230a · 90d230a
1 parent 295d9e6
commit 90d230a
Show file tree

Hide file tree

Showing 6 changed files with 271 additions and 10 deletions.
diff --git a/modules/assets/template-thumbnails/dataset/dataset-slideshow.png b/modules/assets/template-thumbnails/dataset/dataset-slideshow.png
diff --git a/modules/dataset.xml b/modules/dataset.xml
@@ -20,7 +20,7 @@
   -->
 <module>
     <id>core-dataset</id>
-    <name>Dataset</name>
+    <name>DataSet</name>
     <author>Core</author>
     <description>Display DataSet content</description>
     <icon>fa fa-table</icon>

diff --git a/modules/templates/dashboard-static.xml b/modules/templates/dashboard-static.xml
@@ -0,0 +1,30 @@
+<!--
+  ~ Copyright (C) 2023 Xibo Signage Ltd
+  ~
+  ~ Xibo - Digital Signage - https://xibosignage.com
+  ~
+  ~ This file is part of Xibo.
+  ~
+  ~ Xibo is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ any later version.
+  ~
+  ~ Xibo is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<templates>
+    <template>
+        <id>dashboard_image</id>
+        <type>static</type>
+        <dataType>xibo-dashboard-service</dataType>
+        <title>Dashboard Image</title>
+        <icon>fa fa-file-image</icon>
+    </template>
+</templates>
diff --git a/modules/templates/dataset-static.xml b/modules/templates/dataset-static.xml
@@ -151,6 +151,11 @@
             ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -265,7 +270,7 @@ $datasetTableContainer.dataSetRender(properties);
                     </test>
                 </visibility>
             </property>
-            <property id="template" type="richText" allowLibraryRefs="true" variant="html">
+            <property id="template" type="code" allowLibraryRefs="true" variant="html">
                 <title>Item Template</title>
                 <helpText>Enter text in the box below, used to display each article.</helpText>
                 <visibility>
@@ -640,6 +645,11 @@ table.DataSetTable {visibility:hidden;}
             ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -908,6 +918,11 @@ table.DataSetTable {visibility:hidden;}
         ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -1167,6 +1182,11 @@ table.DataSetTable {visibility:hidden;}
         ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -1424,6 +1444,11 @@ table.DataSetTable {visibility:hidden;}
         ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -1679,6 +1704,11 @@ table.DataSetTable {visibility:hidden;}
         ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -1932,6 +1962,11 @@ table.DataSetTable {visibility:hidden;}
         ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -2180,6 +2215,11 @@ table.DataSetTable {visibility:hidden;}
         ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -2469,6 +2509,11 @@ table.DataSetTable {visibility:hidden;}
         ]]></twig>
         </stencil>
         <onTemplateRender><![CDATA[
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
 // Columns to be shown in the table
 var columnIndex = JSON.parse(properties.columns);
 var columns = (meta && meta.mapping) ? meta.mapping.filter(function (column) {
@@ -2572,8 +2617,9 @@ $datasetTableContainer.dataSetRender(properties);
         <id>dataset_slideshow</id>
         <type>static</type>
         <dataType>dataset</dataType>
-        <title>Dataset Image Slideshow</title>
-        <thumbnail>dataset-slideshow</thumbnail>
+        <showIn>playlist</showIn>
+        <icon>fas fa-film</icon>
+        <title>Image Slideshow</title>
         <properties>
             <property id="dataTypeId" type="hidden">
                 <default>4,5</default>
@@ -2678,8 +2724,189 @@ $('body').xiboLayoutScaler(properties);
 
 $(target).xiboTextRender(Object.assign(properties, globalOptions), $(target).find('#content > *'));
         ]]></onTemplateRender>
-        <assets>
-            <asset id="dataset-slideshow" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/dataset-slideshow.png" />
-        </assets>
+    </template>
+    <template>
+        <id>dataset_string_template</id>
+        <type>static</type>
+        <dataType>dataset</dataType>
+        <showIn>playlist</showIn>
+        <icon>fa fa-font</icon>
+        <title>String template with placeholders</title>
+        <properties>
+            <property type="message">
+                <title>Select a dataset to display appearance options.</title>
+                <visibility>
+                    <test>
+                        <condition field="dataSetId" type="eq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="template" type="richText" allowLibraryRefs="true" variant="html">
+                <title>Item Template</title>
+                <helpText>Enter text in the box below, used to display each article.</helpText>
+                <visibility>
+                    <test>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="dataTypeSnippets" type="snippet" mode="dataType" target="template">
+                <title>Snippets</title>
+                <helpText>Choose data type snippet</helpText>
+                <dependsOn>dataSetId</dependsOn>
+                <visibility>
+                    <test>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="itemsSideBySide" type="checkbox">
+                <title>Show items side by side?</title>
+                <helpText>Should items be shown side by side?</helpText>
+                <default>0</default>
+                <visibility>
+                    <test>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="backgroundColor" type="color">
+                <title>Background Colour</title>
+                <helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
+                <default></default>
+                <visibility>
+                    <test>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="effect" type="effectSelector" variant="all">
+                <title>Effect</title>
+                <helpText>Please select the effect that will be used to transition between items.</helpText>
+                <default>noTransition</default>
+                <visibility>
+                    <test>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="speed" type="number">
+                <title>Speed</title>
+                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
+                <default>1000</default>
+                <visibility>
+                    <test type="and">
+                        <condition field="effect" type="neq">none</condition>
+                        <condition field="effect" type="neq">noTransition</condition>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="itemsPerPage" type="number">
+                <title>Items per page</title>
+                <helpText>If an effect has been selected, how many pages should we split the items across? If you don't enter anything here 1 item will be put on each page.</helpText>
+                <default>1</default>
+                <visibility>
+                    <test type="and">
+                        <condition field="effect" type="neq">none</condition>
+                        <condition field="effect" type="neq">marqueeLeft</condition>
+                        <condition field="effect" type="neq">marqueeRight</condition>
+                        <condition field="effect" type="neq">marqueeUp</condition>
+                        <condition field="effect" type="neq">marqueeDown</condition>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
+                <title>No data message</title>
+                <helpText>A message to display when no data is returned from the source</helpText>
+                <visibility>
+                    <test>
+                        <condition field="dataSetId" type="neq"></condition>
+                    </test>
+                </visibility>
+            </property>
+        </properties>
+        <preview></preview>
+        <stencil>
+            <twig><![CDATA[
+<style>
+{% if itemsSideBySide %}
+.item, .page {
+    float: left;
+}
+{% endif %}
+
+{% if backgroundColor != '' %}
+body {
+    background-color: {{ backgroundColor }};
+}
+{% endif %}
+</style>
+        ]]></twig>
+        </stencil>
+        <onTemplateRender><![CDATA[
+// Module renderer options
+// id: The id of the widget
+// target: The target element to render
+// items: The items to render
+// properties: The properties for the widget
+
+// No data message
+if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
+    items.push(properties.noDataMessage);
+}
+
+// Clear the content container
+$(target).find('#content').empty();
+
+// If we don't have metadata, we can't render anything
+if (!meta || !meta.mapping) {
+    return;
+}
+
+// Get dataset columns from meta.mapping
+var columnTypes = {};
+for (var i = 0; i < meta.mapping.length; i++) {
+    var column = meta.mapping[i];
+    columnTypes[column.dataSetColumnId] = {
+        type: column.dataTypeId
+    };
+}
+
+// Add content for each item
+// make replacements
+// and wrap it in a div with the item class
+for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+
+    // Replace the template with the item content
+    var content = properties.template.replace(/\[(.*?)\]/g, function (match, column) {
+        var itemId = column.split('|')[0];
+        var itemCol = column.split('|')[1];
+        var itemType = columnTypes[itemCol].type;
+        var itemValue = item[itemId];
+
+        // If this is an image column, wrap it in an image tag
+        if (itemType === 4 || itemType === 5) {
+            itemValue = itemValue ? '<img src="' + itemValue + '" />' : '';
+        }
+
+        return itemValue ? itemValue : '';
+    });
+
+    // Add the content to the target
+    $(target).find('#content').append(
+        $('<div>')
+            .addClass('item')
+            .append(content)
+    );
+}
+
+// Scale the layout
+$('body').xiboLayoutScaler(properties);
+
+$(target).xiboTextRender(Object.assign(properties, globalOptions), $(target).find('#content > *'));
+        ]]></onTemplateRender>
     </template>
 </templates>
diff --git a/ui/src/editor-core/toolbar.js b/ui/src/editor-core/toolbar.js
@@ -2609,8 +2609,8 @@ Toolbar.prototype.loadTemplates = function(
           // don't show items based on showIn property
           // or elements and stencils if we are in playlist editor
           if (
-            el.showIn == 'playlist' && !isPlaylist ||
-            el.showIn == 'layout' && isPlaylist ||
+            el.showIn == 'playlist' && !self.isPlaylist ||
+            el.showIn == 'layout' && self.isPlaylist ||
             el.showIn == 'none' ||
             el.type === 'element' && self.isPlaylist ||
             el.type === 'element-group' && self.isPlaylist

diff --git a/ui/src/templates/toolbar-card-template.hbs b/ui/src/templates/toolbar-card-template.hbs
@@ -10,8 +10,12 @@
 
 {{#if thumbnail}}
     <div class="toolbar-card-thumb">
-        <img src="{{thumbnail}}" />
+        <img src="{{thumbnail}}"  alt="{{title}}"/>
     </div>
+{{else}}
+    {{#if icon}}
+        <i class="element-icon {{icon}} card-icon"></i>
+    {{/if}}
 {{/if}}
 
     <div class="toolbar-content tooltip-always-on" data-toggle="tooltip" data-title="{{title}}">