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

3
css/style.css
View File

@@ -37,4 +37,7 @@ footer {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
}
#addVideoHandler{
display: flex;
} }

158
html/projet_detail.html
View File

@@ -1,84 +1,96 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Détails</title> <title>Détails</title>
<link rel="stylesheet" href="../css/style.css" /> <link rel="stylesheet" href="../css/style.css" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link <link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet" rel="stylesheet"
/> />
</head> <!-- Select2 CSS -->
<body> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
<div id="section" class="container mt-5"> </head>
<div class="row"> <body>
<div class="col-md-12"> <div id="section" class="container mt-5">
<div class="buttons-container" style="float: left; width: 20%"> <div class="row">
<button class="btn btn-primary" id="projets" > <div class="col-md-12">
<span> Home </span> <div class="buttons-container" style="float: left; width: 20%">
<button class="btn btn-primary" id="projets">
<span> Home </span>
</button>
</div>
<h3
id="name_project"
class="text-black"
style="float: left; width: 50%"
></h3>
</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="projets">
<span> + </span>
</button> </button>
</div> </div>
<h3 </div>
id="name_project" <div id="metric_viewer_placeholder">
class="text-black" <canvas id="metric_viewer"></canvas>
style="float: left; width: 50%"
></h3>
</div> </div>
</div> </div>
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <div id="content1" class="hiddenTable">
<select name="metriques" id="metric_selector"> <table
</select> class="table table-striped scrollable sticky-header .thead-dark"
<div id="metric_viewer_placeholder"> id="table-image"
<canvas id="metric_viewer"></canvas> >
</div> <thead>
</div> <tr>
<div class="col-md-6"> <th>
<div id="content1" class="hiddenTable"> <button class="btn btn-primary" id="toggle-view">
<table See all images
class="table table-striped scrollable sticky-header .thead-dark" </button>
id="table-image" </th>
> <th><button class="btn btn-primary">
<thead > sort images
<tr> </button></th>
<th> <th><button class="btn btn-primary">
<button class="btn btn-primary" id="toggle-view"> export images
See all images </button></th>
</button> </tr>
</th> <tr>
<th><button class="btn btn-primary"> <th colspan="3" scope="col">images</th>
sort images </tr>
</button></th> </thead>
<th><button class="btn btn-primary"> <tbody id="imageSource"></tbody>
export images </table>
</button></th>
</tr>
<tr>
<th colspan="3" scope="col">images</th>
</tr>
</thead>
<tbody id="imageSource"></tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<footer> <footer>
<p>&copy; 2024 Timelapse. All rights reserved.</p> <p>&copy; 2024 Timelapse. All rights reserved.</p>
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../js/utilities/constVariables.js"></script> <!-- Select2 JS -->
<script src="../js/utilities/populate.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
<script src="../js/globals.js"></script> <script src="../js/utilities/constVariables.js"></script>
<script src="../js/projet_detail.js"></script> <script src="../js/utilities/populate.js"></script>
</body> <script src="../js/utilities/routes.js"></script>
<script src="../js/utilities/tools.js"></script>
<script src="../js/projet_detail.js"></script>
</body>
</html> </html>

3
index.html
View File

@@ -35,8 +35,9 @@
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../js/utilities/constVariables.js"></script> <script src="../js/utilities/constVariables.js"></script>
<script src="../js/globals.js"></script> <script src="../js/utilities/routes.js"></script>
<script src="../js/index.js"></script> <script src="../js/index.js"></script>
<script> <script>
// Redirect to videos.php when the "Mes vidéos" button is clicked // Redirect to videos.php when the "Mes vidéos" button is clicked

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>${global_project_list[i].name}</th>
<th>${formatDate(global_project_list[i].start_date)}</th> <th>${formatDate(global_project_list[i].start_date)}</th>
<th>${global_project_list[i].status}</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>`; </tr>`;
} }
table.innerHTML = datas; table.innerHTML = datas;
@@ -34,7 +34,7 @@ function display_projects() {
}); });
} }
} }
getDataProjectFromApi() getAllProject()
.then(project_list => { .then(project_list => {
global_project_list = project_list; global_project_list = project_list;
// Call the next function here // 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 let myChart; // Declare a global variable to hold the chart instance
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// Objects / variables // Objects / variables
const video_selector = document.getElementById("video_selector");
const metric_selector = document.getElementById("metric_selector")
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get("id"); const projectId = urlParams.get("id");
// Initialisation // Initialisation
generateViewMetric(projectId);
generateViewMetric(); PopulateSelect(video_selector, projectId);
PopulateSelect(metric_selector,projectId); video_selector.addEventListener("change", () => {
generateViewMetric(projectId);
metric_selector.addEventListener("change", () => {
generateViewMetric();
}); });
// getDataProjectMetricsFromApi(projectId)
// .then((project_metrics) => {
// display_metrics(project_metrics);
// })
// .catch((error) => {
// console.error(error);
// });
document.getElementById("projets").addEventListener("click", () => { document.getElementById("projets").addEventListener("click", () => {
window.location.href = "../index.html"; window.location.href = "../index.html";
current_project = ""; current_project = "";
}); });
global_project_list = JSON.parse(localStorage.getItem("project_list")); global_project_list = JSON.parse(localStorage.getItem("project_list"));
document.getElementById("name_project").innerHTML = document.getElementById("name_project").innerHTML =
global_project_list[projectId - 1].titre; global_project_list[projectId - 1].name;
fetch("https://timelapse.kerboul.me/api/smile") fetch("https://timelapse.kerboul.me/api/smile")
.then((response) => response.blob()) .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"); 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 // Destroy the existing chart instance if it exists
if (myChart) { if (myChart) {
@@ -86,11 +104,11 @@ function generateViewMetric() {
myChart = new Chart(ctx, { myChart = new Chart(ctx, {
type: "line", type: "line",
data: { data: {
labels: ["January", "February", "March", "April", "May", "June", "July"], labels: datesMeasurement,
datasets: [ datasets: [
{ {
label: "Température (F°)", label: "Température (F°)",
data: [65, 59, 80, 81, 56, 55, 40], data: Temperature,
fill: false, fill: false,
borderColor: "rgba(75, 192, 192, 1)", borderColor: "rgba(75, 192, 192, 1)",
tension: 0.1, tension: 0.1,
@@ -98,7 +116,7 @@ function generateViewMetric() {
}, },
{ {
label: "Hygrometrie (%)", label: "Hygrometrie (%)",
data: [28, 48, 40, 19, 86, 27, 90], data: Hygrometrie,
fill: false, fill: false,
borderColor: "rgba(153, 102, 255, 1)", borderColor: "rgba(153, 102, 255, 1)",
tension: 0.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){ async function PopulateSelect(mySelect,id){
let data=[] let data=[]
if(mySelect.name=="metriques" && id!=null){ if(mySelect.name=="videos" && id!=null){
data=await getDataProjectVideosFromApi(id); data=await getDataProjectVideosFromApi(id);
for(let i = 0 ; i < data.length ; i++){ for(let i = 0 ; i < data.length ; i++){
const selectObj=document.createElement("option") 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 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));
}