Réorganisation de la structure des fichiers front-end

Cette modification restructure l'architecture des fichiers du projet pour améliorer la maintenabilité:

- JavaScript: création d'une structure en sous-dossiers
  - core/ pour les utilitaires et fonctions essentielles
  - components/ pour les composants réutilisables
  - libs/ pour les bibliothèques externes (jQuery)
  - pages/ pour les scripts spécifiques aux pages

- CSS: séparation des styles en catégories
  - base/ pour les styles fondamentaux
  - components/ pour les styles des composants d'interface
  - pages/ pour les styles spécifiques aux pages

- HTML: création d'un dossier pages/ pour les templates HTML (hors index.html)

Tous les chemins dans les fichiers HTML ont été mis à jour pour refléter cette nouvelle structure.
Cette réorganisation n'apporte aucune modification fonctionnelle, uniquement une amélioration structurelle.

js/core/constVariables.js

@@ -0,0 +1 @@
+const api_url = "https://timelapse.kerboul.me/api";

js/core/populate.js

@@ -0,0 +1,16 @@
+async function PopulateSelect(mySelect, id) {
+  let data = [];
+  if (mySelect.name == "videos" && id != null) {
+    data = await getDataProjectVideosFromApi(id);
+    const selectObjDefault = document.createElement("option");
+    selectObjDefault.value = -1;
+    selectObjDefault.innerHTML = "Default";
+    mySelect.appendChild(selectObjDefault);
+    for (let i = 0; i < data.length; i++) {
+      const selectObj = document.createElement("option");
+      selectObj.value = data[i].id;
+      selectObj.innerHTML = data[i].name;
+      mySelect.appendChild(selectObj);
+    }
+  }
+}

js/core/routes.js

@@ -0,0 +1,224 @@
+// Global variables
+let global_project_list;
+let current_project = "";
+
+function formatDate(isoString) {
+  const date = new Date(isoString);
+
+  const options = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short",
+  };
+
+  return date.toLocaleString("en-US", options);
+}
+// Function to get data from API
+
+function getAllProject() {
+  return $.ajax({
+    url: api_url.concat("/projects"),
+    method: "GET",
+    dataType: "json"
+  }).then((data) => {
+    return data;
+  });
+}
+
+function getSingleProject(id) {
+  return $.ajax({
+    url: api_url.concat("/projects/"+id),
+    method: "GET",
+    dataType: "json"
+  }).then((data) => {
+    return data;
+  });
+}
+
+async function getDataMetrics(projectId){
+  try {
+    const response = await $.ajax({
+      url: api_url.concat(`/projects/${projectId}/measurements`),
+      method: "GET",
+      dataType: "json",
+    });
+    return response;
+  } catch (error) {
+    console.log("no data for this project")
+    return error.status;
+  }
+}
+
+
+async function getDataProjectVideosFromApi(id) {
+  try {
+    const response = await $.ajax({
+      url: api_url.concat(`/projects/${id}/videos`),
+      method: "GET",
+      dataType: "json",
+    });
+    // If the request is successful, store the data in the cache and return it
+    return response;
+  } catch (error) {
+    return(error.status)
+  }
+}
+
+async function getDataVideoFromApi(id) {
+  try {
+    const response = await $.ajax({
+      url: api_url.concat(`/videos/${id}`),
+      method: "GET",
+      dataType: "json",
+    });
+    // If the request is successful, store the data in the cache and return it
+    return response;
+  } catch (error) {
+    alert("Error fetching data:", error);
+    throw error; // Re-throw the error to handle it outside the function if needed
+  }
+}
+
+async function postNewVideo(project_id, measurements_id, name_video, resolution, duration) {
+  try {
+    const measures = JSON.stringify(measurements_id);
+    const mydata = JSON.stringify({
+      project_id: project_id,
+      measurement_ids: measures, // Ensure this matches the expected field name
+      name: name_video,
+      resolution: resolution,
+      duration: duration
+    });
+
+    const response = await $.ajax({
+      url: api_url.concat(`/videos/`),
+      method: "POST",
+      dataType: "json",
+      contentType: "application/json",
+      data: mydata
+    });
+
+    alert("Video posted successfully:", response);
+  } catch (error) {
+    alert("Error posting video:", error);
+    throw error;
+  }
+}
+async function PostNewProject(nameProject, description){
+  try {
+    if(description.length==0){
+      description="Non renseignée"
+    }
+    const mydata = JSON.stringify({
+      name: nameProject,
+      description: description
+    });
+    const response = await $.ajax({
+      url: api_url.concat(`/projects`),
+      method: "POST",
+      dataType: "json",
+      contentType: "application/json",
+      data: mydata
+    });
+
+    alert("Video posted successfully:", response);
+    location.reload();
+  } catch (error) {
+    alert("Error posting video:", error);
+    throw error;
+  }
+}
+
+async function deleteProject(id){
+  try {
+      const response = await $.ajax({
+        url: api_url.concat(`/projects/${id}`),
+        method: "DELETE",
+      }).then(()=>{
+        alert("Projet supprimé avec succès")
+        location.reload();
+      })
+  } catch (error) {
+    alert("Error deleting project, project id :"+ id+"\n error :"+error);
+    throw error;
+  }
+}
+async function deleteVideo(id){
+  try {
+      const response = await $.ajax({
+        url: api_url.concat(`/videos/${id}`),
+        method: "DELETE",
+      }).then(()=>{
+        alert("Video supprimé avec succès")
+        location.reload();
+      })
+  } catch (error) {
+    alert("Error deleting video, video id :"+ id+"\n error :"+error);
+    throw error;
+  }
+}
+
+async function renderVideo(id){
+  try {
+    const mydata = JSON.stringify({
+      info:"none"
+    });
+    const response = await $.ajax({
+      url: api_url.concat(`/videos/render/`+id),
+      method: "POST",
+      dataType: "json",
+      contentType: "application/json",
+      data: mydata
+    });
+
+    alert("Video rendered successfully:", response);
+  } catch (error) {
+    alert("Error rendering video:", error);
+    throw error;
+  }
+}
+
+async function start_timelapse(id,frequency,nbimages){
+  try {
+    const mydata = JSON.stringify({
+      projectId: id,
+      interval: frequency,
+      nb_images: nbimages 
+    });
+    const response = await $.ajax({
+      url: api_url.concat(`/procedure/start`),
+      method: "POST",
+      dataType: "json",
+      contentType: "application/json",
+      data: mydata
+    });
+
+    alert("data retrieval started:", response);
+  } catch (error) {
+    throw error;
+  }
+}
+
+async function stopCamera(id){
+  try {
+    const mydata = JSON.stringify({
+      info:"None"
+    });
+    const response = await $.ajax({
+      url: api_url.concat(`/procedure/stop`),
+      method: "POST",
+      dataType: "json",
+      contentType: "application/json",
+      data: mydata
+    });
+
+    alert("Camera stopped succesfully :", response);
+  } catch (error) {
+    alert("Error stopping the camera :", error);
+    throw error;
+  }
+}

