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

anto

Browse Source
This commit is contained in:
arussac
2025-02-12 08:48:28 +01:00
parent 3d5612bf4a
commit a88678fc3f
5 changed files with 246 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
css/style.css
View File

@@ -33,12 +33,14 @@ footer {
max-height: none; max-height: none;
overflow-y: visible; overflow-y: visible;
} }
.sticky-header thead{
.sticky-header thead {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
#addVideoHandler{
#addVideoHandler {
display: flex; display: flex;
} }
@@ -64,51 +66,87 @@ footer {
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
display: flex;
flex-direction: column;
width: 50%;
max-height: 80vh; /* Adjust the max-height as needed */
overflow-y: auto;
} }
.form-content h1 { .form-content h1 {
margin: 0; margin: 0;
margin-bottom: 20px;
} }
#close-form-button { .form-content label {
margin-top: 20px; margin-bottom: 10px;
} }
.duration-input { .form-content input,
margin-left: 33%; .form-content select,
.form-content .duration-input,
.form-content .fraction-input {
margin-bottom: 20px;
padding: 10px;
font-size: 1rem;
}
.form-content .duration-input,
.form-content .fraction-input {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.duration-input button { .form-content .duration-input {
margin-left: 33%;
}
.form-content .duration-input button,
.form-content .fraction-input button {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin: 0 5px; margin: 0 5px;
align-items: center; align-items: center;
padding: 10px;
font-size: 1rem;
} }
.duration-input input { .form-content .duration-input input {
width: 50px; width: 50px;
text-align: center; text-align: center;
} }
#close-form-button { .form-content #submit,
.form-content #close-form-button {
margin-top: 20px; margin-top: 20px;
padding: 10px;
font-size: 1rem;
}
#number-board {
display: grid;
gap: 10px;
justify-content: center;
max-height: 40vh; /* Adjust the max-height as needed */
overflow-y: auto;
} }
.number-button { .number-button {
padding: 10px;
font-size: 1rem;
background-color: #f0f0f0; background-color: #f0f0f0;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px;
margin: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s;
margin: 5px;
} }
.number-button.highlight { .number-button.highlight {
background-color: #ff0000; background-color: red;
color: #fff; color: #fff;
} }
#numerator,#denominator{ #numerator, #denominator {
width: 25%; width: 25%;
} }

273
html/projet_detail.html
View File

