timelapse/timelapse-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maj

Browse Source
This commit is contained in:
anto
2025-01-09 10:12:17 +01:00
parent 2de78999f7
commit 648460a967
9 changed files with 208 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
js/globals.js
View File

@@ -1,84 +0,0 @@
// Global variables
let global_project_list;
let current_project = "";
function formatDate(isoString) {
const date = new Date(isoString);
const options = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
timeZoneName: "short",
};
return date.toLocaleString("en-US", options);
}
// Function to get data from API
function getDataProjectFromApi() {
return $.ajax({
url: api_url.concat("/projects"),
method: "GET",
dataType: "json",
}).then((data) => {
// If the request is successful, store the data in the cache and return it
localStorage.setItem("project_list", JSON.stringify(data));
return data;
});
}
function getDataProjectMetricsFromApi(id) {
return $.ajax({
url: api_url.concat(`/metric/${id}`),
method: "GET",
dataType: "json",
}).then((data) => {
// If the request is successful, store the data in the cache and return it
return data;
});
}
function getDataProjectImagesFromApi(id) {
return $.ajax({
url: api_url.concat(`/image/${id}`),
method: "GET",
dataType: "json",
}).then((data) => {
// If the request is successful, store the data in the cache and return it
return data;
});
}
// Function to send data to API
function sendDataFromApi(datas) {
return $.ajax({
url: api_url.concat("/projets"),
method: "POST",
data: JSON.stringify(datas),
contentType: "application/json",
success: function (datas) {
console.log("successful");
},
error: function (jqXHR, textStatus, errorThrown) {
console.error(errorThrown);
},
});
}
function deleteDataFromApi(id) {
return $.ajax({
url: api_url.concat("/delete"),
method: "POST",
data: JSON.stringify({ id: id }),
contentType: "application/json",
success: function (datas) {
console.log("successful");
},
error: function (jqXHR, textStatus, errorThrown) {
console.error(errorThrown);
},
});
}

4
js/index.js
View File

