From 0765e8738c6a7be9461dae02b88bff8f89b2289d Mon Sep 17 00:00:00 2001
From: Shaunak Kishore <kshaunak@gmail.com>
Date: Fri, 11 Sep 2015 01:04:43 -0400
Subject: [PATCH] Render log in UI

---
 client/glyph.js   |  6 ++++++
 client/index.html |  5 +++++
 client/style.css  | 20 ++++++++++++++++++++
 3 files changed, 31 insertions(+)

diff --git a/client/glyph.js b/client/glyph.js
index a5c1c8ca..0888ecb8 100644
--- a/client/glyph.js
+++ b/client/glyph.js
@@ -186,6 +186,12 @@ Template.glyph.helpers({
     var glyph = Session.get('glyph.data');
     return glyph && glyph.manual.verified ? 'verified' : undefined;
   },
+  log: function() {
+    var glyph = Session.get('glyph.data');
+    return glyph ? glyph.render.log.map(function(pair) {
+      return {log_class: pair[0], log_message: pair[1]};
+    }) : [];
+  },
   base_color: function() {
     return Session.get('glyph.show_strokes') ? 'black' : 'gray';
   },
diff --git a/client/index.html b/client/index.html
index 7d58307d..8669332f 100644
--- a/client/index.html
+++ b/client/index.html
@@ -59,6 +59,11 @@
 
 <template name="glyph">
   <div id="glyph" class="{{verified}}">
+    <div class="log">
+      {{#each log}}
+        <div class="log-line {{log_class}}">{{log_message}}</div>
+      {{/each}}
+    </div>
     <svg viewbox="0 0 1024 1024">
       <g transform="scale(1, -1) translate(0, -900)">
         {{#if glyph}}
diff --git a/client/style.css b/client/style.css
index c3dad8a6..7e0fbf71 100644
--- a/client/style.css
+++ b/client/style.css
@@ -52,6 +52,26 @@
   text-align: center;
 }
 
+#glyph .log {
+  position: absolute;
+  text-align: left;
+  left: 40px;
+  top: 76px;
+}
+
+#glyph .log .log-line {
+  font-size: 20px;
+  margin-bottom: 16px;
+}
+
+#glyph .log .log-line.error {
+  color: red;
+}
+
+#glyph .log .log-line.success {
+  color: green;
+}
+
 #glyph.verified {
   background-color: #dfc;
 }