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 {
background-color: darkred;
}
footer{
margin-top: 15px;
}
#video-container{
margin-bottom: 15px;
}

4
index.html
View File

@@ -13,7 +13,7 @@
<body>
<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>
<h1>Formulaire</h1>
<div id="my-form">
@@ -32,7 +32,7 @@
<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="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>
<table class="table table-striped" id="table-projects">

40
js/index.js
View File

@@ -2,16 +2,47 @@
function display_projects() {
// Get data from API and then generate HTML code to display the data in a table
const table = document.getElementById("table-projects");
const form = document.getElementById("add-project")
form.addEventListener('click', () => {
console.log("test")
});
const formContainer=document.getElementById('form-container')
function showForm() {
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>
<th>Id</th>
<th>Name</th>
<th>Date</th>
<th>Status</th>
<th>Actions</th>
<th>Delete Project</th>
</tr> `;
for (let i = 0; i < global_project_list.length; i++) {
datas += `<tr>
@@ -22,6 +53,7 @@ function display_projects() {
<th><button class="project_detail btn btn-primary">détails de ${
global_project_list[i].name
}</button></th>
<th>test</th>
</tr>`;
}
table.innerHTML = datas;

11
js/projet_detail.js
View File

@@ -21,6 +21,11 @@ document.addEventListener("DOMContentLoaded", async () => {
const durationInput = document.getElementById('duration');
const tableImage = document.getElementById("content1");
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 = [];
choiceSelect.addEventListener('change', toggleContainers);
@@ -37,9 +42,6 @@ document.addEventListener("DOMContentLoaded", async () => {
document.getElementById("projets").addEventListener("click", navigateToProjects);
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);
lastInput.addEventListener('input', updateRange);
@@ -96,7 +98,6 @@ document.addEventListener("DOMContentLoaded", async () => {
function hideForm() {
formContainer.style.display = 'none';
}
function incrementDuration() {
durationInput.value = parseInt(durationInput.value) + 1;
}
@@ -233,7 +234,7 @@ async function generateViewMetric(projectId) {
samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
videoPlaceHolder.innerHTML=`
<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.
</video>`
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,
duration: duration
});
console.log(mydata);
const response = await $.ajax({
url: api_url.concat(`/videos/`),
@@ -98,18 +97,23 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
throw error;
}
}
async function getVideoFromApi(id) {
async function PostNewProject(nameProject, description){
try {
const response = await $.ajax({
url: api_url.concat(`/cat/`),
method: "GET",
dataType: "json",
const mydata = JSON.stringify({
name: nameProject,
description: description
});
// If the request is successful, store the data in the cache and return it
return response;
const response = await $.ajax({
url: api_url.concat(`/projects`),
method: "POST",
dataType: "json",
contentType: "application/json",
data: mydata
});
console.log("Video posted successfully:", response);
} catch (error) {
console.error("Error fetching data:", error);
throw error; // Re-throw the error to handle it outside the function if needed
console.error("Error posting video:", error);
throw error;
}
}

2
js/utilities/tools.js
View File

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