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

maj

Browse Source
This commit is contained in:
anto
2025-01-16 20:38:04 +01:00
parent 51809f460e
commit 4aa36b67b2
3 changed files with 104 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/index.js
View File

@@ -15,7 +15,9 @@ function display_projects() {
<th>${global_project_list[i].name}</th> <th>${global_project_list[i].name}</th>
<th>${formatDate(global_project_list[i].start_date)}</th> <th>${formatDate(global_project_list[i].start_date)}</th>
<th>${global_project_list[i].status}</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 class="project_detail btn btn-primary">détails de ${
global_project_list[i].name
}</button></th>
</tr>`; </tr>`;
} }
table.innerHTML = datas; table.innerHTML = datas;
@@ -30,16 +32,16 @@ function display_projects() {
}); });
buttons[i].addEventListener("onclick", (event) => { buttons[i].addEventListener("onclick", (event) => {
// Send data to API and then navigate to projet_detail.html page // Send data to API and then navigate to projet_detail.html page
current_project=change_current_project(i); current_project = change_current_project(i);
}); });
} }
} }
getAllProject() getAllProject()
.then(project_list => { .then((project_list) => {
global_project_list = project_list; global_project_list = project_list;
// Call the next function here // Call the next function here
display_projects(); display_projects();
}) })
.catch(error => { .catch((error) => {
console.error(error); console.error(error);
}); });

209
js/projet_detail.js
View File

