This is a custom alert!
diff --git a/js/index.js b/js/index.js index 3d9ddc2..70df028 100644 --- a/js/index.js +++ b/js/index.js @@ -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 = `${project.name}
${formatDate(project.start_date)}
Status : ${formatStatus(parseInt(project.status))}
- `; - 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(); \ No newline at end of file diff --git a/js/projet_detail.js b/js/projet_detail.js index 486f405..88ce1ad 100644 --- a/js/projet_detail.js +++ b/js/projet_detail.js @@ -265,7 +265,7 @@ function populateImageTable(DataMetrics) { let i = 0; DataMetrics.forEach((measure) => { let imageTD = document.createElement("td"); - imageTD.innerHTML = `