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

redesign avec edmée, super déçue car pas bouboule orange

Browse Source
This commit is contained in:
arussac
2025-03-22 23:33:43 +01:00
parent 88becb43cf
commit e9610878ac
9 changed files with 699 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
css/style.css
View File

@@ -1,121 +1,140 @@
main { body::before {
flex: 1 0 auto; content: "";
} position: fixed; /* Use fixed positioning to keep the image in place */
footer {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
background-color: #f8f9fa;
padding: 10px;
border-top: 1px solid #e7e7e7;
}
.row {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
.hiddenTable {
max-height: 400px; /* Adjust this value as needed */
overflow-y: hidden;
}
.full-view {
max-height: none;
overflow-y: visible;
}
.sticky-header thead {
position: sticky;
top: 0;
z-index: 1;
background-color: #fff;
}
#addVideoHandler {
display: flex;
align-items: center;
}
#show-form-button {
margin-left: 20px;
}
.form-container {
z-index: 25;
display: none;
position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-image: url("../image/camera-image");
background-position: center;
background-size: cover;
filter: blur(1px) brightness(0.3);
z-index: -100; /* Ensure the background image stays behind other content */
}
.container {
max-width: 1140px;
margin: auto;
padding: 15px;
}
.mt-5 {
margin-top: 5rem;
}
.mb-4 {
margin-bottom: 4rem;
}
.text-center {
text-align: center;
}
.modal,
.form-container {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.modal-content,
.form-content {
background-color: #1e1e1e;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
width: 80%;
max-width: 600px;
margin: auto;
color: #e0e0e0;
}
.form-content { .form-content {
background-color: #fff;
padding: 30px; padding: 30px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
text-align: left; text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 90%; max-height: 90vh;
max-width: 600px;
max-height: 90vh; /* Adjust the max-height as needed */
overflow-y: auto; overflow-y: auto;
} }
.modal-buttons {
text-align: center;
margin-top: 20px;
}
.default-button {
background-color: #248f99;
z-index: 15;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
margin-bottom: 15px;
white-space: nowrap;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.default-button:hover {
transform: translateY(-4px); /* Lift the button more on hover */
box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */
}
.default-button:active {
transform: translateY(0); /* Remove lift on click */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
}
.buttons-container {
display: flex;
gap: 10px; /* Space between buttons */
margin-bottom: 20px;
}
.form-content h1 { .form-content h1 {
margin: 0;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.5rem; font-size: 1.5rem;
color: #333; color: #f0f0f0;
} }
.form-content label { .form-content label {
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
color: #555; color: #cccccc;
} }
.form-content input, .form-content input,
.form-content select, .form-content select {
.form-content .duration-input,
.form-content .fraction-input {
margin-bottom: 20px; margin-bottom: 20px;
padding: 12px; padding: 12px;
font-size: 1rem; font-size: 1rem;
border: 1px solid #ccc; border: 1px solid #555;
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #333;
color: #e0e0e0;
} }
.form-content .duration-input, .duration-input,
.form-content .fraction-input { .fraction-input {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.form-content .duration-input button, .duration-input button,
.form-content .fraction-input button { .fraction-input button {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 0 10px; margin: 0 10px;
@@ -127,149 +146,101 @@ footer {
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.form-content .duration-input button:hover, .duration-input button:hover,
.form-content .fraction-input button:hover { .fraction-input button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
.form-content .duration-input input { .duration-input input {
width: 60px; width: 60px;
text-align: center; text-align: center;
} }
.form-content #submit { .frequency-control {
margin-top: 20px;
padding: 12px;
font-size: 1rem;
width: 100%;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.form-content #submit:hover{
background-color: #0056b3;
}
#number-board {
display: grid;
gap: 10px;
justify-content: center;
max-height: 40vh; /* Adjust the max-height as needed */
overflow-y: auto;
}
.number-button {
padding: 10px;
font-size: 1rem;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
transition: background-color 0.3s;
margin: 5px;
border-radius: 4px;
}
.number-button.highlight {
background-color: red;
color: #fff;
}
#numerator, #denominator {
width: 30%;
text-align: center;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: red;
color: white;
border: none;
border-radius: 5px;
font-size: 1.5rem;
cursor: pointer;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
z-index: 30; margin-bottom: 20px;
}
.close-button:hover {
background-color: darkred;
}
footer{
margin-top: 15px;
}
#video-container{
margin-bottom: 15px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.6); /* Darker background */
}
.modal-content {
background-color: #fff;
padding: 20px;
border: 2px solid #ff0000; /* Red border */
width: 40% !important; /* Fixed width for a smaller modal */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Add shadow for emphasis */
border-radius: 8px; /* Rounded corners */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center the modal */
}
.modal-buttons {
text-align: center; /* Center buttons */
margin-top: 20px;
}
.modal-buttons button {
background-color: #ff0000; /* Red buttons */
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.modal-buttons button:hover {
background-color: #cc0000; /* Darker red on hover */
}
#alertMessage {
color: #ff0000; /* Red text */
font-size: 18px;
text-align: center;
}
.buttons-container2{
float: left;
width:20%;
} }
.frequency-control label { .frequency-control label {
margin-right: 10px; margin-right: 10px;
color: #e0e0e0;
} }
.frequency-control input[type="number"] { .frequency-control input[type="number"] {
width: 50px; width: 50px;
text-align: center; text-align: center;
background-color: #333;
border: 1px solid #555;
color: #e0e0e0;
} }
.frequency-control button {
margin: 0 5px; .hiddenTable {
max-height: 65vh;
overflow-y: hidden;
}
.full-view {
max-height: none;
overflow-y: visible;
}
footer {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
background-color: #1e1e1e;
padding: 1.5vh;
border-top: 1px solid #333;
color: #e0e0e0;
}
#metric_viewer {
background-color: rgb(227, 216, 216);
}
.default-access-button {
background-color: #182b3f;
z-index: 15;
color: white;
border: 1px solid yellow;
padding: 10px;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
margin-bottom: 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.default-access-button:hover {
transform: translateY(-4px); /* Lift the button more on hover */
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.8); /* Increase shadow on hover */
}
.default-access-button:active {
transform: translateY(0); /* Remove lift on click */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
}
.default-delete-button {
background-color: #7e2416;
z-index: 15;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.default-delete-button:hover {
transform: translateY(-4px); /* Lift the button more on hover */
box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */
}
.default-delete-button:active {
transform: translateY(0); /* Remove lift on click */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
} }

63
css/style_menu.css Normal file
View File

@@ -0,0 +1,63 @@
#carousel-container {
display: flex;
align-items: center;
justify-content: center;
width: 80%;
margin: auto;
overflow: hidden;
position: relative;
perspective: 1000px;
}
#carousel {
display: flex;
transition: transform 0.5s ease;
transform-style: preserve-3d;
}
.project {
min-width: 90%;
box-sizing: border-box;
padding: 20px;
background-color: #f8f9fa;
text-align: center;
border: 1px solid #ddd;
border-radius: 10px;
margin: 0 10px;
backface-visibility: hidden;
}
.nav-button {
background-color: #182b3f;
z-index: 15;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#prev-button {
left: 10px;
}
#next-button {
right: 10px;
}
.nav-button:hover {
background-color: #12457d;
}
.project_buttons {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

47
css/style_project.less Normal file
View File

@@ -0,0 +1,47 @@
@bggradient: linear-gradient(to right top, #ffffff, #f5f4f5, #ebeaeb, #e2dfe0, #d9d5d5);
@ball: #f57724;
@text: #414141;
#name_project {
position: absolute;
font-size: 40px;
display: inline-block;
white-space: nowrap;
font-weight: bold;
overflow: hidden;
top: 50px;
left: 115px;
color: darken(@text, 10%);
animation: textreveal 4s infinite alternate;
}
#ball {
position: absolute;
top: 27.5px;
left: 50px;
height: 98px;
width: 100px;
white-space: nowrap;
overflow: hidden;
background-color: @ball;
border-radius: 50%;
animation: ballmove 4s infinite alternate;
z-index: 1;
box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
}
@keyframes ballmove {
0%{transform: translate(0px, 8.5px) scale(0.1);}
25%{transform: translateX(127.5px) scale(0.5);}
50%{transform: translateX(255px) scale(0.1);}
75%{transform: translateX(127.5px) scale(0.5);}
100%{transform: translate(0px, 8.5px) scale(0.1);}
}
@keyframes textreveal {
0% {width: 0;}
10% {width: 0;}
50% {width: 240px;}
100% {width: 0;}
}

