maj
This commit is contained in:
anto
@@ -1,125 +1,96 @@
|
||||
let myChart; // Declare a global variable to hold the chart instance
|
||||
let myChart;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
// Objects / variables
|
||||
const video_selector = document.getElementById("video_selector");
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const projectId = urlParams.get("id");
|
||||
|
||||
const data = await getAllProject();
|
||||
const DataMetrics = await getDataMetrics(projectId);
|
||||
|
||||
document.getElementById("name_project").innerHTML = data[projectId].name;
|
||||
|
||||
|
||||
const numbers = [1, 25, 68, 74]; // Example array of numbers
|
||||
const numberPicker = document.getElementById('number-picker');
|
||||
const resultContainer = document.getElementById('result-container');
|
||||
const choiceSelect = document.getElementById('choice');
|
||||
const oneByOneContainer = document.getElementById('one-by-one-container');
|
||||
const addNumberButton = document.getElementById('add-number-button');
|
||||
const videoSelector = document.getElementById("video_selector");
|
||||
const numberPicker = document.getElementById('number-picker');
|
||||
const resultContainer = document.getElementById('result-container');
|
||||
const choiceSelect = document.getElementById('choice');
|
||||
const oneByOneContainer = document.getElementById('one-by-one-container');
|
||||
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', () => {
|
||||
if (choiceSelect.value === 'oneByOne') {
|
||||
oneByOneContainer.style.display = 'block';
|
||||
} else {
|
||||
oneByOneContainer.style.display = 'none';
|
||||
}
|
||||
});
|
||||
choiceSelect.addEventListener('change', toggleOneByOneContainer);
|
||||
addNumberButton.addEventListener('click', addSelectedNumber);
|
||||
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);
|
||||
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
|
||||
addNumberButton.addEventListener('click', () => {
|
||||
generateViewMetric(projectId);
|
||||
PopulateSelect(videoSelector, projectId);
|
||||
populateImageTable(DataMetrics);
|
||||
|
||||
function toggleOneByOneContainer() {
|
||||
oneByOneContainer.style.display = choiceSelect.value === 'oneByOne' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function addSelectedNumber() {
|
||||
const selectedNumber = parseInt(numberPicker.value, 10);
|
||||
if (!selectedNumbers.includes(selectedNumber)) {
|
||||
selectedNumbers.push(selectedNumber);
|
||||
numberPicker.remove(numberPicker.selectedIndex);
|
||||
selectedNumbers.push(selectedNumber);
|
||||
numberPicker.remove(numberPicker.selectedIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialisation
|
||||
generateViewMetric(projectId);
|
||||
function showForm() {
|
||||
formContainer.style.display = 'flex';
|
||||
}
|
||||
|
||||
PopulateSelect(video_selector, projectId);
|
||||
function hideForm() {
|
||||
formContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
video_selector.addEventListener("change", () => {
|
||||
generateViewMetric(projectId);
|
||||
});
|
||||
function incrementDuration() {
|
||||
durationInput.value = parseInt(durationInput.value) + 1;
|
||||
}
|
||||
|
||||
// button
|
||||
|
||||
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) {
|
||||
function decrementDuration() {
|
||||
if (parseInt(durationInput.value) > 0) {
|
||||
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";
|
||||
current_project = "";
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
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");
|
||||
function toggleView() {
|
||||
if (tableImage.classList.contains("hiddenTable")) {
|
||||
tableImage.classList.remove("hiddenTable");
|
||||
tableImage.classList.add("full-view");
|
||||
@@ -129,7 +100,26 @@ document.getElementById('my-form').addEventListener('submit', async function(eve
|
||||
tableImage.classList.add("hiddenTable");
|
||||
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) {
|
||||
@@ -139,9 +129,8 @@ async function generateViewMetric(projectId) {
|
||||
let datesMeasurement = [];
|
||||
|
||||
let measurements;
|
||||
let current_video_datas;
|
||||
let currentVideoDatas;
|
||||
|
||||
// Wait for the video_selector to be populated
|
||||
await new Promise((resolve) => {
|
||||
const checkExist = setInterval(() => {
|
||||
if (document.getElementById("video_selector").options.length > 0) {
|
||||
@@ -154,22 +143,20 @@ async function generateViewMetric(projectId) {
|
||||
const videoId = document.getElementById("video_selector").value;
|
||||
|
||||
measurements = await getDataMetrics(projectId);
|
||||
current_video_datas = await getDataVideoFromApi(videoId);
|
||||
currentVideoDatas = await getDataVideoFromApi(videoId);
|
||||
|
||||
let samples = convertStringToArray(current_video_datas[0]["measurement_ids"]);
|
||||
tempoMeasure = filterAndSortMeasurementsByIds(measurements,samples)
|
||||
let samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
|
||||
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
|
||||
tempoMeasure.forEach((measure) => {
|
||||
datesMeasurement.push(measure.timestamp)
|
||||
Temperature.push(measure.temperature)
|
||||
Hygrometrie.push(measure.humidity)
|
||||
datesMeasurement.push(measure.timestamp);
|
||||
Temperature.push(measure.temperature);
|
||||
Hygrometrie.push(measure.humidity);
|
||||
});
|
||||
|
||||
// Destroy the existing chart instance if it exists
|
||||
if (myChart) {
|
||||
myChart.destroy();
|
||||
}
|
||||
|
||||
// Create a new chart instance
|
||||
myChart = new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
@@ -209,4 +196,4 @@ async function generateViewMetric(projectId) {
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user