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

update bas les couilles

Browse Source
This commit is contained in:
anto
2024-12-10 15:39:04 +01:00
parent c285116a62
commit 5443d1fc72
8 changed files with 453 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/style.css
View File

@@ -24,3 +24,17 @@ footer {
max-width: 100%; max-width: 100%;
} }
.hiddenTable {
max-height: 400px; /* Adjust this value as needed */
overflow-y: hidden;
}
.full-view {
max-height: none;
overflow-y: visible;
}
.sticky-header thead{
position: sticky;
top: 0;
z-index: 1;
}

46
html/projet_detail.html
View File

@@ -16,23 +16,26 @@
rel="stylesheet" rel="stylesheet"
/> />
</head> </head>
<body> <body>
<div id="section" class="container mt-5"> <div id="section" class="container mt-5">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="buttons-container" style="float: left; width: 20%"> <div class="buttons-container" style="float: left; width: 20%">
<button id="projets" class="btn btn-primary"> <button id="projets" >
<span> Home </span> <span> Home </span>
</button> </button>
</div> </div>
<h3 id="name_project" class="text-black" style="float: left; width: 50%"></h3> <h3
id="name_project"
class="text-black"
style="float: left; width: 50%"
></h3>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<table class="table table-striped" id="table-metrics"> <table class="table table-striped" id="table-metrics">
<thead class="bg-blue-600 text-black"> <thead>
<tr> <tr>
<th>date</th> <th>date</th>
<th>Hygrométrie</th> <th>Hygrométrie</th>
@@ -43,19 +46,36 @@
</table> </table>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<table class="table table-striped" id="table-image"> <div id="content1" class="hiddenTable">
<thead class="bg-blue-600 text-black"> <table
<tr> class="table table-striped scrollable sticky-header"
<th>images</th> id="table-image"
</tr> >
</thead> <thead>
<tbody></tbody> <tr>
</table> <th>
<button id="toggle-view">
See all images
</button>
</th>
<th><button>
sort images
</button></th>
<th><button>
export images
</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>
<img id="my-image" alt="Description of the image" />
<footer> <footer>
<p>&copy; 2024 Timelapse. All rights reserved.</p> <p>&copy; 2024 Timelapse. All rights reserved.</p>
</footer> </footer>

2
html/videos.html
View File

@@ -13,7 +13,7 @@
<body> <body>
<div id="section"></div> <div id="section"></div>
<div class="buttons-container"> <div class="buttons-container">
<button id="projets" class="btn btn-primary"><span> <button id="projets" ><span>
Mes projets Mes projets
</span> </span>
</button> </button>

4
index.html
View File

@@ -14,8 +14,8 @@
<body> <body>
<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 id="video" class="btn btn-primary"><span>Mes vidéos</span></button> <button id="video" ><span>Mes vidéos</span></button>
<button id="download" class="btn btn-primary"><span>Download App</span></button> <button id="download" ><span>Download App</span></button>
</div> </div>
<table class="table table-striped" id="table-projects"> <table class="table table-striped" id="table-projects">

103
js/projet_detail.js
View File

@@ -1,62 +1,73 @@
function display_metrics(metrics_datas) { function display_metrics(metrics_datas) {
// 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-metrics"); const table = document.getElementById("table-metrics");
let datas = `<tr> let datas = `
<th>Date</th> <tr><th>Date</th> <th>Température</th> <th>Hygrométrie</th>
<th>Température</th> </tr>`;
<th>Hygrométrie</th>
</tr> `;
for (let i = 0; i < metrics_datas.length; i++) { for (let i = 0; i < metrics_datas.length; i++) {
datas += `<tr> datas += `
<th>${formatDate(metrics_datas[i].date_metrique)}</th> <tr>
<th>${metrics_datas[i].temperature}</th> <th>${formatDate(metrics_datas[i].date_metrique)}</th>
<th>${metrics_datas[i].hygrometrie}</th> <th>${metrics_datas[i].temperature}</th>
</tr>`; <th>${metrics_datas[i].hygrometrie}</th>
</tr>`;
} }
table.innerHTML = datas; table.innerHTML = datas;
} }
// function display_metrics(images_datas) {
// // Get data from API and then generate HTML code to display the data in a table
// const table_image = document.getElementById("table-image");
// let datas = `<tr>
// <th>Images</th>
// </tr> `;
// for (let i = 0; i < images_datas.length; i+=3) {
// if(i+2<images_datas.length)
// datas += `<tr>
// <th>${images_datas[i]}</th>
// <th>${images_datas[i+1]}</th>
// <th>${images_datas[i+2]}</th>
// </tr>`;
// }
// table_image.innerHTML = datas;
// }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get("id"); const projectId = urlParams.get("id");
getDataProjectMetricsFromApi(projectId) getDataProjectMetricsFromApi(projectId)
.then(project_metrics => { .then((project_metrics) => {
display_metrics(project_metrics); display_metrics(project_metrics);
}) })
.catch(error => { .catch((error) => {
console.error(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=global_project_list[projectId-1].titre; document.getElementById("name_project").innerHTML =
global_project_list[projectId - 1].titre;
fetch("https://timelapse.kerboul.me/api/smile") fetch("https://timelapse.kerboul.me/api/smile")
.then(response => response.blob()) .then((response) => response.blob())
.then(blob => { .then((blob) => {
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const imageElement = document.getElementById("my-image"); let tableBody = document.getElementById("imageSource");
imageElement.src = url; let row = document.createElement("tr");
for (let i = 0; i < 1500; i++) {
let imageTD = document.createElement("td");
imageTD.innerHTML = `<img id="${i}" src="${url}" />`;
row.appendChild(imageTD);
if ((i + 1) % 3 === 0 && i !== 0) {
tableBody.appendChild(row);
row = document.createElement("tr"); // Create a new row
}
}
// Append the last row if there are remaining images
if (row.childNodes.length > 0) {
tableBody.appendChild(row);
}
});
// Add event listener for the toggle button
document.getElementById("toggle-view").addEventListener("click", () => {
const tableImage = document.getElementById("content1");
if (tableImage.classList.contains("hiddenTable")) {
tableImage.classList.remove("hiddenTable");
tableImage.classList.add("full-view");
document.getElementById("toggle-view").innerHTML="See first images"
} else {
tableImage.classList.remove("full-view");
tableImage.classList.add("hiddenTable");
document.getElementById("toggle-view").innerHTML="See all images"
}
}); });
}); });