Hi, it was not an easy ride, but I started to play with template node and vuetify elements, and starts to have some success.
I however see a small problem with some checkbox elements in table, however the code looks quite OK to me.... maybe very tired after so many tests all days long
In the screenshot here the "SDP support" and "use as end point" columns should use tickbox based on incoming boolean values.... but they don't.
Here is a sample of code to test if you want to (some useless code in there as well, due to testing)
[
{
"id": "a8109b87e6229a16",
"type": "change",
"z": "9ae93a3fd6fb68a7",
"name": "Add Headers",
"rules": [
{
"t": "set",
"p": "headers",
"pt": "msg",
"to": "[{\"title\":\"Icon\",\"value\":\"icon\"},{\"title\":\"Key\",\"value\":\"key\",\"sortable\":true,\"width\":\"10%\"},{\"title\":\"fDesc\",\"value\":\"fDescriptor.label\",\"sortable\":true},{\"title\":\"Custom Naming\",\"align\":\"center\",\"children\":[{\"title\":\"Label\",\"value\":\"descriptor.label\"},{\"title\":\"Description\",\"value\":\"descriptor.desc\"}]},{\"title\":\"CONTROL\",\"value\":\"control\",\"sortable\":false},{\"title\":\"ACTIVE\",\"value\":\"active\",\"sortable\":false,\"width\":\"3px\"},{\"title\":\"SDP Support\",\"value\":\"sdpSupport\",\"sortable\":false,\"width\":\"3px%\"},{\"title\":\"SIPS (2022-7)\",\"value\":\"sipsMode\",\"sortable\":false},{\"title\":\"Use as End Point\",\"value\":\"useAsEndpoint\",\"sortable\":false},{\"title\":\"TAGS\",\"value\":\"tags\",\"sortable\":false}]",
"tot": "json"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1310,
"y": 720,
"wires": [
[
"6f7530017cc4d98d"
]
]
},
{
"id": "cfe09c9267365061",
"type": "inject",
"z": "9ae93a3fd6fb68a7",
"name": "Ctrl true",
"props": [
{
"p": "payload"
},
{
"p": "tags",
"v": "[\"Aud_2CH_LR\",\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"]",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "[{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R2bad3bf9-83fb-5007-b22d-28aee63168ff\",\"rev\":\"8-2de5ef04-3032-4c6f-b347-e6c422b1a697\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A02 (ST)\",\"label\":\"AMON01-01C01_RxA02\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-02_2CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":false,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R3094b947-9890-5518-93a3-776f075f3753\",\"rev\":\"7-5c4892c1-b41b-4d0f-88e1-51de506f430c\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A03 (RAW)\",\"label\":\"AMON01-01C01_RxA03\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-03_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R6e541466-f455-5b6f-9587-e63a68c98bf5\",\"rev\":\"7-ab162669-22de-419b-bddd-20b3c3768172\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A04 (RAW)\",\"label\":\"AMON01-01C01_RxA04\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-04_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.Rae1d5d6d-8281-511d-83e4-d3534a5ce840\",\"rev\":\"8-b0b6e014-030f-4e77-801a-79ab642f672a\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A01 (ST)\",\"label\":\"AMON01-01C01_RxA01\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"Stream \"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"}]",
"payloadType": "json",
"x": 1090,
"y": 700,
"wires": [
[
"a8109b87e6229a16"
]
]
},
{
"id": "6f7530017cc4d98d",
"type": "ui-template",
"z": "9ae93a3fd6fb68a7",
"group": "32ea454ed2e17d66",
"page": "",
"ui": "",
"name": "",
"order": 2,
"width": 0,
"height": 0,
"head": "",
"format": "<template>\n <!-- Provide an input text box to search the content -->\n <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\"\n hide-details>\n </v-text-field>\n\n <v-data-table v-model:search=\"search\" :group-by=\"groupBy\" :items=\"msg?.payload\" :headers=\"msg?.headers\"\n v-model=\"selected\" item-selectable=\"selectable\" select-strategy=\"all\" show-select return-object>\n <template v-slot:header.current>\n <div class=\"text-center\">Center-Aligned</div>\n </template>\n\n <template v-slot:item.descriptor.label=\"{ item }\">\n <v-text-field v-model=\"item.descriptor.label\" density=\"compact\" variant=\"outlined\" type=\"text\"></v-text-field>\n </template>\n\n <template v-slot:item.descriptor.desc=\"{ item }\">\n <v-text-field v-model=\"item.descriptor.desc\" density=\"compact\" clearable variant=\"outlined\" type=\"text\">\n </v-text-field>\n </template>\n\n <template v-slot:item.control=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.control\" color=\"indigo\" @click=\"send({topic: 'ctrlStatusChange', payload: item})\">\n </v-checkbox-btn>\n </template>\n\n <template v-slot:item.active=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.active\" color=\"green\" @click=\"send({topic: 'activeStatusChange', payload: item})\">\n </v-checkbox-btn>\n </template>\n\n <template v-slot:item.sdpSupport=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.sdpSupport\" color=\"red\" @click=\"send({topic: 'sdpStatusChange', payload: item})\">\n </v-checkbox-btn>\n </template>\n\n <template v-slot:item.useAsEndpoint=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.useAsEndpoint\" color=\"indigo\" @click=\"send({topic: 'endPointStatusChange', payload: item})\">\n </v-checkbox-btn>\n\n </template>\n\n <template v-slot:item.tags=\"{ item }\">\n <!-- Test Dropdown -->\n <v-select :items=\"msg?.tags\" v-model=\"item.tags\" chips clearable multiple label=\"Choose Tags\" @update:model-value=\"send({topic: 'ctrlStatusChange', payload: item})\"></v-select>\n {{ item.tags }}\n </template>\n\n </v-data-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n selected: [],\n search: '',\n value: []\n }\n },\n watch: {\n /* \n value: function () {\n this.send({value: this.value})\n },\n */\n selected: function () {\n // Send a message to the Node-RED flow. If a non-Object value is sent, then Dashboard will automatically wrap that into a msg.payload object.\n this.send({ topic: 'selected', payload: this.selected });\n }\n },\n // Define functions that can be called from your <template> or <script> sections\n methods: {\n/*\n mvchanged: function () {\n this.send({ payload: this.value, topic: \"v-select Update\" })\n },\n*/\n }\n }\n</script>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 1480,
"y": 720,
"wires": [
[
"c41dd6371bf2e64b"
]
]
},
{
"id": "c41dd6371bf2e64b",
"type": "debug",
"z": "9ae93a3fd6fb68a7",
"name": "debug 440",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1670,
"y": 720,
"wires": []
},
{
"id": "f914a701e7b37e52",
"type": "inject",
"z": "9ae93a3fd6fb68a7",
"name": "Ctrl false",
"props": [
{
"p": "payload"
},
{
"p": "headers",
"v": "[{\"title\":\"Icon\",\"value\":\"icon\"},{\"title\":\"Key\",\"value\":\"key\",\"sortable\":true},{\"title\":\"fDesc\",\"value\":\"fDescriptor\",\"sortable\":true},{\"title\":\"Control\",\"value\":\"control\",\"sortable\":false},{\"title\":\"Tags\",\"value\":\"tags\",\"sortable\":false}]",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "[{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R2bad3bf9-83fb-5007-b22d-28aee63168ff\",\"rev\":\"8-2de5ef04-3032-4c6f-b347-e6c422b1a697\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A02 (ST)\",\"label\":\"AMON01-01C01_RxA02\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-02_2CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":false,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R3094b947-9890-5518-93a3-776f075f3753\",\"rev\":\"7-5c4892c1-b41b-4d0f-88e1-51de506f430c\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A03 (RAW)\",\"label\":\"AMON01-01C01_RxA03\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-03_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R6e541466-f455-5b6f-9587-e63a68c98bf5\",\"rev\":\"7-ab162669-22de-419b-bddd-20b3c3768172\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A04 (RAW)\",\"label\":\"AMON01-01C01_RxA04\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-04_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.Rae1d5d6d-8281-511d-83e4-d3534a5ce840\",\"rev\":\"8-b0b6e014-030f-4e77-801a-79ab642f672a\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A01 (ST)\",\"label\":\"AMON01-01C01_RxA01\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"Stream \"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"}]",
"payloadType": "json",
"x": 1100,
"y": 740,
"wires": [
[
"a8109b87e6229a16"
]
]
},
{
"id": "32ea454ed2e17d66",
"type": "ui-group",
"name": "ViP device Management",
"page": "0a322689e7d1be44",
"width": "12",
"height": "1",
"order": 5,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "0a322689e7d1be44",
"type": "ui-page",
"name": "Nevion Device Managment",
"ui": "e51c8ddc14062d86",
"path": "/neviondevices",
"icon": "home",
"layout": "grid",
"theme": "0d92c765bfad87e6",
"order": 4,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "e51c8ddc14062d86",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "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"
}
}
]