@@ -1,125 +1,96 @@
let myChart; // Declare a global variable to hold the chart instance let myChart;
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
// Objects / variables
const video_selector = document.getElementById("video_selector");
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get("id"); const projectId = urlParams.get("id");
const data = await getAllProject(); const data = await getAllProject();
const DataMetrics = await getDataMetrics(projectId);
document.getElementById("name_project").innerHTML = data[projectId].name; document.getElementById("name_project").innerHTML = data[projectId].name;
const videoSelector = document.getElementById("video_selector");
const numbers = [1, 25, 68, 74]; // Example array of numbers const numberPicker = document.getElementById('number-picker');
const numberPicker = document.getElementById('number-picker'); const resultContainer = document.getElementById('result-container');
const resultContainer = document.getElementById('result-container'); const choiceSelect = document.getElementById('choice');
const choiceSelect = document.getElementById('choice'); const oneByOneContainer = document.getElementById('one-by-one-container');
const oneByOneContainer = document.getElementById('one-by-one-container'); const addNumberButton = document.getElementById('add-number-button');
const addNumberButton = document.getElementById('add-number-button'); const formContainer = document.getElementById('form-container');
const durationInput = document.getElementById('duration');
const tableBody = document.getElementById("imageSource");
const tableImage = document.getElementById("content1");
let selectedNumbers = []; let selectedNumbers = [];
choiceSelect.addEventListener('change', () => { choiceSelect.addEventListener('change', toggleOneByOneContainer);
if (choiceSelect.value === 'oneByOne') { addNumberButton.addEventListener('click', addSelectedNumber);
oneByOneContainer.style.display = 'block'; videoSelector.addEventListener("change", () => generateViewMetric(projectId));
} else { document.getElementById('show-form-button').addEventListener('click', showForm);
oneByOneContainer.style.display = 'none'; document.getElementById('close-form-button').addEventListener('click', hideForm);
} document.getElementById('increment-button').addEventListener('click', incrementDuration);
}); document.getElementById('decrement-button').addEventListener('click', decrementDuration);
document.getElementById('my-form').addEventListener('submit', handleFormSubmit);
document.getElementById("projets").addEventListener("click", navigateToProjects);
document.getElementById("toggle-view").addEventListener("click", toggleView);
// Add number to selectedNumbers array generateViewMetric(projectId);
addNumberButton.addEventListener('click', () => { PopulateSelect(videoSelector, projectId);
populateImageTable(DataMetrics);
function toggleOneByOneContainer() {
oneByOneContainer.style.display = choiceSelect.value === 'oneByOne' ? 'block' : 'none';
}
function addSelectedNumber() {
const selectedNumber = parseInt(numberPicker.value, 10); const selectedNumber = parseInt(numberPicker.value, 10);
if (!selectedNumbers.includes(selectedNumber)) { if (!selectedNumbers.includes(selectedNumber)) {
selectedNumbers.push(selectedNumber); selectedNumbers.push(selectedNumber);
numberPicker.remove(numberPicker.selectedIndex); numberPicker.remove(numberPicker.selectedIndex);
} }
}); }
// Initialisation function showForm() {
generateViewMetric(projectId); formContainer.style.display = 'flex';
}
PopulateSelect(video_selector, projectId); function hideForm() {
formContainer.style.display = 'none';
}
video_selector.addEventListener("change", () => { function incrementDuration() {
generateViewMetric(projectId); durationInput.value = parseInt(durationInput.value) + 1;
}); }
// button function decrementDuration() {
if (parseInt(durationInput.value) > 0) {
document.getElementById('show-form-button').addEventListener('click', function() {
document.getElementById('form-container').style.display = 'flex';
});
document.getElementById('close-form-button').addEventListener('click', function() {
document.getElementById('form-container').style.display = 'none';
});
document.getElementById('increment-button').addEventListener('click', function() {
let durationInput = document.getElementById('duration');
durationInput.value = parseInt(durationInput.value) + 1;
});
document.getElementById('decrement-button').addEventListener('click', function() {
let durationInput = document.getElementById('duration');
if (parseInt(durationInput.value) > 0) {
durationInput.value = parseInt(durationInput.value) - 1; durationInput.value = parseInt(durationInput.value) - 1;
}
});
document.getElementById('my-form').addEventListener('submit', async function(event) {
event.preventDefault();
const data=await getDataProjectVideosFromApi(projectId);
const name_video = document.getElementById('name').value
const video_duration = document.getElementById('duration').value
if(video_duration>0){
if(checkVideoPath(data, name_video)){
alert('Nouvelle vidéo enregistrée :\nNom : ' + name_video +
'\nRésolution : ' + document.getElementById('resolution').value +
'\nDurée : ' + video_duration + ' secondes');
//project_id, measurement_ids, video_name, resolution, duration, fps, status
} else {
alert('Le nom : "'+ name_video + '" est déjà pris ! \n' +
'veuillez en trouver un autre')
} }
} else {
alert('La durée de la vidéo doit être suppérieur à 0')
} }
});
document.getElementById("projets").addEventListener("click", () => { async function handleFormSubmit(event) {
event.preventDefault();
const data = await getDataProjectVideosFromApi(projectId);
const nameVideo = document.getElementById('name').value;
const videoDuration = durationInput.value;
if (videoDuration > 0) {
if (checkVideoPath(data, nameVideo)) {
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
'\nRésolution : ' + document.getElementById('resolution').value +
'\nDurée : ' + videoDuration + ' secondes');
} else {
alert('Le nom : "' + nameVideo + '" est déjà pris ! \n' +
'veuillez en trouver un autre');
}
} else {
alert('La durée de la vidéo doit être supérieur à 0');
}
}
function navigateToProjects() {
window.location.href = "../index.html"; window.location.href = "../index.html";
current_project = ""; }
});
function toggleView() {
fetch("https://timelapse.kerboul.me/api/smile")
.then((response) => response.blob())
.then((blob) => {
const url = URL.createObjectURL(blob);
let tableBody = document.getElementById("imageSource");
let row = document.createElement("tr");
for (let i = 0; i < 1500; i++) {
let imageTD = document.createElement("td");
imageTD.innerHTML = `<img id="${i}" src="${url}" />`;
row.appendChild(imageTD);
if ((i + 1) % 3 === 0 && i !== 0) {
tableBody.appendChild(row);
row = document.createElement("tr"); // Create a new row
}
}
// Append the last row if there are remaining images
if (row.childNodes.length > 0) {
tableBody.appendChild(row);
}
});
// Add event listener for the toggle button
document.getElementById("toggle-view").addEventListener("click", () => {
const tableImage = document.getElementById("content1");
if (tableImage.classList.contains("hiddenTable")) { if (tableImage.classList.contains("hiddenTable")) {
tableImage.classList.remove("hiddenTable"); tableImage.classList.remove("hiddenTable");
tableImage.classList.add("full-view"); tableImage.classList.add("full-view");
@@ -129,7 +100,26 @@ document.getElementById('my-form').addEventListener('submit', async function(eve
tableImage.classList.add("hiddenTable"); tableImage.classList.add("hiddenTable");
document.getElementById("toggle-view").innerHTML = "See all images"; document.getElementById("toggle-view").innerHTML = "See all images";
} }
}); }
function populateImageTable(DataMetrics) {
let row = document.createElement("tr");
let i = 0;
DataMetrics.forEach((measure) => {
let imageTD = document.createElement("td");
imageTD.innerHTML = `<img id="${i}" src="${measure.image_path}" />`;
row.appendChild(imageTD);
if ((i + 1) % 3 === 0 && i !== 0) {
tableBody.appendChild(row);
row = document.createElement("tr");
}
if (row.childNodes.length > 0) {
tableBody.appendChild(row);
}
i++;
});
}
}); });
async function generateViewMetric(projectId) { async function generateViewMetric(projectId) {
@@ -139,9 +129,8 @@ async function generateViewMetric(projectId) {
let datesMeasurement = []; let datesMeasurement = [];
let measurements; let measurements;
let current_video_datas; let currentVideoDatas;
// Wait for the video_selector to be populated
await new Promise((resolve) => { await new Promise((resolve) => {
const checkExist = setInterval(() => { const checkExist = setInterval(() => {
if (document.getElementById("video_selector").options.length > 0) { if (document.getElementById("video_selector").options.length > 0) {
@@ -154,22 +143,20 @@ 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);
current_video_datas = await getDataVideoFromApi(videoId); currentVideoDatas = await getDataVideoFromApi(videoId);
let samples = convertStringToArray(current_video_datas[0]["measurement_ids"]); let samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
tempoMeasure = filterAndSortMeasurementsByIds(measurements,samples) tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
tempoMeasure.forEach((measure) => { tempoMeasure.forEach((measure) => {
datesMeasurement.push(measure.timestamp) datesMeasurement.push(measure.timestamp);
Temperature.push(measure.temperature) Temperature.push(measure.temperature);
Hygrometrie.push(measure.humidity) Hygrometrie.push(measure.humidity);
}); });
// Destroy the existing chart instance if it exists
if (myChart) { if (myChart) {
myChart.destroy(); myChart.destroy();
} }
// Create a new chart instance
myChart = new Chart(ctx, { myChart = new Chart(ctx, {
type: "line", type: "line",
data: { data: {
@@ -209,4 +196,4 @@ async function generateViewMetric(projectId) {
}, },
}, },
}); });
} }

1
js/utilities/routes.js
View File

@@ -26,7 +26,6 @@ function getAllProject() {
dataType: "json", dataType: "json",
}).then((data) => { }).then((data) => {
// If the request is successful, store the data in the cache and return it // If the request is successful, store the data in the cache and return it
localStorage.setItem("project_list", JSON.stringify(data));
return data; return data;
}); });
} }