Added HR for multiple items and fixed combobox for item selection to work better

diff --git a/dist/dev.html b/dist/dev.html
index 7078c07deacbfec7df58491d353301c5684acfbc..61134998846437d899b0a05dd570c84a7fb2fdd5 100644 (file)
--- a/dist/dev.html
+++ b/dist/dev.html
@@ -102,7 +102,7 @@
         </div>
 
         <div class="data-section">
-            <h3>Extracted Item Data</h3>
+            <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>
@@ -204,11 +204,19 @@
                 // Clear previous content
                 extractedDataElement.innerHTML = "";
 
+                const maxCount = 10; // Limit the number of displayed items
+                let previousItemValue = null;
                 for (let i = 0; i < itemData.bucket.length; i++) {
                     const item = itemData.bucket[i];
 
                     if (updateItemList && itemData.bucket.length > 1) {
-                        if (i == 0) document.getElementById("itemSelect").innerHTML = "";
+                        if (i == 0) {
+                            document.getElementById("itemSelect").innerHTML = "";
+                            const option = document.createElement("option");
+                            option.value = query;
+                            option.textContent = `--- Select an item ---`;
+                            document.getElementById("itemSelect").appendChild(option);
+                        }
 
                         // Add each item to the combobox
                         const option = document.createElement("option");
@@ -221,13 +229,19 @@
                         option.value += `).where('${keys[0]}', '${item[keys[0]].replaceAll("'", "\\'")}').run()`;
 
                         option.textContent = keys ? item[keys[0]] : "No KEYS";
-                        document.getElementById("itemSelect").appendChild(option);
+                        if (!previousItemValue || previousItemValue != item[keys[0]])
+                            document.getElementById("itemSelect").appendChild(option);
+
+                        previousItemValue = item[keys[0]];
                     }
-                    if (i > 0) continue; // Only display the first item by default
+                    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>`;
 
+                    // Show a horizontal line between items, but not after the last one
+                    if (i < maxCount && i < itemData.bucket.length - 1) extractedDataElement.innerHTML += `<hr>`;
+
                 }
 
                 rawDataElement.innerHTML = `<pre>${JSON.stringify(itemData, null, 2)}</pre>`;

diff --git a/src/dev.html b/src/dev.html
index 7078c07deacbfec7df58491d353301c5684acfbc..61134998846437d899b0a05dd570c84a7fb2fdd5 100644 (file)
--- a/src/dev.html
+++ b/src/dev.html
@@ -102,7 +102,7 @@
         </div>
 
         <div class="data-section">
-            <h3>Extracted Item Data</h3>
+            <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>
@@ -204,11 +204,19 @@
                 // Clear previous content
                 extractedDataElement.innerHTML = "";
 
+                const maxCount = 10; // Limit the number of displayed items
+                let previousItemValue = null;
                 for (let i = 0; i < itemData.bucket.length; i++) {
                     const item = itemData.bucket[i];
 
                     if (updateItemList && itemData.bucket.length > 1) {
-                        if (i == 0) document.getElementById("itemSelect").innerHTML = "";
+                        if (i == 0) {
+                            document.getElementById("itemSelect").innerHTML = "";
+                            const option = document.createElement("option");
+                            option.value = query;
+                            option.textContent = `--- Select an item ---`;
+                            document.getElementById("itemSelect").appendChild(option);
+                        }
 
                         // Add each item to the combobox
                         const option = document.createElement("option");
@@ -221,13 +229,19 @@
                         option.value += `).where('${keys[0]}', '${item[keys[0]].replaceAll("'", "\\'")}').run()`;
 
                         option.textContent = keys ? item[keys[0]] : "No KEYS";
-                        document.getElementById("itemSelect").appendChild(option);
+                        if (!previousItemValue || previousItemValue != item[keys[0]])
+                            document.getElementById("itemSelect").appendChild(option);
+
+                        previousItemValue = item[keys[0]];
                     }
-                    if (i > 0) continue; // Only display the first item by default
+                    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>`;
 
+                    // Show a horizontal line between items, but not after the last one
+                    if (i < maxCount && i < itemData.bucket.length - 1) extractedDataElement.innerHTML += `<hr>`;
+
                 }
 
                 rawDataElement.innerHTML = `<pre>${JSON.stringify(itemData, null, 2)}</pre>`;