358 lines
12 KiB
JavaScript
358 lines
12 KiB
JavaScript
let myChart;
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const projectId = urlParams.get("id");
|
|
const data = await getAllProject();
|
|
const DataMetrics = await getDataMetrics(projectId);
|
|
|
|
const project = data.find(project => project.id == projectId);
|
|
if (project) {
|
|
document.getElementById("name_project").innerHTML = project.name;
|
|
} else {
|
|
console.error("Project not found");
|
|
}
|
|
|
|
const videoSelector = document.getElementById("video_selector");
|
|
const numberPicker = document.getElementById('number-picker');
|
|
const choiceSelect = document.getElementById('choice');
|
|
const oneByOneContainer = document.getElementById('one-by-one-container');
|
|
const firstLastContainer = document.getElementById('first-last-container');
|
|
const addNumberButton = document.getElementById('add-number-button');
|
|
const formContainer = document.getElementById('form-container');
|
|
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);
|
|
|
|
if (addNumberButton) {
|
|
addNumberButton.addEventListener('click', addSelectedNumber);
|
|
}
|
|
|
|
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);
|
|
document.getElementById('decrement-button').addEventListener('click', decrementDuration);
|
|
document.getElementById('submit').addEventListener('click', handleFormSubmit);
|
|
document.getElementById("projets").addEventListener("click", navigateToProjects);
|
|
document.getElementById("toggle-view").addEventListener("click", toggleView);
|
|
|
|
firstInput.addEventListener('input', updateRange);
|
|
lastInput.addEventListener('input', updateRange);
|
|
|
|
generateViewMetric(projectId);
|
|
|
|
function toggleContainers() {
|
|
if (choiceSelect.value === 'oneByOne') {
|
|
oneByOneContainer.style.display = 'block';
|
|
firstLastContainer.style.display = 'none';
|
|
populateNumberBoard(DataMetrics.length);
|
|
setRequiredAttributes();
|
|
} else {
|
|
oneByOneContainer.style.display = 'none';
|
|
firstLastContainer.style.display = 'block';
|
|
const last = document.getElementById('last');
|
|
last.value = DataMetrics.length;
|
|
last.max = DataMetrics.length;
|
|
document.getElementById('first').max = last.value;
|
|
setRequiredAttributes();
|
|
}
|
|
}
|
|
|
|
toggleContainers();
|
|
|
|
function setRequiredAttributes() {
|
|
const firstInput = document.getElementById('first');
|
|
const lastInput = document.getElementById('last');
|
|
const denominatorInput = document.getElementById('denominator');
|
|
|
|
if (firstLastContainer.style.display === 'block') {
|
|
firstInput.required = true;
|
|
lastInput.required = true;
|
|
denominatorInput.required = true;
|
|
} else {
|
|
firstInput.required = false;
|
|
lastInput.required = false;
|
|
denominatorInput.required = false;
|
|
}
|
|
}
|
|
|
|
function addSelectedNumber() {
|
|
const selectedNumber = parseInt(numberPicker.value, 10);
|
|
if (!selectedNumbers.includes(selectedNumber)) {
|
|
selectedNumbers.push(selectedNumber);
|
|
numberPicker.remove(numberPicker.selectedIndex);
|
|
}
|
|
}
|
|
|
|
function showForm() {
|
|
formContainer.style.display = 'flex';
|
|
}
|
|
|
|
function hideForm() {
|
|
formContainer.style.display = 'none';
|
|
}
|
|
|
|
function incrementDuration() {
|
|
durationInput.value = parseInt(durationInput.value) + 1;
|
|
}
|
|
|
|
function decrementDuration() {
|
|
if (parseInt(durationInput.value) > 0) {
|
|
durationInput.value = parseInt(durationInput.value) - 1;
|
|
}
|
|
}
|
|
|
|
async function handleFormSubmit(event) {
|
|
event.preventDefault();
|
|
const data = await getDataProjectVideosFromApi(projectId);
|
|
const nameVideo = document.getElementById('name').value;
|
|
const videoDuration = durationInput.value;
|
|
const videoResolution = document.getElementById('resolution').value;
|
|
|
|
if (videoDuration <= 0) {
|
|
alert('La durée de la vidéo doit être supérieur à 0');
|
|
return 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);
|
|
postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
|
|
.then(() => {
|
|
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
|
|
'\nRésolution : ' + videoResolution +
|
|
'\nDurée : ' + videoDuration + ' secondes');
|
|
});
|
|
}
|
|
|
|
function navigateToProjects() {
|
|
window.location.href = "../index.html";
|
|
}
|
|
|
|
function toggleView() {
|
|
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";
|
|
}
|
|
}
|
|
|
|
function populateNumberBoard(length) {
|
|
numberBoard.innerHTML = '';
|
|
numberBoard.style.gridTemplateColumns = `repeat(auto-fill, minmax(50px, 1fr))`;
|
|
for (let i = 1; i <= length; i++) {
|
|
const numberButton = document.createElement('button');
|
|
numberButton.classList.add('number-button');
|
|
numberButton.textContent = i;
|
|
numberButton.addEventListener('click', () => highlightNumber(numberButton));
|
|
numberBoard.appendChild(numberButton);
|
|
}
|
|
}
|
|
|
|
function highlightNumber(button) {
|
|
button.classList.toggle('highlight');
|
|
}
|
|
|
|
function updateRange() {
|
|
const firstValue = parseInt(firstInput.value);
|
|
const lastValue = parseInt(lastInput.value);
|
|
|
|
if (firstValue > lastValue) {
|
|
lastInput.value = firstValue;
|
|
}
|
|
if (lastValue < firstValue) {
|
|
firstInput.value = lastValue;
|
|
}
|
|
|
|
firstInput.max = lastValue;
|
|
lastInput.min = firstValue;
|
|
}
|
|
});
|
|
|
|
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) => {
|
|
let imageTD = document.createElement("td");
|
|
imageTD.innerHTML = `<img id="${i}" src="${api_url}/images/${measure.project_id}/${measure.order_id}"/>`;
|
|
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) {
|
|
const ctx = document.getElementById("metric_viewer").getContext("2d");
|
|
const videoPlaceHolder = document.getElementById('video-container');
|
|
|
|
let Hygrometrie = [];
|
|
let Temperature = [];
|
|
let datesMeasurement = [];
|
|
|
|
let measurements;
|
|
let currentVideoDatas;
|
|
|
|
await new Promise((resolve) => {
|
|
const checkExist = setInterval(() => {
|
|
if (document.getElementById("video_selector").options.length > 0) {
|
|
clearInterval(checkExist);
|
|
resolve();
|
|
}
|
|
}, 100); // check every 100ms
|
|
});
|
|
|
|
const videoId = document.getElementById("video_selector").value;
|
|
|
|
measurements = await getDataMetrics(projectId);
|
|
let samples;
|
|
if (videoId != -1) {
|
|
currentVideoDatas = await getDataVideoFromApi(videoId);
|
|
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
|
|
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);
|
|
} else {
|
|
samples = measurements.map(measurements => measurements.id);
|
|
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
|
|
}
|
|
tempoMeasure.forEach((measure) => {
|
|
datesMeasurement.push(measure.timestamp);
|
|
Temperature.push(measure.temperature);
|
|
Hygrometrie.push(measure.humidity);
|
|
});
|
|
populateImageTable(tempoMeasure);
|
|
|
|
if (myChart) {
|
|
myChart.destroy();
|
|
}
|
|
|
|
myChart = new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: datesMeasurement,
|
|
datasets: [
|
|
{
|
|
label: "Température (F°)",
|
|
data: Temperature,
|
|
fill: false,
|
|
borderColor: "rgba(75, 192, 192, 1)",
|
|
tension: 0.1,
|
|
yAxisID: "y", // Use the default y-axis
|
|
},
|
|
{
|
|
label: "Hygrometrie (%)",
|
|
data: Hygrometrie,
|
|
fill: false,
|
|
borderColor: "rgba(153, 102, 255, 1)",
|
|
tension: 0.1,
|
|
yAxisID: "y1", // Use the second y-axis
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
position: "left",
|
|
},
|
|
y1: {
|
|
beginAtZero: true,
|
|
position: "right",
|
|
grid: {
|
|
drawOnChartArea: false, // Only want the grid lines for one axis to show up
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|