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

64
css/style.css
View File

@@ -33,12 +33,14 @@ footer {
max-height: none;
overflow-y: visible;
}
.sticky-header thead{
.sticky-header thead {
position: sticky;
top: 0;
z-index: 1;
}
#addVideoHandler{
#addVideoHandler {
display: flex;
}
@@ -64,51 +66,87 @@ footer {
padding: 20px;
border-radius: 8px;
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 {
margin: 0;
margin-bottom: 20px;
}
#close-form-button {
margin-top: 20px;
.form-content label {
margin-bottom: 10px;
}
.duration-input {
margin-left: 33%;
.form-content input,
.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;
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;
height: 30px;
margin: 0 5px;
align-items: center;
padding: 10px;
font-size: 1rem;
}
.duration-input input {
.form-content .duration-input input {
width: 50px;
text-align: center;
}
#close-form-button {
.form-content #submit,
.form-content #close-form-button {
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 {
padding: 10px;
font-size: 1rem;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin: 5px;
}
.number-button.highlight {
background-color: #ff0000;
background-color: red;
color: #fff;
}
#numerator,#denominator{
#numerator, #denominator {
width: 25%;
}

79
html/projet_detail.html
View File

@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Détails</title>
@@ -16,60 +16,84 @@
rel="stylesheet"
/>
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<link
href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- formulaire -->
<div id="form-container" class="form-container" style="display: none;">
<div id="form-container" class="form-container" style="display: none">
<div class="form-content">
<h1>Formulaire</h1>
<div id="my-form">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<br><br>
<input type="text" id="name" name="name" required />
<br /><br />
<label for="resolution">Résolution :</label>
<select id="resolution" name="resolution" required>
<option value="1920x1080">1920x1080</option>
<option value="1280x720">1280x720</option>
</select>
<br><br>
<br /><br />
<label for="duration">Durée (en secondes) :</label>
<div class="duration-input">
<button type="button" id="decrement-button">-</button>
<input type="number" id="duration" name="duration" value="0" min="0" required>
<input
type="number"
id="duration"
name="duration"
value="0"
min="0"
required
/>
<button type="button" id="increment-button">+</button>
</div>
<label for="choice">Options :</label>
<select id="choice" name="choice">
<option value="firstLast">première et dernière image</option>
<option value="oneByOne">sélectionner les images une par une</option>
<option value="oneByOne">
sélectionner les images une par une
</option>
</select>
<br><br>
<div id="first-last-container" style="display: block;">
<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>
<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>
<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">
<input
type="number"
id="numerator"
name="numerator"
value="1"
min="1"
/>
<span>/</span>
<input type="number" id="denominator" name="denominator" value="1" min="1">
<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">
<div id="number-board"></div>
</div>
<br><br>
<br /><br />
<div id="result-container"></div>
<br><br>
<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>
</div>
<!-- page classique -->
<div id="section" class="container mt-5">
<div class="row">
@@ -89,8 +113,7 @@
<div class="row">
<div class="col-md-6">
<div id="addVideoHandler">
<select name="videos" id="video_selector" class="select2">
</select>
<select name="videos" id="video_selector" class="select2"></select>
<div class="buttons-container">
<button class="btn btn-primary" id="show-form-button">
<span> + </span>
@@ -114,9 +137,9 @@
See all images
</button>
</th>
<th><button class="btn btn-primary">
export images
</button></th>
<th>
<button class="btn btn-primary">export images</button>
</th>
</tr>
</thead>
<tbody id="imageSource"></tbody>
@@ -138,5 +161,5 @@
<script src="../js/utilities/routes.js"></script>
<script src="../js/utilities/tools.js"></script>
<script src="../js/projet_detail.js"></script>
</body>
</body>
</html>

21
js/projet_detail.js
View File

@@ -83,9 +83,6 @@ document.addEventListener("DOMContentLoaded", async () => {
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() {
@@ -119,20 +116,25 @@ document.addEventListener("DOMContentLoaded", async () => {
const data = await getDataProjectVideosFromApi(projectId);
const nameVideo = document.getElementById('name').value;
const videoDuration = durationInput.value;
const videoResolution = document.getElementById('resolution').value;
if (videoDuration <= 0) {
alert('La durée de la vidéo doit être supérieur à 0');
return 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 {
if (!checkVideoPath(data, nameVideo) || !nameVideo.length>0) {
alert('Le nom : " ' + nameVideo + ' " est déjà pris ou vide ! \n' +
'veuillez en trouver un autre');
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() {
@@ -153,6 +155,7 @@ document.addEventListener("DOMContentLoaded", async () => {
function populateNumberBoard(length) {
numberBoard.innerHTML = '';
numberBoard.style.gridTemplateColumns = `repeat(auto-fill, minmax(50px, 1fr))`;
for (let i = 1; i <= length; i++) {
const numberButton = document.createElement('button');
numberButton.classList.add('number-button');
@@ -161,6 +164,7 @@ document.addEventListener("DOMContentLoaded", async () => {
numberBoard.appendChild(numberButton);
}
}
function highlightNumber(button) {
button.classList.toggle('highlight');
}
@@ -190,7 +194,6 @@ function populateImageTable(DataMetrics) {
let i = 0;
DataMetrics.forEach((measure) => {
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}"/>`;
row.appendChild(imageTD);

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 {
const response = await $.ajax({
url: api_url.concat(`/videos/`),
method: "POST",
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
console.log("Video posted successfully:", response);
return response;
} 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
}
}

19
js/utilities/tools.js
View File

@@ -23,3 +23,22 @@ function checkVideoPath(videos, name) {
});
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;
}
}