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

maj title

Browse Source
This commit is contained in:
arussac
2025-03-31 11:23:17 +02:00
parent d096cd7877
commit f6226dbc8d
3 changed files with 200 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -170,7 +170,7 @@ body::before {
} }
.frequency-control input[type="number"] { .frequency-control input[type="number"] {
width: 50px; width: 10vw;
text-align: center; text-align: center;
background-color: #333; background-color: #333;
border: 1px solid #555; border: 1px solid #555;

4
css/style_projet.css
View File

@@ -149,3 +149,7 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
.frequency-control input{
width: 5vw;
}

327
js/projet_detail.js
View File

@@ -5,100 +5,118 @@ document.addEventListener("DOMContentLoaded", async () => {
const data = await getAllProject(); const data = await getAllProject();
const DataMetrics = await getDataMetrics(projectId); const DataMetrics = await getDataMetrics(projectId);
const project = data.find(project => project.id == projectId); const project = data.find((project) => project.id == projectId);
if (project) { if (project) {
for(obj of document.getElementsByClassName("name_project")) for (obj of document.getElementsByClassName("name_project"))
obj.innerHTML = project.name; obj.innerHTML = project.name;
} else { } else {
console.error("Project not found"); console.error("Project not found");
} }
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");
const oneByOneContainer = document.getElementById('one-by-one-container'); const oneByOneContainer = document.getElementById("one-by-one-container");
const firstLastContainer = document.getElementById('first-last-container'); const firstLastContainer = document.getElementById("first-last-container");
const addNumberButton = document.getElementById('add-number-button'); const addNumberButton = document.getElementById("add-number-button");
const formContainerProject = document.getElementById('form-container-project'); const formContainerProject = document.getElementById(
const formContainerCamera = document.getElementById('form-container-camera'); "form-container-project"
const durationInput = document.getElementById('duration'); );
const formContainerCamera = document.getElementById("form-container-camera");
const durationInput = document.getElementById("duration");
const tableImage = document.getElementById("content1"); const tableImage = document.getElementById("content1");
const numberBoard = document.getElementById('number-board'); const numberBoard = document.getElementById("number-board");
// 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') const start_timelapse_button = document.getElementById("start-timelapse");
let selectedNumbers = []; let selectedNumbers = [];
populateTimelapseLogic(start_timelapse_button, projectId).then( () => { populateTimelapseLogic(start_timelapse_button, projectId).then(() => {
document.getElementById('show-form-button-camera').addEventListener('click', showFormCamera) document
document.getElementById('close-form-button-camera').addEventListener('click', hideFormCamera) .getElementById("show-form-button-project")
if(document.getElementById('commencer') != null){ .addEventListener("click", showFormCamera);
document.getElementById('commencer').addEventListener('click', async () => { document
const days = document.getElementById('days').value; .getElementById("close-form-button-project")
const hours = document.getElementById('hours').value; .addEventListener("click", hideFormProject);
const minutes = document.getElementById('minutes').value; 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; const frequency = days * 1440 + hours * 60 + minutes;
start_timelapse(projectId, frequency).then(()=>{ start_timelapse(projectId, frequency).then(() => {
location.reload(); location.reload();
}) });
}) });
} }
if(document.getElementById('stop-camera') != null){ if (document.getElementById("stop-camera") != null) {
document.getElementById('stop-camera').addEventListener('click', async () => { document
stopCamera(projectId) .getElementById("stop-camera")
.addEventListener("click", async () => {
stopCamera(projectId);
location.reload(); location.reload();
}) });
} }
} });
)
choiceSelect.addEventListener('change', toggleContainers); choiceSelect.addEventListener("change", toggleContainers);
if (addNumberButton) { if (addNumberButton) {
addNumberButton.addEventListener('click', addSelectedNumber); addNumberButton.addEventListener("click", addSelectedNumber);
} }
videoSelector.addEventListener("change", () => generateViewMetric(projectId)); videoSelector.addEventListener("change", () => generateViewMetric(projectId));
document.getElementById('show-form-button-camera').addEventListener('click', showFormProject); document
document.getElementById('close-form-button-project').addEventListener('click', hideFormProject); .getElementById("show-form-button-camera")
.addEventListener("click", showFormProject);
document
.getElementById("close-form-button-camera")
.addEventListener("click", hideFormCamera);
document.getElementById('increment-button').addEventListener('click', incrementDuration); document
document.getElementById('decrement-button').addEventListener('click', decrementDuration); .getElementById("increment-button")
document.getElementById('submit').addEventListener('click', handleFormSubmit); .addEventListener("click", incrementDuration);
document.getElementById("projets").addEventListener("click", navigateToProjects); 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); document.getElementById("toggle-view").addEventListener("click", toggleView);
firstInput.addEventListener('input', updateRange); firstInput.addEventListener("input", updateRange);
lastInput.addEventListener('input', updateRange); lastInput.addEventListener("input", updateRange);
generateViewMetric(projectId); generateViewMetric(projectId);
PopulateSelect(videoSelector, projectId); PopulateSelect(videoSelector, projectId);
function toggleContainers() { function toggleContainers() {
if (choiceSelect.value === 'oneByOne') { if (choiceSelect.value === "oneByOne") {
oneByOneContainer.style.display = 'block'; oneByOneContainer.style.display = "block";
firstLastContainer.style.display = 'none'; firstLastContainer.style.display = "none";
populateNumberBoard(DataMetrics.length); populateNumberBoard(DataMetrics.length);
setRequiredAttributes(); setRequiredAttributes();
} else { } else {
oneByOneContainer.style.display = 'none'; oneByOneContainer.style.display = "none";
firstLastContainer.style.display = 'block'; firstLastContainer.style.display = "block";
const last = document.getElementById('last'); const last = document.getElementById("last");
last.value = DataMetrics.length; last.value = DataMetrics.length;
last.max = DataMetrics.length; last.max = DataMetrics.length;
document.getElementById('first').max = last.value; document.getElementById("first").max = last.value;
setRequiredAttributes(); setRequiredAttributes();
} }
} }
toggleContainers(); toggleContainers();
function setRequiredAttributes() { function setRequiredAttributes() {
const firstInput = document.getElementById('first'); const firstInput = document.getElementById("first");
const lastInput = document.getElementById('last'); const lastInput = document.getElementById("last");
const denominatorInput = document.getElementById('denominator'); const denominatorInput = document.getElementById("denominator");
if (firstLastContainer.style.display === 'block') { if (firstLastContainer.style.display === "block") {
firstInput.required = true; firstInput.required = true;
lastInput.required = true; lastInput.required = true;
denominatorInput.required = true; denominatorInput.required = true;
@@ -118,18 +136,18 @@ document.addEventListener("DOMContentLoaded", async () => {
} }
function showFormCamera() { function showFormCamera() {
formContainerCamera.style.display = 'flex'; formContainerCamera.style.display = "flex";
} }
function hideFormCamera() { function hideFormCamera() {
formContainerCamera.style.display = 'none'; formContainerCamera.style.display = "none";
} }
function showFormProject() { function showFormProject() {
formContainerProject.style.display = 'flex'; formContainerProject.style.display = "flex";
} }
function hideFormProject() { function hideFormProject() {
formContainerProject.style.display = 'none'; formContainerProject.style.display = "none";
} }
function incrementDuration() { function incrementDuration() {
durationInput.value = parseInt(durationInput.value) + 1; durationInput.value = parseInt(durationInput.value) + 1;
@@ -144,28 +162,46 @@ document.addEventListener("DOMContentLoaded", async () => {
async function handleFormSubmit(event) { async function handleFormSubmit(event) {
event.preventDefault(); event.preventDefault();
const data = await getDataProjectVideosFromApi(projectId); const data = await getDataProjectVideosFromApi(projectId);
const nameVideo = document.getElementById('name').value; const nameVideo = document.getElementById("name").value;
const videoDuration = durationInput.value; const videoDuration = durationInput.value;
const videoResolution = document.getElementById('resolution').value; const videoResolution = document.getElementById("resolution").value;
if (videoDuration <= 0) { if (videoDuration <= 0) {
alert('La durée de la vidéo doit être supérieur à 0'); alert("La durée de la vidéo doit être supérieur à 0");
return 0; return 0;
} }
if (!checkVideoPath(data, nameVideo) || !nameVideo.length>0) { if (!checkVideoPath(data, nameVideo) || !nameVideo.length > 0) {
alert('Le nom : " ' + nameVideo + ' " est déjà pris ou vide ! \n' + alert(
'veuillez en trouver un autre'); 'Le nom : " ' +
nameVideo +
' " est déjà pris ou vide ! \n' +
"veuillez en trouver un autre"
);
return 0; return 0;
} }
const choice = choiceSelect.value const choice = choiceSelect.value;
const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput); const measurementIds = getMeasurementsIdsFromForm(
postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration) choice,
.then(()=>{ firstInput,
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo + lastInput
'\nRésolution : ' + videoResolution + );
'\nDurée : ' + videoDuration + ' secondes'); postNewVideo(
}) projectId,
measurementIds,
nameVideo,
videoResolution,
videoDuration
).then(() => {
alert(
"Nouvelle vidéo enregistrée :\nNom : " +
nameVideo +
"\nRésolution : " +
videoResolution +
"\nDurée : " +
videoDuration +
" secondes"
);
});
} }
function navigateToProjects() { function navigateToProjects() {
@@ -183,19 +219,21 @@ document.addEventListener("DOMContentLoaded", async () => {
} }
function populateNumberBoard(length) { function populateNumberBoard(length) {
numberBoard.innerHTML = ''; numberBoard.innerHTML = "";
numberBoard.style.gridTemplateColumns = `repeat(auto-fill, minmax(50px, 1fr))`; numberBoard.style.gridTemplateColumns = `repeat(auto-fill, minmax(50px, 1fr))`;
for (let i = 1; i <= length; i++) { for (let i = 1; i <= length; i++) {
const numberButton = document.createElement('button'); const numberButton = document.createElement("button");
numberButton.classList.add('number-button'); numberButton.classList.add("number-button");
numberButton.textContent = i; numberButton.textContent = i;
numberButton.addEventListener('click', () => highlightNumber(numberButton)); numberButton.addEventListener("click", () =>
highlightNumber(numberButton)
);
numberBoard.appendChild(numberButton); numberBoard.appendChild(numberButton);
} }
} }
function highlightNumber(button) { function highlightNumber(button) {
button.classList.toggle('highlight'); button.classList.toggle("highlight");
} }
function updateRange() { function updateRange() {
@@ -218,7 +256,7 @@ function populateImageTable(DataMetrics) {
const tableBody = document.getElementById("imageSource"); const tableBody = document.getElementById("imageSource");
while (tableBody.rows.length > 0) { while (tableBody.rows.length > 0) {
tableBody.deleteRow(0); tableBody.deleteRow(0);
} }
let row = document.createElement("tr"); let row = document.createElement("tr");
let i = 0; let i = 0;
DataMetrics.forEach((measure) => { DataMetrics.forEach((measure) => {
@@ -239,8 +277,8 @@ function populateImageTable(DataMetrics) {
async function generateViewMetric(projectId) { async function generateViewMetric(projectId) {
const ctx = document.getElementById("metric_viewer").getContext("2d"); const ctx = document.getElementById("metric_viewer").getContext("2d");
const videoPlaceHolder = document.getElementById('video-container') const videoPlaceHolder = document.getElementById("video-container");
const deletePlaceHolder = document.getElementById('delete-placeholder') const deletePlaceHolder = document.getElementById("delete-placeholder");
let Hygrometrie = []; let Hygrometrie = [];
let Temperature = []; let Temperature = [];
@@ -262,29 +300,29 @@ async function generateViewMetric(projectId) {
measurements = await getDataMetrics(projectId); measurements = await getDataMetrics(projectId);
let samples; let samples;
if(videoId!=-1 ){ if (videoId != -1) {
currentVideoDatas = await getDataVideoFromApi(videoId); currentVideoDatas = await getDataVideoFromApi(videoId);
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]); samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
if(currentVideoDatas[0].status != 0){ if (currentVideoDatas[0].status != 0) {
videoPlaceHolder.innerHTML=` 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) tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
} else { } else {
deletePlaceHolder.innerHTML='' deletePlaceHolder.innerHTML = "";
videoPlaceHolder.innerHTML='' videoPlaceHolder.innerHTML = "";
samples=measurements.map(measurements => measurements.id); samples = measurements.map((measurements) => measurements.id);
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples); tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
} }
tempoMeasure.forEach((measure) => { tempoMeasure.forEach((measure) => {
@@ -292,7 +330,7 @@ async function generateViewMetric(projectId) {
Temperature.push(measure.temperature); Temperature.push(measure.temperature);
Hygrometrie.push(measure.humidity); Hygrometrie.push(measure.humidity);
}); });
populateImageTable(tempoMeasure) populateImageTable(tempoMeasure);
if (myChart) { if (myChart) {
myChart.destroy(); myChart.destroy();
@@ -336,32 +374,32 @@ async function generateViewMetric(projectId) {
}, },
}, },
}, },
}) });
} }
function showConfirmationAlert(videoId) { function showConfirmationAlert(videoId) {
const customAlert = document.getElementById('customAlert'); const customAlert = document.getElementById("customAlert");
const alertMessage = document.getElementById('alertMessage'); const alertMessage = document.getElementById("alertMessage");
const okBtn = document.getElementById('okBtn'); const okBtn = document.getElementById("okBtn");
const cancelBtn = document.getElementById('cancelBtn'); const cancelBtn = document.getElementById("cancelBtn");
alertMessage.textContent = 'Are you sure you want to delete this video?'; alertMessage.textContent = "Are you sure you want to delete this video?";
customAlert.style.display = 'block'; customAlert.style.display = "block";
okBtn.onclick = function() { okBtn.onclick = function () {
deleteVideo(videoId); deleteVideo(videoId);
customAlert.style.display = 'none'; customAlert.style.display = "none";
}; };
cancelBtn.onclick = function() { cancelBtn.onclick = function () {
customAlert.style.display = 'none'; customAlert.style.display = "none";
}; };
} }
function convertStringToArray(string) { function convertStringToArray(string) {
const numberStrings = string.replace(/[{}]/g, '').split(','); const numberStrings = string.replace(/[{}]/g, "").split(",");
// Trim whitespace and convert the string numbers to integers // Trim whitespace and convert the string numbers to integers
const numberArray = numberStrings.map(num => parseInt(num.trim(), 10)); const numberArray = numberStrings.map((num) => parseInt(num.trim(), 10));
return numberArray; return numberArray;
} }
@@ -373,30 +411,37 @@ function filterAndSortMeasurementsByIds(measurements, ids) {
} }
function filterAndSortMeasurementsByNumber(measurements, Numbers) { function filterAndSortMeasurementsByNumber(measurements, Numbers) {
// Filter measurements based on their position in the Numbers array // Filter measurements based on their position in the Numbers array
const filteredMeasurements = Numbers.map(index => measurements[index - 1]).filter(measurement => measurement !== undefined); const filteredMeasurements = Numbers.map(
(index) => measurements[index - 1]
).filter((measurement) => measurement !== undefined);
// Sort the filtered measurements by their timestamp // Sort the filtered measurements by their timestamp
return filteredMeasurements.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)); return filteredMeasurements.sort(
(a, b) => new Date(a.timestamp) - new Date(b.timestamp)
);
} }
function checkVideoPath(videos, name) { function checkVideoPath(videos, name) {
let res = true; let res = true;
videos.forEach(video => { videos.forEach((video) => {
const videoName = video.name; const videoName = video.name;
if(videoName==name) if (videoName == name) res = false;
res=false;
}); });
return res; return res;
} }
function getMeasurementsIdsFromForm(choice, firstInput, lastInput) { function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
if (choice === 'oneByOne') { if (choice === "oneByOne") {
const highlightedButtons = document.querySelectorAll('.number-button.highlight'); const highlightedButtons = document.querySelectorAll(
return Array.from(highlightedButtons).map(button => parseInt(button.textContent)); ".number-button.highlight"
);
return Array.from(highlightedButtons).map((button) =>
parseInt(button.textContent)
);
} else { } else {
const first = parseInt(firstInput.value); const first = parseInt(firstInput.value);
const last = parseInt(lastInput.value); const last = parseInt(lastInput.value);
const denominator = parseInt(document.getElementById('denominator').value); const denominator = parseInt(document.getElementById("denominator").value);
const measurementIds = new Set(); const measurementIds = new Set();
measurementIds.add(first); // Always include the first image measurementIds.add(first); // Always include the first image
@@ -412,25 +457,25 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
} }
} }
async function populateTimelapseLogic(placeholder,id) { async function populateTimelapseLogic(placeholder, id) {
const data = await getSingleProject(id); const data = await getSingleProject(id);
if(data.status == 0){ if (data.status == 0) {
placeholder.innerHTML = `<button class="default-button" id="show-form-button-camera"> placeholder.innerHTML = `<button class="default-button" id="show-form-button-project">
<span> Configurer la caméra </span> <span> Configurer la caméra </span>
</button>` </button>`;
} else if (data.status == 1) { } else if (data.status == 1) {
placeholder.innerHTML = `<button class="btn btn-danger" id="stop-camera"> placeholder.innerHTML = `<button class="default-delete-button" id="stop-camera">
<span> Stopper la prise d'images </span> <span> Stopper la prise d'images </span>
</button>`} </button>`;
else { } else {
placeholder.innerHTML = `` placeholder.innerHTML = ``;
} }
} }
function increment(id) { function increment(id) {
const input = document.getElementById(id); const input = document.getElementById(id);
input.value = parseInt(input.value) + 1; input.value = parseInt(input.value) + 1;
updateFrequencyText() updateFrequencyText();
} }
function decrement(id) { function decrement(id) {
@@ -438,37 +483,35 @@ function decrement(id) {
if (parseInt(input.value) > 0) { if (parseInt(input.value) > 0) {
input.value = parseInt(input.value) - 1; input.value = parseInt(input.value) - 1;
} }
updateFrequencyText() 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;
const minutes = document.getElementById('minutes').value; const minutes = document.getElementById("minutes").value;
const frequencyText = `une image sera prise toutes les ${days} jours ${hours} heures ${minutes} minutes`; const frequencyText = `une image sera prise toutes les ${days} jours ${hours} heures ${minutes} minutes`;
document.getElementById('frequency-text').innerHTML = frequencyText; document.getElementById("frequency-text").innerHTML = frequencyText;
} }
$( ".arrow-icon" ).click(function() { $(".arrow-icon").click(function () {
$(this).toggleClass("open"); $(this).toggleClass("open");
}); });
let titleIsReadable = true; let titleIsReadable = true;
function change_title_style(){ function change_title_style() {
const xyz = document.getElementById('xyzv'); const xyz = document.getElementById("xyzv");
const h3_title = document.getElementById('h3-title'); const h3_title = document.getElementById("h3-title");
if(titleIsReadable){ if (titleIsReadable) {
titleIsReadable = false; titleIsReadable = false;
xyz.style.display = 'block'; xyz.style.display = "block";
h3_title.style.display = 'none'; h3_title.style.display = "none";
} else { } else {
titleIsReadable = true; titleIsReadable = true;
xyz.style.display = 'none'; xyz.style.display = "none";
h3_title.style.display = 'block'; h3_title.style.display = "block";
} }
} }
change_title_style(); change_title_style();