<div style='margin-top: 1em;' class='col-xs-12'>
   <div class="input-daterange input-group" id="datePicker">
       <input id="fromDate" data-daysofhistory="30" type="text" class="form-control" name="start">
        <span class="input-group-addon">to</span>
       <input class="form-control" id="toDate" type="text" name="end">
        <span class='input-group-btn'>
           <a href="" id="runPickerBtn" class="btn btn-theme">Run</a>
        </span>
    </div>
</div>
<div class='col-xs-12' style='margin-top: 2em;'>
    <table class="table">
        <thead>
            <th>Event ID</th>
            <th>Date & Time</th>
            <th>Type</th>
            <th>Condition</th>
            <th>Tag</th>
            <th>Value</th>
            <th>Device Name</th>
            <th>Stroke Number</th>
        </thead>

        <tbody id="output">
        </tbody>
    </table>
	<!--<%= JSON.stringify(channels['poc.events'].value) %>-->
</div>



<script>

	var nodeID = <%= node.nodeId %>;
	var nodeType = '<%= node.nodetypeName %>';
	var channelID = <%= channels['poc.events'].channelId %>;
    console.log({nodeID:nodeID, nodeType:nodeType, channelID: channelID})

	var formatDate = function(str){
		var c1, c2;
		c1 = new Date(str);
	    c2 = (c1.getTime() / 1000);
	    c2 = Math.floor(c2);
	    return c2.toString();
	};

    var updateTable = function(){
        var apiData, start, end;
		var $output = $('#output');
		start = $('#datePicker').find('#fromDate');
		dateString = start.val().replace(/-/g, "/");
		start = formatDate(dateString);
	    end = $('#datePicker').find('#toDate');
		dateString = end.val().replace(/-/g, "/");
		end = formatDate(dateString);
		apiData = "&nodelist[0][nodeId]=" + nodeID.toString() + "&nodelist[0][channelId]=" + channelID.toString();
		apiData += "&start=" + start + "&end=" + end;
		$.ajax({
	        url: "http://henrypump.meshify.com/api2/Nodechannels",
	        data: apiData,
	        dataType: "json",
	        type: "GET",
	        success: function(data) {
	          var events = data.listofstreams[0];
	          for(var i = events.stream.length-1; i > 0; i--) {
	          	var event = events.stream[i];
	          	var timestamp = event.x;
	          	var jsonBlock = event.y;
	          	var ev = JSON.parse(jsonBlock);
                var row  = "<tr>";
                row += "<td>" + ev.id + "</td>";
                row += "<td>" + ev.datetime + "</td>";
                row += "<td>" + ev.type + "</td>";
                row += "<td>" + ev.cond + "</td>";
                row += "<td>" + ev.tag + "</td>";
                row += "<td>" + ev.value + "</td>";
                row += "<td>" + ev.device_name + "</td>";
                row += "<td>" + ev.stroke_number + "</td>";
                row += "</tr>"
                $output.append(row)
	          	//$output.append(JSON.stringify(jsonBlock));
	          }
	        }
	    });
    }

	$(document).on('click', '#runPickerBtn', function(e){
		e.preventDefault();
		updateTable();
	});
    $(document).ready(function(){
        updateTable();
    })


</script>
