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

test

Browse Source
This commit is contained in:
anto
2024-10-24 17:13:14 +02:00
parent bc49332321
commit e07c99e5bb
4 changed files with 68 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
html/projet_detail.html
View File

@@ -11,49 +11,58 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<div id="section" class="container mt-5"> <div id="section" class="container mt-5">
<div> <div>
<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" class="btn btn-primary">
<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>
<table class="table table-striped" id="table-metrics"> <table
class="table table-striped"
id="table-metrics"
style="float: left; width: 50%"
>
<thead class="bg-blue-600 text-black"> <thead class="bg-blue-600 text-black">
<tr> <tr>
<th> date </th> <th>date</th>
<th> Hygrométrie </th> <th>Hygrométrie</th>
<th> température </th> <th>température</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
</table> </table>
<!-- <table
class="table table-striped"
id="table-image"
style="float: left; width: 50%"
>
<thead class="bg-blue-600 text-black">
<tr>
<th>images</th>
</tr>
</thead>
<tbody></tbody>
</table> -->
</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>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></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/globals.js"></script> <script src="../js/globals.js"></script>
<script src="../js/projet_detail.js"></script> <script src="../js/projet_detail.js"></script>

4
index.html
View File

@@ -15,7 +15,6 @@
<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" class="btn btn-primary"><span>Mes vidéos</span></button>
<button id="projet" class="btn btn-primary"><span>Mon projet</span></button>
</div> </div>
<table class="table table-striped" id="table-projects"> <table class="table table-striped" id="table-projects">
@@ -43,9 +42,6 @@
document.getElementById("video").addEventListener('click', () => { document.getElementById("video").addEventListener('click', () => {
window.location.href = 'html/videos.html'; window.location.href = 'html/videos.html';
}); });
document.getElementById("projet").addEventListener('click', () => {
window.location.href = 'html/projet_detail.html';
});
}); });
</script> </script>
</body> </body>

11
js/globals.js
View File

@@ -42,6 +42,17 @@ function getDataProjectMetricsFromApi(id) {
}); });
} }
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 to send data to API
function sendDataFromApi(datas) { function sendDataFromApi(datas) {
return $.ajax({ return $.ajax({

27
js/projet_detail.js
View File

@@ -16,12 +16,29 @@ function display_metrics(metrics_datas) {
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 => {
console.log(project_metrics)
display_metrics(project_metrics); display_metrics(project_metrics);
}) })
.catch(error => { .catch(error => {
@@ -33,5 +50,13 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
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")
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const imageElement = document.getElementById("my-image");
imageElement.src = url;
});
}); });