From 2bbd044e3d098fb0bfd413a08df4e6c84f48d2f5 Mon Sep 17 00:00:00 2001
From: Brian Hair <brianhair@gmail.com>
Date: Thu, 9 Sep 2021 23:19:58 -0500
Subject: [PATCH] quickshop-price-list-site: cleanup pass.

---
 site/index.html | 16 +++++++---------
 site/js/main.js | 37 +++++++++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 19 deletions(-)
diff --git a/site/index.html b/site/index.html
index da6974d..d18754a 100644
--- a/site/index.html
+++ b/site/index.html
@@ -3,7 +3,7 @@
 <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <meta charset="UTF-8">
-    <title>Brian's super simple skeleton javascript thing</title>
+    <title>New Eden QuickShop List</title>
 </head>
 <body>
     <!-- This commented out input box one could be used with the
@@ -17,23 +17,21 @@
                 <th></th>
                 <th>Item</th>
                 <th>Price</th>
+                <th>Type</th>
                 <th>Enchants (If Any)</th>
                 <th>Coordinates (x/y/z)</th>
                 <th>World</th>
-                <th>RAW DATA</th>
             </tr>
         </thead>
-        <tbody id="quickShopsBody">
+        <tbody id="quickShopsTableBody">
         </tbody>
     </table>
     <script src="js/main.js"></script>
     <script>
-        $(document).ready(function(){
-            $("#inputItemSearch").on("keyup", function() {
-                var input = $(this).val().toLowerCase();
-                $("#quickShopsBody tr").filter(function() {
-                $(this).toggle($(this).text().toLowerCase().indexOf(input) > -1)
-                });
+        $("#inputItemSearch").on("keyup", function() {
+            var input = $(this).val().toLowerCase();
+            $("#quickShopsTableBody tr").filter(function() {
+            $(this).toggle($(this).text().toLowerCase().indexOf(input) > -1)
             });
         });
     </script>
diff --git a/site/js/main.js b/site/js/main.js
index 5967237..c1bfef0 100644
--- a/site/js/main.js
+++ b/site/js/main.js
@@ -1,4 +1,6 @@
 
+/* credit to Alec Lomax: https://lowmess.com/blog/fetch-with-timeout
+ */
 const fetchWithTimeout = (uri, options = {}, time = 5000) => {
     // Lets set up our `AbortController`, and create a request options object
     // that includes the controller's `signal` to pass to `fetch`.
@@ -35,6 +37,8 @@ const fetchWithTimeout = (uri, options = {}, time = 5000) => {
         })
 }
 
+/* Get the raw list of shops
+ */
 async function getShops() {
     let url = 'http://leigh-co.com/minecraft/neweden/link/v1/shops/read';
     try {
@@ -45,20 +49,35 @@ async function getShops() {
     }
 }
 
+/* Parse and render the shops to the screen.
+ */
 async function renderShops() {
-    let shops = await getShops();
-    let shop_lines = shops.split(/\r\n|\n/);
+    // Get the list of shops from the web endpoint.
+    const shops = await getShops();
+
+    // Split the giant string of text into an array entry per line from the RAW
+    // shop data.
+    const shop_lines = shops.split(/\r\n|\n/);
+
+    // Iterate through each line in our array of lines of JSON.
     $.each(shop_lines, function(index, value) {
         if (!value.trim()) {
             return;
         }
+
+        // This magic line parses the plain string into a JSON object.
         const shop = JSON.parse(value);
+
+        // Start building up the HTML table row <tr> for current shop.
         let htmlSegment = `
             <tr id="shop-${index}" class="shop">
             <td><img src="assets/minecraft/textures/${shop.item}.png" alt="TESTING IMAGES BEING IN PLACE" style="width:16px;height:16px;"></td>
             <td>${shop.itemDisplayName}</td>
-            <td>${shop.type} for $${shop.price}</td>`;
+            <td>M ${shop.price}</td>
+            <td>${shop.type}</td>`;
 
+        // If there are enchantments on the item, add them in.
+        // Otherwise insert an empty cell.
         if (shop.hasOwnProperty('enchants')) {
             htmlSegment += `<td>`;
             $.each(shop.enchants, function(index, enchant) {
@@ -72,20 +91,18 @@ async function renderShops() {
         } else {
             htmlSegment += `<td></td>`;
         }
-            
+
+        // Add the rest of the columns for the row.
         htmlSegment += `
             <td><a href="http://leigh-co.com/minecraft/neweden/dynmap/?worldname=world&mapname=flat&zoom=6&x=${shop.x}&y=${shop.y}&z=${shop.z}&desc=${encodeURIComponent(shop.itemDisplayName)}" target="_blank">${shop.x} / ${shop.y} / ${shop.z}</a></td>
             <td>${shop.world}</td>`;
-        
-        htmlSegment += `
-            <td>RAW SHOP: ${value}</td>
-            </tr>`;
 
-        $('#quickShops tbody').append(htmlSegment);
+        // Lastly, append the <tr></tr> into the table body
+        $('#quickShopsTableBody').append(htmlSegment);
     });
-
 }
 
+// Execute the shop insertion
 renderShops();
 
 
-- 
GitLab

