anto
This commit is contained in:
arussac
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,142 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Détails</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Select2 CSS -->
|
||||
<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 class="form-content">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Détails</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Select2 CSS -->
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</select>
|
||||
<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="number-board"></div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div id="result-container"></div>
|
||||
<br><br>
|
||||
<button class="btn btn-primary" id="submit">Soumettre</button>
|
||||
<label for="name">Nom :</label>
|
||||
<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 />
|
||||
<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
|
||||
/>
|
||||
<button type="button" id="increment-button">+</button>
|
||||
</div>
|
||||
<button class="btn btn-primary" id="close-form-button">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- page classique -->
|
||||
<div id="section" class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="buttons-container" style="float: left; width: 20%">
|
||||
<button class="btn btn-primary" id="projets">
|
||||
<span> Home </span>
|
||||
</button>
|
||||
<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>
|
||||
</select>
|
||||
<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="number-board"></div>
|
||||
</div>
|
||||
<br /><br />
|
||||
<div id="result-container"></div>
|
||||
<br /><br />
|
||||
<button class="btn btn-primary" id="submit">Soumettre</button>
|
||||
</div>
|
||||
<h3
|
||||
id="name_project"
|
||||
class="text-black"
|
||||
style="float: left; width: 50%"
|
||||
></h3>
|
||||
<button class="btn btn-primary" id="close-form-button">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div id="addVideoHandler">
|
||||
<select name="videos" id="video_selector" class="select2">
|
||||
</select>
|
||||
<div class="buttons-container">
|
||||
<button class="btn btn-primary" id="show-form-button">
|
||||
<span> + </span>
|
||||
<!-- page classique -->
|
||||
<div id="section" class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="buttons-container" style="float: left; width: 20%">
|
||||
<button class="btn btn-primary" id="projets">
|
||||
<span> Home </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="metric_viewer_placeholder">
|
||||
<canvas id="metric_viewer"></canvas>
|
||||
<h3
|
||||
id="name_project"
|
||||
class="text-black"
|
||||
style="float: left; width: 50%"
|
||||
></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="content1" class="hiddenTable">
|
||||
<table
|
||||
class="table table-striped scrollable sticky-header .thead-dark"
|
||||
id="table-image"
|
||||
>
|
||||
<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 class="row">
|
||||
<div class="col-md-6">
|
||||
<div id="addVideoHandler">
|
||||
<select name="videos" id="video_selector" class="select2"></select>
|
||||
<div class="buttons-container">
|
||||
<button class="btn btn-primary" id="show-form-button">
|
||||
<span> + </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="metric_viewer_placeholder">
|
||||
<canvas id="metric_viewer"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="content1" class="hiddenTable">
|
||||
<table
|
||||
class="table table-striped scrollable sticky-header .thead-dark"
|
||||
id="table-image"
|
||||
>
|
||||
<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>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Timelapse. All rights reserved.</p>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- Select2 JS -->
|
||||
<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/populate.js"></script>
|
||||
<script src="../js/utilities/routes.js"></script>
|
||||
<script src="../js/utilities/tools.js"></script>
|
||||
<script src="../js/projet_detail.js"></script>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2025 Timelapse. All rights reserved.</p>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- Select2 JS -->
|
||||
<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/populate.js"></script>
|
||||
<script src="../js/utilities/routes.js"></script>
|
||||
<script src="../js/utilities/tools.js"></script>
|
||||
<script src="../js/projet_detail.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -232,7 +235,7 @@ async function generateViewMetric(projectId) {
|
||||
} else {
|
||||
samples=measurements.map(measurements => measurements.id);
|
||||
}
|
||||
|
||||
|
||||
tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
|
||||
tempoMeasure.forEach((measure) => {
|
||||
datesMeasurement.push(measure.timestamp);
|
||||
@@ -284,4 +287,4 @@ async function generateViewMetric(projectId) {
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user