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

11
css/style.css
View File

@@ -182,7 +182,7 @@ body::before {
} }
.hiddenTable { .hiddenTable {
max-height: 65vh; max-height: 50vh;
overflow-y: hidden; overflow-y: hidden;
} }
@@ -197,14 +197,17 @@ footer {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-color: #1e1e1e; background-color: #1e1e1e;
padding: 1.5vh; padding: 1vh;
border-top: 1px solid #333; border-top: 1px solid #333;
color: #e0e0e0; color: #e0e0e0;
font-size: 2vh;
} }
#metric_viewer { #metric_viewer {
margin-left: 14px; margin-left: 3vw;
background-color: rgb(227, 216, 216); background-color: #444;
font-size: bold;
opacity: 0.79;
} }
.default-access-button { .default-access-button {

2
css/style_menu.css
View File

@@ -85,7 +85,7 @@
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
font-size: 20vh; font-size: 20vh;
color: white; color: rgb(57, 89, 217);
border: none; border: none;
bottom: 25vh; bottom: 25vh;
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;

10
css/style_projet.css
View File

@@ -2,12 +2,16 @@
float: left; float: left;
display: inline; display: inline;
width: 49%; width: 49%;
margin-bottom: 10vh;
} }
.picture_placeHolder { .picture_placeHolder {
width: 15.5vw; width: 15.5vw;
height: 15.5vh; height: 15.5vh;
display: block!important;
}
.picture_placeHolder img {
width: 100%;
height: 100%;
} }
.video { .video {
@@ -62,7 +66,7 @@
cursor: pointer; cursor: pointer;
padding-top: 1em; padding-top: 1em;
border-radius: 4px; border-radius: 4px;
bottom: 45px; /* Adjust as needed to position below the table */ bottom: 6vh; /* Adjust as needed to position below the table */
left: 72%; left: 72%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
@@ -104,7 +108,7 @@
.left-bar:after, .right-bar:after { .left-bar:after, .right-bar:after {
content: ""; content: "";
background-color: white; background-color: rgb(231, 65, 65);
width: 40px; width: 40px;
height: 10px; height: 10px;
display: block; display: block;

4
index.html
View File

@@ -10,8 +10,8 @@
</head> </head>
<body id="body"> <body id="body">
<button class="default-button" id="download"><span>Download App</span></button> <button class="default-button" id="download"><span>Télécharger l'App</span></button>
<button class="default-button" id="show-form-button"><span>+</span></button> <button class="default-button" id="show-form-button"><span>Ajouter un projet</span></button>
<div id="customAlert" class="modal"> <div id="customAlert" class="modal">
<div class="modal-content"> <div class="modal-content">
<p id="alertMessage">This is a custom alert!</p> <p id="alertMessage">This is a custom alert!</p>

117
js/index.js
View File

@@ -29,6 +29,8 @@ function setupCarousel(global_project_list) {
const carousel = document.getElementById('carousel'); const carousel = document.getElementById('carousel');
const carouselDots = document.getElementById('carousel-dots'); const carouselDots = document.getElementById('carousel-dots');
let currentIndex = 0; let currentIndex = 0;
let currdeg = 0;
const degGlobal = 360 / global_project_list.length;
function showForm() { function showForm() {
formContainer.style.display = 'flex'; formContainer.style.display = 'flex';
@@ -56,20 +58,9 @@ function setupCarousel(global_project_list) {
} }
function checkName(Projects, name) { function checkName(Projects, name) {
let res = true; return !Projects.some(project => project.name === name);
Projects.forEach(project => {
const ProjectName = project.name;
if (ProjectName === name)
res = false;
});
return res;
} }
function updateCarousel() {
const projectWidth = document.querySelector('.project').clientWidth;
carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
updateDots();
}
function updateDots() { function updateDots() {
const dots = document.querySelectorAll('.dot'); const dots = document.querySelectorAll('.dot');
@@ -79,37 +70,19 @@ function setupCarousel(global_project_list) {
} }
function showPrevProject() { function showPrevProject() {
if (currentIndex > 0) { currentIndex = (currentIndex > 0) ? currentIndex - 1 : global_project_list.length - 1;
currentIndex--; updateDots();
updateCarousel();
} else {
currentIndex = global_project_list.length - 1;
updateCarousel();
}
} }
function showNextProject() { function showNextProject() {
if (currentIndex < global_project_list.length - 1) { currentIndex = (currentIndex < global_project_list.length - 1) ? currentIndex + 1 : 0;
currentIndex++; updateDots();
updateCarousel();
} else {
currentIndex = 0;
updateCarousel();
} }
}
document.getElementById('prev-button').addEventListener('click', showPrevProject); document.getElementById('prev-button').addEventListener('click', showPrevProject);
document.getElementById('next-button').addEventListener('click', showNextProject); 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', 'v', 'w', 'x', 'y', 'z'];
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;
global_project_list.forEach((project, index) => { global_project_list.forEach((project, index) => {
const projectDiv = document.createElement('div'); const projectDiv = document.createElement('div');
@@ -126,27 +99,23 @@ function setupCarousel(global_project_list) {
</div> </div>
`; `;
carousel.appendChild(projectDiv); carousel.appendChild(projectDiv);
document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(${width/6}px);`; 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'); const detailButton = projectDiv.querySelector('.default-access-button');
detailButton.addEventListener('click', (event) => { detailButton.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
window.location.href = `html/projet_detail.html?id=${project.id}`; window.location.href = `html/projet_detail.html?id=${project.id}`;
}); });
// Add event listener for project delete button
const deleteButton = projectDiv.querySelector('.default-delete-button'); const deleteButton = projectDiv.querySelector('.default-delete-button');
deleteButton.addEventListener('click', (event) => { deleteButton.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
const projectName = project.name; const projectName = project.name;
document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`; document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
document.getElementById('customAlert').style.display = 'block'; document.getElementById('customAlert').style.display = 'block';
document.getElementById('okBtn').onclick = function () { document.getElementById('okBtn').onclick = function () {
document.getElementById('customAlert').style.display = 'none'; document.getElementById('customAlert').style.display = 'none';
// Call your delete function here
deleteProject(project.id).then(() => { deleteProject(project.id).then(() => {
location.reload(); location.reload();
}); });
@@ -157,53 +126,35 @@ function setupCarousel(global_project_list) {
}; };
}); });
// Create a dot for each project
const dot = document.createElement('div'); const dot = document.createElement('div');
dot.classList.add('dot'); dot.classList.add('dot');
dot.addEventListener('click', () => { dot.addEventListener('click', () => {
const targetDeg = index * degGlobal;
const diff = targetDeg - currdeg;
currdeg +=diff;
currdeg=-currdeg;
currentIndex = index; currentIndex = index;
carousel_css.css({ currdeg = -index * degGlobal;
"-webkit-transform": `rotateY(${currdeg}deg)`, carousel.style.transform = `rotateY(${currdeg}deg) translateZ(-${global_project_list.length * 3.5}vw)`;
"-moz-transform": `rotateY(${currdeg}deg)`, updateDots();
"-o-transform": `rotateY(${currdeg}deg)`,
"transform": `rotateY(${currdeg}deg)`
});
updateDots(); // Update active dot styles
}); });
carouselDots.appendChild(dot); 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 function rotate(e) {
updateCarousel(); if (e.data.d == "n") {
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){
if(e.data.d=="n"){
currdeg = currdeg - degGlobal; currdeg = currdeg - degGlobal;
} }
if(e.data.d=="p"){ if (e.data.d == "p") {
currdeg = currdeg + degGlobal; currdeg = currdeg + degGlobal;
} }
if(currdeg > 360){ if (currdeg > 360) {
currdeg = currdeg%360; currdeg = currdeg % 360;
} }
carousel_css.css({ carousel.style.transform = `rotateY(${currdeg}deg) translateZ(-${global_project_list.length * 3.5}vw)`;
"-webkit-transform": "rotateY("+currdeg+"deg)",
"-moz-transform": "rotateY("+currdeg+"deg)",
"-o-transform": "rotateY("+currdeg+"deg)",
"transform": "rotateY("+currdeg+"deg)"
});
}
}
} }
function handleResize() { function handleResize() {
@@ -213,36 +164,33 @@ function handleResize() {
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
function isMobileDevice() { function isMobileDevice() {
let check = false; 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);
(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;
};
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
if (isMobileDevice()) { if (isMobileDevice()) {
const body = document.body; const body = document.body;
const downloadApp = document.getElementById('download'); const downloadApp = document.getElementById('download');
// Apply hidden to all children of body except the downloadApp element
body.childNodes.forEach((child) => { body.childNodes.forEach((child) => {
if (child.nodeType === 1 && child !== downloadApp) { // Check if the child is an element node if (child.nodeType === 1 && child !== downloadApp) {
child.style.display = 'none'; child.style.display = 'none';
} }
}); });
const newH1 = document.createElement('h1'); const newH1 = document.createElement('h1');
newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!"; newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!";
newH1.classList.add('global_title'); newH1.classList.add('global_title');
// Append the new h1 element to the body
body.appendChild(newH1); body.appendChild(newH1);
} }
}); });
let titleIsReadable = true; let titleIsReadable = true;
function change_title_style(){ function change_title_style() {
const titlePlaceHolder = document.getElementById('title-global'); const titlePlaceHolder = document.getElementById('title-global');
const ball = document.getElementById('ball'); const ball = document.getElementById('ball');
const xyz = document.getElementById('xyz'); const xyz = document.getElementById('xyz');
const h1_title = document.getElementById('h1-title'); const h1_title = document.getElementById('h1-title');
if(titleIsReadable){ if (titleIsReadable) {
titleIsReadable = false; titleIsReadable = false;
titlePlaceHolder.classList.add('container-title'); titlePlaceHolder.classList.add('container-title');
ball.style.display = 'block'; ball.style.display = 'block';
@@ -255,8 +203,7 @@ function change_title_style(){
xyz.style.display = 'none'; xyz.style.display = 'none';
h1_title.style.display = 'block'; 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; let i = 0;
DataMetrics.forEach((measure) => { DataMetrics.forEach((measure) => {
let imageTD = document.createElement("td"); 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); row.appendChild(imageTD);
if ((i + 1) % 3 === 0 && i !== 0) { if ((i + 1) % 3 === 0 && i !== 0) {
@@ -357,6 +357,7 @@ async function generateViewMetric(projectId) {
label: "Hygrometrie (%)", label: "Hygrometrie (%)",
data: Hygrometrie, data: Hygrometrie,
fill: false, fill: false,
color: "rgba(153, 102, 255, 1)",
borderColor: "rgba(153, 102, 255, 1)", borderColor: "rgba(153, 102, 255, 1)",
tension: 0.1, tension: 0.1,
yAxisID: "y1", // Use the second y-axis yAxisID: "y1", // Use the second y-axis
@@ -368,6 +369,21 @@ async function generateViewMetric(projectId) {
y: { y: {
beginAtZero: true, beginAtZero: true,
position: "left", 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: { y1: {
beginAtZero: true, beginAtZero: true,
@@ -375,8 +391,18 @@ async function generateViewMetric(projectId) {
grid: { grid: {
drawOnChartArea: false, // Only want the grid lines for one axis to show up 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
},
}
}
}, },
}); });
} }