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:
anto
2025-01-17 08:00:46 +01:00
parent 27cc6d4c03
commit ec6d1c1854
3 changed files with 99 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@@ -75,6 +75,7 @@ footer {
} }
.duration-input { .duration-input {
margin-left: 33%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@@ -83,6 +84,7 @@ footer {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin: 0 5px; margin: 0 5px;
align-items: center;
} }
.duration-input input { .duration-input input {
@@ -93,3 +95,20 @@ footer {
#close-form-button { #close-form-button {
margin-top: 20px; 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%;
}

26
html/projet_detail.html
View File

@@ -20,10 +20,10 @@
</head> </head>
<body> <body>
<!-- formulaire --> <!-- formulaire -->
<div id="form-container" class="form-container"> <div id="form-container" class="form-container" style="display: none;">
<div class="form-content"> <div class="form-content">
<h1>Formulaire</h1> <h1>Formulaire</h1>
<form id="my-form"> <div id="my-form">
<label for="name">Nom :</label> <label for="name">Nom :</label>
<input type="text" id="name" name="name" required> <input type="text" id="name" name="name" required>
<br><br> <br><br>
@@ -45,16 +45,28 @@
<option value="oneByOne">One by One</option> <option value="oneByOne">One by One</option>
</select> </select>
<br><br> <br><br>
<div id="first-last-container" style="display: block;">
<label for="first">First:</label>
<input type="number" id="first" name="first" value="1" min="1">
<br><br>
<label for="last">Last:</label>
<input type="number" id="last" name="last">
<br><br>
<label for="fraction">Fraction:</label>
<div class="fraction-input">
<input type="number" id="numerator" name="numerator" value="1" min="1">
<span>/</span>
<input type="number" id="denominator" name="denominator" value="1" min="1">
</div>
</div>
<div id="one-by-one-container" style="display: none;"> <div id="one-by-one-container" style="display: none;">
<label for="number-picker">Pick a Number:</label> <div id="number-board"></div>
<select id="number-picker" name="number-picker"></select>
<button type="button" id="add-number-button">Add Number</button>
</div> </div>
<br><br> <br><br>
<div id="result-container"></div> <div id="result-container"></div>
<br><br> <br><br>
<button class="btn btn-primary" type="submit">Soumettre</button> <button class="btn btn-primary" id="submit">Soumettre</button>
</form> </div>
<button class="btn btn-primary" id="close-form-button">Fermer</button> <button class="btn btn-primary" id="close-form-button">Fermer</button>
</div> </div>
</div> </div>

65
js/projet_detail.js
View File

@@ -1,5 +1,4 @@
let myChart; let myChart;
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get("id"); const projectId = urlParams.get("id");
@@ -13,22 +12,27 @@ document.addEventListener("DOMContentLoaded", async () => {
const resultContainer = document.getElementById('result-container'); const resultContainer = document.getElementById('result-container');
const choiceSelect = document.getElementById('choice'); const choiceSelect = document.getElementById('choice');
const oneByOneContainer = document.getElementById('one-by-one-container'); const oneByOneContainer = document.getElementById('one-by-one-container');
const firstLastContainer = document.getElementById('first-last-container');
const addNumberButton = document.getElementById('add-number-button'); const addNumberButton = document.getElementById('add-number-button');
const formContainer = document.getElementById('form-container'); const formContainer = document.getElementById('form-container');
const durationInput = document.getElementById('duration'); const durationInput = document.getElementById('duration');
const tableBody = document.getElementById("imageSource"); const tableBody = document.getElementById("imageSource");
const tableImage = document.getElementById("content1"); const tableImage = document.getElementById("content1");
const numberBoard = document.getElementById('number-board');
let selectedNumbers = []; let selectedNumbers = [];
choiceSelect.addEventListener('change', toggleOneByOneContainer); choiceSelect.addEventListener('change', toggleContainers);
if (addNumberButton) {
addNumberButton.addEventListener('click', addSelectedNumber); addNumberButton.addEventListener('click', addSelectedNumber);
}
videoSelector.addEventListener("change", () => generateViewMetric(projectId)); videoSelector.addEventListener("change", () => generateViewMetric(projectId));
document.getElementById('show-form-button').addEventListener('click', showForm); document.getElementById('show-form-button').addEventListener('click', showForm);
document.getElementById('close-form-button').addEventListener('click', hideForm); document.getElementById('close-form-button').addEventListener('click', hideForm);
document.getElementById('increment-button').addEventListener('click', incrementDuration); document.getElementById('increment-button').addEventListener('click', incrementDuration);
document.getElementById('decrement-button').addEventListener('click', decrementDuration); 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("projets").addEventListener("click", navigateToProjects);
document.getElementById("toggle-view").addEventListener("click", toggleView); document.getElementById("toggle-view").addEventListener("click", toggleView);
@@ -36,8 +40,44 @@ document.addEventListener("DOMContentLoaded", async () => {
PopulateSelect(videoSelector, projectId); PopulateSelect(videoSelector, projectId);
populateImageTable(DataMetrics); populateImageTable(DataMetrics);
function toggleOneByOneContainer() { function toggleContainers() {
oneByOneContainer.style.display = choiceSelect.value === 'oneByOne' ? 'block' : 'none'; 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() { function addSelectedNumber() {
@@ -120,6 +160,21 @@ document.addEventListener("DOMContentLoaded", async () => {
i++; 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) { async function generateViewMetric(projectId) {