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:
arussac
2025-04-03 19:11:23 +02:00
parent e394924f70
commit 20bbafc9e9
6 changed files with 145 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
js/index.js
View File

@@ -29,13 +29,15 @@ function setupCarousel(global_project_list) {
const carousel = document.getElementById('carousel');
const carouselDots = document.getElementById('carousel-dots');
let currentIndex = 0;
let currdeg = 0;
const degGlobal = 360 / global_project_list.length;
function showForm() {
formContainer.style.display = 'flex';
formContainer.style.display = 'flex';
}
function hideForm() {
formContainer.style.display = 'none';
formContainer.style.display = 'none';
}
document.getElementById('show-form-button').addEventListener('click', showForm);
@@ -43,167 +45,116 @@ function setupCarousel(global_project_list) {
document.getElementById('submit').addEventListener('click', handleFormSubmit);
async function handleFormSubmit() {
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' +
'veuillez en trouver un autre');
return;
}
PostNewProject(nameProject, description).then(() => {
location.reload();
});
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' +
'veuillez en trouver un autre');
return;
}
PostNewProject(nameProject, description).then(() => {
location.reload();
});
}
function checkName(Projects, name) {
let res = true;
Projects.forEach(project => {
const ProjectName = project.name;
if (ProjectName === name)
res = false;
});
return res;
return !Projects.some(project => project.name === name);
}
function updateCarousel() {
const projectWidth = document.querySelector('.project').clientWidth;
carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
updateDots();
}
function updateDots() {
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
function showPrevProject() {
if (currentIndex > 0) {
currentIndex--;
updateCarousel();
} else {
currentIndex = global_project_list.length - 1;
updateCarousel();
}
currentIndex = (currentIndex > 0) ? currentIndex - 1 : global_project_list.length - 1;
updateDots();
}
function showNextProject() {
if (currentIndex < global_project_list.length - 1) {
currentIndex++;
updateCarousel();
} else {
currentIndex = 0;
updateCarousel();
}
}
currentIndex = (currentIndex < global_project_list.length - 1) ? currentIndex + 1 : 0;
updateDots();
}
document.getElementById('prev-button').addEventListener('click', showPrevProject);
document.getElementById('next-button').addEventListener('click', showNextProject);
// Populate the carousel with project data
const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
const degGlobal = 360 / global_project_list.length;
let carousel_css = $(".carousel"),
currdeg = 0
let width = window.innerWidth;
const letter = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'v', 'w', 'x', 'y', 'z'];
global_project_list.forEach((project, index) => {
const projectDiv = document.createElement('div');
projectDiv.classList.add('project');
projectDiv.classList.add('item');
projectDiv.classList.add(letter[index]);
projectDiv.innerHTML = `
const projectDiv = document.createElement('div');
projectDiv.classList.add('project');
projectDiv.classList.add('item');
projectDiv.classList.add(letter[index]);
projectDiv.innerHTML = `
<h2>${project.name}</h2>
<p>${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>
<button class="default-access-button">détails de ${project.name}</button>
<button class="default-delete-button">Supprimer</button>
</div>
`;
carousel.appendChild(projectDiv);
document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(${width/6}px);`;
`;
carousel.appendChild(projectDiv);
projectDiv.style.transform = `rotateY(${index * degGlobal}deg) translateZ(${global_project_list.length*3.5}vw)`;
// 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}`;
});
const detailButton = projectDiv.querySelector('.default-access-button');
detailButton.addEventListener('click', (event) => {
event.stopPropagation();
window.location.href = `html/projet_detail.html?id=${project.id}`;
});
// Add event listener for project delete button
const deleteButton = projectDiv.querySelector('.default-delete-button');
deleteButton.addEventListener('click', (event) => {
event.stopPropagation();
const projectName = project.name;
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('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(project.id).then(() => {
location.reload();
});
};
document.getElementById('cancelBtn').onclick = function () {
document.getElementById('customAlert').style.display = 'none';
};
});
// Create a dot for each project
const dot = document.createElement('div');
dot.classList.add('dot');
dot.addEventListener('click', () => {
const targetDeg = index * degGlobal;
const diff = targetDeg - currdeg;
currdeg +=diff;
currdeg=-currdeg;
currentIndex = index;
carousel_css.css({
"-webkit-transform": `rotateY(${currdeg}deg)`,
"-moz-transform": `rotateY(${currdeg}deg)`,
"-o-transform": `rotateY(${currdeg}deg)`,
"transform": `rotateY(${currdeg}deg)`
document.getElementById('okBtn').onclick = function () {
document.getElementById('customAlert').style.display = 'none';
deleteProject(project.id).then(() => {
location.reload();
});
updateDots(); // Update active dot styles
});
carouselDots.appendChild(dot);
};
document.getElementById('cancelBtn').onclick = function () {
document.getElementById('customAlert').style.display = 'none';
};
});
const dot = document.createElement('div');
dot.classList.add('dot');
dot.addEventListener('click', () => {
currentIndex = index;
currdeg = -index * degGlobal;
carousel.style.transform = `rotateY(${currdeg}deg) translateZ(-${global_project_list.length * 3.5}vw)`;
updateDots();
});
carouselDots.appendChild(dot);
});
carousel.style.transformOrigin = `50% 50% -${global_project_list.length * 3.5}vw`;
carousel.style.transform = `translateZ(-${global_project_list.length * 3.5}vw)`
//updateCarousel();
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
// Initial update to set the correct position
updateCarousel();
function rotate(e) {
if (e.data.d == "n") {
currdeg = currdeg - degGlobal;
}
if (e.data.d == "p") {
currdeg = currdeg + degGlobal;
}
if (currdeg > 360) {
currdeg = currdeg % 360;
}
carousel.style.transform = `rotateY(${currdeg}deg) translateZ(-${global_project_list.length * 3.5}vw)`;
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){
if(e.data.d=="n"){
currdeg = currdeg - degGlobal;
}
if(e.data.d=="p"){
currdeg = currdeg + degGlobal;
}
if(currdeg > 360){
currdeg = currdeg%360;
}
carousel_css.css({
"-webkit-transform": "rotateY("+currdeg+"deg)",
"-moz-transform": "rotateY("+currdeg+"deg)",
"-o-transform": "rotateY("+currdeg+"deg)",
"transform": "rotateY("+currdeg+"deg)"
});
}
}
function handleResize() {
@@ -213,36 +164,33 @@ function handleResize() {
window.addEventListener('resize', handleResize);
function isMobileDevice() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera);
}
window.addEventListener('DOMContentLoaded', (event) => {
if (isMobileDevice()) {
const body = document.body;
const downloadApp = document.getElementById('download');
// Apply hidden to all children of body except the downloadApp element
body.childNodes.forEach((child) => {
if (child.nodeType === 1 && child !== downloadApp) { // Check if the child is an element node
child.style.display = 'none';
}
});
const newH1 = document.createElement('h1');
newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!";
newH1.classList.add('global_title');
// Append the new h1 element to the body
body.appendChild(newH1);
const body = document.body;
const downloadApp = document.getElementById('download');
body.childNodes.forEach((child) => {
if (child.nodeType === 1 && child !== downloadApp) {
child.style.display = 'none';
}
});
const newH1 = document.createElement('h1');
newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!";
newH1.classList.add('global_title');
body.appendChild(newH1);
}
});
let titleIsReadable = true;
function change_title_style(){
function change_title_style() {
const titlePlaceHolder = document.getElementById('title-global');
const ball = document.getElementById('ball');
const xyz = document.getElementById('xyz');
const h1_title = document.getElementById('h1-title');
if(titleIsReadable){
if (titleIsReadable) {
titleIsReadable = false;
titlePlaceHolder.classList.add('container-title');
ball.style.display = 'block';
@@ -255,8 +203,7 @@ function change_title_style(){
xyz.style.display = 'none';
h1_title.style.display = 'block';
}
}
change_title_style();
}
change_title_style();

28
js/projet_detail.js
View File

@@ -265,7 +265,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 class="picture_placeHolder"id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
imageTD.innerHTML = `<a class="picture_placeHolder" 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>`;
row.appendChild(imageTD);
if ((i + 1) % 3 === 0 && i !== 0) {
@@ -357,6 +357,7 @@ async function generateViewMetric(projectId) {
label: "Hygrometrie (%)",
data: Hygrometrie,
fill: false,
color: "rgba(153, 102, 255, 1)",
borderColor: "rgba(153, 102, 255, 1)",
tension: 0.1,
yAxisID: "y1", // Use the second y-axis
@@ -368,6 +369,21 @@ async function generateViewMetric(projectId) {
y: {
beginAtZero: true,
position: "left",
ticks: {
color: 'white', // Set y-axis labels to white
},
grid: {
color: 'white', // Set grid line color to white
},
},
x: {
ticks: {
color: 'white', // Set x-axis labels to white
},
grid: {
drawOnChartArea: true,
color: 'white', // Set grid line color to white
},
},
y1: {
beginAtZero: true,
@@ -375,8 +391,18 @@ async function generateViewMetric(projectId) {
grid: {
drawOnChartArea: false, // Only want the grid lines for one axis to show up
},
ticks: {
color: 'white', // Set y-axis labels to white
}
},
},
plugins: {
legend: {
labels: {
color: "white", // Set legend labels to white
},
}
}
},
});
}