diff --git a/css/style.css b/css/style.css index d3b2bfb..e5f16d2 100644 --- a/css/style.css +++ b/css/style.css @@ -75,6 +75,7 @@ footer { } .duration-input { + margin-left: 33%; display: flex; align-items: center; } @@ -83,6 +84,7 @@ footer { width: 30px; height: 30px; margin: 0 5px; + align-items: center; } .duration-input input { @@ -92,4 +94,21 @@ footer { #close-form-button { margin-top: 20px; +} + +.number-button { + background-color: #f0f0f0; + border: 1px solid #ccc; + padding: 10px; + margin: 5px; + cursor: pointer; +} + +.number-button.highlight { + background-color: #ff0000; + color: #fff; +} + +#numerator,#denominator{ + width: 25%; } \ No newline at end of file diff --git a/html/projet_detail.html b/html/projet_detail.html index 33791cf..82b3308 100644 --- a/html/projet_detail.html +++ b/html/projet_detail.html @@ -20,10 +20,10 @@ -
+ diff --git a/js/projet_detail.js b/js/projet_detail.js index fba2841..3d1f079 100644 --- a/js/projet_detail.js +++ b/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) {