|
|
|
|
@@ -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();
|
|
|
|
|
|
|
|
|
|
|
arussac