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

manager de projet (create_delete)

Browse Source
This commit is contained in:
arussac
2025-02-15 18:16:03 +01:00
parent 7660d59b24
commit a4154fd920
3 changed files with 111 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
html/projet_detail.html
View File

@@ -22,6 +22,15 @@
/> />
</head> </head>
<body> <body>
<div id="customAlert" class="modal">
<div class="modal-content">
<p id="alertMessage">This is a custom alert!</p>
<div class="modal-buttons">
<button class="btn btn-primary"id="cancelBtn">Cancel</button>
<button class="btn btn-primary"id="okBtn">OK</button>
</div>
</div>
</div>
<!-- formulaire --> <!-- formulaire -->
<div id="form-container" class="form-container" style="display: none"> <div id="form-container" class="form-container" style="display: none">
<div class="form-content"> <div class="form-content">
@@ -91,15 +100,17 @@
<div id="section" class="container mt-5"> <div id="section" class="container mt-5">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="buttons-container" style="float: left; width: 20%"> <div class="buttons-container" style="float: left; width: 10%">
<button class="btn btn-primary" id="projets"> <button class="btn btn-primary" id="projets">
<span> Home </span> <span> Home </span>
</button> </button>
</div> </div>
<div class="buttons-container" id="delete-placeholder" style="float: left; width: 20%">
</div>
<h3 <h3
id="name_project" id="name_project"
class="text-black" class="text-black"
style="float: left; width: 50%" style="float: right; width: 50%"
></h3> ></h3>
</div> </div>
</div> </div>

106
js/projet_detail.js
View File

@@ -11,6 +11,7 @@ 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');
@@ -21,11 +22,41 @@ 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);
@@ -33,7 +64,38 @@ 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);
@@ -42,12 +104,10 @@ 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') {
@@ -65,6 +125,7 @@ document.addEventListener("DOMContentLoaded", async () => {
setRequiredAttributes(); setRequiredAttributes();
} }
} }
toggleContainers(); toggleContainers();
function setRequiredAttributes() { function setRequiredAttributes() {
@@ -98,6 +159,7 @@ 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;
} }
@@ -119,19 +181,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() {
@@ -186,7 +248,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) => {
@@ -207,7 +269,7 @@ 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');
let Hygrometrie = []; let Hygrometrie = [];
let Temperature = []; let Temperature = [];
@@ -229,17 +291,17 @@ 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"]);
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) 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) => {
@@ -247,7 +309,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();
@@ -291,5 +353,5 @@ async function generateViewMetric(projectId) {
}, },
}, },
}, },
}) });
} }

13
js/utilities/routes.js
View File

@@ -134,3 +134,16 @@ async function deleteProject(id){
throw error; throw error;
} }
} }
async function deleteVideo(id){
try {
const response = await $.ajax({
url: api_url.concat(`/videos/${id}`),
method: "DELETE",
}).then(()=>{
alert("Video supprimé avec succès")
})
} catch (error) {
console.error("Error deleting video, video id :"+ id+"\n error :"+error);
throw error;
}
}