jollen · jollen · Jul 12, 2014 · Jul 13, 2014
diff --git a/index.html b/index.html
@@ -14,6 +14,9 @@
 
     <!-- Custom CSS for the '4 Col Portfolio' Template -->
     <link href="stylesheets/4-col-portfolio.css" rel="stylesheet">
+
+    <link href="styles/main.css" rel="stylesheet">
+    <link href="styles/animate.min.css" rel="stylesheet">
 </head>
 
 <body>
@@ -22,12 +25,29 @@
                 <a href="portfolio-item.html">
                     <img class="img-responsive dp img-circle" src="http://lorempixel.com/180/180/">
                 </a>
-	                <h4 class="media-heading">${subject}</h4>
+	                <h4 class="media-heading">${title}</h4>
+                    <h4 class="media-heading">${uid.Name}</h4>
 	                <h5>${date}</h5>
 	                <button id="subject" data-id="${id}" class="btn btn-success">Read More</button>
             </div>
 </script>
 
+<script id='chatTemplate' type='text/x-jquery-tmpl'>
+                        <li class="left clearfix"><span class="chat-img pull-left">
+                            <img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle">
+                        </span>
+                            <div class="chat-body clearfix">
+                                <div class="header">
+                                    <strong class="primary-font">${username}</strong> <small class="pull-right text-muted">
+                                        <span class="glyphicon glyphicon-time"></span>${fromNow}</small>
+                                </div>
+                                <p>
+                                    ${message}
+                                </p>
+                            </div>
+                        </li>
+</script>
+
     <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
         <div class="container">
             <div class="navbar-header">
@@ -47,7 +67,7 @@ <h5>${date}</h5>
                     </li>
                     <li><a href="#services">所有文章</a>
                     </li>
-                    <li><a href="#contact">張貼文章</a>
+                    <li><a href="users.html">所有會員</a>
                     </li>
                 </ul>
             </div>
@@ -56,8 +76,65 @@ <h5>${date}</h5>
         <!-- /.container -->
     </nav>
 
+
+    <div class="container" id="chatroom">
+        <div class="row">
+
+            <div class="col-lg-12">
+                <h1 class="page-header animated shake">最新訊息
+                    <small>Showcase Your Work</small>
+                </h1>
+            </div>
+
+        </div>
+
+        <div class="row">
+            <div class="col-md-5">
+                <div class="panel panel-primary">
+                    <div class="panel-heading">
+                        <span class="glyphicon glyphicon-comment"></span> Chat
+                        <div class="btn-group pull-right">
+                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                                <span class="glyphicon glyphicon-chevron-down"></span>
+                            </button>
+                            <ul class="dropdown-menu slidedown">
+                                <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh">
+                                </span>Refresh</a></li>
+                                <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign">
+                                </span>Available</a></li>
+                                <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove">
+                                </span>Busy</a></li>
+                                <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span>
+                                    Away</a></li>
+                                <li class="divider"></li>
+                                <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>
+                                    Sign Out</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="panel-body">
+                        <ul class="chat">
+                        </ul>
+                    </div>
+                    <div class="panel-footer">
+                        <div class="input-group">
+                            <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here...">
+                            <span class="input-group-btn">
+                                <button class="btn btn-warning btn-sm" id="btn-chat">
+                                    Send</button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <div class="container">
 
+        <div id="message"></div>
+
         <div class="row">
 
             <div class="col-lg-12">
@@ -120,6 +197,31 @@ <h1 class="page-header">最新文章
     <script src="javascripts/bootstrap.min.js"></script>
 	<script src='javascripts/jquery-tmpl/jquery.tmpl.min.js'></script>
 	<script src='javascripts/main.js'></script>
+    <script src='javascripts/moment/min/moment.min.js'></script>
+    <script src='javascripts/jquery.websocket.js'></script>
+
+    <script type="text/javascript">
+    $(document).ready(function(){
+        $("#message").createWebSocket();
+        initSubmitForm();
+    });
+
+    var initSubmitForm = function () {
+            $("#btn-chat").on('click', function () {
+                $.ajax({
+                    url: "http://192.168.1.24:8080/send",
+                    type: "GET",
+                    dataType: "json",
+                    data: {
+                        m: $("#btn-input").val(),
+                        u: 'jollen',
+                    },
+                });
+
+                return false;
+            });
+        };
+    </script>
 </body>
 
 </html>
