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

redesign avec edmée, super déçue car pas bouboule orange

Browse Source
This commit is contained in:
arussac
2025-03-22 23:33:43 +01:00
parent 88becb43cf
commit e9610878ac
9 changed files with 699 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
js/index.js
View File

@@ -1,7 +1,30 @@
// Function to display projects in a table
function display_projects() {
// Get data from API and then generate HTML code to display the data in a table
const table = document.getElementById("table-projects");
document.addEventListener("DOMContentLoaded", () => {
getAllProject()
.then((project_list) => {
global_project_list = project_list;
setupCarousel(global_project_list);
})
.catch((error) => {
console.error(error);
});
});
function formatStatus(status) {
switch (status) {
case 0:
return "brouillon";
case 1:
return "en cours";
case 2:
return "terminé";
case 3:
return "En cours de génération";
default:
return "inconnu";
}
}
function setupCarousel(global_project_list) {
const formContainer = document.getElementById('form-container');
function showForm() {
@@ -20,13 +43,13 @@ function display_projects() {
const nameProject = document.getElementById('name').value;
const description = document.getElementById('description').value;
if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
'veuillez en trouver un autre');
return 0;
return;
}
PostNewProject(nameProject, description).then(() => {
location.reload();})
location.reload();
});
}
function checkName(Projects, name) {
@@ -39,70 +62,83 @@ function display_projects() {
return res;
}
let datas = `<tr>
<th>Id</th>
<th>Name</th>
<th>Date</th>
<th>Status</th>
<th>Actions</th>
<th>Delete Project</th>
</tr> `;
for (let i = 0; i < global_project_list.length; i++) {
datas += `<tr>
<th>${global_project_list[i].id}</th>
<th>${global_project_list[i].name}</th>
<th>${formatDate(global_project_list[i].start_date)}</th>
<th>${global_project_list[i].status}</th>
<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-danger">Delete</button></th>
</tr>`;
}
table.innerHTML = datas;
const carousel = document.getElementById('carousel');
let currentIndex = 0;
// Select all the buttons_access with the class button_project
const buttons_access = document.getElementsByClassName("project_detail");
const buttons_delete = document.getElementsByClassName("project_delete");
// Add an event listener to each button
for (let i = 0; i < buttons_access.length; i++) {
buttons_access[i].addEventListener("click", (event) => {
// Send data to API and then navigate to projet_detail.html page
window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
});
buttons_access[i].addEventListener("click", (event) => {
// Send data to API and then navigate to projet_detail.html page
current_project = change_current_project(i);
});
function updateCarousel() {
const projectWidth = document.querySelector('.project').clientWidth;
carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
}
for (let i = 0; i < buttons_delete.length; i++) {
buttons_delete[i].addEventListener("click", (event) => {
const projectName = global_project_list[i].name;
function showPrevProject() {
if (currentIndex > 0) {
currentIndex--;
updateCarousel();
} else {
currentIndex = global_project_list.length - 1;
updateCarousel();
}
}
function showNextProject() {
if (currentIndex < global_project_list.length - 1) {
currentIndex++;
updateCarousel();
} else {
currentIndex = 0;
updateCarousel();
}
}
document.getElementById('prev-button').addEventListener('click', showPrevProject);
document.getElementById('next-button').addEventListener('click', showNextProject);
// Populate the carousel with project data
global_project_list.forEach(project => {
const projectDiv = document.createElement('div');
projectDiv.classList.add('project');
projectDiv.innerHTML = `
<h2>Nom : ${project.name}</h2>
<p>Date : ${formatDate(project.start_date)}</p>
<p>Status : ${formatStatus(parseInt(project.status))}</p>
<div class="project_buttons">
<button class="default-access-button">détails de ${project.name}</button>
<button class="default-delete-button">Supprimer</button>
</div>
`;
carousel.appendChild(projectDiv);
// Add event listener for project details button
const detailButton = projectDiv.querySelector('.default-access-button');
detailButton.addEventListener('click', (event) => {
event.stopPropagation();
window.location.href = `html/projet_detail.html?id=${project.id}`;
change_current_project(global_project_list.indexOf(project));
});
// Add event listener for project delete button
const deleteButton = projectDiv.querySelector('.default-delete-button');
deleteButton.addEventListener('click', (event) => {
event.stopPropagation();
const projectName = project.name;
document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
document.getElementById('customAlert').style.display = 'block';
document.getElementById('okBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
// Call your delete function here
deleteProject(global_project_list[i].id).then(()=>{
deleteProject(project.id).then(() => {
location.reload();
})
});
};
document.getElementById('cancelBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
};
});
}
}
getAllProject()
.then((project_list) => {
global_project_list = project_list;
// Call the next function here
display_projects();
})
.catch((error) => {
console.error(error);
});
// Initial update to set the correct position
updateCarousel();
}

24
js/projet_detail.js
View File

@@ -163,12 +163,6 @@ document.addEventListener("DOMContentLoaded", async () => {
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
'\nRésolution : ' + videoResolution +
'\nDurée : ' + videoDuration + ' secondes');
}).then(()=>{
getDataProjectVideosFromApi(projectId).then((data)=>{
idVideo = data[data.length-1].id
console.log(idVideo)
renderVideo(idVideo)
})
})
}
@@ -181,11 +175,9 @@ document.addEventListener("DOMContentLoaded", async () => {
if (tableImage.classList.contains("hiddenTable")) {
tableImage.classList.remove("hiddenTable");
tableImage.classList.add("full-view");
document.getElementById("toggle-view").innerHTML = "See first images";
} else {
tableImage.classList.remove("full-view");
tableImage.classList.add("hiddenTable");
document.getElementById("toggle-view").innerHTML = "See all images";
}
}
@@ -230,7 +222,7 @@ function populateImageTable(DataMetrics) {
let i = 0;
DataMetrics.forEach((measure) => {
let imageTD = document.createElement("td");
imageTD.innerHTML = `<a href="${api_url}/images/${measure.project_id}/${measure.order_id}" target="_blank"><img id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
imageTD.innerHTML = `<a href="${api_url}/images/${measure.project_id}/${measure.order_id}" target="_blank"><img class="picture_placeHolder"id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
row.appendChild(imageTD);
if ((i + 1) % 3 === 0 && i !== 0) {
@@ -274,7 +266,7 @@ async function generateViewMetric(projectId) {
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
if(currentVideoDatas[0].status != 0){
videoPlaceHolder.innerHTML=`
<video width="600" controls>
<video class="video" controls>
<source src="${api_url}/videos/file/${videoId}" type="video/mp4">
Your browser does not support the video tag.
</video>`
@@ -282,13 +274,15 @@ async function generateViewMetric(projectId) {
videoPlaceHolder.innerHTML=`<h2>La vidéo n'a pas été rendered</h2>`
}
deletePlaceHolder.innerHTML=`
<button id="delete-video" class="btn btn-danger delete-video-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", ()=>{
showConfirmationAlert(videoId)
})
tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
} else {
deletePlaceHolder.innerHTML=''
videoPlaceHolder.innerHTML=''
samples=measurements.map(measurements => measurements.id);
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
}
@@ -309,7 +303,7 @@ async function generateViewMetric(projectId) {
labels: datesMeasurement,
datasets: [
{
label: "Température (F°)",
label: "Température (C°)",
data: Temperature,
fill: false,
borderColor: "rgba(75, 192, 192, 1)",
@@ -420,7 +414,7 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
async function populateTimelapseLogic(placeholder,id) {
const data = await getSingleProject(id);
if(data.status == 0){
placeholder.innerHTML = `<button class="btn btn-primary" id="show-form-button-camera">
placeholder.innerHTML = `<button class="default-button" id="show-form-button-camera">
<span> Configurer la caméra </span>
</button>`
} else if (data.status == 1) {
@@ -455,4 +449,6 @@ function updateFrequencyText() {
document.getElementById('frequency-text').innerHTML = frequencyText;
}
$( ".arrow-icon" ).click(function() {
$(this).toggleClass("open");
});