100 lines
3.0 KiB
JavaScript
100 lines
3.0 KiB
JavaScript
let myChart; // Declare a global variable to hold the chart instance
|
|
|
|
function display_metrics() {
|
|
// Implementation for display_metrics function
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const projectId = urlParams.get("id");
|
|
// 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;
|
|
|
|
generateViewMetric();
|
|
|
|
document.getElementById("metric_selector").addEventListener("change", () => {
|
|
generateViewMetric();
|
|
});
|
|
|
|
fetch("https://timelapse.kerboul.me/api/smile")
|
|
.then((response) => response.blob())
|
|
.then((blob) => {
|
|
const url = URL.createObjectURL(blob);
|
|
let tableBody = document.getElementById("imageSource");
|
|
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";
|
|
}
|
|
});
|
|
});
|
|
|
|
function generateViewMetric() {
|
|
const ctx = document.getElementById("metric_viewer").getContext("2d");
|
|
|
|
// Destroy the existing chart instance if it exists
|
|
if (myChart) {
|
|
myChart.destroy();
|
|
}
|
|
|
|
// Create a new chart instance
|
|
myChart = new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
datasets: [
|
|
{
|
|
label: "# of Votes",
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|