iobroker.vis-jsontemplate 4.4.0 → 4.4.2

package/README.md

@@ -16,6 +16,9 @@
 Adapter to visualize JSON data and other data in Vis/Vis2.
 You can customize the output of the data with a template system.
 In the templates you can include HTML, CSS and Javascript.
+The template system used was `ejs`.
+You can try out the basic features here in the online playground.
+<https://ionicabizau.github.io/ejs-playground>
 
 The jsontemplate widget was previously available in the rssfeed (for vis1) and
 vis-2-widgets-ovarious adapters. The widgets will be removed from these
@@ -139,285 +142,11 @@ a specific layout. Here is an example:
 
 (In Markdown colors aren't visible)
 
-#### Use case for async calls
+#### More Use Cases
 
-**Block 1:**
-
-call sendToAsync Function with await. This example calls a test function
-in the admin adapter.
-
-**Block 2:**
-
-stringify the result and output to html
-
-**Block 3:**
-
-definition of the sendToAsync function
-
-```ejs
-<% req = await sendToAsync("admin.0","selectSendTo",{test:"test"}); %>
-<%- JSON.stringify(req) %>
-<% async function sendToAsync(instance, command, sendData) {
-    console.log(`sendToAsync ${command} ${sendData}`);
-    return new Promise((resolve, reject) => {
-        try {
-            vis.conn.sendTo(instance, command, sendData, function (receiveData) {
-                resolve(receiveData);
-            });
-        } catch (error) {
-            reject(error);
-        }
-    });
-} %>
-```
-
-**Result:**
-
-```text
-[{"label":"Afghanistan","value":"AF"},{"label":"Åland Islands","value":"AX"},{"label":"Albania","value":"AL"}]
-```
-
-#### Use case for loading additional scripts
-
-Additional fields allow you to load JavaScript libraries (e.g., from CDNs
-like jsDelivr or cdnjs). The following example demonstrates this
-for the chartJS library.
-
-**Step 1:**
-
-Create a new Datapoint with type string or json named `0_userdata.0.chartData`
-and the following content
-
-```json
-[12, 19, 3, 5, 2, 3]
-```
-
-**Step 2:**
-
-Enter the following url in the json_script[1] field:
-
-```text
-https://cdn.jsdelivr.net/npm/chart.js
-```
-
-**Step 3:**
-
-Enter the created data point name in the JSON Datapoint field.
-Enter the following template in the JSON Template field.
-
-Except for one line, this is standard HTML + JavaScript.
-
-```html
-data: <%- JSON.stringify(data) %>,
-```
-
-The data read from the data point is available in the JavaScript
-variable `data` and is output within the template instructions <%- ... %>.
-Once the template is compiled and included in the HTML document,
-it is executed by the browser, so that the chart is displayed via JavaScript.
-
-```ejs
-<div>
-  <canvas id="myChart"></canvas>
-</div>
-
-<script>
-  const ctx = document.getElementById('myChart');
-
-  new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-      datasets: [{
-        label: '# of Votes',
-        data: <%- JSON.stringify(data) %>,
-        borderWidth: 1
-      }]
-    },
-    options: {
-      scales: {
-        y: {
-          beginAtZero: true
-        }
-      }
-    }
-  });
-</script>
-```
-
-![Example](img/example_extscripts.png)
-
-#### Use case for a database-supported task list
-
-##### **Introduction**
-
-This use case describes how to visualize and interactively modify
-a to-do list from a MySQL database in `ioBroker`.
-The focus is on implementing a simple
-status change via a button click. This concept serves as
-a **Proof of Concept (PoC)** and can be included in future documentation.
-
----
-
-##### **Database Structure (MySQL)**
-
-First, a MySQL database named `test` is created.
-It contains a table `test` with the following fields:
-
-- `id`: Unique ID for each entry
-- `todo`: Title of the to-do entry
-- `action`: Status of the entry (0 = in progress, 1 = completed)
-
-###### **SQL Code for Table Creation**
-
-<details>
-  <summary>Details</summary>
-  <pre><code>
-
-```sql
-
-CREATE TABLE `test` (
-`id` int(11) NOT NULL,
-`todo` varchar(100) NOT NULL,
-`action` int(11) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-
-INSERT INTO `test` (`id`, `todo`, `action`) VALUES
-(1, 'Todo 1', 0),
-(2, 'Todo 2', 1),
-(3, 'Todo 3', 1),
-(4, 'Todo 4', 0);
-
-ALTER TABLE `test`
-ADD PRIMARY KEY (`id`),
-ADD UNIQUE KEY `id` (`id`),
-ADD KEY `idx` (`id`);
-
-ALTER TABLE `test`
-MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
-COMMIT;
-
-```
-
-</code></pre>
-
-</details>
-
----
-
-##### **Integration into ioBroker**
-
-###### **SQL Adapter**
-
-To interact with the database, the `ioBroker.sql` adapter is required.
-It is configured accordingly to connect to the MySQL database `test`.
-Note that `ioBroker` automatically creates its own structures in the
-database to store history data points.
-
-###### **JSONTemplate Widget**
-
-For visualization, we use the `JSONTemplate` widget.
-
-##### **Integration into VIS**
-
-We place the `JSONTemplate` widget and fill in the following fields:
-
-###### **Template Code**
-
-<details>
-  <summary>Details</summary>
-  <pre><code>
-
-```html
-<style>
-    .btn {
-        width: 100%;
-    }
-</style>
-<table>
-    <tr>
-        <th>ID</th>
-        <th>Todo</th>
-        <th>Action</th>
-    </tr>
-    <% let todos = await getTodo(); for (let i = 0; i < todos.length; i++) { let todo = todos[i]; %>
-    <tr>
-        <td><%- todo.id %></td>
-        <td><%- todo.todo %></td>
-        <td><%- getButton(todo.id, todo.action) %></td>
-    </tr>
-    <% } %>
-</table>
-
-<script>
-    window.vis-jsontemplate = { clicktodo: clicktodo };
-
-    function getButton(id, action) {
-        let text = action === 0 ? 'In Progress' : 'Completed';
-        return `<button class="btn" onclick="window.vis-jsontemplate.clicktodo(this)" data-id="${id}" data-action="${action}">${text}</button>`;
-    }
-
-    function clicktodo(el) {
-        let id = el.dataset.id;
-        let action = el.dataset.action;
-        let nextAction = action == 0 ? 1 : 0;
-        setAction(id, nextAction);
-    }
-
-    async function getTodo() {
-        let req = await sendToAsync('sql.0', 'query', 'SELECT * FROM test.test');
-        return req.result;
-    }
-
-    async function setAction(id, action) {
-        await sendToAsync('sql.0', 'query', `UPDATE test.test SET action = ${action} WHERE id = ${id}`);
-        vis.setValue('local_trigger', Math.random());
-    }
-
-    async function sendToAsync(instance, command, sendData) {
-        return new Promise((resolve, reject) => {
-            try {
-                vis.conn.sendTo(instance, command, sendData, receiveData => resolve(receiveData));
-            } catch (error) {
-                reject(error);
-            }
-        });
-    }
-</script>
-```
-
-</code></pre>
-
-</details>
-
-###### **Data Point for Refreshing Content**
-
-To ensure updates are reflected after a status change,
-we add the following local data point:
-
-```text
-local_trigger
-```
-
-This data point **does not need to be explicitly created**,
-as `local_?` data points are processed internally within VIS (see `vis` documentation).
-
-##### **Code Explanation**
-
-###### **Template Structure**
-
-| Line  | Content                                                                |
-| ----- | ---------------------------------------------------------------------- |
-| 1-5   | CSS styles for button appearance                                       |
-| 6-11  | Table header with columns ID, Todo, Action                             |
-| 12-16 | Fetching data from the MySQL database using `getTodo()`                |
-| 17-21 | Loop to display to-do entries with buttons                             |
-| 23-28 | Global reference of the `clicktodo()` function                         |
-| 30-37 | `getButton()` function to create a button with the current status      |
-| 38-44 | `clicktodo()` function to change the status via button click           |
-| 45-48 | `getTodo()` function to fetch data via the SQL adapter                 |
-| 49-52 | `setAction()` function to update the database entry                    |
-| 53-58 | `sendToAsync()` function to use `async/await` with `vis.conn.sendTo()` |
+- [Use Case Async calls](documentation/usecase-asynccall.md)
+- [Use Case loading scripts](documentation/usecase-loadingscripts.md)
+- [Use Case Tasklist](documentation/usecase-tasklist.md)
 
 ## Templatesystem
 
@@ -634,6 +363,15 @@ Loop over the attributes of an object
   Placeholder for the next version (at the beginning of the line):
   ### **WORK IN PROGRESS**
 -->
+### 4.4.2 (2026-04-13)
+
+- fix runtime
+
+### 4.4.1 (2026-04-13)
+
+- fix regression
+- update packages
+
 ### 4.4.0 (2026-03-24)
 
 - optimize lib size

package/io-package.json

@@ -1,8 +1,34 @@
 {
   "common": {
     "name": "vis-jsontemplate",
-    "version": "4.4.0",
+    "version": "4.4.2",
     "news": {
+      "4.4.2": {
+        "en": "fix runtime",
+        "de": "die laufzeit",
+        "ru": "исправить runtime",
+        "pt": "corrigir o tempo de execução",
+        "nl": "fix runtime",
+        "fr": "fixer l'exécution",
+        "it": "correzione di runtime",
+        "es": "corrección",
+        "pl": "fix runtime",
+        "uk": "фіксувати runtime",
+        "zh-cn": "固定运行时间"
+      },
+      "4.4.1": {
+        "en": "fix regression\nupdate packages",
+        "de": "regression\nupdate-pakete",
+        "ru": "фиксировать регрессию\nобновление пакетов",
+        "pt": "corrigir regressão\natualizar pacotes",
+        "nl": "repareren regressie\npakketten bijwerken",
+        "fr": "fixer la régression\nmettre à jour les paquets",
+        "it": "correzione della regressione\npacchetti di aggiornamento",
+        "es": "regreso\nactualizar paquetes",
+        "pl": "naprawić regresję\naktualizacja pakietów",
+        "uk": "фіксація регресія\nоновлення пакетів",
+        "zh-cn": "修复回归\n更新软件包"
+      },
       "4.4.0": {
         "en": "- optimize lib size\n- The ability to load additional JavaScript and CSS files\n  has been added (also for vis2).\n- Improve react components\n- align translation for vis2 widget",
         "de": "- optimierung der lib-größe\n- Die Möglichkeit, zusätzliche JavaScript- und CSS-Dateien zu laden\nwurde hinzugefügt (auch für vis2).\n- Reaktionskomponenten verbessern\n- übersetzung ausrichten für vis2 widget",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.vis-jsontemplate",
-  "version": "4.4.0",
+  "version": "4.4.2",
   "description": "vis-jsontemplate",
   "author": {
     "name": "oweitman",
@@ -31,7 +31,7 @@
     "@iobroker/build-tools": "^3.0.1",
     "@iobroker/vis-2-widgets-react-dev": "^4.0.4",
     "@iobroker/vis-2-widgets-testing": "^1.0.6",
-    "@types/node": "^25.5.0"
+    "@types/node": "^25.5.2"
   },
   "main": "widgets/vis2jsontemplate/customWidgets.js",
   "files": [

package/widgets/vis-jsontemplate/dist/jsontemplate-dist.js

@@ -58,7 +58,7 @@
   var version;
   var init_package = __esm({
     "../package.json"() {
-      version = "4.4.0";
+      version = "4.4.2";
     }
   });
 
@@ -571,8 +571,8 @@
           return e;
         })())({ 1: [function(require2, module3, exports3) {
           "use strict";
-          var fs = require2("fs");
-          var path = require2("path");
+          var fs = require2("node:fs");
+          var path = require2("node:path");
           var utils = require2("./utils");
           var scopeOptionWarned = false;
           var _VERSION_STRING = require2("../package.json").version;