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>
<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 -->
<div id="form-container" class="form-container" style="display: none">
<div class="form-content">
@@ -91,15 +100,17 @@
<div id="section" class="container mt-5">
<div class="row">
<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">
<span> Home </span>
</button>
</div>
<div class="buttons-container" id="delete-placeholder" style="float: left; width: 20%">
</div>
<h3
id="name_project"
class="text-black"
style="float: left; width: 50%"
style="float: right; width: 50%"
></h3>
</div>
</div>

98
js/projet_detail.js
View File

@@ -11,6 +11,7 @@ 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');
@@ -21,11 +22,41 @@ 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);
@@ -33,7 +64,38 @@ document.addEventListener("DOMContentLoaded", async () => {
if (addNumberButton) {
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('close-form-button').addEventListener('click', hideForm);
document.getElementById('increment-button').addEventListener('click', incrementDuration);
@@ -42,12 +104,10 @@ 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') {
@@ -65,6 +125,7 @@ document.addEventListener("DOMContentLoaded", async () => {
setRequiredAttributes();
}
}
toggleContainers();
function setRequiredAttributes() {
@@ -98,6 +159,7 @@ document.addEventListener("DOMContentLoaded", async () => {
function hideForm() {
formContainer.style.display = 'none';
}
function incrementDuration() {
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');
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;
}
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() {
@@ -186,7 +248,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) => {
@@ -207,7 +269,7 @@ 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');
let Hygrometrie = [];
let Temperature = [];
@@ -229,17 +291,17 @@ async function generateViewMetric(projectId) {
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=`
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)
</video>`;
tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
} else {
samples=measurements.map(measurements => measurements.id);
samples = measurements.map(measurements => measurements.id);
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
}
tempoMeasure.forEach((measure) => {
@@ -247,7 +309,7 @@ async function generateViewMetric(projectId) {
Temperature.push(measure.temperature);
Hygrometrie.push(measure.humidity);
});
populateImageTable(tempoMeasure)
populateImageTable(tempoMeasure);
if (myChart) {
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;
}
}
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;
}
}