var URL = "https://x6jf1a5zi7.execute-api.ap-southeast-2.amazonaws.com/default/DataAPI2"

window.onload = function() {

	document.getElementById("contactForm").addEventListener("submit", function(e){
		e.preventDefault();
		getData(URL);
	});

};

function getData(requestUrl) {

    var datatype  = document.getElementById("datatype").value;
    var startdate = document.getElementById("startdate").value;
    var enddate   = document.getElementById("enddate").value;
	var jsonbody  = JSON.stringify({ "datatype": datatype, "startdate": startdate, "enddate": enddate });

	fetch(requestUrl, {
	    method: 'post',
	    headers: {
	      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
	    },
	    body: jsonbody
	})
	.then(response => response.json())
    .then(data => {
      	if (data.result == 0) {
			var html = "<table class='data'>";
			html = html + "<tr><th>Date</th><th>Value</th></tr>"
			data.data.forEach((item) => {
				var date = new Date(item['date'] * 1000).toLocaleString("en-AU");
				html = html + "<tr><td>" + date + "</td><td>" + item['datavalue'] + "</td></tr>";
			});
			html = html + "</table>";
        	document.getElementById("formresponse").innerHTML = html;
        	doChart(data.data);
      	}
      	else { 
       		document.getElementById("formresponse").innerHTML = data.msg;
      	}
	})
	.catch(function (error) {
	  	console.log('Request failed', error);
	});
};	


function doChart(chartdata) {
	
	var chartlabels = [];
	var chartvalues = [];
	chartdata.forEach((item) => {
		var date = new Date(item['date'] * 1000).toLocaleString("en-AU");
		chartlabels.push(date);
		chartvalues.push(item['datavalue']);
	});
	
	const ctx = document.getElementById('chart');
	const myChart = new Chart(ctx, {
    	type: 'line',
    	data: {
        	labels: chartlabels,
        	datasets: [{
    	      label: 'Data Chart',
    	      data: chartvalues,
    	      backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
    	      ],
    	      borderColor: [
                'rgba(255, 99, 132, 1)'
    	      ],
    	     borderWidth: 1
    	  }]
		},
		options: {
        	scales: {
            	y: {
                	beginAtZero: true
            	}
        	}
    	}
	});

};