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 12:14:36 +01:00
parent 77599c7abd
commit 29b75ecc6c
6 changed files with 67 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css
View File

@@ -204,4 +204,9 @@ footer {
.close-button:hover { .close-button:hover {
background-color: darkred; background-color: darkred;
} }
footer{
margin-top: 15px;
}
#video-container{
margin-bottom: 15px;
}

4
index.html
View File

@@ -13,7 +13,7 @@
<body> <body>
<div id="form-container" class="form-container" style="display: none"> <div id="form-container" class="form-container" style="display: none">
<div class="form-content"> <div class="form-content" id="place-of-form">
<button id="close-form-button" class="close-button">&times;</button> <button id="close-form-button" class="close-button">&times;</button>
<h1>Formulaire</h1> <h1>Formulaire</h1>
<div id="my-form"> <div id="my-form">
@@ -32,7 +32,7 @@
<div class="buttons-container mb-4"> <div class="buttons-container mb-4">
<button class="btn btn-primary" id="video" ><span>Mes vidéos</span></button> <button class="btn btn-primary" id="video" ><span>Mes vidéos</span></button>
<button class="btn btn-primary" id="download" ><span>Download App</span></button> <button class="btn btn-primary" id="download" ><span>Download App</span></button>
<button class="btn btn-primary" id="add-project"><span>+</span></button> <button class="btn btn-primary" id="show-form-button"><span>+</span></button>
</div> </div>
<table class="table table-striped" id="table-projects"> <table class="table table-striped" id="table-projects">

40
js/index.js
View File

@@ -2,16 +2,47 @@
function display_projects() { function display_projects() {
// Get data from API and then generate HTML code to display the data in a table // Get data from API and then generate HTML code to display the data in a table
const table = document.getElementById("table-projects"); const table = document.getElementById("table-projects");
const form = document.getElementById("add-project") const formContainer=document.getElementById('form-container')
form.addEventListener('click', () => { function showForm() {
console.log("test") formContainer.style.display = 'flex';
}); }
function hideForm() {
formContainer.style.display = 'none';
}
document.getElementById('show-form-button').addEventListener('click', showForm);
document.getElementById('close-form-button').addEventListener('click', hideForm);
document.getElementById('submit').addEventListener('click', handleFormSubmit);
async function handleFormSubmit() {
const nameProject = document.getElementById('name').value;
const description = document.getElementById('description').value;
if(nameProject.length==0 || !checkName(global_project_list, nameProject)){
alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
'veuillez en trouver un autre');
return 0;
}
PostNewProject(nameProject,description);
}
function checkName(Projects, name) {
let res = true;
Projects.forEach(project => {
const ProjectName = project.name;
if(ProjectName==name)
res=false;
});
return res;
}
let datas = `<tr> let datas = `<tr>
<th>Id</th> <th>Id</th>
<th>Name</th> <th>Name</th>
<th>Date</th> <th>Date</th>
<th>Status</th> <th>Status</th>
<th>Actions</th> <th>Actions</th>
<th>Delete Project</th>
</tr> `; </tr> `;
for (let i = 0; i < global_project_list.length; i++) { for (let i = 0; i < global_project_list.length; i++) {
datas += `<tr> datas += `<tr>
@@ -22,6 +53,7 @@ function display_projects() {
<th><button class="project_detail btn btn-primary">détails de ${ <th><button class="project_detail btn btn-primary">détails de ${
global_project_list[i].name global_project_list[i].name
}</button></th> }</button></th>
<th>test</th>
</tr>`; </tr>`;
} }
table.innerHTML = datas; table.innerHTML = datas;

11
js/projet_detail.js
View File

@@ -21,6 +21,11 @@ document.addEventListener("DOMContentLoaded", async () => {
const durationInput = document.getElementById('duration'); const durationInput = document.getElementById('duration');
const tableImage = document.getElementById("content1"); const tableImage = document.getElementById("content1");
const numberBoard = document.getElementById('number-board'); const numberBoard = document.getElementById('number-board');
// Add event listeners for the "Début" and "Fin" input fields
const firstInput = document.getElementById('first');
const lastInput = document.getElementById('last');
let selectedNumbers = []; let selectedNumbers = [];
choiceSelect.addEventListener('change', toggleContainers); choiceSelect.addEventListener('change', toggleContainers);
@@ -37,9 +42,6 @@ document.addEventListener("DOMContentLoaded", async () => {
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);
// Add event listeners for the "Début" and "Fin" input fields
const firstInput = document.getElementById('first');
const lastInput = document.getElementById('last');
firstInput.addEventListener('input', updateRange); firstInput.addEventListener('input', updateRange);
lastInput.addEventListener('input', updateRange); lastInput.addEventListener('input', updateRange);
@@ -96,7 +98,6 @@ document.addEventListener("DOMContentLoaded", async () => {
function hideForm() { function hideForm() {
formContainer.style.display = 'none'; formContainer.style.display = 'none';
} }
function incrementDuration() { function incrementDuration() {
durationInput.value = parseInt(durationInput.value) + 1; durationInput.value = parseInt(durationInput.value) + 1;
} }
@@ -233,7 +234,7 @@ async function generateViewMetric(projectId) {
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]); samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
videoPlaceHolder.innerHTML=` videoPlaceHolder.innerHTML=`
<video width="600" controls> <video width="600" controls>
<source src="https://timelapse.kerboul.me/api/cat" type="video/mp4"> <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
Your browser does not support the video tag. Your browser does not support the video tag.
</video>` </video>`
tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples) tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)

26
js/utilities/routes.js
View File

@@ -82,7 +82,6 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
resolution: resolution, resolution: resolution,
duration: duration duration: duration
}); });
console.log(mydata);
const response = await $.ajax({ const response = await $.ajax({
url: api_url.concat(`/videos/`), url: api_url.concat(`/videos/`),
@@ -98,18 +97,23 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
throw error; throw error;
} }
} }
async function PostNewProject(nameProject, description){
async function getVideoFromApi(id) {
try { try {
const response = await $.ajax({ const mydata = JSON.stringify({
url: api_url.concat(`/cat/`), name: nameProject,
method: "GET", description: description
dataType: "json",
}); });
// If the request is successful, store the data in the cache and return it const response = await $.ajax({
return response; url: api_url.concat(`/projects`),
method: "POST",
dataType: "json",
contentType: "application/json",
data: mydata
});
console.log("Video posted successfully:", 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;
} }
} }

2
js/utilities/tools.js
View File

@@ -30,6 +30,8 @@ function checkVideoPath(videos, name) {
return res; return res;
} }
function getMeasurementsIdsFromForm(choice, firstInput, lastInput) { function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
if (choice === 'oneByOne') { if (choice === 'oneByOne') {
const highlightedButtons = document.querySelectorAll('.number-button.highlight'); const highlightedButtons = document.querySelectorAll('.number-button.highlight');