diff --git a/index.html b/index.html index 52a386532143f2359126f49b1ed09b805791e65d..57e8fbf047fafe48d1907c2f55c596c41004dfd3 100644 --- a/index.html +++ b/index.html @@ -149,7 +149,6 @@ <script type="text/javascript"> const datasetFolder = "./dataset/" const fileNamesList = ['10 1', '10 10', '10 11', '10 12', '10 13', '10 14', '10 15', '10 2', '10 3', '10 4', '10 5', '10 6', '10 7', '10 8', '10 9', '11 1', '11 10', '11 11', '11 12', '11 13', '11 14', '11 15', '11 2', '11 3', '11 4', '11 5', '11 6', '11 7', '11 8', '11 9', '12 1', '12 12', '12 2', '12 3', '12 4', '12 5', '12 6', '13 1', '13 10', '13 11', '13 12', '13 13', '13 14', '13 15', '13 2', '13 3', '13 4', '13 5', '13 6', '13 7', '13 8', '13 9', '14 1', '14 10', '14 11', '14 12', '14 13', '14 14', '14 15', '14 2', '14 3', '14 4', '14 5', '14 6', '14 7', '14 8', '14 9', '15 1', '15 10', '15 11', '15 12', '15 13', '15 14', '15 15', '15 2', '15 3', '15 4', '15 5', '15 6', '15 7', '15 8', '15 9', '16 1', '16 10', '16 11', '16 12', '16 13', '16 14', '16 15', '16 16', '16 2', '16 3', '16 4', '16 5', '16 6', '16 7', '16 8', '16 9', '17 1', '17 10', '17 11', '17 12', '17 13', '17 14', '17 15', '17 16', '17 17', '17 2', '17 3', '17 4', '17 5', '17 6', '17 7', '17 8', '17 9', '18 1', '18 18', '18 2', '18 3', '18 4', '18 5', '18 6', '18 7', '19 1', '19 19', '20 1', '20 20', '21 1', '21 21', '22 1', '22 22', '23 1', '23 23', '24 1', '24 24', '25 1', '25 25', '26 1', '26 26', '27 1', '27 27', '28 1', '28 28', '29 1', '29 29', '3 1', '3 3', '30 1', '30 30', '31 1', '31 31', '32 1', '32 32', '33 1', '33 33', '34 1', '34 34', '35 1', '35 35', '36 1', '36 36', '37 1', '37 37', '38 1', '38 38', '39 1', '39 39', '4 1', '4 4', '40 1', '40 40', '41 1', '41 41', '42 1', '42 42', '43 1', '43 43', '44 1', '44 44', '45 1', '45 45', '46 1', '46 46', '47 1', '47 47', '48 1', '48 48', '49 1', '5 1', '5 10', '5 11', '5 12', '5 13', '5 14', '5 15', '5 2', '5 3', '5 4', '5 5', '5 6', '5 7', '5 8', '5 9', '6 1', '6 10', '6 11', '6 12', '6 13', '6 14', '6 15', '6 2', '6 3', '6 4', '6 5', '6 6', '6 7', '6 8', '6 9', '7 1', '7 10', '7 11', '7 12', '7 13', '7 14', '7 15', '7 2', '7 3', '7 4', '7 5', '7 6', '7 7', '7 8', '7 9', '8 1', '8 10', '8 11', '8 12', '8 13', '8 14', '8 15', '8 2', '8 3', '8 4', '8 5', '8 6', '8 7', '8 8', '8 9', '9 1', '9 10', '9 11', '9 12', '9 13', '9 14', '9 15', '9 2', '9 3', '9 4', '9 5', '9 6', '9 7', '9 8', '9 9']; - fileNamesList.sort((a, b) => a.split(" ")[0] - b.split(" ")[0] || a.split(" ")[1] - b.split(" ")[1]); const dropdown = document.getElementById("keyDropdown"); const mediaCheckbox = document.getElementById("mediaCheckbox"); const distributionCheckbox = document.getElementById("distributionCheckbox"); @@ -158,12 +157,21 @@ const barsSlider = document.getElementById("barsSlider"); const barsCountValue = document.getElementById("barsCountValue"); - var key = fileNamesList[107]; + var key = null; var animationTime = 600; var bins = 10; var currentData = null; var currentKey = null; + async function checkFileExists(fileName) { + try { + const response = await fetch(datasetFolder + fileName + ".json", { method: 'HEAD' }); + return response.ok; + } catch (error) { + return false; + } + } + async function getData(key) { try { const response = await fetch(datasetFolder + key + ".json"); @@ -178,7 +186,7 @@ } } - async function start() { + async function crearHistogramas() { if (currentKey !== key) { currentData = await getData(key); currentKey = key; @@ -366,15 +374,15 @@ //Funciones que se ejecutan al ocurrir eventos function onDropdownChange() { key = dropdown.value; - start(); + crearHistogramas(); } function onCheckboxMediaChange() { - start(); + crearHistogramas(); } function onCheckboxDistributionChange() { - start(); + crearHistogramas(); } function onSliderChange() { @@ -383,7 +391,7 @@ function onBarsSliderChange() { updateBarsCount(parseInt(barsSlider.value)); - start(); + crearHistogramas(); } function updateAnimationTime(newAnimationTime) { @@ -406,21 +414,33 @@ } //Inicializar documento - fileNamesList.forEach((fileName) => { - const option = document.createElement("option"); - option.value = fileName; - option.textContent = fileName; - dropdown.appendChild(option); - }); - - dropdown.value = key; - mediaCheckbox.checked = true; - distributionCheckbox.checked = false; - animationSlider.value = 600; - updateAnimationTime(600); - updateBarsCount(20); - barsSlider.value = 10; - start(); + async function iniciarWeb() { + const availableFiles = []; + for (const fileName of fileNamesList) { + if (await checkFileExists(fileName)) { + availableFiles.push(fileName); + } + } + availableFiles.sort((a, b) => a.split(" ")[0] - b.split(" ")[0] || a.split(" ")[1] - b.split(" ")[1]); + + availableFiles.forEach(fileName => { + const option = document.createElement("option"); + option.value = fileName; + option.textContent = fileName; + dropdown.appendChild(option); + }); + + key = availableFiles[6]; + dropdown.value = key; + mediaCheckbox.checked = true; + distributionCheckbox.checked = false; + animationSlider.value = 600; + updateAnimationTime(600); + updateBarsCount(20); + barsSlider.value = 10; + crearHistogramas(); + } + iniciarWeb(); </script> </body>