Build automatic hyperlink in html table

You mean like this?
image

[{"id":"6a22dd6e.c56fc4","type":"inject","z":"b83d9b41.9c80c8","name":"*** Setup devices to ping here ***","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"20","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"router\",\"host\":\"192.168.1.1\",\"link\":\"http://192.168.1.1/router.html\"},{\"name\":\"tv\",\"host\":\"192.168.1.46\",\"link\":\"http://192.168.1.46/channels.html\"},{\"name\":\"smart speaker\",\"host\":\"192.168.1.23\"},{\"name\":\"bad device\",\"host\":\"192.168.2.99\"}]","payloadType":"json","x":380,"y":180,"wires":[["4a46702f.96858"]]},{"id":"3539c581.74c1aa","type":"template","z":"b83d9b41.9c80c8","name":"build html table","field":"html","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n<table width=\"100%\">\n  <tr>\n    <th>Name</th>\n    <th>Host</th> \n    <th>Status</th> \n  </tr>\n  {{#tableData}}\n  <tr class='{{rowclass}}'>\n    <td>{{{name}}}</td>\n    {{#link}}\n    <td><a href=\"{{link}}\" target=\"_blank\">{{host}}</a> </td>\n    {{/link}}\n    {{^link}}\n    <td>{{host}}</td>\n    {{/link}}  \n    <td>{{{stateInfo}}}</i></td> \n  </tr>\n  {{/tableData}}\n</table>","x":720,"y":240,"wires":[["db2a0a6.457cef8","83b23a6b.400778"]]},{"id":"db2a0a6.457cef8","type":"debug","z":"b83d9b41.9c80c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":890,"y":280,"wires":[]},{"id":"df081fcf.27c53","type":"inject","z":"b83d9b41.9c80c8","name":"","repeat":"30","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"router\",\"ip\":\"192.168.0.1\"},{\"name\":\"tv\",\"ip\":\"192.168.0.51\"},{\"name\":\"smart speaker\",\"ip\":\"192.168.0.52\"},{\"name\":\"bad device\",\"ip\":\"192.168.1.99\"}]","payloadType":"json","x":290,"y":240,"wires":[["823e24a1.87a718"]]},{"id":"823e24a1.87a718","type":"function","z":"b83d9b41.9c80c8","name":"convert pingResults to array","func":"let pingResults = flow.get(\"pingResults\") || {}\nlet now = new Date();\n\nlet tableData = [];\nfor (let k in pingResults) {\n    let r = pingResults[k];\n    r.age = now - r.timestamp\n    if(r.age > 18000){\n        r.state = \"old\"\n    }\n    if(r.state == \"ok\"){\n        r.rowclass = \"good\";\n        r.stateInfo = '<i class=\"fa fa-thumbs-up\" aria-hidden=\"true\"></i> OK'\n    } else if(r.state == \"ng\") {\n         r.rowclass = \"bad\";\n        r.stateInfo = '<i class=\"fa fa-thumbs-down\" aria-hidden=\"true\"></i> NG'\n    } else {\n        r.rowclass = \"unknown\";\n        r.stateInfo = '<i class=\"fa question\" aria-hidden=\"true\"></i> ' + r.state\n    }\n    tableData.push(r);\n}\n\nmsg.tableData = tableData\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":240,"wires":[["3539c581.74c1aa","793afa09.1583c4"]]},{"id":"4a46702f.96858","type":"ping","z":"b83d9b41.9c80c8","mode":"triggered","name":"","host":"","timer":"20","inputs":1,"x":590,"y":180,"wires":[["fecfa19a.356ee"]]},{"id":"1b75c1a7.006c3e","type":"debug","z":"b83d9b41.9c80c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":890,"y":180,"wires":[]},{"id":"fecfa19a.356ee","type":"function","z":"b83d9b41.9c80c8","name":"Store Results","func":"let pingResults = flow.get(\"pingResults\") || {}\nlet thisPing = pingResults[msg.topic] || {};\nlet success = msg.payload !== false && msg.payload >= 0;\n\nthisPing.name = msg.ping.name;\nthisPing.host = msg.ping.host;\nthisPing.link = msg.ping.link;\nthisPing.timestamp = new Date();\nthisPing.responseTime = success ? msg.payload : null;\nthisPing.state = success ? \"ok\" : \"ng\" ;\n\npingResults[msg.topic] = thisPing;//store ping obj in pingResults\nflow.set(\"pingResults\",pingResults);//save pingResults in flow context\n\nmsg.payload = thisPing;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":180,"wires":[["1b75c1a7.006c3e"]]},{"id":"83b23a6b.400778","type":"ui_template","z":"b83d9b41.9c80c8","group":"9f4f9ffc.07f2a","name":"","order":3,"width":"6","height":"5","format":"<style>\ntable {\n    color: #333;\n    font-family: Helvetica, Arial, sans-serif;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n}\ntd, th {\n    border: 1px solid transparent;\n    /* No more visible border */\n    height: 30px;\n    transition: all 0.3s;\n    /* Simple transition for hover effect */\n}\nth {\n    background: #DFDFDF;\n    /* Darken header a bit */\n    font-weight: bold;\n}\ntd {\n    background: #FAFAFA;\n    text-align: center;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr:nth-child(even) td {\n    background: #F1F1F1;\n}\n\n/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */\n\ntr:nth-child(odd) td {\n    background: #FEFEFE;\n}\ntr td:hover {\n    background: #666;\n    color: #FFF;\n}\n\n/* Hover cell effect! */    \n\ntr.good {\n    color: green;\n}\n\ntr.bad {\n    color: red;\n}\n\ntr.unknown {\n    color: orange;\n}\n\n    \n</style>\n<div ng-bind-html=\"msg.html\"></div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":900,"y":240,"wires":[[]]},{"id":"793afa09.1583c4","type":"debug","z":"b83d9b41.9c80c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":320,"wires":[]},{"id":"9f4f9ffc.07f2a","type":"ui_group","name":"Default","tab":"5132060d.4cde48","order":1,"disp":true,"width":"6","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like