submit username(sossii)

sossii/web-client/web/index.html

@@ -48,6 +48,8 @@
           <h4 class="modal-title" id="myModalLabel">投稿</h4>
         </div>
         <div class="modal-body">
+          ユーザ名
+          <p><input type="text" class="form-control message-username"></p>
           コメント
           <p><textarea class="form-control message-body" rows="3"></textarea></p>
         </div>

sossii/web-client/web/js/message.js

@@ -10,13 +10,13 @@ function reloadMessages() {
 /**
  * メッセージの投稿
  */
-function sendMessage(body) {
+function sendMessage(username, body) {
     var success = function() {
         $(".message-body").val("");
         reloadMessages();
     };
     var error   = function() { console.log("error") };
-    postMessage(body, success, error);
+    postMessage(username, body, success, error);
 }
 
 /**
@@ -30,22 +30,54 @@ function appendMessages(data) {
     }
 }
 
+/**
+ * 2桁にゼロ埋め
+ */
+var toDoubleDigits = function(num) {
+  num += "";
+  if (num.length === 1) {
+    num = "0" + num;
+  }
+ return num;     
+};
+
+/**
+ * 日付のフォーマット
+ */
+var formatDate = function(date) {
+  var yyyy = date.getFullYear();
+  var mm = toDoubleDigits(date.getMonth() + 1);
+  var dd = toDoubleDigits(date.getDate());
+  var hh = toDoubleDigits(date.getHours());
+  var mi = toDoubleDigits(date.getMinutes());
+  var sec = toDoubleDigits(date.getSeconds());
+  return yyyy + '-' + mm + '-' + dd + ' ' + hh + ':' + mi + ':' + sec;
+};
+
 /**
  * メッセージ挿入
  */
 function appendMessage(message) {
+	var escapeUsername = $("<div/>").text(message.username).html();
 	var escapeBody = $("<div/>").text(message.body).html();
 	var escapeIcon = $("<div/>").text(message.icon).html();
+	var escapeCreatedAt = $("<div/>").text(formatDate(new Date(message.created_at))).html();
 
     var messageHTML = '<tr><td>' +
         '<div class="media message">'　+
+	    '<div>' +
+        escapeUsername +
+	    '</div>' +
         '<div class="media-left" id="top-aligned-media">' +
         '<img class="media-object" src="data:image/png;base64,' + escapeIcon + '" data-holder-rendered="true" style="width: 64px; height: 64px;">' +
         '</div>' +
         '<div class="media-body">' +
         '<h4 class="media-heading"></h4>' +
         escapeBody +
 	    '</div>' +
+	    '<div>' +
+        escapeCreatedAt +
+	    '</div>' +
         '</div>' +
         '</td></tr>';
 	$("#message-table").append(messageHTML);
@@ -67,12 +99,12 @@ function getMessages(success, error) {
 /**
  * APIリクエストコメント投稿
  */
-function postMessage(body, success, error) {
+function postMessage(username, body, success, error) {
     var postMessageUri = "http://localhost:8888/messages";
     return $.ajax({
         type: "post",
         url: postMessageUri,
-        data: JSON.stringify({"username":"名前はまだない", "body":body}), 
+        data: JSON.stringify({"username":username, "body":body}), 
         dataType: "json",
         })
     .done(function(data) { success() })

sossii/web-client/web/js/web-client.js

@@ -10,8 +10,9 @@ $(document).ready(function () {
  */
 $(".post-message").bind("click", function() {
     $("#myModal").modal("hide");
+    var username = $(".message-username").val();
     var body = $(".message-body").val();
-    sendMessage(body);
+    sendMessage(username, body);
 });
 
 /**