js/core/tools.js

@@ -0,0 +1,56 @@
+function convertStringToArray(string) {
+  const numberStrings = string.replace(/[{}]/g, '').split(',');
+
+  // Trim whitespace and convert the string numbers to integers
+  const numberArray = numberStrings.map(num => parseInt(num.trim(), 10));
+
+  return numberArray;
+}
+
+function filterAndSortMeasurementsByIds(measurements, ids) {
+  return measurements
+    .filter((measurement) => ids.includes(measurement.id))
+    .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+}
+function filterAndSortMeasurementsByNumber(measurements, Numbers) {
+  // Filter measurements based on their position in the Numbers array
+  const filteredMeasurements = Numbers.map(index => measurements[index - 1]).filter(measurement => measurement !== undefined);
+
+  // Sort the filtered measurements by their timestamp
+  return filteredMeasurements.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+}
+
+function checkVideoPath(videos, name) {
+  let res = true;
+  videos.forEach(video => {
+      const videoName = video.name;
+      if(videoName==name)
+        res=false;
+  });
+  return res;
+}
+
+
+
+function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
+  if (choice === 'oneByOne') {
+    const highlightedButtons = document.querySelectorAll('.number-button.highlight');
+    return Array.from(highlightedButtons).map(button => parseInt(button.textContent));
+  } else {
+    const first = parseInt(firstInput.value);
+    const last = parseInt(lastInput.value);
+    const denominator = parseInt(document.getElementById('denominator').value);
+
+    const measurementIds = new Set();
+    measurementIds.add(first); // Always include the first image
+    // Iterate through the range, adding the step size
+    for (let i = first + denominator; i <= last; i += denominator) {
+      measurementIds.add(i);
+    }
+
+    measurementIds.add(last); // Always include the last image
+
+    // Convert the Set back to an array and sort it
+    return Array.from(measurementIds).sort((a, b) => a - b);
+  }
+}