codebuddies · distalx · Oct 12, 2017 · Oct 14, 2017 · Oct 20, 2017 · Oct 20, 2017
diff --git a/client/css/_base.scss b/client/css/_base.scss
@@ -126,6 +126,10 @@ a:hover {
   margin-top: 20px;
 }
 
+.padding-0 {
+  padding: 0px;
+}
+
 .well {
   margin: 10px 0px;
   overflow: auto;
@@ -169,6 +173,10 @@ a:hover {
   }
 }
 
+.alert-warning, .alert-info, .alert-success, .alert-danger {
+    padding: 10px 15px;
+}
+
 /*Tags cleanup*/
 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
   padding-left: 12px;
@@ -182,6 +190,12 @@ a:hover {
   margin-top: $margin-base;
 }
 
+/*Progress Log*/
+.editProgressLog, .removeProgressLog {
+  &:hover {
+      cursor: pointer;
+  };
+}
 /* stripped row effect*/
 .row-stripe:nth-child(odd) {
   background: #e0e0e0;

diff --git a/client/css/_quill_editor.scss b/client/css/_quill_editor.scss
@@ -1,3 +1,7 @@
 .ql-container[data-editor-host] {
   height: 150px;
 }
+
+.ql-container[ data-editor-progress-log] {
+  height: 250px;
+}
diff --git a/client/css/_study_groups.scss b/client/css/_study_groups.scss
@@ -159,3 +159,19 @@
     }
   }
 }
+
+/*Progress Log*/
+.log {
+  padding: 20px 0px;
+  h2 {
+      @include font-face(700, 34px, normal, $black);
+      margin: 20px 0px 10px;
+  }
+  span.author {
+      @include font-face(400, 14px, normal, $black);
+  }
+  .log-content {
+      margin-top: 20px;
+      @include font-face(400, 18px, normal, $black);
+  }   
+}
diff --git a/client/templates/hangout/hangout-frame.html b/client/templates/hangout/hangout-frame.html
@@ -1,7 +1,7 @@
 <template name="hangoutFrame">
 
 <div id="hangout-button-wrapper">
-  <p class="warning chrome-firefox-warning">Warning: Please load this page using Chrome <img src="/images/chrome.ico" width="25"/> or Firefox <img src="/images/firefox.ico" width="25"/> to avoid technical issues</p>
+  <p class="alert-danger chrome-firefox-warning">Warning: Please load this page using Chrome <img src="/images/chrome.ico" width="25"/> or Firefox <img src="/images/firefox.ico" width="25"/> to avoid technical issues</p>
   <img src="/images/logo-circle-cropped.png" width="65%" class="load-hangout load-hangout-screenshot"/>
   <button class="margin-top-1 margin-bottom-1 click-text btn btn-cb2 load-hangout">{{_ "click_to_load_hangout"}}</button>
 

diff --git a/client/templates/hangout/hangout_cards.html b/client/templates/hangout/hangout_cards.html
@@ -37,7 +37,7 @@ <h3 class="hangouts-title">{{_ "past_events"}}</h3>
       </div>
 
     {{else}}
-        <h5 class="align-center color-white">There are no more hangouts.</h5>
+        <div class="alert-warning">There are no more hangouts.</div>
     {{/unless}}
 
   {{else}}

diff --git a/client/templates/main.js b/client/templates/main.js
@@ -123,6 +123,9 @@ Template.registerHelper("isOrganizers", function(role){
   return ["owner", "admin", "moderator"].indexOf(role) < 0 ? false : true ;
 });
 
