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 11:22:55 +01:00
parent bd4b1ddd2e
commit 77599c7abd
6 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@@ -12,10 +12,27 @@
</head> </head>
<body> <body>
<div id="form-container" class="form-container" style="display: none">
<div class="form-content">
<button id="close-form-button" class="close-button">&times;</button>
<h1>Formulaire</h1>
<div id="my-form">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required />
<br /><br />
<label for="description">Description :</label>
<input type="text" id="description" name="description" required />
<br /><br />
<button class="btn btn-primary" id="submit">Soumettre</button>
</div>
</div>
</div>
<div id="section" class="container mt-5"> <div id="section" class="container mt-5">
<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>
</div> </div>
<table class="table table-striped" id="table-projects"> <table class="table table-striped" id="table-projects">

4
js/index.js
View File

@@ -2,6 +2,10 @@
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")
form.addEventListener('click', () => {
console.log("test")
});
let datas = `<tr> let datas = `<tr>
<th>Id</th> <th>Id</th>
<th>Name</th> <th>Name</th>

9
js/projet_detail.js
View File

@@ -125,7 +125,6 @@ document.addEventListener("DOMContentLoaded", async () => {
} }
const choice = choiceSelect.value const choice = choiceSelect.value
const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput); const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput);
console.log(measurementIds)
postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration) postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
.then(()=>{ .then(()=>{
alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo + alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
@@ -231,17 +230,17 @@ async function generateViewMetric(projectId) {
let samples; let samples;
if(videoId!=-1){ if(videoId!=-1){
currentVideoDatas = await getDataVideoFromApi(videoId); currentVideoDatas = await getDataVideoFromApi(videoId);
const pathToVideo = await getVideoFromApi(videoId) samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
samples = currentVideoDatas[0]["measurement_ids"];
videoPlaceHolder.innerHTML=` videoPlaceHolder.innerHTML=`
<video width="600" controls> <video width="600" controls>
<source src="path/to/your/video.mp4" type="video/mp4"> <source src="https://timelapse.kerboul.me/api/cat" 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)
} 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);
Temperature.push(measure.temperature); Temperature.push(measure.temperature);

1
js/utilities/populate.js
View File

@@ -2,7 +2,6 @@ async function PopulateSelect(mySelect, id) {
let data = []; let data = [];
if (mySelect.name == "videos" && id != null) { if (mySelect.name == "videos" && id != null) {
data = await getDataProjectVideosFromApi(id); data = await getDataProjectVideosFromApi(id);
console.log(data)
const selectObjDefault = document.createElement("option"); const selectObjDefault = document.createElement("option");
selectObjDefault.value = -1; selectObjDefault.value = -1;
selectObjDefault.innerHTML = "Default"; selectObjDefault.innerHTML = "Default";

2
js/utilities/routes.js
View File

@@ -102,7 +102,7 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
async function getVideoFromApi(id) { async function getVideoFromApi(id) {
try { try {
const response = await $.ajax({ const response = await $.ajax({
url: api_url.concat(`/videos/${id}`), url: api_url.concat(`/cat/`),
method: "GET", method: "GET",
dataType: "json", dataType: "json",
}); });

8
js/utilities/tools.js
View File

@@ -1,5 +1,4 @@
function convertStringToArray(string) { function convertStringToArray(string) {
console.log(string)
const numberStrings = string.replace(/[{}]/g, '').split(','); const numberStrings = string.replace(/[{}]/g, '').split(',');
// Trim whitespace and convert the string numbers to integers // Trim whitespace and convert the string numbers to integers
@@ -13,6 +12,13 @@ function filterAndSortMeasurementsByIds(measurements, ids) {
.filter((measurement) => ids.includes(measurement.id)) .filter((measurement) => ids.includes(measurement.id))
.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)); .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
} }
function filterAndSortMeasurementsByNumber(measurements, Numbers) {
// Filter measurements based on their position in the Numbers array
const filteredMeasurements = Numbers.map(index => measurements[index - 1]).filter(measurement => measurement !== undefined);
// Sort the filtered measurements by their timestamp
return filteredMeasurements.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
}
function checkVideoPath(videos, name) { function checkVideoPath(videos, name) {
let res = true; let res = true;