anto

css/style.css

@@ -6,6 +6,10 @@ footer {
   text-align: center;
   position: fixed;
   bottom: 0;
+  width: 100%;
+  background-color: #f8f9fa;
+  padding: 10px;
+  border-top: 1px solid #e7e7e7;
 }
 
 .row {
@@ -38,14 +42,16 @@ footer {
   position: sticky;
   top: 0;
   z-index: 1;
+  background-color: #fff;
 }
 
 #addVideoHandler {
   display: flex;
+  align-items: center;
 }
 
 #show-form-button {
-  left: 20px;
+  margin-left: 20px;
 }
 
 .form-container {
@@ -63,24 +69,29 @@ footer {
 
 .form-content {
   background-color: #fff;
-  padding: 20px;
+  padding: 30px;
-  border-radius: 8px;
+  border-radius: 12px;
-  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: left;
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 90%;
-  max-height: 80vh; /* Adjust the max-height as needed */
+  max-width: 600px;
+  max-height: 90vh; /* Adjust the max-height as needed */
   overflow-y: auto;
-
 }
 
 .form-content h1 {
   margin: 0;
   margin-bottom: 20px;
+  font-size: 1.5rem;
+  color: #333;
 }
 
 .form-content label {
   margin-bottom: 10px;
+  font-weight: bold;
+  color: #555;
 }
 
 .form-content input,
@@ -88,40 +99,59 @@ footer {
 .form-content .duration-input,
 .form-content .fraction-input {
   margin-bottom: 20px;
-  padding: 10px;
+  padding: 12px;
   font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .form-content .duration-input,
 .form-content .fraction-input {
   display: flex;
   align-items: center;
-}
+  justify-content: center;
-
-.form-content .duration-input {
-  margin-left: 33%;
 }
 
 .form-content .duration-input button,
 .form-content .fraction-input button {
-  width: 30px;
+  width: 40px;
-  height: 30px;
+  height: 40px;
-  margin: 0 5px;
+  margin: 0 10px;
-  align-items: center;
+  background-color: #007bff;
-  padding: 10px;
+  color: #fff;
-  font-size: 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.form-content .duration-input button:hover,
+.form-content .fraction-input button:hover {
+  background-color: #0056b3;
 }
 
 .form-content .duration-input input {
-  width: 50px;
+  width: 60px;
   text-align: center;
 }
 
-.form-content #submit,
+.form-content #submit {
-.form-content #close-form-button {
   margin-top: 20px;
-  padding: 10px;
+  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 {
@@ -140,6 +170,7 @@ footer {
   cursor: pointer;
   transition: background-color 0.3s;
   margin: 5px;
+  border-radius: 4px;
 }
 
 .number-button.highlight {
@@ -148,5 +179,29 @@ footer {
 }
 
 #numerator, #denominator {
-  width: 25%;
+  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;
+  justify-content: center;
+  align-items: center;
+  z-index: 30;
+}
+
+.close-button:hover {
+  background-color: darkred;
+}
+

html/projet_detail.html

@@ -25,6 +25,7 @@
     <!-- formulaire -->
     <div id="form-container" class="form-container" style="display: none">
       <div class="form-content">
+        <button id="close-form-button" class="close-button">&times;</button>
         <h1>Formulaire</h1>
         <div id="my-form">
           <label for="name">Nom :</label>
@@ -66,14 +67,7 @@
             <br /><br />
             <label for="fraction">Fraction:</label>
             <div class="fraction-input">
-              <input
+              <span>1/</span>
-                type="number"
-                id="numerator"
-                name="numerator"
-                value="1"
-                min="1"
-              />
-              <span>/</span>
               <input
                 type="number"
                 id="denominator"
@@ -91,7 +85,6 @@
           <br /><br />
           <button class="btn btn-primary" id="submit">Soumettre</button>
         </div>
-        <button class="btn btn-primary" id="close-form-button">Fermer</button>
       </div>
     </div>
     <!-- page classique -->

js/projet_detail.js

@@ -69,18 +69,15 @@ document.addEventListener("DOMContentLoaded", async () => {
   function setRequiredAttributes() {
     const firstInput = document.getElementById('first');
     const lastInput = document.getElementById('last');
-    const numeratorInput = document.getElementById('numerator');
     const denominatorInput = document.getElementById('denominator');
 
     if (firstLastContainer.style.display === 'block') {
       firstInput.required = true;
       lastInput.required = true;
-      numeratorInput.required = true;
       denominatorInput.required = true;
     } else {
       firstInput.required = false;
       lastInput.required = false;
-      numeratorInput.required = false;
       denominatorInput.required = false;
     }
   }
@@ -128,7 +125,8 @@ document.addEventListener("DOMContentLoaded", async () => {
         return 0;
     }
     const choice = choiceSelect.value
-    const measurementIds = getMeasurermentsIdsFromForm(choice,firstInput,lastInput);
+    const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput);
+    console.log(measurementIds)
     postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
       .then(()=>{
         alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +

js/utilities/tools.js

@@ -24,21 +24,25 @@ function checkVideoPath(videos, name) {
   return res;
 }
 
-function getMeasurermentsIdsFromForm(choice, firstInput,lastInput) {
+function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
   if (choice === 'oneByOne') {
     const highlightedButtons = document.querySelectorAll('.number-button.highlight');
     return Array.from(highlightedButtons).map(button => parseInt(button.textContent));
   } else {
     const first = parseInt(firstInput.value);
     const last = parseInt(lastInput.value);
-    const numerator = parseInt(document.getElementById('numerator').value);
     const denominator = parseInt(document.getElementById('denominator').value);
-    const fraction = numerator / denominator;
 
-    const measurementIds = [];
+    const measurementIds = new Set();
-    for (let i = first; i <= last; i += fraction) {
+    measurementIds.add(first); // Always include the first image
-      measurementIds.push(Math.round(i));
+    // Iterate through the range, adding the step size
+    for (let i = first + denominator; i <= last; i += denominator) {
+      measurementIds.add(i);
     }
-    return measurementIds;
+
+    measurementIds.add(last); // Always include the last image
+
+    // Convert the Set back to an array and sort it
+    return Array.from(measurementIds).sort((a, b) => a - b);
   }
 }