[
    {
        "id": "3b5fb24b.168d5e",
        "type": "template",
        "z": "662a3e49.56db",
        "name": "Template NL",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<!doctype html>\n<html>\n  <head>\n      <style>\n              {{{payload.style}}}\n      </style>\n    <meta charset=\"utf-8\">\n    <title>Fahrplananzeiger</title>\n    <script type=\"text/javascript\">\n        var ws;\n        var wsUri = \"ws:\";\n        var loc = window.location;\n        console.log(loc);\n        if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n        // This needs to point to the web socket in the Node-RED flow\n        // ... in this case it's ws/fpa\n        wsUri += \"//\" + loc.host + loc.pathname.replace(\"fpa\",\"ws/fpa\");\n\n        function wsConnect() {\n            console.log(\"connect\",wsUri);\n            ws = new WebSocket(wsUri);\n            //var line = \"\";    // either uncomment this for a building list of messages\n            ws.onmessage = function(msg) {\n                console.log(msg);\n                var line = \"\";  // or uncomment this to overwrite the existing message\n                // parse the incoming message as a JSON object\n                data = msg.data;\n                //console.log(\"output\", data);                \n                obj = JSON.parse(data);\n                console.log(obj);\n                var tag = Object.keys(obj);\n                if( tag == \"time\") {\n                   //get time\n                   obj = obj.time;\n                   document.getElementById('time').innerHTML = obj;\n                }\n                if( tag == \"fault\") {\n                   //get fault\n                   obj = obj.fault;\n                   document.getElementById('fault').innerHTML = obj;\n                }\n                if(typeof(obj) == \"object\") {\n                    if(obj instanceof Array) {\n                    //console.log(obj.length);\n                    var pointer = obj.length;\n                    var list = document.getElementById('list');\n                    if(list.hasChildNodes()) {\n                        Anzahl = document.getElementById(\"list\").childNodes.length;\n                        //console.log(\"Liste\",list);\n                        //console.log(Anzahl);\n                        for (var i = 0; i < Anzahl; i++) {\n                            list.removeChild(list.firstChild);\n                        }\n                    }\n                    var i = 0;\n                    while( i < pointer ) {\n                        /* Start ceate Row for Display */\n                        /* Hier beginnt die Erzeugung der Zeilen fÃ¼r die Anzeige */\n                        row = document.createElement(\"tr\"); //Zeile erzeugen\n                        cell = document.createElement(\"td\"); // Zelle erzeugen\n                        /* Hier wird der Punkt als svg erzeugt */\n                        if( obj[i].point == \"*\") {\n                        svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n                        circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n                        circle.setAttribute('cx',\"7\"); // Position x\n                        circle.setAttribute('cy',\"7\"); // Position y\n                        circle.setAttribute('r',\"7\"); // Radius\n                        circle.setAttribute('fill',\"#00ff00\"); // FÃ¼llfarbe\n                        svg.appendChild(circle);\n                        svg.setAttribute('width', '14px');  //Breite svg\n                        svg.setAttribute('height', '14px');  // HÃ¶he svg\n                        svg.setAttribute('viewBox', '0 0 14 14'); // sichtbare GrÃ¶ÃŸe svg\n                        cell.appendChild(svg);\n                        } else {\n                            text = document.createTextNode(\"\");\n                            cell.appendChild(text);\n                        }\n                        row.appendChild(cell);\n                        /* Ende Punkt erzeugen */\n                        cell = document.createElement(\"td\"); // Zelle erzeugen\n                        text = document.createTextNode(obj[i].ptime); // geplante Ankunftzeit setzen\n                        cell.appendChild(text); // geplante Ankunftzeit setzen\n                        cell.setAttribute(\"class\",\"time\"); // class geplante Ankunftzeit setzen\n                        row.appendChild(cell); // Zelle an Zeile binden\n                        cell = document.createElement(\"td\"); // Zelle erzeugen\n                        myP = document.createElement(\"p\"); // Absatz erzeugen\n                        text = document.createTextNode(obj[i].atime); // aktuelle Ankunftzeit setzen\n                        myP.appendChild(text); // aktuelle Ankunftzeit setzen\n                        myP.setAttribute(\"id\",\"atime\"); // class aktuelle Ankunftzeit setzen\n                        cell.appendChild(myP); // Absatz an Zelle binden\n                        myP = document.createElement(\"p\"); // Absatz erzeugen\n                        text = document.createTextNode(obj[i].cancel); //Ausfall setzen\n                        myP.appendChild(text); //Ausfall setzen\n                        myP.setAttribute(\"id\",\"cancel\"); //Ausfall setzen\n                        cell.appendChild(myP); // Absatz an Zelle binden\n                        cell.setAttribute(\"class\",\"time\"); // class Absatz setzen\n                        row.appendChild(cell); // Zelle an Zeile binden\n                        cell = document.createElement(\"td\"); // Zeller erzeugen\n                        text = document.createTextNode(obj[i].train); // Zugnummer setzen\n                        cell.appendChild(text); // Zugnummer setzen\n                        cell.setAttribute(\"class\",\"train\"); // class Zugnummer setzen\n                        row.appendChild(cell); // Zelle an Zeile binden\n                        cell = document.createElement(\"td\"); // Zelle erzeugen\n                        text = document.createTextNode(obj[i].des); // Ziel setzen\n                        cell.appendChild(text); // Ziel setzen\n                        cell.setAttribute(\"class\",\"des\"); // calls Ziel setzen\n                        row.appendChild(cell); // Zelle an Zeile binden\n                        cell = document.createElement(\"td\"); // Zelle erzeugen\n                        text = document.createTextNode(obj[i].via); // via setzen\n                        cell.appendChild(text); // via setzen\n                        cell.setAttribute(\"class\",\"via\"); // class via setzen\n                        row.appendChild(cell); // Zelle an Zeile binden\n                        cell = document.createElement(\"td\"); // Zelle erzeugen\n                        text = document.createTextNode(obj[i].track); // Gleis setzen\n                        cell.appendChild(text); // Gleis setzen\n                        cell.setAttribute(\"class\",\"track\"); // calls Gleis setzen\n                        row.appendChild(cell); // Zelle an Zeile binden\n                        cell = document.createElement(\"td\"); // Zelle erzeugen\n                        myP = document.createElement(\"p\"); // Absatz erzeugen\n                        text = document.createTextNode(obj[i].notice); // Hinweis etzen\n                        myP.appendChild(text); // Hinweis setzen\n                        myP.setAttribute(\"id\",\"notice\"); // class Hinweis setzen\n                        cell.appendChild(myP); // Absatz an Zelle binden\n                        myP = document.createElement(\"p\"); // Absatz erzeugen\n                        text = document.createTextNode(obj[i].delay); // VerspÃ¤tung erzeugen\n                        myP.appendChild(text); // VerspÃ¤tung erzeugen\n                        myP.setAttribute(\"id\",\"delay\"); // class VerspÃ¤tung setzen\n                        cell.appendChild(myP); // Absatz an Zelle binden\n                        cell.setAttribute(\"class\",\"notice\"); // class Zelle setzen\n                        row.appendChild(cell); // Zelle an Zeile binden\n                        row.setAttribute(\"id\",\"row\"); // id der Zeile setzen\n                        list.appendChild(row); // Zeile an Tabellen Body binden\n                        /* End generate*/\n                        /*Ende Erzeugung */\n                        i++;\n                    }\n                    }\n                }\n            }\n            ws.onopen = function() {\n                console.log(\"connected\");\n            }\n            ws.onclose = function() {\n                // in case of lost connection tries to reconnect every 3 secs\n                setTimeout(wsConnect,3000);\n            }\n        }\n    </script>\n</head>\n<body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n<!-- Ab hier kann das Template angepasst werden -->\n<table class=\"head\">\n    <colgroup>\n    <col width=\"10\">\n    <col width=\"70\">\n    <col width=\"260\">\n    <col width=\"40\">\n    <col width=\"60\">\n    <tr class=\"trhead\">\n        <th> \n        </th>\n        <th class=\"head1\">\n            Vertrek\n        </th>\n        <th class=\"head2\">\n             \n        <th class=\"head3\" id=\"time\">\n            {{ time }}\n        </th>\n        <th class=\"head4\"> \n<div class=\"skalierender-svg-container\">\n    <!--\n\t<svg xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\" width=\"744.09448\" height=\"526.5354\" class=\"skalierendes-svg\" viewBox=\"0 0 745 527\" id=\"svg2367\">\n\t\t<defs id=\"defs2369\"/>\n\t\t<g transform=\"translate(-593.32638,-244.47955)\" id=\"layer1\">\n\t\t<g transform=\"matrix(2.8072397,0,0,2.8072397,-1054.5664,-1311.3148)\" id=\"g2504\">\n\t\t<path d=\"M 829.65558,723.91382 L 607.93512,723.91382 L 607.93512,572.06531 L 829.65558,572.06531 L 829.65558,723.91382 z \" style=\"fill:#ffffff;fill-rule:nonzero;stroke:none\" id=\"path94\"/>\n\t\t<path d=\"M 628.05363,591.26554 L 672.46452,591.26554 C 700.1795,591.26554 716.45792,609.13001 716.45792,647.69737 C 716.45792,688.76906 699.42822,705.21447 672.46452,705.21447 L 628.05363,705.21447 L 628.05363,591.26554 z M 728.89635,591.26554 L 778.56638,591.26554 C 799.35267,591.26554 809.78756,603.78737 809.78756,618.22924 C 809.78756,637.17898 798.68479,643.60689 790.08654,645.44344 L 790.08654,645.94432 C 802.94226,647.61387 814.54582,656.71311 814.54582,674.16029 C 814.46242,692.94303 800.85532,705.21447 775.47767,705.21447 L 728.89635,705.21447 L 728.89635,591.26554 z M 655.51822,609.13001 L 665.28523,609.13001 C 681.06286,609.13001 689.41072,620.48318 689.41072,647.19649 C 689.41072,677.83328 679.6437,687.01601 665.78612,687.01601 L 655.51822,687.01601 L 655.51822,609.13001 z M 756.11055,608.96311 L 766.62884,608.96311 C 777.39772,608.96311 781.82209,614.97354 781.82209,621.98583 C 781.82209,630.50068 777.23072,636.4277 766.46194,636.4277 L 756.11055,636.4277 L 756.11055,608.96311 z M 756.11055,657.88187 L 769.04977,657.88187 C 781.82209,657.88187 785.24469,664.05929 785.24469,672.15675 C 785.24469,681.58987 778.39939,687.01601 769.21676,687.01601 L 756.11055,687.01601 L 756.11055,657.88187 z M 619.12139,560.54524 L 819.88856,560.54524 C 834.16344,560.54524 845.767,572.06531 845.767,586.34028 L 845.767,709.55535 C 845.767,723.83032 834.16344,735.43388 819.88856,735.43388 L 619.12139,735.43388 C 604.84642,735.43388 593.32635,723.83032 593.32635,709.55535 L 593.32635,586.34028 C 593.32635,572.06531 604.84642,560.54524 619.12139,560.54524 z M 619.45528,578.15932 L 819.63807,578.15932 C 824.06244,578.15932 827.65204,581.74892 827.65204,586.17329 L 827.65204,709.72234 C 827.65204,714.14671 824.06244,717.7363 819.63807,717.7363 L 619.45528,717.7363 C 615.03091,717.7363 611.44132,714.14671 611.44132,709.72234 L 611.44132,586.17329 C 611.44132,581.74892 615.03091,578.15932 619.45528,578.15932\" style=\"fill:#ec1b2d;fill-rule:evenodd;stroke:none\" id=\"path96\"/>\n\t\t</g>\n\t\t</g>\n\t</svg>\n\t-->\n\t<svg\n   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n   xmlns:cc=\"http://creativecommons.org/ns#\"\n   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n   xmlns:svg=\"http://www.w3.org/2000/svg\"\n   xmlns=\"http://www.w3.org/2000/svg\"\n   id=\"svg2367\"\n   viewBox=\"0 0 200.24339 100.08824\"\n   class=\"skalierendes-svg\"\n   height=\"100\"\n   width=\"200\"\n   version=\"1.0\">\n  <metadata\n     id=\"metadata833\">\n    <rdf:RDF>\n      <cc:Work\n         rdf:about=\"\">\n        <dc:format>image/svg+xml</dc:format>\n        <dc:type\n           rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\n        <dc:title></dc:title>\n      </cc:Work>\n    </rdf:RDF>\n  </metadata>\n  <defs\n     id=\"defs2369\" />\n  <g\n     id=\"g4540\"\n     transform=\"matrix(0.03658865,0,0,-0.03658865,3.2822092,121.05606)\"\n     style=\"fill:#000000;stroke:none\">\n    <path\n       style=\"fill:#101fdc;fill-opacity:1\"\n       id=\"path4538\"\n       d=\"M 612,2526 C 344,2260 114,2033 100,2022 l -25,-21 515,-516 515,-515 h 287 c 159,0 288,3 288,7 0,5 -181,189 -402,410 l -403,403 h 550 c 340,0 564,-4 586,-10 33,-9 244,-214 650,-631 55,-57 152,-119 232,-148 l 72,-26 655,-3 655,-2 500,506 c 275,278 502,511 504,516 2,6 -223,237 -500,514 l -504,504 h -300 -300 l 405,-405 405,-405 h -548 c -472,0 -553,2 -585,15 -24,11 -152,130 -377,354 -360,358 -387,380 -519,420 -66,20 -87,21 -712,21 h -644 z m 1748,57 c 14,-9 180,-170 370,-358 321,-317 350,-344 420,-377 41,-20 99,-41 128,-47 35,-7 254,-11 635,-11 h 582 l -195,-195 -195,-195 h -546 -546 l -39,29 c -21,16 -176,167 -344,336 -168,168 -331,324 -364,346 -32,21 -88,49 -125,61 -65,22 -78,23 -663,28 l -596,5 191,197 192,196 535,1 c 483,1 538,-1 560,-16 z\" />\n  </g>\n</svg>\n</div>\n        </th>\n    </tr>\n</table>\n<table class=head>\n        <colgroup>\n    <col width=\"10\">\n    <col width=\"30\">\n    <col width=\"40\">\n    <col width=\"40\">\n    <col width=\"80\">\n    <col width=\"140\">\n    <col width=\"40\">\n    <col width=\"60\">\n  </colgroup>\n\t<tr class=\"trhead\">\n        <th> </th>\n        <th>Tijd</th>\n        <th>Verwacht</th>\n        <th>Trein</th>\n        <th>naar</th>\n        <th>stopt ook in</th>\n        <th>Spoor</th>\n        <th>Opmerkingen </th>\n    </tr>\n    <tr class=\"trhead\">\n        <th>\n        </th>\n        <th class=\"it\"> </th>\n        <th class=\"it\"> </th>\n        <th class=\"it\"> </th>\n        <th class=\"it\"> </th>\n        <th>\n        </th>\n        <th class=\"it\"> </th>\n        <th>\n        </th>\n    </tr>\n</table>\n<table class=\"list\">\n    <colgroup>\n    <col width=\"10\">\n    <col width=\"30\">\n    <col width=\"40\">\n    <col width=\"40\">\n    <col width=\"80\">\n    <col width=\"140\">\n    <col width=\"40\">\n    <col width=\"60\">\n  </colgroup>\n<tbody id=\"list\"></tbody>\n</table>\n<table class=\"foot\">\n    <tr class=\"foot\">\n        <td class=\"foot\">\n          <span class=\"fault\" id=\"fault\">{{fault}}</span> \n        </td>\n    </tr>\n</table>\n</body>\n</html>",
        "output": "str",
        "x": 500.5,
        "y": 424,
        "wires": [
            []
        ]
    }
]