246
css/style_projet.css Normal file
View File

@@ -0,0 +1,246 @@
.nexter {
float: left;
display: inline;
width: 49%;
margin-bottom: 10vh;
}
.picture_placeHolder {
width: 100%;
}
.video {
width: 100%;
}
.video_placeHolder {
width: 100%;
margin-top: 10px;
}
.box {
display: inline-block;
height: 45px;
}
.box select {
background-color: #248f99;
color: white;
padding: 10px;
width: 250px;
border: none;
font-size: 18px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-webkit-appearance: button;
appearance: button;
outline: none;
border-radius: 5px;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */
}
.box:hover select {
transform: translateY(-4px); /* Lift the button more on hover */
box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */
}
.box:active select {
transform: translateY(0); /* Remove lift on click */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
}
.box select option {
padding: 30px;
}
.arrow-icon {
z-index: 100;
height: 3em;
width: 2.8em;
padding: 0.5em;
margin: 1em auto;
cursor: pointer;
padding-top: 1em;
border-radius: 4px;
bottom: 45px; /* Adjust as needed to position below the table */
left: 72%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */
}
.arrow-icon:hover {
transform: translateX(-50%) translateY(-10px); /* Move the arrow up on hover */
}
.arrow-icon:active {
transform: translateX(-50%) translateY(0); /* Remove lift on click */
}
.left-bar, .right-bar {
z-index: 100;
position: absolute;
background-color: transparent;
width: 40px;
height: 10px;
display: block;
border-radius: 2px;
}
.left-bar {
top: 50%;
left: 0;
transform: rotate(35deg);
}
.right-bar {
top: 50%;
left: 26px;
transform: rotate(-35deg);
}
.left-bar:after, .right-bar:after {
content: "";
background-color: white;
width: 40px;
height: 10px;
display: block;
border-radius: 6px 10px 10px 6px;
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}
.right-bar:after {
border-radius: 10px 6px 6px 10px;
}
.open .left-bar:after {
transform-origin: center center;
transform: rotate(-70deg);
}
.open .right-bar:after {
transform-origin: center center;
transform: rotate(70deg);
}
#name_project {
animation: glitch 3s steps(100) infinite;
color: #151515;
font-size: 6em;
text-align: center;
text-transform: uppercase;
}
@media (min-width: 480px) {
#name_project {
font-size: 2em;
}
}
@keyframes glitch {
0% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
1% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
2% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
3% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
4% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
5% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
6% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
7% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
8% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
9% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
10% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
11% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
12% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
13% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
14% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
15% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
16% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
17% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
18% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
19% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
20% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
21% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
22% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
23% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
24% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
25% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
26% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
27% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
28% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
29% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
30% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
31% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
32% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
33% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
34% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
35% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
36% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
37% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
38% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
39% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
40% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
41% { text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime; filter: blur(0);}
42% { text-shadow: 0 0 0 #0c33f5, 0 0 0 lime; filter: blur(0);}
43% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
44% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
45% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
46% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
47% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
48% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
49% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
50% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
51% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
52% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
53% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
54% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
55% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0.5px);}
56% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
57% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
58% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
59% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
60% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; filter: blur(0);}
62% { text-shadow: 0 0 0 red, 0 0 0 lime; filter: blur(0);}
63% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
64% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
65% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
66% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0.5px);}
67% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
68% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
69% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
70% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
71% { text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5; filter: blur(0);}
72% { text-shadow: 0 0 0 red, 0 0 0 #0c33f5; filter: blur(0);}
73% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
74% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
75% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
76% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
77% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
78% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
79% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
80% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
81% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
82% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
83% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
84% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
85% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
86% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
87% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
88% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
89% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
90% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
91% { text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5; filter: blur(0);}
92% { text-shadow: 0 0 0 lime, 0 0 0 #0c33f5; filter: blur(0);}
92% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
93% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
94% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
95% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
96% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
97% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
98% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
}

115
html/projet_detail.html
View File

@@ -1,32 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Détails</title> <title>Détails</title>
<link rel="stylesheet" href="../css/style.css" /> <link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" <link rel="stylesheet" href="../css/style_projet.css">
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
</head> </head>
<body> <body>
<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>
<div class="modal-buttons"> <div class="modal-buttons">
<button class="btn btn-danger" id="cancelBtn">Cancel</button> <button class="default-delete-button" id="cancelBtn">Cancel</button>
<button class="btn btn-primary" id="okBtn">OK</button> <button class="default-access-button" id="okBtn">OK</button>
</div> </div>
</div> </div>
</div> </div>
<!-- formulaire nouveau projet --> <!-- formulaire nouveau projet -->
<div id="form-container-project" class="form-container" style="display: none"> <div id="form-container-project" class="form-container" style="display: none">
<div class="form-content"> <div class="form-content">
<button id="close-form-button-project" class="close-button">&times;</button> <button id="close-form-button-project" class="default-delete-button">&times;</button>
<h1>Formulaire</h1> <h1>Formulaire</h1>
<div id="my-form"> <div id="my-form">
<label for="name">Nom :</label> <label for="name">Nom :</label>
@@ -40,9 +34,9 @@
<br /><br /> <br /><br />
<label for="duration">Durée (en secondes) :</label> <label for="duration">Durée (en secondes) :</label>
<div class="duration-input"> <div class="duration-input">
<button type="button" id="decrement-button">-</button> <button type="button" class="default-access-button" id="decrement-button">-</button>
<input type="number" id="duration" name="duration" value="0" min="0" required /> <input type="number" id="duration" name="duration" value="0" min="0" required />
<button type="button" id="increment-button">+</button> <button type="button" class="default-access-button" id="increment-button">+</button>
</div> </div>
<label for="choice">Options :</label> <label for="choice">Options :</label>
<select id="choice" name="choice"> <select id="choice" name="choice">
@@ -71,100 +65,83 @@
<br /><br /> <br /><br />
<div id="result-container"></div> <div id="result-container"></div>
<br /><br /> <br /><br />
<button class="btn btn-primary" id="submit">Soumettre</button> <button class="default-access-button" id="submit">Soumettre</button>
</div> </div>
</div> </div>
</div> </div>
<!-- Formulaire configuration de la caméra --> <!-- Formulaire configuration de la caméra -->
<div id="form-container-camera" class="form-container" style="display: none"> <div id="form-container-camera" class="form-container" style="display: none">
<div class="form-content"> <div class="form-content">
<button id="close-form-button-camera" class="close-button">&times;</button> <button id="close-form-button-camera" class="default-delete-button">&times;</button>
<h1>Formulaire</h1> <h1>Formulaire</h1>
<span>La fréquence minimale est de 3 minutes entre deux images</span> <span>La fréquence minimale est de 3 minutes entre deux images</span>
<div class="frequency-control"> <div class="frequency-control">
<label for="days">Days:</label> <label for="days">Days:</label>
<button type="button" onclick="decrement('days')">-</button> <button class="default-access-button" type="button" onclick="decrement('days')">-</button>
<input type="number" id="days" name="days" value="0" min="0" oninput="updateFrequencyText()"> <input type="number" id="days" name="days" value="0" min="0" oninput="updateFrequencyText()">
<button type="button" onclick="increment('days')">+</button> <button class="default-access-button" type="button" onclick="increment('days')">+</button>
</div> </div>
<div class="frequency-control"> <div class="frequency-control">
<label for="hours">Hours:</label> <label for="hours">Hours:</label>
<button type="button" onclick="decrement('hours')">-</button> <button class="default-access-button" type="button" onclick="decrement('hours')">-</button>
<input type="number" id="hours" name="hours" value="0" min="0" oninput="updateFrequencyText()"> <input type="number" id="hours" name="hours" value="0" min="0" oninput="updateFrequencyText()">
<button type="button" onclick="increment('hours')">+</button> <button class="default-access-button" type="button" onclick="increment('hours')">+</button>
</div> </div>
<div class="frequency-control"> <div class="frequency-control">
<label for="minutes">Minutes:</label> <label for="minutes">Minutes:</label>
<button type="button" onclick="decrement('minutes')">-</button> <button class="default-access-button" type="button" onclick="decrement('minutes')">-</button>
<input type="number" id="minutes" name="minutes" value="0" min="0" oninput="updateFrequencyText()"> <input type="number" id="minutes" name="minutes" value="0" min="0" oninput="updateFrequencyText()">
<button type="button" onclick="increment('minutes')">+</button> <button class="default-access-button" type="button" onclick="increment('minutes')">+</button>
</div> </div>
<span id="frequency-text">une image sera prise toutes les 0 jours 0 heures 0 minutes</span> <span id="frequency-text">une image sera prise toutes les 0 jours 0 heures 0 minutes</span>
<br> <br>
<button id="commencer" class="btn btn-primary">Lancer</button> <button id="commencer" class="default-access-button">Lancer</button>
</div> </div>
</div> </div>
<!-- page classique --> <!-- page classique -->
<div id="section" class="container mt-5"> <div>
<div class="row"> <div>
<div class="col-md-12"> <div class="buttons-container">
<div class="buttons-container" style="float: left; width: 10%"> <button class="default-button" id="projets">Menu Principal</button>
<button class="btn btn-primary" id="projets"> <div class="box">
<span> Menu Principal</span> <select name="videos" id="video_selector"></select>
</button>
</div>
<div class="buttons-container buttons-container2 " id="delete-placeholder">
</div>
<div class="buttons-container buttons-container2" id="start-timelapse"></div>
<h3 id="name_project" class="text-black" style="float: right; width: 50%"></h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="addVideoHandler">
<select name="videos" id="video_selector" class="select2"></select>
<div class="buttons-container">
<button class="btn btn-primary" id="show-form-button-camera">
<span> + </span>
</button>
</div> </div>
<div id="start-timelapse"></div>
<button class="default-access-button" id="show-form-button-camera">+</button>
<div id="delete-placeholder"></div>
</div> </div>
<div id="metric_viewer_placeholder">
<canvas id="metric_viewer"></canvas>
</div>
<div id="video-container"><span>Pas de vidéos pour le projet par défaut</span></div>
</div> </div>
<div class="col-md-6"> <div>
<div id="content1" class="hiddenTable"> <h3 id="name_project"></h3>
<table class="table table-striped scrollable sticky-header .thead-dark" id="table-image"> </div>
<thead> <div class="nexter">
<tr> <div id="metric_viewer_placeholder" >
<th colspan="3"> <canvas id="metric_viewer"></canvas>
<button class="btn btn-primary" id="toggle-view"> </div>
See all images <div class="video_placeHolder" id="video-container">
</button>
</th>
</tr>
</thead>
<tbody id="imageSource"></tbody>
</table>
</div>
</div> </div>
</div> </div>
<div class="nexter">
<div id="content1" class="hiddenTable">
<table class="customTable" id="table-image">
<tbody id="imageSource"></tbody>
</table>
</div>
</div>
<a class="arrow-icon" id="toggle-view">
<span class="left-bar"></span>
<span class="right-bar"></span>
</a>
</div> </div>
<footer>
<p>&copy; 2025 Timelapse. All rights reserved.</p>
</footer>
<script src="../js/utilities/chart.js"></script> <script src="../js/utilities/chart.js"></script>
<script src="../js/utilities/jquery.js"></script> <script src="../js/utilities/jquery.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
<script src="../js/utilities/constVariables.js"></script> <script src="../js/utilities/constVariables.js"></script>
<script src="../js/utilities/populate.js"></script> <script src="../js/utilities/populate.js"></script>
<script src="../js/utilities/routes.js"></script> <script src="../js/utilities/routes.js"></script>
<script src="../js/utilities/tools.js"></script> <script src="../js/utilities/tools.js"></script>
<script src="../js/projet_detail.js"></script> <script src="../js/projet_detail.js"></script>
</body> </body>
<footer>
<p>&copy; 2025 Timelapse. All rights reserved.</p>
</footer>
</html> </html>

BIN
image/camera-image Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 285 KiB

43
index.html
View File

@@ -6,9 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timelapse</title> <title>Timelapse</title>
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" <link rel="stylesheet" href="../css/style_menu.css">
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head> </head>
<body> <body>
@@ -16,14 +14,14 @@
<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>
<div class="modal-buttons"> <div class="modal-buttons">
<button class="btn btn-danger"id="cancelBtn">Cancel</button> <button class="default-access-button" id="cancelBtn">Cancel</button>
<button class="btn btn-primary"id="okBtn">OK</button> <button class="default-access-button" id="okBtn">OK</button>
</div> </div>
</div> </div>
</div> </div>
<div id="form-container" class="form-container" style="display: none"> <div id="form-container" class="form-container" style="display: none">
<div class="form-content" id="place-of-form"> <div class="form-content" id="place-of-form">
<button id="close-form-button" class="close-button">&times;</button> <button id="close-form-button" class="default-delete-button">&times;</button>
<h1>Formulaire</h1> <h1>Formulaire</h1>
<div id="my-form"> <div id="my-form">
<label for="name">Nom :</label> <label for="name">Nom :</label>
@@ -32,40 +30,33 @@
<label for="description">Description :</label> <label for="description">Description :</label>
<input type="text" id="description" name="description" required /> <input type="text" id="description" name="description" required />
<br /><br /> <br /><br />
<button class="default-button" id="submit">Soumettre</button>
<button class="btn btn-primary" id="submit">Soumettre</button>
</div> </div>
</div> </div>
</div> </div>
<div id="section" class="container mt-5"> <div id="section" class="container2">
<div class="buttons-container mb-4"> <div>
<button class="btn btn-primary" id="download" ><span>Download App</span></button> <button class="default-button" id="download"><span>Download App</span></button>
<button class="btn btn-primary" id="show-form-button"><span>+</span></button> <button class="default-button" id="show-form-button"><span>+</span></button>
</div> </div>
<table class="table table-striped" id="table-projects"> <div id="carousel-container">
<thead class="bg-blue-600 text-white"> <button id="prev-button" class="nav-button">&larr;</button>
<tr> <div id="carousel">
<th>Name</th> <!-- Projects will be dynamically inserted here -->
<th>Images</th> </div>
<th>Actions</th> <button id="next-button" class="nav-button">&rarr;</button>
</tr> </div>
</thead>
<tbody></tbody>
</table>
</div> </div>
<footer class="text-center mt-5 py-3"> <footer class="text-center mt-5 py-3">
<p>&copy; 2025 Timelapse. All rights reserved.</p> <p>&copy; 2025 Timelapse. All rights reserved.</p>
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="./js/utilities/jquery.js"></script>
<script src="../js/utilities/constVariables.js"></script> <script src="../js/utilities/constVariables.js"></script>
<script src="../js/utilities/routes.js"></script> <script src="../js/utilities/routes.js"></script>
<script src="../js/index.js"></script> <script src="../js/index.js"></script>
<script>
</script>
</body> </body>
</html> </html>

152
js/index.js
View File

@@ -1,7 +1,30 @@
// Function to display projects in a table document.addEventListener("DOMContentLoaded", () => {
function display_projects() { getAllProject()
// Get data from API and then generate HTML code to display the data in a table .then((project_list) => {
const table = document.getElementById("table-projects"); global_project_list = project_list;
setupCarousel(global_project_list);
})
.catch((error) => {
console.error(error);
});
});
function formatStatus(status) {
switch (status) {
case 0:
return "brouillon";
case 1:
return "en cours";
case 2:
return "terminé";
case 3:
return "En cours de génération";
default:
return "inconnu";
}
}
function setupCarousel(global_project_list) {
const formContainer = document.getElementById('form-container'); const formContainer = document.getElementById('form-container');
function showForm() { function showForm() {
@@ -20,13 +43,13 @@ function display_projects() {
const nameProject = document.getElementById('name').value; const nameProject = document.getElementById('name').value;
const description = document.getElementById('description').value; const description = document.getElementById('description').value;
if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) { if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' + alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
'veuillez en trouver un autre'); 'veuillez en trouver un autre');
return 0; return;
} }
PostNewProject(nameProject, description).then(() => { PostNewProject(nameProject, description).then(() => {
location.reload();}) location.reload();
});
} }
function checkName(Projects, name) { function checkName(Projects, name) {
@@ -39,70 +62,83 @@ function display_projects() {
return res; return res;
} }
let datas = `<tr> const carousel = document.getElementById('carousel');
<th>Id</th> let currentIndex = 0;
<th>Name</th>
<th>Date</th>
<th>Status</th>
<th>Actions</th>
<th>Delete Project</th>
</tr> `;
for (let i = 0; i < global_project_list.length; i++) {
datas += `<tr>
<th>${global_project_list[i].id}</th>
<th>${global_project_list[i].name}</th>
<th>${formatDate(global_project_list[i].start_date)}</th>
<th>${global_project_list[i].status}</th>
<th><button class="project_detail btn btn-primary">détails de ${
global_project_list[i].name
}</button></th>
<th><button name="${i}" class="project_delete btn btn-danger">Delete</button></th>
</tr>`;
}
table.innerHTML = datas;
// Select all the buttons_access with the class button_project function updateCarousel() {
const buttons_access = document.getElementsByClassName("project_detail"); const projectWidth = document.querySelector('.project').clientWidth;
const buttons_delete = document.getElementsByClassName("project_delete"); carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
// Add an event listener to each button
for (let i = 0; i < buttons_access.length; i++) {
buttons_access[i].addEventListener("click", (event) => {
// Send data to API and then navigate to projet_detail.html page
window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
});
buttons_access[i].addEventListener("click", (event) => {
// Send data to API and then navigate to projet_detail.html page
current_project = change_current_project(i);
});
} }
for (let i = 0; i < buttons_delete.length; i++) { function showPrevProject() {
buttons_delete[i].addEventListener("click", (event) => { if (currentIndex > 0) {
const projectName = global_project_list[i].name; currentIndex--;
updateCarousel();
} else {
currentIndex = global_project_list.length - 1;
updateCarousel();
}
}
function showNextProject() {
if (currentIndex < global_project_list.length - 1) {
currentIndex++;
updateCarousel();
} else {
currentIndex = 0;
updateCarousel();
}
}
document.getElementById('prev-button').addEventListener('click', showPrevProject);
document.getElementById('next-button').addEventListener('click', showNextProject);
// Populate the carousel with project data
global_project_list.forEach(project => {
const projectDiv = document.createElement('div');
projectDiv.classList.add('project');
projectDiv.innerHTML = `
<h2>Nom : ${project.name}</h2>
<p>Date : ${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>
</div>
`;
carousel.appendChild(projectDiv);
// 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}`;
change_current_project(global_project_list.indexOf(project));
});
// Add event listener for project delete button
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('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 // Call your delete function here
deleteProject(global_project_list[i].id).then(()=>{ deleteProject(project.id).then(() => {
location.reload(); location.reload();
}) });
}; };
document.getElementById('cancelBtn').onclick = function() { document.getElementById('cancelBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none'; document.getElementById('customAlert').style.display = 'none';
}; };
}); });
}
}
getAllProject()
.then((project_list) => {
global_project_list = project_list;
// Call the next function here
display_projects();
})
.catch((error) => {
console.error(error);
}); });
// Initial update to set the correct position
updateCarousel();
}