@@ -1,142 +1,165 @@
<!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 <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link <link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet" rel="stylesheet"
/> />
<!-- Select2 CSS --> <!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" /> <link
</head> href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css"
<body> rel="stylesheet"
<!-- formulaire --> />
<div id="form-container" class="form-container" style="display: none;"> </head>
<div class="form-content"> <body>
<!-- formulaire -->
<div id="form-container" class="form-container" style="display: none">
<div class="form-content">
<h1>Formulaire</h1> <h1>Formulaire</h1>
<div 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 />
<label for="resolution">Résolution :</label> <label for="resolution">Résolution :</label>
<select id="resolution" name="resolution" required> <select id="resolution" name="resolution" required>
<option value="1920x1080">1920x1080</option> <option value="1920x1080">1920x1080</option>
<option value="1280x720">1280x720</option> <option value="1280x720">1280x720</option>
</select> </select>
<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" id="decrement-button">-</button>
<input type="number" id="duration" name="duration" value="0" min="0" required> <input
<button type="button" id="increment-button">+</button> type="number"
</div> id="duration"
<label for="choice">Options :</label> name="duration"
<select id="choice" name="choice"> value="0"
<option value="firstLast">première et dernière image</option> min="0"
<option value="oneByOne">sélectionner les images une par une</option> required
</select> />
<br><br> <button type="button" id="increment-button">+</button>
<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="number-board"></div>
</div>
<br><br>
<div id="result-container"></div>
<br><br>
<button class="btn btn-primary" id="submit">Soumettre</button>
</div> </div>
<button class="btn btn-primary" id="close-form-button">Fermer</button> <label for="choice">Options :</label>
</div> <select id="choice" name="choice">
</div> <option value="firstLast">première et dernière image</option>
<!-- page classique --> <option value="oneByOne">
<div id="section" class="container mt-5"> sélectionner les images une par une
<div class="row"> </option>
<div class="col-md-12"> </select>
<div class="buttons-container" style="float: left; width: 20%"> <br /><br />
<button class="btn btn-primary" id="projets"> <div id="first-last-container" style="display: block">
<span> Home </span> <label for="first">First:</label>
</button> <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="number-board"></div>
</div>
<br /><br />
<div id="result-container"></div>
<br /><br />
<button class="btn btn-primary" id="submit">Soumettre</button>
</div> </div>
<h3 <button class="btn btn-primary" id="close-form-button">Fermer</button>
id="name_project"
class="text-black"
style="float: left; width: 50%"
></h3>
</div> </div>
</div> </div>
<div class="row"> <!-- page classique -->
<div class="col-md-6"> <div id="section" class="container mt-5">
<div id="addVideoHandler"> <div class="row">
<select name="videos" id="video_selector" class="select2"> <div class="col-md-12">
</select> <div class="buttons-container" style="float: left; width: 20%">
<div class="buttons-container"> <button class="btn btn-primary" id="projets">
<button class="btn btn-primary" id="show-form-button"> <span> Home </span>
<span> + </span>
</button> </button>
</div> </div>
</div> <h3
<div id="metric_viewer_placeholder"> id="name_project"
<canvas id="metric_viewer"></canvas> class="text-black"
style="float: left; width: 50%"
></h3>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="row">
<div id="content1" class="hiddenTable"> <div class="col-md-6">
<table <div id="addVideoHandler">
class="table table-striped scrollable sticky-header .thead-dark" <select name="videos" id="video_selector" class="select2"></select>
id="table-image" <div class="buttons-container">
> <button class="btn btn-primary" id="show-form-button">
<thead> <span> + </span>
<tr> </button>
<th> </div>
<button class="btn btn-primary" id="toggle-view"> </div>
See all images <div id="metric_viewer_placeholder">
</button> <canvas id="metric_viewer"></canvas>
</th> </div>
<th><button class="btn btn-primary"> </div>
export images <div class="col-md-6">
</button></th> <div id="content1" class="hiddenTable">
</tr> <table
</thead> class="table table-striped scrollable sticky-header .thead-dark"
<tbody id="imageSource"></tbody> id="table-image"
</table> >
<thead>
<tr>
<th>
<button class="btn btn-primary" id="toggle-view">
See all images
</button>
</th>
<th>
<button class="btn btn-primary">export images</button>
</th>
</tr>
</thead>
<tbody id="imageSource"></tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<footer> <footer>
<p>&copy; 2025 Timelapse. All rights reserved.</p> <p>&copy; 2025 Timelapse. All rights reserved.</p>
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 JS --> <!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script> <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>
</html> </html>

25
js/projet_detail.js
View File

