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

manager de video (create_delete)

Browse Source
This commit is contained in:
arussac
2025-02-15 19:20:43 +01:00
parent a4154fd920
commit 7bbafe906b
4 changed files with 51 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
html/projet_detail.html
View File

@@ -26,7 +26,7 @@
<div class="modal-content"> <div class="modal-content">
<p id="alertMessage">This is a custom alert!</p> <p id="alertMessage">This is a custom alert!</p>
<div class="modal-buttons"> <div class="modal-buttons">
<button class="btn btn-primary"id="cancelBtn">Cancel</button> <button class="btn btn-danger"id="cancelBtn">Cancel</button>
<button class="btn btn-primary"id="okBtn">OK</button> <button class="btn btn-primary"id="okBtn">OK</button>
</div> </div>
</div> </div>

2
index.html
View File

@@ -16,7 +16,7 @@
<div class="modal-content"> <div class="modal-content">
<p id="alertMessage">This is a custom alert!</p> <p id="alertMessage">This is a custom alert!</p>
<div class="modal-buttons"> <div class="modal-buttons">
<button class="btn btn-primary"id="cancelBtn">Cancel</button> <button class="btn btn-danger"id="cancelBtn">Cancel</button>
<button class="btn btn-primary"id="okBtn">OK</button> <button class="btn btn-primary"id="okBtn">OK</button>
</div> </div>
</div> </div>

2
js/index.js
View File

@@ -54,7 +54,7 @@ function display_projects() {
<th><button class="project_detail btn btn-primary">détails de ${ <th><button class="project_detail btn btn-primary">détails de ${
global_project_list[i].name global_project_list[i].name
}</button></th> }</button></th>
<th><button name="${i}" class="project_delete btn btn-primary">Delete</button></th> <th><button name="${i}" class="project_delete btn btn-danger">Delete</button></th>
</tr>`; </tr>`;
} }
table.innerHTML = datas; table.innerHTML = datas;

133
js/projet_detail.js
View File

@@ -11,7 +11,6 @@ document.addEventListener("DOMContentLoaded", async () => {
} 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');
@@ -22,41 +21,11 @@ document.addEventListener("DOMContentLoaded", async () => {
const durationInput = document.getElementById('duration'); 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');
const deletePlaceHolder = document.getElementById('delete-placeholder');
// Populate the video selector and then get the initial videoId
await PopulateSelect(videoSelector, projectId);
const videoId = videoSelector.value;
const videoName = videoSelector.options[videoSelector.selectedIndex].innerHTML;
if (videoId != -1) {
deletePlaceHolder.innerHTML = `
<button class="btn btn-primary" id="delete_current">
<span> Delete </span>
</button>
`;
// Ensure the delete button event listener is added after the button is created
document.getElementById('delete_current').addEventListener("click", (event) => {
document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer la vidéo : ${videoName} ?`;
document.getElementById('customAlert').style.display = 'block';
document.getElementById('okBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
// Call your delete function here
deleteVideo(videoId);
};
document.getElementById('cancelBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
};
});
}
// 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');
let selectedNumbers = []; let selectedNumbers = [];
choiceSelect.addEventListener('change', toggleContainers); choiceSelect.addEventListener('change', toggleContainers);
@@ -64,38 +33,7 @@ document.addEventListener("DOMContentLoaded", async () => {
if (addNumberButton) { if (addNumberButton) {
addNumberButton.addEventListener('click', addSelectedNumber); addNumberButton.addEventListener('click', addSelectedNumber);
} }
videoSelector.addEventListener("change", () => generateViewMetric(projectId));
videoSelector.addEventListener("change", () => {
const newVideoId = videoSelector.value;
const newVideoName = videoSelector.options[videoSelector.selectedIndex].innerHTML;
generateViewMetric(projectId);
if (newVideoId != -1) {
deletePlaceHolder.innerHTML = `
<button class="btn btn-primary" id="delete_current">
<span> Delete </span>
</button>
`;
// Re-add the event listener for the new delete button
document.getElementById('delete_current').addEventListener("click", (event) => {
document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer la vidéo : ${newVideoName} ?`;
document.getElementById('customAlert').style.display = 'block';
document.getElementById('okBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
// Call your delete function here
deleteVideo(videoId)
};
document.getElementById('cancelBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
};
});
} else {
deletePlaceHolder.innerHTML = '';
}
});
document.getElementById('show-form-button').addEventListener('click', showForm); document.getElementById('show-form-button').addEventListener('click', showForm);
document.getElementById('close-form-button').addEventListener('click', hideForm); document.getElementById('close-form-button').addEventListener('click', hideForm);
document.getElementById('increment-button').addEventListener('click', incrementDuration); document.getElementById('increment-button').addEventListener('click', incrementDuration);
@@ -104,10 +42,12 @@ document.addEventListener("DOMContentLoaded", async () => {
document.getElementById("projets").addEventListener("click", navigateToProjects); 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);
function toggleContainers() { function toggleContainers() {
if (choiceSelect.value === 'oneByOne') { if (choiceSelect.value === 'oneByOne') {
@@ -125,7 +65,6 @@ document.addEventListener("DOMContentLoaded", async () => {
setRequiredAttributes(); setRequiredAttributes();
} }
} }
toggleContainers(); toggleContainers();
function setRequiredAttributes() { function setRequiredAttributes() {
@@ -159,7 +98,6 @@ document.addEventListener("DOMContentLoaded", async () => {
function hideForm() { function hideForm() {
formContainer.style.display = 'none'; formContainer.style.display = 'none';
} }
function incrementDuration() { function incrementDuration() {
durationInput.value = parseInt(durationInput.value) + 1; durationInput.value = parseInt(durationInput.value) + 1;
} }
@@ -181,19 +119,19 @@ document.addEventListener("DOMContentLoaded", async () => {
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('Le nom : " ' + nameVideo + ' " est déjà pris ou vide ! \n' +
'veuillez en trouver un autre'); '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(choice,firstInput,lastInput);
postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration) postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
.then(() => { .then(()=>{
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo + alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
'\nRésolution : ' + videoResolution + '\nRésolution : ' + videoResolution +
'\nDurée : ' + videoDuration + ' secondes'); '\nDurée : ' + videoDuration + ' secondes');
}); })
} }
function navigateToProjects() { function navigateToProjects() {
@@ -248,7 +186,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) => {
@@ -269,7 +207,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')
let Hygrometrie = []; let Hygrometrie = [];
let Temperature = []; let Temperature = [];
@@ -288,20 +227,26 @@ 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; 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"]);
videoPlaceHolder.innerHTML = ` videoPlaceHolder.innerHTML=`
<video width="600" controls> <video width="600" 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>`
tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples); deletePlaceHolder.innerHTML=`
<button id="delete-video" class="btn btn-danger delete-video-button" data-video-id="${videoId}">Delete Video</button>
`
document.getElementById("delete-video").addEventListener("click", ()=>{
showConfirmationAlert(videoId)
})
tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
} else { } else {
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) => {
@@ -309,7 +254,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();
@@ -353,5 +298,23 @@ async function generateViewMetric(projectId) {
}, },
}, },
}, },
}); })
} }
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';
};
}