timelapse-frontend/js/projet_detail.js

let myChart;

document.addEventListener("DOMContentLoaded", async () => {
  const urlParams = new URLSearchParams(window.location.search);
  const projectId = urlParams.get("id");
  const data = await getAllProject();
  const DataMetrics = await getDataMetrics(projectId);

  document.getElementById("name_project").innerHTML = data[projectId].name;

  const videoSelector = document.getElementById("video_selector");
  const numberPicker = document.getElementById('number-picker');
  const resultContainer = document.getElementById('result-container');
  const choiceSelect = document.getElementById('choice');
  const oneByOneContainer = document.getElementById('one-by-one-container');
  const addNumberButton = document.getElementById('add-number-button');
  const formContainer = document.getElementById('form-container');
  const durationInput = document.getElementById('duration');
  const tableBody = document.getElementById("imageSource");
  const tableImage = document.getElementById("content1");

  let selectedNumbers = [];

  choiceSelect.addEventListener('change', toggleOneByOneContainer);
  addNumberButton.addEventListener('click', addSelectedNumber);
  videoSelector.addEventListener("change", () => generateViewMetric(projectId));
  document.getElementById('show-form-button').addEventListener('click', showForm);
  document.getElementById('close-form-button').addEventListener('click', hideForm);
  document.getElementById('increment-button').addEventListener('click', incrementDuration);
  document.getElementById('decrement-button').addEventListener('click', decrementDuration);
  document.getElementById('my-form').addEventListener('submit', handleFormSubmit);
  document.getElementById("projets").addEventListener("click", navigateToProjects);
  document.getElementById("toggle-view").addEventListener("click", toggleView);

  generateViewMetric(projectId);
  PopulateSelect(videoSelector, projectId);
  populateImageTable(DataMetrics);

  function toggleOneByOneContainer() {
    oneByOneContainer.style.display = choiceSelect.value === 'oneByOne' ? 'block' : 'none';
  }

  function addSelectedNumber() {
    const selectedNumber = parseInt(numberPicker.value, 10);
    if (!selectedNumbers.includes(selectedNumber)) {
      selectedNumbers.push(selectedNumber);
      numberPicker.remove(numberPicker.selectedIndex);
    }
  }

  function showForm() {
    formContainer.style.display = 'flex';
  }

  function hideForm() {
    formContainer.style.display = 'none';
  }

  function incrementDuration() {
    durationInput.value = parseInt(durationInput.value) + 1;
  }

  function decrementDuration() {
    if (parseInt(durationInput.value) > 0) {
      durationInput.value = parseInt(durationInput.value) - 1;
    }
  }

  async function handleFormSubmit(event) {
    event.preventDefault();
    const data = await getDataProjectVideosFromApi(projectId);
    const nameVideo = document.getElementById('name').value;
    const videoDuration = durationInput.value;

    if (videoDuration > 0) {
      if (checkVideoPath(data, nameVideo)) {
        alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
          '\nRésolution : ' + document.getElementById('resolution').value +
          '\nDurée : ' + videoDuration + ' secondes');
      } else {
        alert('Le nom : "' + nameVideo + '" est déjà pris ! \n' +
          'veuillez en trouver un autre');
      }
    } else {
      alert('La durée de la vidéo doit être supérieur à 0');
    }
  }

  function navigateToProjects() {
    window.location.href = "../index.html";
  }

  function toggleView() {
    if (tableImage.classList.contains("hiddenTable")) {
      tableImage.classList.remove("hiddenTable");
      tableImage.classList.add("full-view");
      document.getElementById("toggle-view").innerHTML = "See first images";
    } else {
      tableImage.classList.remove("full-view");
      tableImage.classList.add("hiddenTable");
      document.getElementById("toggle-view").innerHTML = "See all images";
    }
  }

  function populateImageTable(DataMetrics) {
    let row = document.createElement("tr");
    let i = 0;
    DataMetrics.forEach((measure) => {
      let imageTD = document.createElement("td");
      imageTD.innerHTML = `<img id="${i}" src="${measure.image_path}" />`;
      row.appendChild(imageTD);

      if ((i + 1) % 3 === 0 && i !== 0) {
        tableBody.appendChild(row);
        row = document.createElement("tr");
      }
      if (row.childNodes.length > 0) {
        tableBody.appendChild(row);
      }
      i++;
    });
  }
});

async function generateViewMetric(projectId) {
  const ctx = document.getElementById("metric_viewer").getContext("2d");
  let Hygrometrie = [];
  let Temperature = [];
  let datesMeasurement = [];

  let measurements;
  let currentVideoDatas;

  await new Promise((resolve) => {
    const checkExist = setInterval(() => {
      if (document.getElementById("video_selector").options.length > 0) {
        clearInterval(checkExist);
        resolve();
      }
    }, 100); // check every 100ms
  });

  const videoId = document.getElementById("video_selector").value;

  measurements = await getDataMetrics(projectId);
  currentVideoDatas = await getDataVideoFromApi(videoId);

  let samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
  tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
  tempoMeasure.forEach((measure) => {
    datesMeasurement.push(measure.timestamp);
    Temperature.push(measure.temperature);
    Hygrometrie.push(measure.humidity);
  });

  if (myChart) {
    myChart.destroy();
  }

  myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: datesMeasurement,
      datasets: [
        {
          label: "Température (F°)",
          data: Temperature,
          fill: false,
          borderColor: "rgba(75, 192, 192, 1)",
          tension: 0.1,
          yAxisID: "y", // Use the default y-axis
        },
        {
          label: "Hygrometrie (%)",
          data: Hygrometrie,
          fill: false,
          borderColor: "rgba(153, 102, 255, 1)",
          tension: 0.1,
          yAxisID: "y1", // Use the second y-axis
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          position: "left",
        },
        y1: {
          beginAtZero: true,
          position: "right",
          grid: {
            drawOnChartArea: false, // Only want the grid lines for one axis to show up
          },
        },
      },
    },
  });
}