Display Version Info from API (#20)

Author: bbengfort

static/css/dataspace.css

@@ -17,6 +17,10 @@ body {
     line-height: 60px;
 }
 
+#versionStatus {
+    margin-right: 2px;
+}
+
 body > .container {
     padding: 40px 15px 0;
 }

static/js/dataspace.js

@@ -224,10 +224,22 @@ class Dataspace {
 
       return grid;
     }
+}
 
+function versionCheck() {
+  $.get("/status").then((data) => {
+    console.log(data);
+    if (data.status == 'ok') {
+      $("#versionStatus").removeClass("text-danger").addClass("text-success");
+      $("#versionInfo").text(data.version);
+    }
+  });
 }
 
 $(document).ready(function() {
+    // Perform version check
+    versionCheck();
+
     // Create the dataspace app
     app = new Dataspace("#dataspace");
 

templates/index.html

@@ -425,7 +425,7 @@
         Made with &spades; by <a href="https://github.com/bbengfort">@bbengfort</a>
         for the Georgetown Data Science Certificate
       </span>
-      <span class="text-muted pull-right">For Demonstration Purposes Only.</span>
+      <span class="text-muted pull-right"><span id="versionStatus" class="text-danger">&#9679;</span><span id="versionInfo"></span></span>
     </div>
   </footer>
 
@@ -447,10 +447,15 @@ <h5 class="modal-title" id="aboutModalLabel">About Data Space</h5>
             selecting a dataset or by creating one of your own, you can fit a model to the data
             and see how the model would make decisions based on the data it has been trained on.
             The fitted contours display the highest likelihoods of the class the model would select.
+          </p>
+          <p>
             Although this is a toy example, hopefully it helps give you the intuition that the
             machine learning process is a model selection search for the best combination of features,
             algorithm, and hyperparameter that generalize well in a bounded feature space.
           </p>
+          <p>
+            This application is for demonstration purposes only.
+          </p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>