Add 3D printer status shortcode

content/facilities/fabrication/index.md

@@ -10,3 +10,7 @@ subtitle: Use 3D printers and laser cutters to bring your creations to life.
 Leigh Hackspace currently operates three 3D printers, a Anycubic Vyper, a Ender 3 Pro, and a Makerbot Replicator 2. Between them they're able to print most things you can think of. We also hold a stock of filament that is available for use by members.
 
 We also have a CAD system available for member use, everything needed to get you started on the 3D printers and laser engraver is ready to go on the system.
+
+### Printer Status
+
+{{< printers >}}

themes/lhs/assets/js/site.js

@@ -18,6 +18,27 @@ $(document).ready(function () {
       }
     });
   }
+
+  function titleCase(word) {
+    return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
+  }
+
+  // 'printers' shortcode
+  if ($('div#printer-status').length) {
+    $.getJSON("https://api.leighhack.org/space.json", function (data) {
+      if (data.sensors.ext_3d_printers.length) {
+        data.sensors.ext_3d_printers.forEach(function (val, indx){
+          var obj = $($("template#printer-block").html());
+          console.log(val);
+          console.log(obj);
+          console.log(obj.find('#printer-name'))
+          obj.find('#printer-name').html(val['name']);
+          obj.find('#printer-status').html(titleCase(val['state']));
+          $('div#printer-status').append(obj);
+        });
+      }
+    });
+  }
 });
 
 function render_calendar() {

themes/lhs/layouts/shortcodes/printers.html

@@ -0,0 +1,9 @@
+<template id="printer-block">
+    <div class="column is-one-quarter">
+        <div class="box is-large hover-items">
+            <h3 class="is-size-4 has-text-weight-bold" id="printer-name"></h3>
+            <h4 id="printer-status"></h3>
+        </div>
+    </div>
+</template>
+<div class="columns is-centered" id="printer-status"></div>