From: unlishema Date: Mon, 22 Sep 2025 13:37:41 +0000 (-0400) Subject: Added a lot to the dev test X-Git-Url: https://git.slayer.unlishema.org/?a=commitdiff_plain;h=c456576c2d7f49d1bce2fd0a36d455fc83e6abc2;p=slayer.unlishema.org%2F.git Added a lot to the dev test --- diff --git a/dist/dev.html b/dist/dev.html index 3a8229d..5e2bf3f 100644 --- a/dist/dev.html +++ b/dist/dev.html @@ -55,9 +55,16 @@ background-color: #fff; } + #limit, + #offset { + height: 16px; + width: 80px; + margin-right: 5px; + } + #querySearch, #querySearch-oldschool { - width: 70%; + width: 85%; padding: 8px; margin-right: 10px; } @@ -76,6 +83,23 @@ margin-top: 10px; } + table { + width: 100%; + border-collapse: collapse; + margin-top: 10px; + } + + td, + th { + max-width: 100px; + overflow-x: scroll; + border: 1px solid #ddd; + } + + tr { + padding: 8px; + } + img { max-width: 100px; height: auto; @@ -103,9 +127,13 @@

Search a Bucket

-
+ + + +
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">


@@ -113,13 +141,18 @@

Select an Item


+ + + Items Found: 0
-

Extracted Item Data (Max Shown: 10)

-
-

Select an item to display its data here.

-
+

Extracted Item Data (Max Shown: 500)

+ + +
+ Extracted Data +
@@ -137,9 +170,13 @@

Search a Bucket

-
+ + + +
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">


@@ -147,13 +184,18 @@

Select an Item


+ + + Items Found: 0
-

Extracted Item Data (Max Shown: 10)

-
-

Select an item to display its data here.

-
+

Extracted Item Data (Max Shown: 500)

