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

maj title

Browse Source
This commit is contained in:
arussac
2025-03-31 11:23:17 +02:00
parent d096cd7877
commit f6226dbc8d
3 changed files with 200 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -170,7 +170,7 @@ body::before {
}
.frequency-control input[type="number"] {
width: 50px;
width: 10vw;
text-align: center;
background-color: #333;
border: 1px solid #555;

4
css/style_projet.css
View File

@@ -149,3 +149,7 @@
text-align: center;
text-transform: uppercase;
}
.frequency-control input{
width: 5vw;
}

347
js/projet_detail.js
View File

@@ -5,100 +5,118 @@ document.addEventListener("DOMContentLoaded", async () => {
const data = await getAllProject();
const DataMetrics = await getDataMetrics(projectId);
const project = data.find(project => project.id == projectId);
const project = data.find((project) => project.id == projectId);
if (project) {
for(obj of document.getElementsByClassName("name_project"))
for (obj of document.getElementsByClassName("name_project"))
obj.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 formContainerProject = document.getElementById('form-container-project');
const formContainerCamera = document.getElementById('form-container-camera');
const durationInput = document.getElementById('duration');
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 formContainerProject = document.getElementById(
"form-container-project"
);
const formContainerCamera = document.getElementById("form-container-camera");
const durationInput = document.getElementById("duration");
const tableImage = document.getElementById("content1");
const numberBoard = document.getElementById('number-board');
const numberBoard = document.getElementById("number-board");
// Add event listeners for the "Début" and "Fin" input fields
const firstInput = document.getElementById('first');
const lastInput = document.getElementById('last');
const start_timelapse_button = document.getElementById('start-timelapse')
const firstInput = document.getElementById("first");
const lastInput = document.getElementById("last");
const start_timelapse_button = document.getElementById("start-timelapse");
let selectedNumbers = [];
populateTimelapseLogic(start_timelapse_button, projectId).then( () => {
document.getElementById('show-form-button-camera').addEventListener('click', showFormCamera)
document.getElementById('close-form-button-camera').addEventListener('click', hideFormCamera)
if(document.getElementById('commencer') != null){
document.getElementById('commencer').addEventListener('click', async () => {
const days = document.getElementById('days').value;
const hours = document.getElementById('hours').value;
const minutes = document.getElementById('minutes').value;
const frequency = days * 1440 + hours * 60 + minutes;
start_timelapse(projectId, frequency).then(()=>{
location.reload();
})
})
populateTimelapseLogic(start_timelapse_button, projectId).then(() => {
document
.getElementById("show-form-button-project")
.addEventListener("click", showFormCamera);
document
.getElementById("close-form-button-project")
.addEventListener("click", hideFormProject);
if (document.getElementById("commencer") != null) {
document
.getElementById("commencer")
.addEventListener("click", async () => {
const days = document.getElementById("days").value;
const hours = document.getElementById("hours").value;
const minutes = document.getElementById("minutes").value;
const frequency = days * 1440 + hours * 60 + minutes;
start_timelapse(projectId, frequency).then(() => {
location.reload();
});
});
}
if(document.getElementById('stop-camera') != null){
document.getElementById('stop-camera').addEventListener('click', async () => {
stopCamera(projectId)
location.reload();
})
}
}
)
if (document.getElementById("stop-camera") != null) {
document
.getElementById("stop-camera")
.addEventListener("click", async () => {
stopCamera(projectId);
location.reload();
});
}
});
choiceSelect.addEventListener('change', toggleContainers);
choiceSelect.addEventListener("change", toggleContainers);
if (addNumberButton) {
addNumberButton.addEventListener('click', addSelectedNumber);
addNumberButton.addEventListener("click", addSelectedNumber);
}
videoSelector.addEventListener("change", () => generateViewMetric(projectId));
document.getElementById('show-form-button-camera').addEventListener('click', showFormProject);
document.getElementById('close-form-button-project').addEventListener('click', hideFormProject);
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("show-form-button-camera")
.addEventListener("click", showFormProject);
document
.getElementById("close-form-button-camera")
.addEventListener("click", hideFormCamera);
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);
firstInput.addEventListener("input", updateRange);
lastInput.addEventListener("input", updateRange);
generateViewMetric(projectId);
PopulateSelect(videoSelector, projectId);
function toggleContainers() {
if (choiceSelect.value === 'oneByOne') {
oneByOneContainer.style.display = 'block';
firstLastContainer.style.display = 'none';
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');
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;
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');
const firstInput = document.getElementById("first");
const lastInput = document.getElementById("last");
const denominatorInput = document.getElementById("denominator");
if (firstLastContainer.style.display === 'block') {
if (firstLastContainer.style.display === "block") {
firstInput.required = true;
lastInput.required = true;
denominatorInput.required = true;
@@ -118,18 +136,18 @@ document.addEventListener("DOMContentLoaded", async () => {
}
function showFormCamera() {
formContainerCamera.style.display = 'flex';
formContainerCamera.style.display = "flex";
}
function hideFormCamera() {
formContainerCamera.style.display = 'none';
formContainerCamera.style.display = "none";
}
function showFormProject() {
formContainerProject.style.display = 'flex';
formContainerProject.style.display = "flex";
}
function hideFormProject() {
formContainerProject.style.display = 'none';
formContainerProject.style.display = "none";
}
function incrementDuration() {
durationInput.value = parseInt(durationInput.value) + 1;
@@ -144,28 +162,46 @@ document.addEventListener("DOMContentLoaded", async () => {
async function handleFormSubmit(event) {
event.preventDefault();
const data = await getDataProjectVideosFromApi(projectId);
const nameVideo = document.getElementById('name').value;
const nameVideo = document.getElementById("name").value;
const videoDuration = durationInput.value;
const videoResolution = document.getElementById('resolution').value;
const videoResolution = document.getElementById("resolution").value;
if (videoDuration <= 0) {
alert('La durée de la vidéo doit être supérieur à 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;
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');
})
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() {
@@ -183,19 +219,21 @@ document.addEventListener("DOMContentLoaded", async () => {
}
function populateNumberBoard(length) {
numberBoard.innerHTML = '';
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');
const numberButton = document.createElement("button");
numberButton.classList.add("number-button");
numberButton.textContent = i;
numberButton.addEventListener('click', () => highlightNumber(numberButton));
numberButton.addEventListener("click", () =>
highlightNumber(numberButton)
);
numberBoard.appendChild(numberButton);
}
}
function highlightNumber(button) {
button.classList.toggle('highlight');
button.classList.toggle("highlight");
}
function updateRange() {
@@ -218,7 +256,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) => {
@@ -239,8 +277,8 @@ function populateImageTable(DataMetrics) {
async function generateViewMetric(projectId) {
const ctx = document.getElementById("metric_viewer").getContext("2d");
const videoPlaceHolder = document.getElementById('video-container')
const deletePlaceHolder = document.getElementById('delete-placeholder')
const videoPlaceHolder = document.getElementById("video-container");
const deletePlaceHolder = document.getElementById("delete-placeholder");
let Hygrometrie = [];
let Temperature = [];
@@ -262,29 +300,29 @@ 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"]);
if(currentVideoDatas[0].status != 0){
videoPlaceHolder.innerHTML=`
if (currentVideoDatas[0].status != 0) {
videoPlaceHolder.innerHTML = `
<video class="video" controls>
<source src="${api_url}/videos/file/${videoId}" type="video/mp4">
Your browser does not support the video tag.
</video>`
</video>`;
} else {
videoPlaceHolder.innerHTML=`<h2>La vidéo n'a pas été rendered</h2>`
videoPlaceHolder.innerHTML = `<h2>La vidéo n'a pas été rendered</h2>`;
}
deletePlaceHolder.innerHTML=`
deletePlaceHolder.innerHTML = `
<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)
`;
document.getElementById("delete-video").addEventListener("click", () => {
showConfirmationAlert(videoId);
});
tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
} else {
deletePlaceHolder.innerHTML=''
videoPlaceHolder.innerHTML=''
samples=measurements.map(measurements => measurements.id);
deletePlaceHolder.innerHTML = "";
videoPlaceHolder.innerHTML = "";
samples = measurements.map((measurements) => measurements.id);
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
}
tempoMeasure.forEach((measure) => {
@@ -292,7 +330,7 @@ async function generateViewMetric(projectId) {
Temperature.push(measure.temperature);
Hygrometrie.push(measure.humidity);
});
populateImageTable(tempoMeasure)
populateImageTable(tempoMeasure);
if (myChart) {
myChart.destroy();
@@ -336,32 +374,32 @@ async function generateViewMetric(projectId) {
},
},
},
})
});
}
function showConfirmationAlert(videoId) {
const customAlert = document.getElementById('customAlert');
const alertMessage = document.getElementById('alertMessage');
const okBtn = document.getElementById('okBtn');
const cancelBtn = document.getElementById('cancelBtn');
const customAlert = document.getElementById("customAlert");
const alertMessage = document.getElementById("alertMessage");
const okBtn = document.getElementById("okBtn");
const cancelBtn = document.getElementById("cancelBtn");
alertMessage.textContent = 'Are you sure you want to delete this video?';
customAlert.style.display = 'block';
alertMessage.textContent = "Are you sure you want to delete this video?";
customAlert.style.display = "block";
okBtn.onclick = function() {
okBtn.onclick = function () {
deleteVideo(videoId);
customAlert.style.display = 'none';
customAlert.style.display = "none";
};
cancelBtn.onclick = function() {
customAlert.style.display = 'none';
cancelBtn.onclick = function () {
customAlert.style.display = "none";
};
}
function convertStringToArray(string) {
const numberStrings = string.replace(/[{}]/g, '').split(',');
const numberStrings = string.replace(/[{}]/g, "").split(",");
// Trim whitespace and convert the string numbers to integers
const numberArray = numberStrings.map(num => parseInt(num.trim(), 10));
const numberArray = numberStrings.map((num) => parseInt(num.trim(), 10));
return numberArray;
}
@@ -373,30 +411,37 @@ function filterAndSortMeasurementsByIds(measurements, ids) {
}
function filterAndSortMeasurementsByNumber(measurements, Numbers) {
// Filter measurements based on their position in the Numbers array
const filteredMeasurements = Numbers.map(index => measurements[index - 1]).filter(measurement => measurement !== undefined);
const filteredMeasurements = Numbers.map(
(index) => measurements[index - 1]
).filter((measurement) => measurement !== undefined);
// Sort the filtered measurements by their timestamp
return filteredMeasurements.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
return filteredMeasurements.sort(
(a, b) => new Date(a.timestamp) - new Date(b.timestamp)
);
}
function checkVideoPath(videos, name) {
let res = true;
videos.forEach(video => {
const videoName = video.name;
if(videoName==name)
res=false;
videos.forEach((video) => {
const videoName = video.name;
if (videoName == name) res = false;
});
return res;
}
function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
if (choice === 'oneByOne') {
const highlightedButtons = document.querySelectorAll('.number-button.highlight');
return Array.from(highlightedButtons).map(button => parseInt(button.textContent));
if (choice === "oneByOne") {
const highlightedButtons = document.querySelectorAll(
".number-button.highlight"
);
return Array.from(highlightedButtons).map((button) =>
parseInt(button.textContent)
);
} else {
const first = parseInt(firstInput.value);
const last = parseInt(lastInput.value);
const denominator = parseInt(document.getElementById('denominator').value);
const denominator = parseInt(document.getElementById("denominator").value);
const measurementIds = new Set();
measurementIds.add(first); // Always include the first image
@@ -412,63 +457,61 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
}
}
async function populateTimelapseLogic(placeholder,id) {
async function populateTimelapseLogic(placeholder, id) {
const data = await getSingleProject(id);
if(data.status == 0){
placeholder.innerHTML = `<button class="default-button" id="show-form-button-camera">
if (data.status == 0) {
placeholder.innerHTML = `<button class="default-button" id="show-form-button-project">
<span> Configurer la caméra </span>
</button>`
</button>`;
} else if (data.status == 1) {
placeholder.innerHTML = `<button class="btn btn-danger" id="stop-camera">
placeholder.innerHTML = `<button class="default-delete-button" id="stop-camera">
<span> Stopper la prise d'images </span>
</button>`}
else {
placeholder.innerHTML = ``
</button>`;
} else {
placeholder.innerHTML = ``;
}
}
function increment(id) {
const input = document.getElementById(id);
input.value = parseInt(input.value) + 1;
updateFrequencyText()
updateFrequencyText();
}
function decrement(id) {
const input = document.getElementById(id);
if (parseInt(input.value) > 0) {
input.value = parseInt(input.value) - 1;
input.value = parseInt(input.value) - 1;
}
updateFrequencyText()
updateFrequencyText();
}
function updateFrequencyText() {
const days = document.getElementById('days').value;
const hours = document.getElementById('hours').value;
const minutes = document.getElementById('minutes').value;
const days = document.getElementById("days").value;
const hours = document.getElementById("hours").value;
const minutes = document.getElementById("minutes").value;
const frequencyText = `une image sera prise toutes les ${days} jours ${hours} heures ${minutes} minutes`;
document.getElementById('frequency-text').innerHTML = frequencyText;
document.getElementById("frequency-text").innerHTML = frequencyText;
}
$( ".arrow-icon" ).click(function() {
$(".arrow-icon").click(function () {
$(this).toggleClass("open");
});
let titleIsReadable = true;
function change_title_style(){
const xyz = document.getElementById('xyzv');
const h3_title = document.getElementById('h3-title');
if(titleIsReadable){
function change_title_style() {
const xyz = document.getElementById("xyzv");
const h3_title = document.getElementById("h3-title");
if (titleIsReadable) {
titleIsReadable = false;
xyz.style.display = 'block';
h3_title.style.display = 'none';
xyz.style.display = "block";
h3_title.style.display = "none";
} else {
titleIsReadable = true;
xyz.style.display = 'none';
h3_title.style.display = 'block';
xyz.style.display = "none";
h3_title.style.display = "block";
}
}
change_title_style();
}
change_title_style();