Added progress bar to checklist

- Relates #1847

client/components/cards/checklists.jade

@@ -43,6 +43,8 @@ template(name="checklistDetail")
           h2.title
             +viewer
                 = checklist.title
+    .checklist-progress-bar
+      .checklist-progress(style="width:{{finishedPercent}}%") {{finishedPercent}}%
     +checklistItems(checklist = checklist)
 
 template(name="checklistDeletePopup")

client/components/cards/checklists.js

@@ -77,6 +77,12 @@ BlazeComponent.extendComponent({
       !Meteor.user().isWorker()
     );
   },
+
+  /** returns the finished percent of the checklist */
+  finishedPercent() {
+    const ret = this.data().checklist.finishedPercent();
+    return ret;
+  },
 }).register('checklistDetail');
 
 BlazeComponent.extendComponent({

client/components/cards/checklists.styl

@@ -20,6 +20,17 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   display: flex
   justify-content: space-between
 
+.checklist-progress-bar
+  width: 90%
+  height: 20px
+
+  .checklist-progress
+    color: #fff !important
+    background-color: #2196F3 !important
+    padding: 0.01em 16px
+    border-radius: 16px
+    height: 100%
+
 .checklist-title
   .checkbox
     float: left

models/checklists.js

@@ -102,6 +102,19 @@ Checklists.helpers({
       isFinished: true,
     }).count();
   },
+  /** returns the finished percent of the checklist */
+  finishedPercent() {
+    const checklistItems = ChecklistItems.find({ checklistId: this._id });
+    const count = checklistItems.count();
+    const checklistItemsFinished = checklistItems.fetch().filter(checklistItem => checklistItem.isFinished);
+
+    let ret = 0;
+
+    if (count > 0) {
+      ret = Math.round(checklistItemsFinished.length / count * 100);
+    }
+    return ret;
+  },
   isFinished() {
     return 0 !== this.itemCount() && this.itemCount() === this.finishedCount();
   },