+ + +
+ Extracted Data +
@@ -168,20 +210,26 @@ document.addEventListener("DOMContentLoaded", async () => { // Populate the RS3 combobox with some default items const defaultItemsRS3 = [ - { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" }, - { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" }, - { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" }, + { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()" }, + { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').limit(20).offset(0).run()" }, + { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').limit(20).offset(0).run()" }, ]; + // TODO Readjust all these these defaults for RS3 & OSRS + // Populate the OSRS combobox with some default items const defaultItemsOSRS = [ - { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" }, - { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" }, - { name: "Construction", query: "bucket('infobox_construction').select('page_name', 'image').run()" }, - { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" }, + { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()" }, + { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').limit(20).offset(0).run()" }, + { name: "Construction", query: "bucket('infobox_construction').select('page_name', 'image').limit(20).offset(0).run()" }, + { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').limit(20).offset(0).run()" }, ]; + const limitRS3 = document.getElementById("limit"); + const offsetRS3 = document.getElementById("offset"); const queryBoxRS3 = document.getElementById("querySelect"); const selectBoxRS3 = document.getElementById("itemSelect"); + const limitOSRS = document.getElementById("limit-oldschool"); + const offsetOSRS = document.getElementById("offset-oldschool"); const queryBoxOSRS = document.getElementById("querySelect-oldschool"); const selectBoxOSRS = document.getElementById("itemSelect-oldschool"); @@ -201,25 +249,23 @@ queryBoxOSRS.appendChild(option); }); - // Add event listener to the queryBoxRS3 using an arrow function - queryBoxRS3.addEventListener("change", (event) => { - handleQueryChange(event, true); - }); - - // Add event listener to the selectBoxRS3 using an arrow function - selectBoxRS3.addEventListener("change", (event) => { - handleQueryChange(event, false); - }); + // Add event listener to the limit & offset using arrow functions + limitRS3.addEventListener("change", () => { handleNumberChange("limit", false); }); + offsetRS3.addEventListener("change", () => { handleNumberChange("offset", false); }); + limitOSRS.addEventListener("change", () => { handleNumberChange("limit", true); }); + offsetOSRS.addEventListener("change", () => { handleNumberChange("offset", true); }); - // Add event listener to the queryBoxOSRS using an arrow function - queryBoxOSRS.addEventListener("change", (event) => { - handleQueryChange(event, true, true); - }); + // Handle selection changes in the comboboxes + limitRS3.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("limit", false); fetchAndDisplayRS3(null); } }); + offsetRS3.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("offset", false); fetchAndDisplayRS3(null) } }); + limitOSRS.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("limit", true); fetchAndDisplayOSRS(null) } }); + offsetOSRS.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("offset", true); fetchAndDisplayOSRS(null) } }); - // Add event listener to the selectBoxOSRS using an arrow function - selectBoxOSRS.addEventListener("change", (event) => { - handleQueryChange(event, false, true); - }); + // Add event listener to the queryBox & selectBox using arrow functions + queryBoxRS3.addEventListener("change", (event) => { handleQueryChange(event, true); }); + selectBoxRS3.addEventListener("change", (event) => { handleQueryChange(event, false); }); + queryBoxOSRS.addEventListener("change", (event) => { handleQueryChange(event, true, true); }); + selectBoxOSRS.addEventListener("change", (event) => { handleQueryChange(event, false, true); }); fetchAndDisplayRS3(); // Initial fetch with default value fetchAndDisplayOSRS(); // Initial fetch with default value @@ -236,6 +282,54 @@ alert(`${oldschool ? "OSRS" : "RS3"} Cache cleared!`); } + function prevOffset(oldschool = false) { + let offsetInput = document.getElementById(`offset${oldschool ? "-oldschool" : ""}`); + let limitInput = document.getElementById(`limit${oldschool ? "-oldschool" : ""}`); + let currentOffset = parseInt(offsetInput.value); + let limit = parseInt(limitInput.value); + if (isNaN(currentOffset)) currentOffset = 0; + if (isNaN(limit)) limit = 20; + + // Decrease offset by limit, but not below 0 + currentOffset -= limit; + if (currentOffset < 0) currentOffset = 0; + offsetInput.value = currentOffset; + handleNumberChange("offset", oldschool); + let itemCount = fetchAndDisplayData(document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value, false, oldschool); + } + + async function nextOffset(oldschool = false) { + + let offsetInput = document.getElementById(`offset${oldschool ? "-oldschool" : ""}`); + let limitInput = document.getElementById(`limit${oldschool ? "-oldschool" : ""}`); + let currentOffset = parseInt(offsetInput.value); + let limit = parseInt(limitInput.value); + if (isNaN(currentOffset)) currentOffset = 0; + if (isNaN(limit)) limit = 20; + + // Increase offset by limit + offsetInput.value = currentOffset + limit; + handleNumberChange("offset", oldschool); + let itemCount = await fetchAndDisplayData(document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value, false, oldschool); + } + + function handleNumberChange(type, oldschool = false) { + let newLimit = parseInt(document.getElementById(`limit${oldschool ? "-oldschool" : ""}`).value); + let newOffset = parseInt(document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).value); + if (isNaN(newLimit) || newLimit < 0) newLimit = 20; + if (isNaN(newOffset) || newOffset < 0) newOffset = 0; + document.getElementById(`limit${oldschool ? "-oldschool" : ""}`).value = newLimit; + document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).step = newLimit + document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).value = newOffset; + + let searchValue = document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value; + searchValue = searchValue.replace(/\.limit\(\d+\)/, ''); // Remove existing limit + searchValue = searchValue.replace(/\.offset\(\d+\)/, ''); // Remove existing offset + searchValue = searchValue.replace(/\.run\(\)/, ''); // Remove existing limit + searchValue += `.limit(${newLimit}).offset(${newOffset}).run()`; // Append new limit + document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value = searchValue; + } + // Function to handle changes in the search input function handleQueryChange(event, updateItemList, oldschool = false) { const newValue = event.target.value; @@ -283,6 +377,7 @@ async function fetchAndDisplayData(query, updateItemList = true, oldschool = false) { if (!query) query = document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value; + const bucketName = extractBucketName(query); const keys = extractSelectKeys(query); @@ -298,11 +393,28 @@ // Clear previous content extractedDataElement.innerHTML = ""; - const maxCount = 10; // Limit the number of displayed items + // Set itemCount for for query results + let itemCount = document.getElementById(`itemCount${oldschool ? "-oldschool" : ""}`); + itemCount.innerText = `Items Found: ${itemData.bucket.length}`; + + // Hide/show previous button + if (parseInt(document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).value) <= 0) + document.getElementById(`prevOffset${oldschool ? "-oldschool" : ""}`).style = "display: none"; + else + document.getElementById(`prevOffset${oldschool ? "-oldschool" : ""}`).style = "display: inline"; + + // Hide/show next button + if (itemData.bucket.length < parseInt(document.getElementById(`limit${oldschool ? "-oldschool" : ""}`).value)) + document.getElementById(`nextOffset${oldschool ? "-oldschool" : ""}`).style = "display: none"; + else + document.getElementById(`nextOffset${oldschool ? "-oldschool" : ""}`).style = "display: inline"; + + const maxCount = 500; // Limit the number of displayed items let previousItemValue = null; for (let i = 0; i < itemData.bucket.length; i++) { const item = itemData.bucket[i]; + // Add each item to the combobox if updateItemList is true if (updateItemList && itemData.bucket.length > 1) { let itemSelect = document.getElementById(`itemSelect${oldschool ? "-oldschool" : ""}`); if (i == 0) { @@ -321,7 +433,7 @@ for (const key of keys) option.value += `'${key}',`; option.value = option.value.slice(0, -1); // Remove trailing comma - option.value += `).where('${keys[0]}', '${item[keys[0]].replaceAll("'", "\\'")}').run()`; + option.value += `).where('${keys[0]}', '${item[keys[0]].replaceAll("'", "\\'")}').limit(20).offset(0).run()`; option.textContent = keys ? item[keys[0]] : "No KEYS"; if (!previousItemValue || previousItemValue != item[keys[0]]) @@ -331,19 +443,34 @@ } if (i > maxCount) continue; // Only display the first item by default - for (const key of keys) - extractedDataElement.innerHTML += `

${key}: ${!(key in item) ? 'false' : (item[key] === '' ? 'true' : item[key])}

`; + // Setup the table header row + if (i == 0) { + let rowEntry = document.createElement('tr'); + for (const key of keys) { + let cellEntry = document.createElement('th') + cellEntry.innerHTML = `${key}`; + rowEntry.appendChild(cellEntry); + } + extractedDataElement.appendChild(rowEntry); + } - // Show a horizontal line between items, but not after the last one - if (i < maxCount && i < itemData.bucket.length - 1) extractedDataElement.innerHTML += `
`; + let rowEntry = document.createElement('tr'); + for (const key of keys) { + let cellEntry = document.createElement('td') + cellEntry.innerHTML = `${!(key in item) ? 'false' : (item[key] === '' ? 'true' : item[key])}`; + rowEntry.appendChild(cellEntry); + } + extractedDataElement.appendChild(rowEntry); } rawDataElement.innerHTML = `
${JSON.stringify(itemData, null, 2)}
`; + return parseInt(itemData.bucket.length); } else { extractedDataElement.textContent = "Failed to fetch data from the API."; rawDataElement.textContent = "No raw data available."; } + return 0; } // --- Request Queue System --- diff --git a/dist/pages/data/version.json b/dist/pages/data/version.json index a674bfd..8ef11f4 100644 --- a/dist/pages/data/version.json +++ b/dist/pages/data/version.json @@ -1,3 +1,3 @@ { - "version": "0.0.35" + "version": "0.0.36" } \ No newline at end of file diff --git a/src/dev.html b/src/dev.html index 3a8229d..5e2bf3f 100644 --- a/src/dev.html +++ b/src/dev.html @@ -55,9 +55,16 @@ background-color: #fff; } + #limit, + #offset { + height: 16px; + width: 80px; + margin-right: 5px; + } + #querySearch, #querySearch-oldschool { - width: 70%; + width: 85%; padding: 8px; margin-right: 10px; } @@ -76,6 +83,23 @@ margin-top: 10px; } + table { + width: 100%; + border-collapse: collapse; + margin-top: 10px; + } + + td, + th { + max-width: 100px; + overflow-x: scroll; + border: 1px solid #ddd; + } + + tr { + padding: 8px; + } + img { max-width: 100px; height: auto; @@ -103,9 +127,13 @@

Search a Bucket

-
+ + + +
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">


@@ -113,13 +141,18 @@

Select an Item


+ + + Items Found: 0
-

Extracted Item Data (Max Shown: 10)

-
-

Select an item to display its data here.

-
+

Extracted Item Data (Max Shown: 500)

+ + +
+ Extracted Data +
@@ -137,9 +170,13 @@

Search a Bucket

-
+ + + +
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">


@@ -147,13 +184,18 @@

Select an Item


+ + + Items Found: 0
-

Extracted Item Data (Max Shown: 10)

-
-

Select an item to display its data here.

-
+

Extracted Item Data (Max Shown: 500)

+ + +
+ Extracted Data +
@@ -168,20 +210,26 @@ document.addEventListener("DOMContentLoaded", async () => { // Populate the RS3 combobox with some default items const defaultItemsRS3 = [ - { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" }, - { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" }, - { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" }, + { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()" }, + { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').limit(20).offset(0).run()" }, + { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').limit(20).offset(0).run()" }, ]; + // TODO Readjust all these these defaults for RS3 & OSRS + // Populate the OSRS combobox with some default items const defaultItemsOSRS = [ - { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" }, - { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" }, - { name: "Construction", query: "bucket('infobox_construction').select('page_name', 'image').run()" }, - { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" }, + { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()" }, + { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').limit(20).offset(0).run()" }, + { name: "Construction", query: "bucket('infobox_construction').select('page_name', 'image').limit(20).offset(0).run()" }, + { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').limit(20).offset(0).run()" }, ]; + const limitRS3 = document.getElementById("limit"); + const offsetRS3 = document.getElementById("offset"); const queryBoxRS3 = document.getElementById("querySelect"); const selectBoxRS3 = document.getElementById("itemSelect"); + const limitOSRS = document.getElementById("limit-oldschool"); + const offsetOSRS = document.getElementById("offset-oldschool"); const queryBoxOSRS = document.getElementById("querySelect-oldschool"); const selectBoxOSRS = document.getElementById("itemSelect-oldschool"); @@ -201,25 +249,23 @@ queryBoxOSRS.appendChild(option); }); - // Add event listener to the queryBoxRS3 using an arrow function - queryBoxRS3.addEventListener("change", (event) => { - handleQueryChange(event, true); - }); - - // Add event listener to the selectBoxRS3 using an arrow function - selectBoxRS3.addEventListener("change", (event) => { - handleQueryChange(event, false); - }); + // Add event listener to the limit & offset using arrow functions + limitRS3.addEventListener("change", () => { handleNumberChange("limit", false); }); + offsetRS3.addEventListener("change", () => { handleNumberChange("offset", false); }); + limitOSRS.addEventListener("change", () => { handleNumberChange("limit", true); }); + offsetOSRS.addEventListener("change", () => { handleNumberChange("offset", true); }); - // Add event listener to the queryBoxOSRS using an arrow function - queryBoxOSRS.addEventListener("change", (event) => { - handleQueryChange(event, true, true); - }); + // Handle selection changes in the comboboxes + limitRS3.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("limit", false); fetchAndDisplayRS3(null); } }); + offsetRS3.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("offset", false); fetchAndDisplayRS3(null) } }); + limitOSRS.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("limit", true); fetchAndDisplayOSRS(null) } }); + offsetOSRS.addEventListener("keydown", (event) => { if (event.key === "Enter") { handleNumberChange("offset", true); fetchAndDisplayOSRS(null) } }); - // Add event listener to the selectBoxOSRS using an arrow function - selectBoxOSRS.addEventListener("change", (event) => { - handleQueryChange(event, false, true); - }); + // Add event listener to the queryBox & selectBox using arrow functions + queryBoxRS3.addEventListener("change", (event) => { handleQueryChange(event, true); }); + selectBoxRS3.addEventListener("change", (event) => { handleQueryChange(event, false); }); + queryBoxOSRS.addEventListener("change", (event) => { handleQueryChange(event, true, true); }); + selectBoxOSRS.addEventListener("change", (event) => { handleQueryChange(event, false, true); }); fetchAndDisplayRS3(); // Initial fetch with default value fetchAndDisplayOSRS(); // Initial fetch with default value @@ -236,6 +282,54 @@ alert(`${oldschool ? "OSRS" : "RS3"} Cache cleared!`); } + function prevOffset(oldschool = false) { + let offsetInput = document.getElementById(`offset${oldschool ? "-oldschool" : ""}`); + let limitInput = document.getElementById(`limit${oldschool ? "-oldschool" : ""}`); + let currentOffset = parseInt(offsetInput.value); + let limit = parseInt(limitInput.value); + if (isNaN(currentOffset)) currentOffset = 0; + if (isNaN(limit)) limit = 20; + + // Decrease offset by limit, but not below 0 + currentOffset -= limit; + if (currentOffset < 0) currentOffset = 0; + offsetInput.value = currentOffset; + handleNumberChange("offset", oldschool); + let itemCount = fetchAndDisplayData(document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value, false, oldschool); + } + + async function nextOffset(oldschool = false) { + + let offsetInput = document.getElementById(`offset${oldschool ? "-oldschool" : ""}`); + let limitInput = document.getElementById(`limit${oldschool ? "-oldschool" : ""}`); + let currentOffset = parseInt(offsetInput.value); + let limit = parseInt(limitInput.value); + if (isNaN(currentOffset)) currentOffset = 0; + if (isNaN(limit)) limit = 20; + + // Increase offset by limit + offsetInput.value = currentOffset + limit; + handleNumberChange("offset", oldschool); + let itemCount = await fetchAndDisplayData(document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value, false, oldschool); + } + + function handleNumberChange(type, oldschool = false) { + let newLimit = parseInt(document.getElementById(`limit${oldschool ? "-oldschool" : ""}`).value); + let newOffset = parseInt(document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).value); + if (isNaN(newLimit) || newLimit < 0) newLimit = 20; + if (isNaN(newOffset) || newOffset < 0) newOffset = 0; + document.getElementById(`limit${oldschool ? "-oldschool" : ""}`).value = newLimit; + document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).step = newLimit + document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).value = newOffset; + + let searchValue = document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value; + searchValue = searchValue.replace(/\.limit\(\d+\)/, ''); // Remove existing limit + searchValue = searchValue.replace(/\.offset\(\d+\)/, ''); // Remove existing offset + searchValue = searchValue.replace(/\.run\(\)/, ''); // Remove existing limit + searchValue += `.limit(${newLimit}).offset(${newOffset}).run()`; // Append new limit + document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value = searchValue; + } + // Function to handle changes in the search input function handleQueryChange(event, updateItemList, oldschool = false) { const newValue = event.target.value; @@ -283,6 +377,7 @@ async function fetchAndDisplayData(query, updateItemList = true, oldschool = false) { if (!query) query = document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value; + const bucketName = extractBucketName(query); const keys = extractSelectKeys(query); @@ -298,11 +393,28 @@ // Clear previous content extractedDataElement.innerHTML = ""; - const maxCount = 10; // Limit the number of displayed items + // Set itemCount for for query results + let itemCount = document.getElementById(`itemCount${oldschool ? "-oldschool" : ""}`); + itemCount.innerText = `Items Found: ${itemData.bucket.length}`; + + // Hide/show previous button + if (parseInt(document.getElementById(`offset${oldschool ? "-oldschool" : ""}`).value) <= 0) + document.getElementById(`prevOffset${oldschool ? "-oldschool" : ""}`).style = "display: none"; + else + document.getElementById(`prevOffset${oldschool ? "-oldschool" : ""}`).style = "display: inline"; + + // Hide/show next button + if (itemData.bucket.length < parseInt(document.getElementById(`limit${oldschool ? "-oldschool" : ""}`).value)) + document.getElementById(`nextOffset${oldschool ? "-oldschool" : ""}`).style = "display: none"; + else + document.getElementById(`nextOffset${oldschool ? "-oldschool" : ""}`).style = "display: inline"; + + const maxCount = 500; // Limit the number of displayed items let previousItemValue = null; for (let i = 0; i < itemData.bucket.length; i++) { const item = itemData.bucket[i]; + // Add each item to the combobox if updateItemList is true if (updateItemList && itemData.bucket.length > 1) { let itemSelect = document.getElementById(`itemSelect${oldschool ? "-oldschool" : ""}`); if (i == 0) { @@ -321,7 +433,7 @@ for (const key of keys) option.value += `'${key}',`; option.value = option.value.slice(0, -1); // Remove trailing comma - option.value += `).where('${keys[0]}', '${item[keys[0]].replaceAll("'", "\\'")}').run()`; + option.value += `).where('${keys[0]}', '${item[keys[0]].replaceAll("'", "\\'")}').limit(20).offset(0).run()`; option.textContent = keys ? item[keys[0]] : "No KEYS"; if (!previousItemValue || previousItemValue != item[keys[0]]) @@ -331,19 +443,34 @@ } if (i > maxCount) continue; // Only display the first item by default - for (const key of keys) - extractedDataElement.innerHTML += `

