Adding and displaying comments

hourglass/client/main/main.css

@@ -489,7 +489,16 @@ input, textarea {
 }
 
 #workInfoContainer {
+	width: 70%;
 	padding: 2%;
+	display: inline-block;
+}
+
+#workToggle {
+	width: 25%;
+	height: 100%;
+	display: inline-block;
+	float: right;
 }
 
 #workInfoNmCont {
@@ -774,3 +783,42 @@ input, textarea {
 .inputRadioPref {
 	margin-top: 6%;
 }
+
+#workComment {
+	margin-bottom: 3%;
+}
+
+#comment {
+	width: 105%;
+	position: relative;
+	overflow-y: scroll;
+}
+
+.commentBox {
+	margin: 0 !important;
+	padding: 2%;
+	background-color: rgba(255,255,255,0.1);
+	border-bottom: solid 1px #CCC;
+}
+
+.commentUser, .commentDate {
+	font-size: 75%;
+}
+
+#commentSubmit {
+	padding: 2%;
+	background-color: rgba(255,255,255,0.1);
+	
+	display: inline;
+	float: right;
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+#commentSubmit:hover {
+	background-color: rgba(255,255,255,0.05);
+}

hourglass/client/main/main.html

@@ -137,18 +137,24 @@
                         {{#unless newWork}}
                             <div id="workComments">
                                 <h3>Comments</h3>
-                                <div id="comment">
+                                <div id="comment" style="height:{{commentDim}}">
                                     {{#each work 'comments'}}
                                         {{> comment}}
                                     {{/each}}
                                 </div>
                                 <div>
-                                    <textarea id="workComment" rows="4" cols="50"></textarea>
+                                    <textarea id="workComment" rows="4" cols="50" maxlength="200"></textarea><br>
+                                    <div>
+                                    <span id="commentRestrict">{{commentLength}}</span>
                                     <div id="commentSubmit">Submit</div>
+                                    </div>
                                 </div>
                             </div>
                         {{/unless}}
                     </div>
+                </div>
+                <div id="workToggle">
+                    
                 </div>
                 {{#if newWork}}
                     {{#if inRole}}
@@ -204,7 +210,7 @@
 
 <template name="comment">
     <div class="commentBox">
-        <span class="commentComment">{{comment}}</span>
+        <span class="commentComment">{{comment}}</span><br>
         <span class="commentUser">{{user}}</span>
         <span class="commentDate">{{date}}</span>
     </div>

hourglass/client/main/main.js

@@ -76,6 +76,7 @@ Session.set("calCreWork",null);
 Session.set("calWorkDate",null);
 Session.set("classDisp",[]);
 Session.set("classDispHover",null);
+Session.set("commentRestrict",null);
 
 Template.registerHelper('divColor', (div) => {
     return Session.get("themeColors")[Meteor.user().profile.preferences.theme][div];
@@ -362,6 +363,12 @@ Template.main.helpers({
         var h = window.innerHeight * 0.7;
         return "width:"+w.toString()+"px;height:"+h.toString()+"px;margin-left:"+-0.5*w.toString()+"px;margin-top:"+-0.5*h.toString()+"px";
     },
+    commentDim() {
+        var work = Session.get("currentWork");
+        if(work === null) return;
+        if(work.comments.length <= 3) return;
+        return 0.23*window.innerHeight.toString() + "px";
+    },
     work(value) {
         if(Session.get("currentWork") === null) return;
         return Session.get("currentReadableWork")[value];
@@ -376,6 +383,9 @@ Template.main.helpers({
             return workColors[type];
         }
     },
+    commentLength() {
+        return Session.get("commentRestrict");
+    },
     newWork() {
         return Session.get("newWork");
     },
@@ -474,6 +484,8 @@ Template.main.events({
                 sendData("editWork");
             }
             Session.set("newWork",null);
+            Session.set("commentRestrict",null);
+            document.getElementById("workComment").value = "";
         }
 
         if (event.target.id !== sessval &&
@@ -676,8 +688,14 @@ Template.main.events({
         input.value = "";
         if (comment !== "") {
             document.getElementById('workComment').value = "";
-            Meteor.call('addComment', [comment, workId]);
+            Meteor.call('addComment', [comment, workId], function(err,result) {
+                var thisWork = work.findOne({_id:workId});
+                Session.set("currentWork",thisWork);
+                var thisReadWork = formReadable(thisWork);
+                Session.set("currentReadableWork",thisReadWork);
+            });
         }
+
     },
     'click #workSubmit' () {
         if(getHomeworkFormData() === null) return;
@@ -774,6 +792,15 @@ Template.main.events({
             if(div.contains(event.target)) return;
         }
         Session.set("classDispHover",null);
+    },
+    'keydown #workComment' (event) {
+        var chars = event.target.value.length;
+        document.getElementById("commentRestrict").style.color = "#CCC";
+        if(chars === 200) {
+            document.getElementById("commentRestrict").style.color = "#FF1A1A";
+        }
+        Session.set("commentRestrict", "Characters left: " + (200-chars).toString());
+        
     }
 });
 
@@ -892,9 +919,12 @@ function formReadable(input) {
     input.dueDate = getReadableDate(input.dueDate);
     input.type = input.type[0].toUpperCase() + input.type.slice(1);
     var comments = input.comments;
+    var resort = [];
     for(var k = 0; k < comments.length; k++) {
-        comments[k].user = Meteor.users.findOne({_id:comments[k].user}).profile.name;
-        comments[k].date =  moment(comments[k].date).calendar(null, { //change to time if recently posted
+        var re = comments.length-k-1;
+        resort[re] = {"comment":comments[k].comment,"date":null,"user":null};
+        resort[re].user = Meteor.users.findOne({_id:comments[k].user}).profile.name;
+        resort[re].date =  moment(comments[k].date).calendar(null, { //change to time if recently posted
             sameDay: '[Today]',
             nextDay: '[Tomorrow]',
             nextWeek: 'dddd',
@@ -903,6 +933,6 @@ function formReadable(input) {
             sameElse: 'MMMM Do'
         });
     }
-    input.comments = comments;
+    input.comments = resort;
     return input;
 }