Hack together fraction-completed bar

client/controls.js

@@ -48,6 +48,14 @@ function save_glyphs(glyphs, index) {
   });
 }
 
+Template.navbar.helpers({
+  percent: function() {
+    var value = Session.get('glyph.fraction_verified');
+    return Math.round(100*(value === undefined ? 0 : value));
+  },
+});
+
+
 Template.progress.helpers({
   percent: function() {
     var value = Session.get('progress.value');

client/glyph.js

@@ -7,10 +7,12 @@ var COLORS = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
 
 function change_glyph(method, glyph) {
   glyph = glyph || Session.get('glyph.data');
-  Meteor.call(method, glyph, function(error, data) {
+  Meteor.call(method, glyph, function(err, data) {
     data = fill_glyph_fields(data);
     Session.set('glyph.data', data);
-    if (method !== 'save_glyph') {
+    if (method === 'save_glyph') {
+      refresh_fraction_verified();
+    } else {
       Session.set('glyph.show_strokes', data.manual.verified);
     }
   });
@@ -25,6 +27,14 @@ function fill_glyph_fields(glyph) {
   return glyph;
 }
 
+function refresh_fraction_verified() {
+  Meteor.call('get_fraction_verified', function(err, data) {
+    if (!err) {
+      Session.set('glyph.fraction_verified', data);
+    }
+  });
+}
+
 window.get_glyph = function(name) {
   change_glyph('get_glyph', name);
 }
@@ -243,4 +253,5 @@ Meteor.startup(function() {
   if (!Session.get('glyph.data')) {
     change_glyph('get_next_glyph');
   }
+  refresh_fraction_verified();
 });

client/index.html

@@ -14,6 +14,12 @@
       <div class="navbar-header">
         <div class="navbar-brand">zh-Hans character decomposition</div>
       </div>
+      <div class="navbar-progress progress">
+        <div class="progress-bar progress-bar-warning active"
+             role="progressbar" style="width: {{percent}}%"
+             aria-valuenow="{{percent}}"
+             aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
     </div>
   </div>
 </template>

client/style.css

@@ -7,12 +7,19 @@
   color: #ffffff !important;
 }
 
+.navbar .progress {
+  float: right;
+  margin-top: 21px;
+  margin-right: -3px;
+  width: 298px;
+}
+
 .btn {
   outline: 0 !important;
   padding: 6px 12px !important;
 }
 
-#progress .progress {
+.navbar .progress, #progress .progress {
   height: 18px;
   margin-bottom: 0;
 }

server/glyphs.js

@@ -32,6 +32,9 @@ Meteor.methods({
     return prev ? prev : Glyphs.findOne(
       {'manual.verified': {$ne: true}}, {sort: {name: -1}});
   },
+  get_fraction_verified: function() {
+    return Glyphs.find({'manual.verified': true}).count()/Glyphs.find().count();
+  },
   save_glyph: save_glyph,
   save_glyphs: function(glyphs) {
     for (var i = 0; i < glyphs.length; i++) {
@@ -42,4 +45,5 @@ Meteor.methods({
 
 Meteor.startup(function() {
   Glyphs._ensureIndex({name: 1}, {unique: true});
+  Glyphs._ensureIndex({'manual.verified': 1});
 });