+Template.registerHelper('cleanDateFormat', function(date) {
+  return moment(date).format('Do MMMM  YYYY');
+});
 Template.registerHelper("slotDayString", function(day){
   switch (day) {
     case 00:

diff --git a/client/templates/progress_log/edit_progress_log_modal.html b/client/templates/progress_log/edit_progress_log_modal.html
@@ -0,0 +1,36 @@
+<template name="editProgressLogModal">
+
+  <div id="create-hangout-modal" class="modal fade">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title text-center">{{_ "edit_a_progress_log"}}</h4>
+          <button type="button" class="btn btn-circle btn-outline btn-info pull-right" data-dismiss="modal"><i class="fa fa-times"></i></button>
+        </div>
+        <div class="modal-body">
+
+          <div class="row">
+            <div class="col-md-12">
+              <input id="title" class="form-control" type="text" placeholder="Title" value={{title}}>
+            </div>
+          </div>
+          <br>
+
+          <div class="row">
+            <div class="col-md-12">
+              <div data-editor-progress-log></div>
+            </div>
+          </div>
+
+          <br>
+          <div class="row">
+            <div class="col-md-12 text-center">
+              <button id="updateProgressLog" class="btn btn-cb2">{{_ "save_log"}}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
diff --git a/client/templates/progress_log/edit_progress_log_modal.js b/client/templates/progress_log/edit_progress_log_modal.js
@@ -0,0 +1,82 @@
+import QuillEditor from '../../libs/QuillEditor';
+
+
+Template.editProgressLogModal.onCreated(function(){
+  let instance = this;
+  instance.quillDelta = new ReactiveVar("OKEY");
+  instance.autorun(function(){
+    instance.subscribe('progressLogsById', instance.data._id);
+    const progressLog = ProgressLogs.findOne({"_id": instance.data._id});
+    instance.quillDelta.set(progressLog.description_in_quill_delta);
+
+  });
+
+});
+
+Template.editProgressLogModal.onRendered(function() {
+  let instance = this;
+  const editorHostElement = instance.$('[data-editor-progress-log]').get(0);
+  instance.editor = QuillEditor.createEditor({
+    container: editorHostElement,
+    options: {
+      placeholder: 'Please share something you learned or accomplished.',
+    }
+  });
+
+  instance.editor.setContents("Loading...");
+  Meteor.setTimeout(function () {
+    instance.editor.setContents(instance.quillDelta.get());
+  }, 1500);
+
+
+});
+
+Template.editProgressLogModal.events({
+  'click #updateProgressLog': function(event, template) {
+    event.preventDefault();
+
+    const title = $('#title').val();
+    const description = QuillEditor.generatePlainTextFromDeltas(template.editor.getContents());
+    const description_in_quill_delta = template.editor.getContents();
+
+
+    const data = {
+      id: this._id,
+      title: title,
+      slug: title.replace(/\s+/g, '-').toLowerCase(),
+      description: description,
+      description_in_quill_delta: description_in_quill_delta
+    }
+
+
+    if ($.trim(title) == '') {
+      $('#title').focus();
+      return Bert.alert( TAPi18n.__("empty_log_title"), 'warning', 'growl-top-right' );
+    }
+
+    if ($.trim(description) == '') {
+      return Bert.alert( TAPi18n.__("empty_log_body"), 'warning', 'growl-top-right' );
+    }
+
+
+
+
+    console.log(data);
+
+    Meteor.call('updateProgressLog', data, function(err, result) {
+      if (result) {
+        Modal.hide();
+
+        return Bert.alert({
+          type: 'success',
+          style: 'fixed-top',
+          title: TAPi18n.__("progress_log_updated"),
+          icon: 'fa-trophy'
+        });
+
+      } else {
+        console.log(err)
+      }
+    });
+  }
+});
diff --git a/client/templates/progress_log/new_progress_log_modal.html b/client/templates/progress_log/new_progress_log_modal.html
@@ -0,0 +1,36 @@
+<template name="newProgressLogModal">
+
+  <div id="create-hangout-modal" class="modal fade">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title text-center">{{_ "create_a_progress_log"}}</h4>
+          <button type="button" class="btn btn-circle btn-outline btn-info pull-right" data-dismiss="modal"><i class="fa fa-times"></i></button>
+        </div>
+        <div class="modal-body">
+
+          <div class="row">
+            <div class="col-md-12">
+              <input id="title" class="form-control" type="text" placeholder="Title">
+            </div>
+          </div>
+          <br>
+
+          <div class="row">
+            <div class="col-md-12">
+              <div data-editor-progress-log></div>
+            </div>
+          </div>
+
+          <br>
+          <div class="row">
+            <div class="col-md-12 text-center">
+              <button id="createProgressLog" class="btn btn-cb2">{{_ "save_log"}}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
diff --git a/client/templates/progress_log/new_progress_log_modal.js b/client/templates/progress_log/new_progress_log_modal.js
@@ -0,0 +1,70 @@
+import QuillEditor from '../../libs/QuillEditor';
+
+Template.newProgressLogModal.onRendered(function() {
+  let instance = this;
+  const editorHostElement = instance.$('[data-editor-progress-log]').get(0);
+  instance.editor = QuillEditor.createEditor({
+    container: editorHostElement,
+    options: {
+      placeholder: 'Please share something you learned or accomplished.',
+    }
+  });
+
+});
+
+Template.newProgressLogModal.events({
+  'click #createProgressLog': function(event, template) {
+
+
+
+    const title = $('#title').val();
+    const description = QuillEditor.generatePlainTextFromDeltas(template.editor.getContents());
+    const description_in_quill_delta = template.editor.getContents();
+
+    const study_group_id = this.parent_id;
+    const study_group_title = this.parent_title;
+
+
+
+    const data = {
+      title: title,
+      slug: title.replace(/\s+/g, '-').toLowerCase(),
+      description: description,
+      description_in_quill_delta: description_in_quill_delta,
+      study_group_id : study_group_id,
+      study_group_title: study_group_title
+    };
+
+
+    if ($.trim(title) == '') {
+      $('#title').focus();
+      return Bert.alert( TAPi18n.__("empty_log_title"), 'warning', 'growl-top-right' );
+    }
+
+    if ($.trim(description) == '') {
+      return Bert.alert( TAPi18n.__("empty_log_body"), 'warning', 'growl-top-right' );
+    }
+
+
+
+
+    console.log(data);
+
+    Meteor.call('createNewProgressLog', data, function(err, result) {
+      if (result) {
+        Modal.hide();
+
+        return Bert.alert({
+          type: 'success',
+          style: 'fixed-top',
+          title: TAPi18n.__("progress_log_created_title"),
+          message: TAPi18n.__("progress_log_created_text"),
+          icon: 'fa-trophy'
+        });
+
+      } else {
+        console.log(err)
+      }
+    });
+  }
+});
diff --git a/client/templates/progress_log/progress_log_item.html b/client/templates/progress_log/progress_log_item.html
@@ -0,0 +1,10 @@
+<template name="progressLogItem">
+  <!-- @TODO Style this thing. -->
+  <div class="well">
+    <a href="{{pathFor 'single progress log' logId=_id}}">{{title}}</a> by <a href="{{pathFor 'profile' name=author.username userId=author.id}}" class="{{#unless currentUser}} continue-popup {{/unless}}">{{author.username}}</a> <small>{{cleanDateFormat created_at}}</small>
+    {{#if isAuthor}}
+      <span class="pull-right"><i class="fa fa-trash-o removeProgressLog" aria-hidden="true"></i></span>
+      <span class="pull-right"><i class="fa fa-pencil-square-o editProgressLog" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp;&nbsp;</span>
+    {{/if}}
+  </div>
+</template>
diff --git a/client/templates/progress_log/progress_log_item.js b/client/templates/progress_log/progress_log_item.js
@@ -0,0 +1,39 @@
+Template.progressLogItem.helpers({
+  isAuthor () {
+    return this.author.id === Meteor.userId();
+  }
+});
+
+Template.progressLogItem.events({
+  "click .removeProgressLog" (event, template){
+     event.preventDefault();
+     var logId = this._id;
+     sweetAlert({
+       title: TAPi18n.__("delete_hangout_confirm"),
+       showCancelButton: true,
+       cancelButtonText: TAPi18n.__("no_delete_learning"),
+       confirmButtonText: TAPi18n.__("yes_delete_learning"),
+       confirmButtonColor: "#d9534f",
+       closeOnConfirm: false,
+       closeOnCancel: true,
+       type: 'warning'
+      },
+      function(isConfirm) {
+        if(isConfirm) {
+          Meteor.call('removeProgressLog', logId, function(error, result) {
+            if(result) {
+              swal("Poof!", "Your Progress Log has been deleted!");
+            }
+            else {
+              swal("Oops!  Something went wrong", error.error, + "\n Try again!", "error");
+            }
+          });
+        }
+      });
+  },
+  "click .editProgressLog" (event, template){
+     event.preventDefault();
+
+     Modal.show('editProgressLogModal', this);
+  }
+});
diff --git a/client/templates/progress_log/single_progress_log.html b/client/templates/progress_log/single_progress_log.html
@@ -0,0 +1,21 @@
+<template name="singleProgressLog">
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+          {{#if Template.subscriptionsReady}}
+            {{#with progressLog}}
+             <div class="log">
+              <h2>{{title}}</h2>
+              <span class="author">Logged by <a href="/profile/{{author.username}}/{{author.id}}">{{author.username}}</a> in the <a href="/study-group/{{study_group.title}}/{{study_group.id}}">{{study_group.title}}</a> group</span>
+                  <div class="log-content">
+                      <h4>{{description}}</h4>
+                  </div>
+              </div>
+            {{/with}}
+          {{else}}
+            {{>loading}}
+          {{/if}}
+         </div>
+    </div>
+</div>
+</template>