
window.addEventListener('load', button_apply); // Virtually press apply button when webpage loads the first time

var myObj = 0;
var was_error;

function get_readings() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (this.readyState == 4) { // request finished, response ready
      if (this.status == 200) {
        myObj = JSON.parse(this.responseText);
        was_error = false;
        console.log("Received JSON");
        console.log(myObj);
      }
      else {
        was_error = true;
        console.log("JSON response error or timeout");

      }

    }
  };

  xhr.open("GET", "/readings", true);
  xhr.timeout = 500;
  xhr.send();
}


function update_values() {
  get_readings();

  if (was_error == true) {
    document.getElementById("output_online").innerText = "Offline";
    document.getElementById("output_online").style.color = "#FF0000";

    document.getElementById('P_W').innerHTML = "nan";
    document.getElementById('I_A').innerHTML = "nan";
    document.getElementById('U_V').innerHTML = "nan";
  }
  else {
    document.getElementById("output_online").innerText = "Online";
    document.getElementById("output_online").style.color = "#008000";

    document.getElementById('P_W').innerHTML = myObj.P_W;
    document.getElementById('I_A').innerHTML = myObj.I_A;
    document.getElementById('U_V').innerHTML = myObj.U_V;

    var timestamp = new Date().toLocaleTimeString();
    var plot_diagrams = document.getElementById("plot_diagrams");

    if (plot_diagrams.checked == true) {
      chart_P_W.data.datasets[0].data.push(myObj.P_W);
      chart_I_A.data.datasets[0].data.push(myObj.I_A);
      chart_U_V.data.datasets[0].data.push(myObj.U_V);
      chart_P_W.data.labels.push(timestamp);
      chart_I_A.data.labels.push(timestamp);
      chart_U_V.data.labels.push(timestamp);

      if (chart_P_W.data.labels.length >= MAX_DATA_SET_LENGTH) {
        chart_P_W.data.datasets[0].data.shift();
        chart_I_A.data.datasets[0].data.shift();
        chart_U_V.data.datasets[0].data.shift();
        chart_P_W.data.labels.shift();
        chart_I_A.data.labels.shift();
        chart_U_V.data.labels.shift();
      }

      chart_P_W.update();
      chart_I_A.update();
      chart_U_V.update();
    }

  }

  document.getElementById("output_last_update").innerText = "Last update: " + new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", fractionalSecondDigits: "3" });

}

let intervalId;

function button_apply() {
  let mseconds = parseInt(document.getElementById("interval").value);
  if (isNaN(mseconds) || mseconds < 100) {
    alert("Please enter a valid number 100ms or larger");
    return;
  }
  clearInterval(intervalId);
  intervalId = setInterval(update_values, mseconds);

  MAX_DATA_SET_LENGTH = parseInt(document.getElementById("num_values").value);

}

function button_clear() {
  chart_P_W.data.datasets[0].data = [];
  chart_I_A.data.datasets[0].data = [];
  chart_U_V.data.datasets[0].data = [];
  chart_P_W.data.labels = [];
  chart_I_A.data.labels = [];
  chart_U_V.data.labels = [];
  chart_P_W.update();
  chart_I_A.update();
  chart_U_V.update();
}

var MAX_DATA_SET_LENGTH = 100;
let data_P_W = [];
let labels_P_W = [];
let labels_I_A = [];
let labels_U_V = [];
let data_I_A = [];
let data_U_V = [];

var options = {
  scales: {
    yAxes: [{
      type: 'linear',
      ticks: {
        maxTicksLimit: 5,
      },
    }],

    xAxes: [{
      type: 'time',
      ticks: {
        maxTicksLimit: 3,
      },
      time: {
        unit: 'second',
        displayFormats: {
          'second': 'HH:mm:ss',
        },
        tooltipFormat: 'HH:mm:ss',
      }
    }]
  },
  scales: {
    x: { title: { display: true, text: "Time" } },
    y: { title: { display: false, text: "Value" } }
  },
  animation: {
    duration: 50,
  },
  pointRadius: 2,
  responsive: true,
  showLines: true
};


const graph_P_W = document.getElementById("graph_P_W").getContext("2d");
const chart_P_W = new Chart(graph_P_W, {
  type: "line",
  data: {
    labels: labels_P_W,
    datasets: [{
      label: "Power [W]",
      data: data_P_W,
      borderColor: "blue",
      borderWidth: 2,
      fill: false,
    }]
  },
  options: options
});

const graph_I_A = document.getElementById("graph_I_A").getContext("2d");
const chart_I_A = new Chart(graph_I_A, {
  type: "line",
  data: {
    labels: labels_I_A,
    datasets: [{
      label: "Current [A]",
      data: data_I_A,
      borderColor: "red",
      borderWidth: 2,
      fill: false,
    }]
  },
  options: options
});

const graph_U_V = document.getElementById("graph_U_V").getContext("2d");
const chart_U_V = new Chart(graph_U_V, {
  type: "line",
  data: {
    labels: labels_U_V,
    datasets: [{
      label: "Voltage [V]",
      data: data_U_V,
      borderColor: "green",
      borderWidth: 2,
      fill: false,
    }]
  },
  options: options
});




function exportToCSV(filename, data) {
  
}

function button_export() {

  const csvContent =  chart_P_W.data.labels + "\n" + 
                      chart_P_W.data.datasets[0].data + "\n" + 
                      chart_I_A.data.datasets[0].data + "\n" + 
                      chart_U_V.data.datasets[0].data;
                      
  const blob = new Blob([csvContent], { type: "text/csv" });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement("a");
  a.href = url;
  a.download = "data.csv.txt";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);

}
