maj

js/projet_detail.js

@@ -1,5 +1,4 @@
 let myChart;
-
 document.addEventListener("DOMContentLoaded", async () => {
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
@@ -13,22 +12,27 @@ document.addEventListener("DOMContentLoaded", async () => {
   const resultContainer = document.getElementById('result-container');
   const choiceSelect = document.getElementById('choice');
   const oneByOneContainer = document.getElementById('one-by-one-container');
+  const firstLastContainer = document.getElementById('first-last-container');
   const addNumberButton = document.getElementById('add-number-button');
   const formContainer = document.getElementById('form-container');
   const durationInput = document.getElementById('duration');
   const tableBody = document.getElementById("imageSource");
   const tableImage = document.getElementById("content1");
+  const numberBoard = document.getElementById('number-board');
 
   let selectedNumbers = [];
 
-  choiceSelect.addEventListener('change', toggleOneByOneContainer);
-  addNumberButton.addEventListener('click', addSelectedNumber);
+  choiceSelect.addEventListener('change', toggleContainers);
+
+  if (addNumberButton) {
+    addNumberButton.addEventListener('click', addSelectedNumber);
+  }
   videoSelector.addEventListener("change", () => generateViewMetric(projectId));
   document.getElementById('show-form-button').addEventListener('click', showForm);
   document.getElementById('close-form-button').addEventListener('click', hideForm);
   document.getElementById('increment-button').addEventListener('click', incrementDuration);
   document.getElementById('decrement-button').addEventListener('click', decrementDuration);
-  document.getElementById('my-form').addEventListener('submit', handleFormSubmit);
+  document.getElementById('submit').addEventListener('click', handleFormSubmit);
   document.getElementById("projets").addEventListener("click", navigateToProjects);
   document.getElementById("toggle-view").addEventListener("click", toggleView);
 
@@ -36,8 +40,44 @@ document.addEventListener("DOMContentLoaded", async () => {
   PopulateSelect(videoSelector, projectId);
   populateImageTable(DataMetrics);
 
-  function toggleOneByOneContainer() {
-    oneByOneContainer.style.display = choiceSelect.value === 'oneByOne' ? 'block' : 'none';
+  function toggleContainers() {
+    if (choiceSelect.value === 'oneByOne') {
+      oneByOneContainer.style.display = 'block';
+      firstLastContainer.style.display = 'none';
+      populateNumberBoard(DataMetrics.length);
+      setRequiredAttributes();
+    } else {
+      oneByOneContainer.style.display = 'none';
+      firstLastContainer.style.display = 'block';
+      const last = document.getElementById('last');
+      last.value = DataMetrics.length;
+      last.max = DataMetrics.length;
+      document.getElementById('first').max = last.value;
+      setRequiredAttributes();
+    }
+  }
+  toggleContainers();
+
+  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;
+    }
+
+    // Assuming you have some logic to handle the required attribute for one-by-one container
+    // For example, if you have input fields in the one-by-one container, you can set their required attribute here
   }
 
   function addSelectedNumber() {
@@ -120,6 +160,21 @@ document.addEventListener("DOMContentLoaded", async () => {
       i++;
     });
   }
+
+  function populateNumberBoard(length) {
+    numberBoard.innerHTML = '';
+    for (let i = 1; i <= length; i++) {
+      const numberButton = document.createElement('button');
+      numberButton.classList.add('number-button');
+      numberButton.textContent = i;
+      numberButton.addEventListener('click', () => highlightNumber(numberButton));
+      numberBoard.appendChild(numberButton);
+    }
+  }
+
+  function highlightNumber(button) {
+    button.classList.toggle('highlight');
+  }
 });
 
 async function generateViewMetric(projectId) {