Kerboul
e776d020a0
All checks were successful
SSH Frontend Deploy / ssh-deploy (push) Successful in 59s
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.
591 lines
19 KiB
JavaScript
591 lines
19 KiB
JavaScript
let myChart;
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const projectId = urlParams.get("id");
|
|
const data = await getAllProject();
|
|
let DataMetrics;
|
|
try {
|
|
DataMetrics = await getDataMetrics(projectId);
|
|
} catch (error) {
|
|
if (error.status !== 404) {
|
|
console.error(error);
|
|
}
|
|
DataMetrics = 404; // Assign a fallback value
|
|
}
|
|
const start_timelapse_button = document.getElementById("start-timelapse");
|
|
const videoSelector = document.getElementById("video_selector");
|
|
const numberPicker = document.getElementById("number-picker");
|
|
const choiceSelect = document.getElementById("choice");
|
|
const oneByOneContainer = document.getElementById("one-by-one-container");
|
|
const firstLastContainer = document.getElementById("first-last-container");
|
|
const addNumberButton = document.getElementById("add-number-button");
|
|
const formContainerProject = document.getElementById(
|
|
"form-container-project"
|
|
);
|
|
const formContainerCamera = document.getElementById("form-container-camera");
|
|
const durationInput = document.getElementById("duration");
|
|
const tableImage = document.getElementById("content1");
|
|
const numberBoard = document.getElementById("number-board");
|
|
// Add event listeners for the "Début" and "Fin" input fields
|
|
const firstInput = document.getElementById("first");
|
|
const lastInput = document.getElementById("last");
|
|
|
|
let selectedNumbers = [];
|
|
|
|
populateTimelapseLogic(start_timelapse_button, projectId).then(() => {
|
|
if (document.getElementById("show-form-button-project") != null) {
|
|
document
|
|
.getElementById("show-form-button-project")
|
|
.addEventListener("click", showFormCamera);
|
|
|
|
document
|
|
.getElementById("close-form-button-camera")
|
|
.addEventListener("click", hideFormCamera);
|
|
}
|
|
if (document.getElementById("commencer") != null) {
|
|
document
|
|
.getElementById("commencer")
|
|
.addEventListener("click", async () => {
|
|
const days = document.getElementById("days").value;
|
|
const hours = document.getElementById("hours").value;
|
|
const minutes = document.getElementById("minutes").value;
|
|
const frequency = days * 1440 + hours * 60 + minutes;
|
|
if(frequency >= 3) {
|
|
const nbrimages = document.getElementById("totalImages").value;
|
|
start_timelapse(projectId, frequency, nbrimages).then(() => {
|
|
location.reload();
|
|
});
|
|
} else {
|
|
alert("La fréquence doit être supérieure à 3 minutes !");
|
|
}
|
|
});
|
|
}
|
|
if (document.getElementById("stop-camera") != null) {
|
|
document
|
|
.getElementById("stop-camera")
|
|
.addEventListener("click", async () => {
|
|
stopCamera(projectId);
|
|
location.reload();
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
if (addNumberButton) {
|
|
addNumberButton.addEventListener("click", addSelectedNumber);
|
|
}
|
|
videoSelector.addEventListener("change", () =>
|
|
generateViewMetric(projectId)
|
|
);
|
|
document
|
|
.getElementById("show-form-button-camera")
|
|
.addEventListener("click", showFormProject);
|
|
document
|
|
.getElementById("close-form-button-project")
|
|
.addEventListener("click", hideFormProject);
|
|
|
|
document
|
|
.getElementById("increment-button")
|
|
.addEventListener("click", incrementDuration);
|
|
document
|
|
.getElementById("decrement-button")
|
|
.addEventListener("click", decrementDuration);
|
|
document
|
|
.getElementById("submit")
|
|
.addEventListener("click", handleFormSubmit);
|
|
document
|
|
.getElementById("projets")
|
|
.addEventListener("click", navigateToProjects);
|
|
document
|
|
.getElementById("toggle-view")
|
|
.addEventListener("click", toggleView);
|
|
|
|
firstInput.addEventListener("input", updateRange);
|
|
lastInput.addEventListener("input", updateRange);
|
|
|
|
function toggleContainers() {
|
|
if (choiceSelect.value === "oneByOne") {
|
|
oneByOneContainer.style.display = "block";
|
|
firstLastContainer.style.display = "none";
|
|
populateNumberBoard(DataMetrics.length);
|
|
setRequiredAttributes();
|
|
} else {
|
|
oneByOneContainer.style.display = "none";
|
|
firstLastContainer.style.display = "block";
|
|
const last = document.getElementById("last");
|
|
last.value = DataMetrics.length;
|
|
last.max = DataMetrics.length;
|
|
document.getElementById("first").max = last.value;
|
|
setRequiredAttributes();
|
|
}
|
|
}
|
|
toggleContainers();
|
|
|
|
function setRequiredAttributes() {
|
|
const firstInput = document.getElementById("first");
|
|
const lastInput = document.getElementById("last");
|
|
const denominatorInput = document.getElementById("denominator");
|
|
|
|
if (firstLastContainer.style.display === "block") {
|
|
firstInput.required = true;
|
|
lastInput.required = true;
|
|
denominatorInput.required = true;
|
|
} else {
|
|
firstInput.required = false;
|
|
lastInput.required = false;
|
|
denominatorInput.required = false;
|
|
}
|
|
}
|
|
|
|
function addSelectedNumber() {
|
|
const selectedNumber = parseInt(numberPicker.value, 10);
|
|
if (!selectedNumbers.includes(selectedNumber)) {
|
|
selectedNumbers.push(selectedNumber);
|
|
numberPicker.remove(numberPicker.selectedIndex);
|
|
}
|
|
}
|
|
|
|
function showFormCamera() {
|
|
formContainerCamera.style.display = "flex";
|
|
}
|
|
|
|
function hideFormCamera() {
|
|
formContainerCamera.style.display = "none";
|
|
}
|
|
function showFormProject() {
|
|
formContainerProject.style.display = "flex";
|
|
}
|
|
|
|
function hideFormProject() {
|
|
formContainerProject.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;
|
|
const videoResolution = document.getElementById("resolution").value;
|
|
|
|
if (videoDuration <= 0) {
|
|
alert("La durée de la vidéo doit être supérieur à 0");
|
|
return 0;
|
|
}
|
|
if (!checkVideoPath(data, nameVideo) || !nameVideo.length > 0) {
|
|
alert(
|
|
'Le nom : " ' +
|
|
nameVideo +
|
|
' " est déjà pris ou vide ! \n' +
|
|
"veuillez en trouver un autre"
|
|
);
|
|
return 0;
|
|
}
|
|
const choice = choiceSelect.value;
|
|
const measurementIds = getMeasurementsIdsFromForm(
|
|
choice,
|
|
firstInput,
|
|
lastInput
|
|
);
|
|
postNewVideo(
|
|
projectId,
|
|
measurementIds,
|
|
nameVideo,
|
|
videoResolution,
|
|
videoDuration
|
|
).then(() => {
|
|
alert(
|
|
"Nouvelle vidéo enregistrée :\nNom : " +
|
|
nameVideo +
|
|
"\nRésolution : " +
|
|
videoResolution +
|
|
"\nDurée : " +
|
|
videoDuration +
|
|
" secondes"
|
|
);
|
|
});
|
|
}
|
|
|
|
function navigateToProjects() {
|
|
window.location.href = "../index.html";
|
|
}
|
|
|
|
function toggleView() {
|
|
if (tableImage.classList.contains("hiddenTable")) {
|
|
tableImage.classList.remove("hiddenTable");
|
|
tableImage.classList.add("full-view");
|
|
} else {
|
|
tableImage.classList.remove("full-view");
|
|
tableImage.classList.add("hiddenTable");
|
|
}
|
|
}
|
|
|
|
function populateNumberBoard(length) {
|
|
numberBoard.innerHTML = "";
|
|
numberBoard.style.gridTemplateColumns = `repeat(auto-fill, minmax(50px, 1fr))`;
|
|
for (let i = 1; i <= length; i++) {
|
|
const numberButton = document.createElement("button");
|
|
numberButton.classList.add("number-button");
|
|
numberButton.textContent = i;
|
|
numberButton.addEventListener("click", () =>
|
|
highlightNumber(numberButton)
|
|
);
|
|
numberBoard.appendChild(numberButton);
|
|
}
|
|
}
|
|
|
|
function highlightNumber(button) {
|
|
button.classList.toggle("highlight");
|
|
}
|
|
|
|
function updateRange() {
|
|
const firstValue = parseInt(firstInput.value);
|
|
const lastValue = parseInt(lastInput.value);
|
|
|
|
if (firstValue > lastValue) {
|
|
lastInput.value = firstValue;
|
|
}
|
|
if (lastValue < firstValue) {
|
|
firstInput.value = lastValue;
|
|
}
|
|
|
|
firstInput.max = lastValue;
|
|
lastInput.min = firstValue;
|
|
}
|
|
if (DataMetrics != 404) {
|
|
const project = data.find((project) => project.id == projectId);
|
|
if (project) {
|
|
for (obj of document.getElementsByClassName("name_project"))
|
|
obj.innerHTML = project.name;
|
|
} else {
|
|
console.error("Project not found");
|
|
}
|
|
|
|
choiceSelect.addEventListener("change", toggleContainers);
|
|
|
|
generateViewMetric(projectId);
|
|
PopulateSelect(videoSelector, projectId);
|
|
} else {
|
|
document.getElementById("metric_viewer").style.display = "none";
|
|
document.getElementById("video-container").style.display = "none";
|
|
document.getElementById("delete-placeholder").style.display = "none";
|
|
document.getElementById("content1").style.display = "none";
|
|
document.getElementById("form-container-project").style.display = "none";
|
|
document.getElementById("form-container-camera").style.display = "none";
|
|
document.getElementById("show-form-button-camera").style.display = "none";
|
|
for (el of document.querySelectorAll(".box")) {
|
|
el.style.display = "none";
|
|
}
|
|
}
|
|
});
|
|
|
|
function populateImageTable(DataMetrics) {
|
|
const tableBody = document.getElementById("imageSource");
|
|
while (tableBody.rows.length > 0) {
|
|
tableBody.deleteRow(0);
|
|
}
|
|
let row = document.createElement("tr");
|
|
let i = 0;
|
|
DataMetrics.forEach((measure) => {
|
|
let imageTD = document.createElement("td");
|
|
imageTD.innerHTML = `<a class="picture_placeHolder" href="${api_url}/images/${measure.project_id}/${measure.order_id}" target="_blank"><img id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
|
|
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");
|
|
const videoPlaceHolder = document.getElementById("video-container");
|
|
const deletePlaceHolder = document.getElementById("delete-placeholder");
|
|
|
|
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);
|
|
if (measurements != 404) {
|
|
let samples;
|
|
if (videoId != -1) {
|
|
currentVideoDatas = await getDataVideoFromApi(videoId);
|
|
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
|
|
if (currentVideoDatas[0].status != 0) {
|
|
videoPlaceHolder.innerHTML = `
|
|
<video class="video" controls>
|
|
<source src="${api_url}/videos/file/${videoId}" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>`;
|
|
} else {
|
|
videoPlaceHolder.innerHTML = `<h2>La vidéo n'a pas été rendered</h2>`;
|
|
}
|
|
deletePlaceHolder.innerHTML = `
|
|
<button id="delete-video" class="default-delete-button" data-video-id="${videoId}">Delete Video</button>
|
|
`;
|
|
document.getElementById("delete-video").addEventListener("click", () => {
|
|
showConfirmationAlert(videoId);
|
|
});
|
|
tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
|
|
} else {
|
|
deletePlaceHolder.innerHTML = "";
|
|
videoPlaceHolder.innerHTML = "";
|
|
samples = measurements.map((measurements) => measurements.id);
|
|
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
|
|
}
|
|
tempoMeasure.forEach((measure) => {
|
|
datesMeasurement.push(measure.timestamp);
|
|
Temperature.push(measure.temperature);
|
|
Hygrometrie.push(measure.humidity);
|
|
});
|
|
populateImageTable(tempoMeasure);
|
|
|
|
if (myChart) {
|
|
myChart.destroy();
|
|
}
|
|
|
|
myChart = new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: datesMeasurement,
|
|
datasets: [
|
|
{
|
|
label: "Température (C°)",
|
|
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,
|
|
color: "rgba(153, 102, 255, 1)",
|
|
borderColor: "rgba(153, 102, 255, 1)",
|
|
tension: 0.1,
|
|
yAxisID: "y1", // Use the second y-axis
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
position: "left",
|
|
ticks: {
|
|
color: "white", // Set y-axis labels to white
|
|
},
|
|
grid: {
|
|
color: "white", // Set grid line color to white
|
|
},
|
|
},
|
|
x: {
|
|
ticks: {
|
|
color: "white", // Set x-axis labels to white
|
|
},
|
|
grid: {
|
|
drawOnChartArea: true,
|
|
color: "white", // Set grid line color to white
|
|
},
|
|
},
|
|
y1: {
|
|
beginAtZero: true,
|
|
position: "right",
|
|
grid: {
|
|
drawOnChartArea: false, // Only want the grid lines for one axis to show up
|
|
},
|
|
ticks: {
|
|
color: "white", // Set y-axis labels to white
|
|
},
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: "white", // Set legend labels to white
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
} else {
|
|
document.getElementById("metric_viewer").style.display = "none";
|
|
}
|
|
}
|
|
function showConfirmationAlert(videoId) {
|
|
const customAlert = document.getElementById("customAlert");
|
|
const alertMessage = document.getElementById("alertMessage");
|
|
const okBtn = document.getElementById("okBtn");
|
|
const cancelBtn = document.getElementById("cancelBtn");
|
|
|
|
alertMessage.textContent = "Are you sure you want to delete this video?";
|
|
customAlert.style.display = "block";
|
|
|
|
okBtn.onclick = function () {
|
|
deleteVideo(videoId);
|
|
customAlert.style.display = "none";
|
|
};
|
|
|
|
cancelBtn.onclick = function () {
|
|
customAlert.style.display = "none";
|
|
};
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
async function populateTimelapseLogic(placeholder, id) {
|
|
const data = await getSingleProject(id);
|
|
if (data.status == 0) {
|
|
placeholder.innerHTML = `<button class="default-button" id="show-form-button-project">
|
|
<span> Configurer la caméra </span>
|
|
</button>`;
|
|
} else if (data.status == 1) {
|
|
placeholder.innerHTML = `<button class="default-delete-button" id="stop-camera">
|
|
<span> Stopper la prise d'images </span>
|
|
</button>`;
|
|
} else {
|
|
placeholder.innerHTML = ``;
|
|
}
|
|
}
|
|
|
|
function increment(id) {
|
|
const input = document.getElementById(id);
|
|
input.value = parseInt(input.value) + 1;
|
|
updateFrequencyText();
|
|
}
|
|
|
|
function decrement(id) {
|
|
const input = document.getElementById(id);
|
|
if (parseInt(input.value) > 0) {
|
|
input.value = parseInt(input.value) - 1;
|
|
}
|
|
updateFrequencyText();
|
|
}
|
|
|
|
function decrementImage(id) {
|
|
const input = document.getElementById(id);
|
|
if (parseInt(input.value) > 1) {
|
|
input.value = parseInt(input.value) - 1;
|
|
}
|
|
updateFrequencyText();
|
|
}
|
|
|
|
function updateFrequencyText() {
|
|
const days = document.getElementById("days").value;
|
|
const hours = document.getElementById("hours").value;
|
|
const minutes = document.getElementById("minutes").value;
|
|
|
|
const frequencyText = `une image sera prise toutes les ${days} jours ${hours} heures ${minutes} minutes`;
|
|
document.getElementById("frequency-text").innerHTML = frequencyText;
|
|
}
|
|
|
|
$(".arrow-icon").click(function () {
|
|
$(this).toggleClass("open");
|
|
});
|
|
|
|
let titleIsReadable = true;
|
|
|
|
function change_title_style() {
|
|
const xyz = document.getElementById("xyzv");
|
|
const h3_title = document.getElementById("h3-title");
|
|
if (titleIsReadable) {
|
|
titleIsReadable = false;
|
|
xyz.style.display = "block";
|
|
h3_title.style.display = "none";
|
|
} else {
|
|
titleIsReadable = true;
|
|
xyz.style.display = "none";
|
|
h3_title.style.display = "block";
|
|
}
|
|
}
|
|
change_title_style();
|