From 71f44da278ac16e0b50f5a1fe1cab77eff515485 Mon Sep 17 00:00:00 2001
From: Brian Hair <brianhair@gmail.com>
Date: Fri, 10 Sep 2021 21:48:48 -0500
Subject: [PATCH] quickshop-price-list-site: Values updated to use EO display
 value. This required making functions to retrive data out of the EO
 structure.

---
 site/index.html |  2 +-
 site/js/main.js | 77 +++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/site/index.html b/site/index.html
index 9b4bac6..6eb4043 100644
--- a/site/index.html
+++ b/site/index.html
@@ -12,7 +12,7 @@
         <thead>
             <tr class="header">
                 <th>Item</th>
-                <th>Price (M)</th>
+                <th>Price</th>
                 <th>Type</th>
                 <th>Enchants (If Any)</th>
                 <th>Owner</th>
diff --git a/site/js/main.js b/site/js/main.js
index a1d2163..6b53045 100644
--- a/site/js/main.js
+++ b/site/js/main.js
@@ -1,5 +1,17 @@
+/******************************************************************************
+ * This file fetches the quick shop raw data from the massive link minecraft
+ * shops endpoint and then parses that out into objects which are then
+ * displayed in a table on the page.
+ * 
+ * @author Brian Hair
+ *****************************************************************************/
 
-/* credit to Alec Lomax: https://lowmess.com/blog/fetch-with-timeout
+
+// Global defines
+const DEBUG_OUTPUT = false;
+
+/*
+ * 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
@@ -37,7 +49,40 @@ const fetchWithTimeout = (uri, options = {}, time = 5000) => {
         })
 }
 
-/* Get the raw list of shops
+/*
+ * Get the meta value out of an EO.
+ * attribute is which object in the _meta, type is the sub attribute
+ */
+function getEOMetaValue(eo, attribute, type) {
+    if (eo._meta.hasOwnProperty(attribute)) {
+        if (eo._meta[attribute].hasOwnProperty(type)) {
+            return eo._meta[attribute][type].value;
+        }
+    }
+    return "undefined";
+}
+
+/*
+ * Get the display name label of a value if it exists, otherwise return the
+ * internal name.
+ */
+function getEOLabel(eo, attribute) {
+    return getEOMetaValue(eo, attribute, 'label');
+}
+
+/*
+ * Get the direct EO value.
+ */
+function getEOValue(eo, attribute) {
+    if (eo.hasOwnProperty(attribute)) {
+        return eo[attribute];
+    }
+    return "undefined";
+}
+
+
+/*
+ * Get the raw list of shops
  */
 async function getShops() {
     let url = 'http://leigh-co.com/minecraft/neweden/link/v1/shops/read';
@@ -49,7 +94,8 @@ async function getShops() {
     }
 }
 
-/* Parse and render the shops to the screen.
+/*
+ * Parse and render the shops to the screen.
  */
 async function renderShops() {
     // Get the list of shops from the web endpoint.
@@ -65,9 +111,10 @@ async function renderShops() {
             return;
         }
 
-        // Uncomment this for debugging. Will show in the web console the raw
-        // shop data coming from the endpoint.
-        //console.trace("RAW SHOP: " + value);
+        if (DEBUG_OUTPUT) {
+            console.log("RAW SHOP: " + value);
+        }
+        
 
         // This magic line parses the plain string into a JSON object.
         const shop = JSON.parse(value);
@@ -75,20 +122,20 @@ async function renderShops() {
         // 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;"> ${shop.itemDisplayName}</td>
-            <td>${shop.price}</td>
-            <td>${shop.type}</td>`;
+            <td class="colItem"><img src="assets/minecraft/textures/${getEOValue(shop, "item")}.png" alt="${getEOValue(shop, "item")}" style="width:16px;height:16px;">${getEOLabel(shop, "item")}</td>
+            <td class="colPrice"><span class="colPricePrefix">${getEOMetaValue(shop, "price", "currencyPrefix")}</span><span class="colPriceValue">${getEOLabel(shop, "price")}</span></td>
+            <td class="colType">${getEOValue(shop, "type")}</td>`;
 
         // If there are enchantments on the item, add them in.
         // Otherwise insert an empty cell.
         if (shop.hasOwnProperty('enchants')) {
-            htmlSegment += `<td>`;
+            htmlSegment += `<td class="colEnchants">`;
             $.each(shop.enchants, function(index, enchant) {
                 if (index > 0) {
                     htmlSegment += `<br>`;
                 }
                 htmlSegment += `
-                    ${enchant.name} ${enchant.level}`;
+                    ${getEOLabel(enchant, "name")} ${getEOValue(enchant, "level")}`;
             });
             htmlSegment += `</td>`;
         } else {
@@ -97,9 +144,9 @@ async function renderShops() {
 
         // Add the rest of the columns for the row.
         htmlSegment += `
-            <td>${shop.ownerName}</td>
-            <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>`;
+            <td class="colOwner">${getEOLabel(shop, "owner")}</td>
+            <td class="colCoordinates"><a href="http://leigh-co.com/minecraft/neweden/dynmap/?worldname=world&mapname=flat&zoom=6&x=${getEOValue(shop, "x")}&y=${getEOValue(shop, "y")}&z=${getEOValue(shop, "z")}&desc=${encodeURIComponent(shop.itemDisplayName)}" target="_blank">${getEOValue(shop, "x")} / ${getEOValue(shop, "y")} / ${getEOValue(shop, "z")}</a></td>
+            <td class="colWorld">${getEOValue(shop, "world")}</td>`;
 
         // Lastly, append the <tr></tr> into the table body
         $('#quickShopsTableBody').append(htmlSegment);
@@ -122,7 +169,7 @@ async function renderShops() {
         ],
         columnDefs: [
             { orderable: false, targets: [ 3, 5 ]},
-            { className: "dt-body-center", targets: "_all"}
+            { className: "dt-body-center", targets: [0,2,3,4,5,6]}
         ],
         colReorder: {
             enable: true,
-- 
GitLab