@@ -15,7 +15,7 @@ function display_projects() {
<th>${global_project_list[i].name}</th>
<th>${formatDate(global_project_list[i].start_date)}</th>
<th>${global_project_list[i].status}</th>
<th><button class="project_detail btn btn-primary">détails de ${global_project_list[i].titre}</button></th>
<th><button class="project_detail btn btn-primary">détails de ${global_project_list[i].name}</button></th>
</tr>`;
}
table.innerHTML = datas;
@@ -34,7 +34,7 @@ function display_projects() {
});
}
}
getDataProjectFromApi()
getAllProject()
.then(project_list => {
global_project_list = project_list;
// Call the next function here

64
js/projet_detail.js
View File

@@ -1,39 +1,28 @@
let myChart; // Declare a global variable to hold the chart instance
document.addEventListener("DOMContentLoaded", () => {
// Objects / variables
const metric_selector = document.getElementById("metric_selector")
const video_selector = document.getElementById("video_selector");
const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get("id");
// Initialisation
generateViewMetric(projectId);
generateViewMetric();
PopulateSelect(video_selector, projectId);
PopulateSelect(metric_selector,projectId);
metric_selector.addEventListener("change", () => {
generateViewMetric();
video_selector.addEventListener("change", () => {
generateViewMetric(projectId);
});
// getDataProjectMetricsFromApi(projectId)
// .then((project_metrics) => {
// display_metrics(project_metrics);
// })
// .catch((error) => {
// console.error(error);
// });
document.getElementById("projets").addEventListener("click", () => {
window.location.href = "../index.html";
current_project = "";
});
global_project_list = JSON.parse(localStorage.getItem("project_list"));
document.getElementById("name_project").innerHTML =
global_project_list[projectId - 1].titre;
global_project_list[projectId - 1].name;
fetch("https://timelapse.kerboul.me/api/smile")
.then((response) => response.blob())
@@ -74,8 +63,37 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
function generateViewMetric() {
async function generateViewMetric(projectId) {
const ctx = document.getElementById("metric_viewer").getContext("2d");
let Hygrometrie = [];
let Temperature = [];
let datesMeasurement = [];
let measurements;
let current_video_datas;
// Wait for the video_selector to be populated
await new Promise((resolve) => {
const checkExist = setInterval(() => {
if (document.getElementById("video_selector").options.length > 0) {
clearInterval(checkExist);
resolve();
}
}, 100); // check every 100ms
});
const videoId = document.getElementById("video_selector").value;
measurements = await getDataMetrics(projectId);
current_video_datas = await getDataVideoFromApi(videoId);
let samples = convertStringToArray(current_video_datas[0]["measurement_ids"]);
tempoMeasure = filterAndSortMeasurementsByIds(measurements,samples)
tempoMeasure.forEach((measure) => {
datesMeasurement.push(measure.timestamp)
Temperature.push(measure.temperature)
Hygrometrie.push(measure.hydrometrie)
});
// Destroy the existing chart instance if it exists
if (myChart) {
@@ -86,11 +104,11 @@ function generateViewMetric() {
myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
labels: datesMeasurement,
datasets: [
{
label: "Température (F°)",
data: [65, 59, 80, 81, 56, 55, 40],
data: Temperature,
fill: false,
borderColor: "rgba(75, 192, 192, 1)",
tension: 0.1,
@@ -98,7 +116,7 @@ function generateViewMetric() {
},
{
label: "Hygrometrie (%)",
data: [28, 48, 40, 19, 86, 27, 90],
data: Hygrometrie,
fill: false,
borderColor: "rgba(153, 102, 255, 1)",
tension: 0.1,
@@ -122,4 +140,4 @@ function generateViewMetric() {
},
},
});
}
}

17
js/utilities/populate.js
View File

@@ -1,6 +1,6 @@
async function PopulateSelect(mySelect,id){
let data=[]
if(mySelect.name=="metriques" && id!=null){
if(mySelect.name=="videos" && id!=null){
data=await getDataProjectVideosFromApi(id);
for(let i = 0 ; i < data.length ; i++){
const selectObj=document.createElement("option")
@@ -25,5 +25,20 @@ async function getDataProjectVideosFromApi(id) {
throw error; // Re-throw the error to handle it outside the function if needed
}
}
async function getDataVideoFromApi(id) {
try {
const response = await $.ajax({
url: api_url.concat(`/videos/${id}`),
method: "GET",
dataType: "json",
});
// If the request is successful, store the data in the cache and return it
return response;
} catch (error) {
console.error("Error fetching data:", error);
throw error; // Re-throw the error to handle it outside the function if needed
}
}

44
js/utilities/routes.js Normal file
View File

@@ -0,0 +1,44 @@
// Global variables
let global_project_list;
let current_project = "";
function formatDate(isoString) {
const date = new Date(isoString);
const options = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
timeZoneName: "short",
};
return date.toLocaleString("en-US", options);
}
// Function to get data from API
function getAllProject() {
return $.ajax({
url: api_url.concat("/projects"),
method: "GET",
dataType: "json",
}).then((data) => {
// If the request is successful, store the data in the cache and return it
localStorage.setItem("project_list", JSON.stringify(data));
return data;
});
}
function getDataMetrics(projectId){
return $.ajax({
url: api_url.concat("/projects/"+projectId+"/measurements"),
method: "GET",
dataType: "json",
}).then((data) => {
// If the request is successful, store the data in the cache and return it
localStorage.setItem("project_list", JSON.stringify(data));
return data;
});
}

15
js/utilities/tools.js Normal file
View File

@@ -0,0 +1,15 @@
function convertStringToArray(inputString) {
// Split the string by the delimiter '/'
const stringArray = inputString.split(",");
// Convert each element to a number
const numberArray = stringArray.map(Number);
return numberArray;
}
function filterAndSortMeasurementsByIds(measurements, ids) {
return measurements
.filter((measurement) => ids.includes(measurement.id))
.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
}