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
js/index.js
View File

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

133
js/projet_detail.js
View File

@@ -11,7 +11,6 @@ document.addEventListener("DOMContentLoaded", async () => {
} else {
console.error("Project not found");
}
const videoSelector = document.getElementById("video_selector");
const numberPicker = document.getElementById('number-picker');
const choiceSelect = document.getElementById('choice');
@@ -22,41 +21,11 @@ document.addEventListener("DOMContentLoaded", async () => {
const durationInput = document.getElementById('duration');
const tableImage = document.getElementById("content1");
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
const firstInput = document.getElementById('first');
const lastInput = document.getElementById('last');
let selectedNumbers = [];
choiceSelect.addEventListener('change', toggleContainers);
@@ -64,38 +33,7 @@ document.addEventListener("DOMContentLoaded", async () => {
if (addNumberButton) {
addNumberButton.addEventListener('click', addSelectedNumber);
}
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 = '';
}
});
videoSelector.addEventListener("change", () => generateViewMetric(projectId));
document.getElementById('show-form-button').addEventListener('click', showForm);
document.getElementById('close-form-button').addEventListener('click', hideForm);
document.getElementById('increment-button').addEventListener('click', incrementDuration);
@@ -104,10 +42,12 @@ document.addEventListener("DOMContentLoaded", async () => {
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') {
@@ -125,7 +65,6 @@ document.addEventListener("DOMContentLoaded", async () => {
setRequiredAttributes();
}
}
toggleContainers();
function setRequiredAttributes() {
@@ -159,7 +98,6 @@ document.addEventListener("DOMContentLoaded", async () => {
function hideForm() {
formContainer.style.display = 'none';
}
function incrementDuration() {
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');
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' +
'veuillez en trouver un autre');
return 0;
return 0;
}
const choice = choiceSelect.value;
const measurementIds = getMeasurementsIdsFromForm(choice, firstInput, lastInput);
const choice = choiceSelect.value
const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput);
postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
.then(() => {
.then(()=>{
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
'\nRésolution : ' + videoResolution +
'\nDurée : ' + videoDuration + ' secondes');
});
})
}
function navigateToProjects() {
@@ -248,7 +186,7 @@ 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) => {
@@ -269,7 +207,8 @@ function populateImageTable(DataMetrics) {
async function generateViewMetric(projectId) {
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 Temperature = [];
@@ -288,20 +227,26 @@ async function generateViewMetric(projectId) {
});
const videoId = document.getElementById("video_selector").value;
measurements = await getDataMetrics(projectId);
let samples;
if (videoId != -1) {
if(videoId!=-1){
currentVideoDatas = await getDataVideoFromApi(videoId);
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
videoPlaceHolder.innerHTML = `
<video width="600" controls>
<source src="${api_url}/videos/file/${videoId}" type="video/mp4">
Your browser does not support the video tag.
</video>`;
tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
videoPlaceHolder.innerHTML=`
<video width="600" controls>
<source src="${api_url}/videos/file/${videoId}" type="video/mp4">
Your browser does not support the video tag.
</video>`
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 {
samples = measurements.map(measurements => measurements.id);
samples=measurements.map(measurements => measurements.id);
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
}
tempoMeasure.forEach((measure) => {
@@ -309,7 +254,7 @@ async function generateViewMetric(projectId) {
Temperature.push(measure.temperature);
Hygrometrie.push(measure.humidity);
});
populateImageTable(tempoMeasure);
populateImageTable(tempoMeasure)
if (myChart) {
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';
};
}