diff --git a/site/index.html b/site/index.html
index da6974d9af7913a5f8056ced6cc74e5260ee6c8d..d18754acf535fc1d7420353a16b99aee08803318 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 5967237f6f64a873cef61edfb9f37853c3fad86b..c1bfef0591359edb9738421beafee4fc47f55bc0 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();