background-color: #fff;
}
+ #limit,
+ #offset {
+ height: 16px;
+ width: 80px;
+ margin-right: 5px;
+ }
+
#querySearch,
#querySearch-oldschool {
- width: 70%;
+ width: 85%;
padding: 8px;
margin-right: 10px;
}
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;
<div class="input-section">
<h3>Search a Bucket</h3>
- <label for="querySearch">Enter a bucket API query:</label><br>
+ <label for="querySearch">Enter a bucket API query:</label>
+ <span style="margin: 65px"></span>
+ <input type="number" id="limit" min="0" max="500" value="20"><label for="limit">Limit</label>
+ <input type="number" id="offset" min="0" max="50000" step="20" value="0"><label
+ for="limit">Offset</label><br>
<input type="text" id="querySearch"
- value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">
<button onclick="fetchAndDisplayRS3()">Search</button><br>
<label for="querySelect">Choose an default bucket:</label><br>
<select id="querySelect"></select><br>
<h3>Select an Item</h3>
<label for="itemSelect">Choose an item from query:</label><br>
<select id="itemSelect"></select>
+ <input id="prevOffset" type="button" value="<" onclick="prevOffset()" style="display: none;">
+ <input id="nextOffset" type="button" value=">" onclick="nextOffset()">
+ <span id="itemCount">Items Found: 0</span>
</div>
<div class="data-section">
- <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 10)</span></h3>
- <div id="extractedData">
- <p>Select an item to display its data here.</p>
- </div>
+ <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 500)</span></h3>
+ <table id="extractedData">
+ <caption>
+ Extracted Data
+ </caption>
+ </table>
</div>
<div class="raw-data-section">
<div class="input-section">
<h3>Search a Bucket</h3>
- <label for="querySearch-oldschool">Enter a bucket API query:</label><br>
+ <label for="querySearch-oldschool">Enter a bucket API query:</label>
+ <span style="margin: 65px"></span>
+ <input type="number" id="limit-oldschool" min="0" max="500" value="20"><label for="limit">Limit</label>
+ <input type="number" id="offset-oldschool" min="0" max="50000" step="20" value="0"><label
+ for="limit">Offset</label><br>
<input type="text" id="querySearch-oldschool"
- value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">
<button onclick="fetchAndDisplayOSRS()">Search</button><br>
<label for="querySelect-oldschool">Choose an default bucket:</label><br>
<select id="querySelect-oldschool"></select><br>
<h3>Select an Item</h3>
<label for="itemSelect-oldschool">Choose an item from query:</label><br>
<select id="itemSelect-oldschool"></select>
+ <input id="prevOffset-oldschool" type="button" value="<" onclick="prevOffset(true)" style="display: none;">
+ <input id="nextOffset-oldschool" type="button" value=">" onclick="nextOffset(true)">
+ <span id="itemCount-oldschool">Items Found: 0</span>
</div>
<div class="data-section">
- <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 10)</span></h3>
- <div id="extractedData-oldschool">
- <p>Select an item to display its data here.</p>
- </div>
+ <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 500)</span></h3>
+ <table id="extractedData-oldschool">
+ <caption>
+ Extracted Data
+ </caption>
+ </table>
</div>
<div class="raw-data-section">
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");
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
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;
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);
// 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) {
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]])
}
if (i > maxCount) continue; // Only display the first item by default
- for (const key of keys)
- extractedDataElement.innerHTML += `<p><strong>${key}:</strong> ${!(key in item) ? 'false' : (item[key] === '' ? 'true' : item[key])}</p>`;
+ // 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 = `<strong>${key}</strong>`;
+ 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 += `<hr>`;
+ 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 = `<pre>${JSON.stringify(itemData, null, 2)}</pre>`;
+ 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 ---
background-color: #fff;
}
+ #limit,
+ #offset {
+ height: 16px;
+ width: 80px;
+ margin-right: 5px;
+ }
+
#querySearch,
#querySearch-oldschool {
- width: 70%;
+ width: 85%;
padding: 8px;
margin-right: 10px;
}
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;
<div class="input-section">
<h3>Search a Bucket</h3>
- <label for="querySearch">Enter a bucket API query:</label><br>
+ <label for="querySearch">Enter a bucket API query:</label>
+ <span style="margin: 65px"></span>
+ <input type="number" id="limit" min="0" max="500" value="20"><label for="limit">Limit</label>
+ <input type="number" id="offset" min="0" max="50000" step="20" value="0"><label
+ for="limit">Offset</label><br>
<input type="text" id="querySearch"
- value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">
<button onclick="fetchAndDisplayRS3()">Search</button><br>
<label for="querySelect">Choose an default bucket:</label><br>
<select id="querySelect"></select><br>
<h3>Select an Item</h3>
<label for="itemSelect">Choose an item from query:</label><br>
<select id="itemSelect"></select>
+ <input id="prevOffset" type="button" value="<" onclick="prevOffset()" style="display: none;">
+ <input id="nextOffset" type="button" value=">" onclick="nextOffset()">
+ <span id="itemCount">Items Found: 0</span>
</div>
<div class="data-section">
- <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 10)</span></h3>
- <div id="extractedData">
- <p>Select an item to display its data here.</p>
- </div>
+ <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 500)</span></h3>
+ <table id="extractedData">
+ <caption>
+ Extracted Data
+ </caption>
+ </table>
</div>
<div class="raw-data-section">
<div class="input-section">
<h3>Search a Bucket</h3>
- <label for="querySearch-oldschool">Enter a bucket API query:</label><br>
+ <label for="querySearch-oldschool">Enter a bucket API query:</label>
+ <span style="margin: 65px"></span>
+ <input type="number" id="limit-oldschool" min="0" max="500" value="20"><label for="limit">Limit</label>
+ <input type="number" id="offset-oldschool" min="0" max="50000" step="20" value="0"><label
+ for="limit">Offset</label><br>
<input type="text" id="querySearch-oldschool"
- value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
+ value="bucket('infobox_item').select('item_name','item_id','examine').limit(20).offset(0).run()">
<button onclick="fetchAndDisplayOSRS()">Search</button><br>
<label for="querySelect-oldschool">Choose an default bucket:</label><br>
<select id="querySelect-oldschool"></select><br>
<h3>Select an Item</h3>
<label for="itemSelect-oldschool">Choose an item from query:</label><br>
<select id="itemSelect-oldschool"></select>
+ <input id="prevOffset-oldschool" type="button" value="<" onclick="prevOffset(true)" style="display: none;">
+ <input id="nextOffset-oldschool" type="button" value=">" onclick="nextOffset(true)">
+ <span id="itemCount-oldschool">Items Found: 0</span>
</div>
<div class="data-section">
- <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 10)</span></h3>
- <div id="extractedData-oldschool">
- <p>Select an item to display its data here.</p>
- </div>
+ <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 500)</span></h3>
+ <table id="extractedData-oldschool">
+ <caption>
+ Extracted Data
+ </caption>
+ </table>
</div>
<div class="raw-data-section">
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");
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
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;
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);
// 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) {
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]])
}
if (i > maxCount) continue; // Only display the first item by default
- for (const key of keys)
- extractedDataElement.innerHTML += `<p><strong>${key}:</strong> ${!(key in item) ? 'false' : (item[key] === '' ? 'true' : item[key])}</p>`;
+ // 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 = `<strong>${key}</strong>`;
+ 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 += `<hr>`;
+ 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 = `<pre>${JSON.stringify(itemData, null, 2)}</pre>`;
+ 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 ---
projects / slayer.unlishema.org / .git / commitdiff