Added chat.

app/client/app.css

@@ -879,9 +879,9 @@ footer .fa {
 
 #playlist {
     margin: 0;
-    padding: 0;
+    padding: 0 15px 0 15px;
     color: white;
-    font-size: 1.5em;
+    font-size: 21px;
     max-height: 90%;
     overflow: auto;
 }
@@ -981,6 +981,8 @@ nav form input[type="image"]{
 
 #side-panel {
     height: 100vh;
+    padding-left: 0;
+    padding-right: 0;
     background-color: rgba(255, 255, 255, 0.4);
 }
 
@@ -1141,3 +1143,36 @@ nav form input[type="image"]{
     float: left;
     width: 100%;
 }
+.chat-message {
+    font-size: 20px;
+    color: white;
+}
+#chat-ul {
+    height: 90vh;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0 15px 0 15px;
+}
+.chat-message:nth-child(even) {
+   color: white;
+}
+.chat-message:nth-child(odd) {
+    color: darkblue;
+}
+#submit{
+    margin-left: 10px;
+    font-size: 1.5em;
+    cursor: pointer;
+    display: inline-block;
+ }
+#chat-input-div {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.row {
+    margin: 0;
+}

app/client/client.js

@@ -5,6 +5,7 @@ Meteor.startup(function() {
 });
 
 Meteor.subscribe("queues");
+Meteor.subscribe("chat");
 Meteor.subscribe("playlists");
 
 var minterval;
@@ -208,6 +209,25 @@ Template.dashboard.onCreated(function() {
 });
 
 Template.room.events({
+    "click #submit": function() {
+        Meteor.call("sendMessage", Session.get("type"), $("#chat-input").val(), function(err, res) {
+            console.log(err, res);
+            if (res) {
+                $("#chat-input").val("");
+            }
+        });
+    },
+    "keyup #chat-input": function(e) {
+        if (e.type == "keyup" && e.which == 13) {
+            e.preventDefault();
+            Meteor.call("sendMessage", Session.get("type"), $("#chat-input").val(), function(err, res) {
+                console.log(err, res);
+                if (res) {
+                    $("#chat-input").val("");
+                }
+            });
+        }
+    },
     "click #like": function(e) {
         Meteor.call("likeSong", Session.get("currentSong").mid);
     },
@@ -505,6 +525,13 @@ Template.room.onRendered(function() {
 });
 
 Template.room.helpers({
+    chat: function() {
+        var elem = document.getElementById('chat-ul');
+        if (elem !== undefined && elem !== null) {
+            elem.scrollTop = elem.scrollHeight;
+        }
+        return Chat.find({type: Session.get("type")}, {sort: {time: -1}, limit: 50 }).fetch().reverse();
+    },
     likes: function() {
         var playlist = Playlists.findOne({type: Session.get("type")});
         var likes = 0;

app/client/head.html

@@ -24,6 +24,7 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
     <script src="/bootstrap-slider.js"></script>

app/client/templates/room.html

@@ -90,7 +90,27 @@
                     <!---->
                 </div>
                 <div class="col-md-3" id="side-panel">
-                  {{> playlist}}
+                    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
+                        <li role="presentation" class="active"><a data-toggle="tab" href="#playlist">Playlist</a></li>
+                        <li role="presentation"><a data-toggle="tab" href="#chat">Chat</a></li>
+                    </ul>
+                    <div id='content' class="tab-content sidebar-content">
+                        <div class="tab-pane active" id="playlist">
+                            {{> playlist}}
+                        </div>
+                        <div class="tab-pane" id="chat">
+                            <ul id="chat-ul">
+                                {{#each chat}}
+                                    <li class="chat-message"><b class="bold">{{this.username}}:</b> {{this.message}}</li>
+                                {{/each}}
+                            </ul>
+                            <div id="chat-input-div">
+                                <input id="chat-input" placeholder="Type a message...">
+                                <div id="submit"><i id="submit-message" class="fa fa-paper-plane-o"></i>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <!-- Modal -->

app/collections/collections.js

@@ -2,3 +2,4 @@ Playlists = new Mongo.Collection("playlists");
 Rooms = new Mongo.Collection("rooms");
 Queues = new Mongo.Collection("queues");
 Reports = new Mongo.Collection("reports");
+Chat = new Mongo.Collection("chat");

app/server/server.js

@@ -382,6 +382,23 @@ function isAdmin() {
 }
 
 Meteor.methods({
+    sendMessage: function(type, message) {
+        if (Meteor.userId()) {
+            var user = Meteor.user();
+            var time = new Date();
+            var username = user.profile.username;
+            if (message.length === 0) {
+                throw new Meteor.Error(406, "Message length cannot be 0.");
+            }
+            if (message.length > 300) {
+                throw new Meteor.Error(406, "Message length cannot be more than 300 characters long..");
+            }
+            Chat.insert({type: type, message: message, time: time, username: username});
+            return true;
+        } else {
+            throw new Meteor.Error(403, "Invalid permissions.");
+        }
+    },
     likeSong: function(mid) {
         if (Meteor.userId()) {
             var user = Meteor.user();