timelapse/timelapse-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maj
Some checks failed
SSH Frontend Deploy / ssh-deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
arussac
2025-04-26 17:27:55 +02:00
parent 1a2dee5eb6
commit 70de3e2f5c
1 changed files with 332 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

621
js/projet_detail.js
View File

@@ -3,15 +3,16 @@ document.addEventListener("DOMContentLoaded", async () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get("id"); const projectId = urlParams.get("id");
const data = await getAllProject(); const data = await getAllProject();
const DataMetrics = await getDataMetrics(projectId); let DataMetrics;
try {
const project = data.find((project) => project.id == projectId); DataMetrics = await getDataMetrics(projectId);
if (project) { } catch (error) {
for (obj of document.getElementsByClassName("name_project")) if (error.status !== 404) {
obj.innerHTML = project.name; console.error(error);
} else { }
console.error("Project not found"); DataMetrics = 404; // Assign a fallback value
} }
const start_timelapse_button = document.getElementById("start-timelapse");
const videoSelector = document.getElementById("video_selector"); const videoSelector = document.getElementById("video_selector");
const numberPicker = document.getElementById("number-picker"); const numberPicker = document.getElementById("number-picker");
const choiceSelect = document.getElementById("choice"); const choiceSelect = document.getElementById("choice");
@@ -28,21 +29,19 @@ document.addEventListener("DOMContentLoaded", async () => {
// Add event listeners for the "Début" and "Fin" input fields // Add event listeners for the "Début" and "Fin" input fields
const firstInput = document.getElementById("first"); const firstInput = document.getElementById("first");
const lastInput = document.getElementById("last"); const lastInput = document.getElementById("last");
const start_timelapse_button = document.getElementById("start-timelapse");
let selectedNumbers = []; let selectedNumbers = [];
populateTimelapseLogic(start_timelapse_button, projectId).then(() => { populateTimelapseLogic(start_timelapse_button, projectId).then(() => {
if(document if (document.getElementById("show-form-button-project") != null) {
.getElementById("show-form-button-project") != null){ document
document .getElementById("show-form-button-project")
.getElementById("show-form-button-project") .addEventListener("click", showFormCamera);
.addEventListener("click", showFormCamera);
document document
.getElementById("close-form-button-camera") .getElementById("close-form-button-camera")
.addEventListener("click", hideFormCamera); .addEventListener("click", hideFormCamera);
} }
if (document.getElementById("commencer") != null) { if (document.getElementById("commencer") != null) {
document document
.getElementById("commencer") .getElementById("commencer")
@@ -51,9 +50,14 @@ document.addEventListener("DOMContentLoaded", async () => {
const hours = document.getElementById("hours").value; const hours = document.getElementById("hours").value;
const minutes = document.getElementById("minutes").value; const minutes = document.getElementById("minutes").value;
const frequency = days * 1440 + hours * 60 + minutes; const frequency = days * 1440 + hours * 60 + minutes;
start_timelapse(projectId, frequency).then(() => { if(frequency >= 3) {
location.reload(); 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) { if (document.getElementById("stop-camera") != null) {
@@ -65,194 +69,221 @@ document.addEventListener("DOMContentLoaded", async () => {
}); });
} }
}); });
choiceSelect.addEventListener("change", toggleContainers); if (addNumberButton) {
addNumberButton.addEventListener("click", addSelectedNumber);
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);
generateViewMetric(projectId);
PopulateSelect(videoSelector, projectId);
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();
} }
} videoSelector.addEventListener("change", () =>
toggleContainers(); generateViewMetric(projectId)
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( document
projectId, .getElementById("show-form-button-camera")
measurementIds, .addEventListener("click", showFormProject);
nameVideo, document
videoResolution, .getElementById("close-form-button-project")
videoDuration .addEventListener("click", hideFormProject);
).then(() => {
alert( document
"Nouvelle vidéo enregistrée :\nNom : " + .getElementById("increment-button")
nameVideo + .addEventListener("click", incrementDuration);
"\nRésolution : " + document
videoResolution + .getElementById("decrement-button")
"\nDurée : " + .addEventListener("click", decrementDuration);
videoDuration + document
" secondes" .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,
function navigateToProjects() { nameVideo,
window.location.href = "../index.html"; videoResolution,
} videoDuration
).then(() => {
function toggleView() { alert(
if (tableImage.classList.contains("hiddenTable")) { "Nouvelle vidéo enregistrée :\nNom : " +
tableImage.classList.remove("hiddenTable"); nameVideo +
tableImage.classList.add("full-view"); "\nRésolution : " +
} else { videoResolution +
tableImage.classList.remove("full-view"); "\nDurée : " +
tableImage.classList.add("hiddenTable"); videoDuration +
} " secondes"
} );
});
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; function navigateToProjects() {
lastInput.min = firstValue; 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";
}
} }
}); });
@@ -303,108 +334,112 @@ async function generateViewMetric(projectId) {
const videoId = document.getElementById("video_selector").value; const videoId = document.getElementById("video_selector").value;
measurements = await getDataMetrics(projectId); measurements = await getDataMetrics(projectId);
let samples; if (measurements != 404) {
if (videoId != -1) { let samples;
currentVideoDatas = await getDataVideoFromApi(videoId); if (videoId != -1) {
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]); currentVideoDatas = await getDataVideoFromApi(videoId);
if (currentVideoDatas[0].status != 0) { samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
videoPlaceHolder.innerHTML = ` if (currentVideoDatas[0].status != 0) {
videoPlaceHolder.innerHTML = `
<video class="video" controls> <video class="video" controls>
<source src="${api_url}/videos/file/${videoId}" type="video/mp4"> <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
Your browser does not support the video tag. Your browser does not support the video tag.
</video>`; </video>`;
} else { } else {
videoPlaceHolder.innerHTML = `<h2>La vidéo n'a pas été rendered</h2>`; videoPlaceHolder.innerHTML = `<h2>La vidéo n'a pas été rendered</h2>`;
} }
deletePlaceHolder.innerHTML = ` deletePlaceHolder.innerHTML = `
<button id="delete-video" class="default-delete-button" data-video-id="${videoId}">Delete Video</button> <button id="delete-video" class="default-delete-button" data-video-id="${videoId}">Delete Video</button>
`; `;
document.getElementById("delete-video").addEventListener("click", () => { document.getElementById("delete-video").addEventListener("click", () => {
showConfirmationAlert(videoId); 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);
}); });
tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples); populateImageTable(tempoMeasure);
} 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) { if (myChart) {
myChart.destroy(); myChart.destroy();
} }
myChart = new Chart(ctx, { myChart = new Chart(ctx, {
type: "line", type: "line",
data: { data: {
labels: datesMeasurement, labels: datesMeasurement,
datasets: [ datasets: [
{ {
label: "Température (C°)", label: "Température (C°)",
data: Temperature, data: Temperature,
fill: false, fill: false,
borderColor: "rgba(75, 192, 192, 1)", borderColor: "rgba(75, 192, 192, 1)",
tension: 0.1, tension: 0.1,
yAxisID: "y", // Use the default y-axis 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 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
},
}, },
}, },
x: { plugins: {
ticks: { legend: {
color: 'white', // Set x-axis labels to white labels: {
color: "white", // Set legend 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: { } else {
labels: { document.getElementById("metric_viewer").style.display = "none";
color: "white", // Set legend labels to white }
},
}
}
},
});
} }
function showConfirmationAlert(videoId) { function showConfirmationAlert(videoId) {
const customAlert = document.getElementById("customAlert"); const customAlert = document.getElementById("customAlert");
@@ -516,6 +551,14 @@ function decrement(id) {
updateFrequencyText(); updateFrequencyText();
} }
function decrementImage(id) {
const input = document.getElementById(id);
if (parseInt(input.value) > 1) {
input.value = parseInt(input.value) - 1;
}
updateFrequencyText();
}
function updateFrequencyText() { function updateFrequencyText() {
const days = document.getElementById("days").value; const days = document.getElementById("days").value;
const hours = document.getElementById("hours").value; const hours = document.getElementById("hours").value;