I am using dashboard 2.0 template node. It does not call the GET request. When I use the Dashboard 1 template node, it works fine.
Please guide what is to be changed for Dashboard 2.0 template node.
[
{
"id": "4d7e54d7335d0e3b",
"type": "http in",
"z": "4d2fa2d4e0dc8a8c",
"name": "",
"url": "/data123",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 230,
"y": 140,
"wires": [
[
"6a7e466e602d60ad",
"bdc5bd4eab0a099f"
]
]
},
{
"id": "6a7e466e602d60ad",
"type": "function",
"z": "4d2fa2d4e0dc8a8c",
"name": "function 27",
"func": "msg.payload = [\n { \"batteryNumber\": \"12345\", \"irValue\": \"10\", \"edit\": true },\n { \"batteryNumber\": \"67890\", \"irValue\": \"15\", \"edit\": false }\n]\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 410,
"y": 140,
"wires": [
[
"a3e79fd95413bfd4"
]
]
},
{
"id": "a3e79fd95413bfd4",
"type": "http response",
"z": "4d2fa2d4e0dc8a8c",
"name": "",
"statusCode": "",
"headers": {},
"x": 610,
"y": 140,
"wires": []
},
{
"id": "95a4350c62c4a833",
"type": "http in",
"z": "4d2fa2d4e0dc8a8c",
"name": "",
"url": "/dataoutput",
"method": "put",
"upload": false,
"swaggerDoc": "",
"x": 240,
"y": 260,
"wires": [
[
"8cf5ed8fa4fde60b",
"3acad7cc4c78c508"
]
]
},
{
"id": "7fa0a3da9d11286b",
"type": "http response",
"z": "4d2fa2d4e0dc8a8c",
"name": "",
"statusCode": "",
"headers": {},
"x": 630,
"y": 260,
"wires": []
},
{
"id": "8cf5ed8fa4fde60b",
"type": "function",
"z": "4d2fa2d4e0dc8a8c",
"name": "function 28",
"func": "msg.payload = {\n status: 400\n}\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 450,
"y": 260,
"wires": [
[
"7fa0a3da9d11286b"
]
]
},
{
"id": "3acad7cc4c78c508",
"type": "debug",
"z": "4d2fa2d4e0dc8a8c",
"name": "debug 18",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 440,
"y": 360,
"wires": []
},
{
"id": "bdc5bd4eab0a099f",
"type": "debug",
"z": "4d2fa2d4e0dc8a8c",
"name": "debug 19",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 380,
"y": 80,
"wires": []
},
{
"id": "e5f771ca593519f0",
"type": "ui-template",
"z": "4d2fa2d4e0dc8a8c",
"group": "7c3659d73edd9b9a",
"page": "",
"ui": "",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"head": "",
"format": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Battery Data Table</title>\n <!-- Bootstrap CSS -->\n <link href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\" rel=\"stylesheet\">\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js\"></script>\n</head>\n\n<body>\n <div class=\"container mt-4\">\n <h3>Battery IR Values</h3>\n <table class=\"table table-bordered\" id=\"batteryTable\">\n <thead>\n <tr>\n <th>ID</th>\n <th>Battery Number</th>\n <th>IR Value</th>\n <th>Save</th>\n </tr>\n </thead>\n <tbody>\n <!-- Dynamic Rows will be inserted here -->\n </tbody>\n </table>\n </div>\n\n <script>\n $(document).ready(function () {\n // Fetch data from the GET request\n $.get(\"http://localhost:1880/data123\", function (data) {\n // Assume data is an array of objects with 'batteryNumber', 'irValue', and 'edit' flags\n let tableBody = $('#batteryTable tbody');\n data.forEach((item, index) => {\n let row = $('<tr>');\n let idCell = $('<td>').text(index + 1); // Auto-generated ID\n let batteryCell = $('<td>').text(item.batteryNumber); // Battery number from the data\n let irCell = $('<td>');\n\n // IR value input or text\n let irInput = $('<input>').attr('type', 'number').attr('class', 'form-control');\n irInput.val(item.irValue); // Populate IR value\n\n // Make IR value editable only if 'edit' flag is true\n if (!item.edit) {\n irInput.prop('disabled', true); // Disable if not editable\n }\n irCell.append(irInput);\n\n let saveCell = $('<td>');\n let saveButton = $('<button>').attr('type', 'button').addClass('btn btn-primary');\n saveButton.text('Save');\n\n // Disable save button if IR value is not editable\n saveButton.prop('disabled', !item.edit);\n\n saveButton.click(function () {\n // On save, send a PUT request with updated IR value\n let updatedIRValue = irInput.val();\n $.ajax({\n url: 'http://localhost:1880/dataoutput',\n type: 'PUT',\n data: JSON.stringify({\n batteryNumber: item.batteryNumber,\n irValue: updatedIRValue\n }),\n contentType: 'application/json',\n success: function (response) {\n alert('Data saved successfully!');\n },\n error: function () {\n alert('Error saving data.');\n }\n });\n });\n\n saveCell.append(saveButton);\n\n row.append(idCell, batteryCell, irCell, saveCell);\n tableBody.append(row);\n });\n });\n });\n </script>\n</body>\n\n</html>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 260,
"y": 460,
"wires": [
[]
]
},
{
"id": "f1dcf23b74de409d",
"type": "ui_template",
"z": "4d2fa2d4e0dc8a8c",
"group": "5c4edf437a5c8172",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Battery Data Table</title>\n <!-- Bootstrap CSS -->\n <link href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\" rel=\"stylesheet\">\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js\"></script>\n</head>\n\n<body>\n <div class=\"container mt-4\">\n <h3>Battery IR Values</h3>\n <table class=\"table table-bordered\" id=\"batteryTable\">\n <thead>\n <tr>\n <th>ID</th>\n <th>Battery Number</th>\n <th>IR Value</th>\n <th>Save</th>\n </tr>\n </thead>\n <tbody>\n <!-- Dynamic Rows will be inserted here -->\n </tbody>\n </table>\n </div>\n\n <script>\n $(document).ready(function () {\n // Fetch data from the GET request\n $.get(\"http://localhost:1880/data123\", function (data) {\n // Assume data is an array of objects with 'batteryNumber', 'irValue', and 'edit' flags\n let tableBody = $('#batteryTable tbody');\n data.forEach((item, index) => {\n let row = $('<tr>');\n let idCell = $('<td>').text(index + 1); // Auto-generated ID\n let batteryCell = $('<td>').text(item.batteryNumber); // Battery number from the data\n let irCell = $('<td>');\n\n // IR value input or text\n let irInput = $('<input>').attr('type', 'number').attr('class', 'form-control');\n irInput.val(item.irValue); // Populate IR value\n\n // Make IR value editable only if 'edit' flag is true\n if (!item.edit) {\n irInput.prop('disabled', true); // Disable if not editable\n }\n irCell.append(irInput);\n\n let saveCell = $('<td>');\n let saveButton = $('<button>').attr('type', 'button').addClass('btn btn-primary');\n saveButton.text('Save');\n\n // Disable save button if IR value is not editable\n saveButton.prop('disabled', !item.edit);\n\n saveButton.click(function () {\n // On save, send a PUT request with updated IR value\n let updatedIRValue = irInput.val();\n $.ajax({\n url: 'http://localhost:1880/dataoutput',\n type: 'PUT',\n data: JSON.stringify({\n batteryNumber: item.batteryNumber,\n irValue: updatedIRValue\n }),\n contentType: 'application/json',\n success: function (response) {\n alert('Data saved successfully!');\n },\n error: function () {\n alert('Error saving data.');\n }\n });\n });\n\n saveCell.append(saveButton);\n\n row.append(idCell, batteryCell, irCell, saveCell);\n tableBody.append(row);\n });\n });\n });\n </script>\n</body>\n\n</html>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 560,
"y": 460,
"wires": [
[]
]
},
{
"id": "7c3659d73edd9b9a",
"type": "ui-group",
"name": "Record Data",
"page": "8f3d6fa52275f378",
"width": "12",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "5c4edf437a5c8172",
"type": "ui_group",
"name": "Default",
"tab": "230e6722c2ba487b",
"order": 1,
"disp": true,
"width": 30,
"collapse": false,
"className": ""
},
{
"id": "8f3d6fa52275f378",
"type": "ui-page",
"name": "Measurements",
"ui": "8af0eba80b85dcfe",
"path": "/measurements",
"icon": "home",
"layout": "grid",
"theme": "0d92c765bfad87e6",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 7,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "230e6722c2ba487b",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
},
{
"id": "8af0eba80b85dcfe",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": true,
"navigationStyle": "default",
"titleBarStyle": "default"
},
{
"id": "0d92c765bfad87e6",
"type": "ui-theme",
"name": "Basic Blue Theme",
"colors": {
"surface": "#4d58ff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