24
js/projet_detail.js
View File

@@ -163,12 +163,6 @@ document.addEventListener("DOMContentLoaded", async () => {
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo + alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
'\nRésolution : ' + videoResolution + '\nRésolution : ' + videoResolution +
'\nDurée : ' + videoDuration + ' secondes'); '\nDurée : ' + videoDuration + ' secondes');
}).then(()=>{
getDataProjectVideosFromApi(projectId).then((data)=>{
idVideo = data[data.length-1].id
console.log(idVideo)
renderVideo(idVideo)
})
}) })
} }
@@ -181,11 +175,9 @@ document.addEventListener("DOMContentLoaded", async () => {
if (tableImage.classList.contains("hiddenTable")) { if (tableImage.classList.contains("hiddenTable")) {
tableImage.classList.remove("hiddenTable"); tableImage.classList.remove("hiddenTable");
tableImage.classList.add("full-view"); tableImage.classList.add("full-view");
document.getElementById("toggle-view").innerHTML = "See first images";
} else { } else {
tableImage.classList.remove("full-view"); tableImage.classList.remove("full-view");
tableImage.classList.add("hiddenTable"); tableImage.classList.add("hiddenTable");
document.getElementById("toggle-view").innerHTML = "See all images";
} }
} }
@@ -230,7 +222,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 id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`; 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>`;
row.appendChild(imageTD); row.appendChild(imageTD);
if ((i + 1) % 3 === 0 && i !== 0) { if ((i + 1) % 3 === 0 && i !== 0) {
@@ -274,7 +266,7 @@ async function generateViewMetric(projectId) {
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]); samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
if(currentVideoDatas[0].status != 0){ if(currentVideoDatas[0].status != 0){
videoPlaceHolder.innerHTML=` videoPlaceHolder.innerHTML=`
<video width="600" controls> <video class="video" controls>
<source src="${api_url}/videos/file/${videoId}" type="video/mp4"> <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
Your browser does not support the video tag. Your browser does not support the video tag.
</video>` </video>`
@@ -282,13 +274,15 @@ async function generateViewMetric(projectId) {
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="btn btn-danger delete-video-button" data-video-id="${videoId}">Delete Video</button> <button id="delete-video" class="default-delete-button" data-video-id="${videoId}">Delete Video</button>
` `
document.getElementById("delete-video").addEventListener("click", ()=>{ document.getElementById("delete-video").addEventListener("click", ()=>{
showConfirmationAlert(videoId) showConfirmationAlert(videoId)
}) })
tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples) tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
} else { } else {
deletePlaceHolder.innerHTML=''
videoPlaceHolder.innerHTML=''
samples=measurements.map(measurements => measurements.id); samples=measurements.map(measurements => measurements.id);
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples); tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
} }
@@ -309,7 +303,7 @@ async function generateViewMetric(projectId) {
labels: datesMeasurement, labels: datesMeasurement,
datasets: [ datasets: [
{ {
label: "Température (F°)", label: "Température (C°)",
data: Temperature, data: Temperature,
fill: false, fill: false,
borderColor: "rgba(75, 192, 192, 1)", borderColor: "rgba(75, 192, 192, 1)",
@@ -420,7 +414,7 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
async function populateTimelapseLogic(placeholder,id) { async function populateTimelapseLogic(placeholder,id) {
const data = await getSingleProject(id); const data = await getSingleProject(id);
if(data.status == 0){ if(data.status == 0){
placeholder.innerHTML = `<button class="btn btn-primary" id="show-form-button-camera"> placeholder.innerHTML = `<button class="default-button" id="show-form-button-camera">
<span> Configurer la caméra </span> <span> Configurer la caméra </span>
</button>` </button>`
} else if (data.status == 1) { } else if (data.status == 1) {
@@ -455,4 +449,6 @@ function updateFrequencyText() {
document.getElementById('frequency-text').innerHTML = frequencyText; document.getElementById('frequency-text').innerHTML = frequencyText;
} }
$( ".arrow-icon" ).click(function() {
$(this).toggleClass("open");
});