${key}: ${!(key in item) ? 'false' : (item[key] === '' ? 'true' : item[key])}

`; + // Setup the table header row + if (i == 0) { + let rowEntry = document.createElement('tr'); + for (const key of keys) { + let cellEntry = document.createElement('th') + cellEntry.innerHTML = `${key}`; + rowEntry.appendChild(cellEntry); + } + extractedDataElement.appendChild(rowEntry); + } - // Show a horizontal line between items, but not after the last one - if (i < maxCount && i < itemData.bucket.length - 1) extractedDataElement.innerHTML += `
`; + let rowEntry = document.createElement('tr'); + for (const key of keys) { + let cellEntry = document.createElement('td') + cellEntry.innerHTML = `${!(key in item) ? 'false' : (item[key] === '' ? 'true' : item[key])}`; + rowEntry.appendChild(cellEntry); + } + extractedDataElement.appendChild(rowEntry); } rawDataElement.innerHTML = `
${JSON.stringify(itemData, null, 2)}
`; + return parseInt(itemData.bucket.length); } else { extractedDataElement.textContent = "Failed to fetch data from the API."; rawDataElement.textContent = "No raw data available."; } + return 0; } // --- Request Queue System --- diff --git a/src/pages/data/version.json b/src/pages/data/version.json index a674bfd..8ef11f4 100644 --- a/src/pages/data/version.json +++ b/src/pages/data/version.json @@ -1,3 +1,3 @@ { - "version": "0.0.35" + "version": "0.0.36" } \ No newline at end of file