@@ -83,9 +83,6 @@ document.addEventListener("DOMContentLoaded", async () => {
numeratorInput.required = false; numeratorInput.required = false;
denominatorInput.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() {
@@ -119,20 +116,25 @@ document.addEventListener("DOMContentLoaded", async () => {
const data = await getDataProjectVideosFromApi(projectId); const data = await getDataProjectVideosFromApi(projectId);
const nameVideo = document.getElementById('name').value; const nameVideo = document.getElementById('name').value;
const videoDuration = durationInput.value; const videoDuration = durationInput.value;
const videoResolution = document.getElementById('resolution').value;
if (videoDuration <= 0) { if (videoDuration <= 0) {
alert('La durée de la vidéo doit être supérieur à 0'); alert('La durée de la vidéo doit être supérieur à 0');
return 0; return 0;
} }
if (checkVideoPath(data, nameVideo) && nameVideo.length>0) { if (!checkVideoPath(data, nameVideo) || !nameVideo.length>0) {
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
'\nRésolution : ' + document.getElementById('resolution').value +
'\nDurée : ' + videoDuration + ' secondes');
} else {
alert('Le nom : " ' + nameVideo + ' " est déjà pris ou vide ! \n' + alert('Le nom : " ' + nameVideo + ' " est déjà pris ou vide ! \n' +
'veuillez en trouver un autre'); 'veuillez en trouver un autre');
return 0; return 0;
} }
const choice = choiceSelect.value
const measurementIds = getMeasurermentsIdsFromForm(choice,firstInput,lastInput);
postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
.then(()=>{
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
'\nRésolution : ' + videoResolution +
'\nDurée : ' + videoDuration + ' secondes');
})
} }
function navigateToProjects() { function navigateToProjects() {
@@ -153,6 +155,7 @@ document.addEventListener("DOMContentLoaded", async () => {
function populateNumberBoard(length) { function populateNumberBoard(length) {
numberBoard.innerHTML = ''; numberBoard.innerHTML = '';
numberBoard.style.gridTemplateColumns = `repeat(auto-fill, minmax(50px, 1fr))`;
for (let i = 1; i <= length; i++) { for (let i = 1; i <= length; i++) {
const numberButton = document.createElement('button'); const numberButton = document.createElement('button');
numberButton.classList.add('number-button'); numberButton.classList.add('number-button');
@@ -161,6 +164,7 @@ document.addEventListener("DOMContentLoaded", async () => {
numberBoard.appendChild(numberButton); numberBoard.appendChild(numberButton);
} }
} }
function highlightNumber(button) { function highlightNumber(button) {
button.classList.toggle('highlight'); button.classList.toggle('highlight');
} }
@@ -190,7 +194,6 @@ 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");
console.log(`${api_url}/images/${measure.project_id}/${measure.order_id}`)
imageTD.innerHTML = `<img id="${i}" src="${api_url}/images/${measure.project_id}/${measure.order_id}"/>`; imageTD.innerHTML = `<img id="${i}" src="${api_url}/images/${measure.project_id}/${measure.order_id}"/>`;
row.appendChild(imageTD); row.appendChild(imageTD);
@@ -232,7 +235,7 @@ async function generateViewMetric(projectId) {
} else { } else {
samples=measurements.map(measurements => measurements.id); samples=measurements.map(measurements => measurements.id);
} }
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples); tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
tempoMeasure.forEach((measure) => { tempoMeasure.forEach((measure) => {
datesMeasurement.push(measure.timestamp); datesMeasurement.push(measure.timestamp);
@@ -284,4 +287,4 @@ async function generateViewMetric(projectId) {
}, },
}, },
}) })
} }

15
js/utilities/routes.js
View File

@@ -72,16 +72,27 @@ async function getDataVideoFromApi(id) {
} }
} }
async function postNewVideo(project_id, measurements_id, name_video, resolution, duration){ async function postNewVideo(project_id, measurements_id, name_video, resolution, duration) {
try { try {
const response = await $.ajax({ const response = await $.ajax({
url: api_url.concat(`/videos/`), url: api_url.concat(`/videos/`),
method: "POST", method: "POST",
dataType: "json", dataType: "json",
contentType: "application/json", // Specify the content type as JSON
data: JSON.stringify({
project_id: project_id,
measurements_id: measurements_id,
name_video: name_video,
resolution: resolution,
duration: duration
})
}); });
// If the request is successful, store the data in the cache and return it // If the request is successful, store the data in the cache and return it
console.log("Video posted successfully:", response);
return response;
} catch (error) { } catch (error) {
console.error("Error fetching data:", error); console.error("Error posting video:", error);
throw error; // Re-throw the error to handle it outside the function if needed throw error; // Re-throw the error to handle it outside the function if needed
} }
} }

19
js/utilities/tools.js
View File

@@ -23,3 +23,22 @@ function checkVideoPath(videos, name) {
}); });
return res; return res;
} }
function getMeasurermentsIdsFromForm(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 = [];
for (let i = first; i <= last; i += fraction) {
measurementIds.push(Math.round(i));
}
return measurementIds;
}
}