diff --git a/javascripts/jquery.websocket.js b/javascripts/jquery.websocket.js
@@ -0,0 +1,65 @@
+(function($) {
+
+// WebSocket object
+var ws;
+
+// The Div element selected by jQuery selector
+var div = this;
+
+function onWsMessage(message) {
+   var json = JSON.parse(message.data);
+   var content = $('#message');
+
+   if (json.type === 'message') {
+      // format timestamp
+      var data = json.data;
+      var timeString = moment.unix(data.timestamp/1000).fromNow();
+
+      var newData = {
+        message: data.message,
+        username: data.username,
+        timestamp: data.timestamp,
+
+        fromNow: timeString
+      };
+
+      $('#chatTemplate')
+        .tmpl(newData)
+        .appendTo('.chat');
+   }
+}
+
+$.fn.sendMessage = function () {
+	$(this).click(function() {
+    	ws.send("[message]");
+	});
+};
+
+$.fn.createWebSocket = function () {
+  if ("WebSocket" in window)
+  {
+     // Let us open a web socket
+     ws = new WebSocket("ws://192.168.1.24:8080/start", ['echo-protocol']);
+     ws.onopen = function()
+     {
+	$(this).append("<h2>Done</h2>");
+     };
+
+     ws.onclose = function()
+     { 
+        // websocket is closed.
+     };
+     ws.onerror = function()
+     { 
+        $(this).html("<h1>error</h1>");
+     };
+     ws.onmessage = onWsMessage;
+  }
+  else
+  {
+     // The browser doesn't support WebSocket
+     alert("WebSocket NOT supported by your Browser!");
+  }
+};
+
+})($);
diff --git a/javascripts/main.js b/javascripts/main.js
@@ -1,10 +1,11 @@
 (function($) {
 	$.ajax({
 		dataType: 'json',
-		url: 'http://booklog.io/1/post',
+		type: 'GET',
+		url: 'http://localhost:3000/1/post',
 	    success: function(response, jqXHR, textStatus) {
 			$('#postTemplate')
-				.tmpl(response.posts)
+				.tmpl(response)
 				.appendTo('#content');
 	    },
 	    complete: function(jqXHR, textStatus) {

diff --git a/javascripts/moment/.bower.json b/javascripts/moment/.bower.json
@@ -0,0 +1,31 @@
+{
+  "name": "moment",
+  "version": "2.7.0",
+  "main": "moment.js",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "tasks",
+    "component.json",
+    "composer.json",
+    "CONTRIBUTING.md",
+    "ender.js",
+    "Gruntfile.js",
+    "package.js",
+    "package.json"
+  ],
+  "homepage": "https://github.com/moment/moment",
+  "_release": "2.7.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "2.7.0",
+    "commit": "2fa5ad722f94bab4fd77987db3b2f05707edbd81"
+  },
+  "_source": "git://github.com/moment/moment.git",
+  "_target": "~2.7.0",
+  "_originalSource": "moment",
+  "_direct": true
+}
diff --git a/javascripts/moment/LICENSE b/javascripts/moment/LICENSE
@@ -0,0 +1,22 @@
+Copyright (c) 2011-2014 Tim Wood, Iskren Chernev, Moment.js contributors
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
diff --git a/javascripts/moment/bower.json b/javascripts/moment/bower.json
@@ -0,0 +1,20 @@
+{
+  "name": "moment",
+  "version": "2.7.0",
+  "main": "moment.js",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "tasks",
+    "component.json",
+    "composer.json",
+    "CONTRIBUTING.md",
+    "ender.js",
+    "Gruntfile.js",
+    "package.js",
+    "package.json"
+  ]
+}
diff --git a/javascripts/moment/lang/ar-ma.js b/javascripts/moment/lang/ar-ma.js
@@ -0,0 +1,56 @@
+// moment.js language configuration
+// language : Moroccan Arabic (ar-ma)
+// author : ElFadili Yassine : https://github.com/ElFadiliY
+// author : Abdel Said : https://github.com/abdelsaid
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['moment'], factory); // AMD
+    } else if (typeof exports === 'object') {
+        module.exports = factory(require('../moment')); // Node
+    } else {
+        factory(window.moment); // Browser global
+    }
+}(function (moment) {
+    return moment.lang('ar-ma', {
+        months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+        monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+        weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+        weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
+        weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+        longDateFormat : {
+            LT : "HH:mm",
+            L : "DD/MM/YYYY",
+            LL : "D MMMM YYYY",
+            LLL : "D MMMM YYYY LT",
+            LLLL : "dddd D MMMM YYYY LT"
+        },
+        calendar : {
+            sameDay: "[اليوم على الساعة] LT",
+            nextDay: '[غدا على الساعة] LT',
+            nextWeek: 'dddd [على الساعة] LT',
+            lastDay: '[أمس على الساعة] LT',
+            lastWeek: 'dddd [على الساعة] LT',
+            sameElse: 'L'
+        },
+        relativeTime : {
+            future : "في %s",
+            past : "منذ %s",
+            s : "ثوان",
+            m : "دقيقة",
+            mm : "%d دقائق",
+            h : "ساعة",
+            hh : "%d ساعات",
+            d : "يوم",
+            dd : "%d أيام",
+            M : "شهر",
+            MM : "%d أشهر",
+            y : "سنة",
+            yy : "%d سنوات"
+        },
+        week : {
+            dow : 6, // Saturday is the first day of the week.
+            doy : 12  // The week that contains Jan 1st is the first week of the year.
+        }
+    });
+}));