daily commit

index.html

@@ -10,11 +10,27 @@
     <script src="https://fb.me/react-0.14.5.js"></script>
     <script src="https://fb.me/react-dom-0.14.5.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   </head>
   </head>
   <body>
-    <div id="mountPoint"></div>
+    <div id="mountPoint" class="fullScreen"></div>
     <script type="text/babel">
+    function shortDateFormat(then) {
+	    var now = new Date();
+      if (then.getFullYear() == now.getFullYear()) {
+  	    if (then.getMonth() == now.getMonth() && then.getDate() == now.getDate()) {
+    	    return then.toLocaleTimeString(undefined, {hour12: false, hour: '2-digit', minute: '2-digit'});
+        } else {
+    	    return then.toLocaleDateString(undefined,
+            {hour12: false, month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
+        }
+      }
+      return then.toLocaleDateString(undefined,
+        {hour12: false, year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
+    }
+
     var LoginNavbar = React.createClass({
       render: function() {
         return (
@@ -26,7 +42,7 @@
               <div>
                 <ul className="nav navbar-nav navbar-right">
                   <li className="dropdown">
-                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
+                    <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                       <big><span className="glyphicon glyphicon-option-vertical"></span></big>
                     </a>
                     <ul className="dropdown-menu">
@@ -115,6 +131,28 @@
       {id: "usrDAVE", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}
     ];
 
+    var messagesList = [
+      {
+        id: 1, content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet tellus interdum. \
+Integer sodales accumsan sem, ut malesuada velit egestas vel. Aenean consequat consectetur justo eget venenatis. Morbi \
+eleifend fringilla urna euismod tristique. Nullam at magna vel mauris rutrum finibus. Duis eu dignissim magna. Donec \
+        lobortis suscipit vulputate. Cras luctus elit ex, vitae lobortis magna lobortis bibendum.",
+        timestamp: new Date(2015, 11, 31, 22, 23, 24, 567), response: false
+      },
+      {
+        id: 2, content: "Duis porttitor est nec diam lobortis, non aliquam risus aliquam. \
+Nulla vitae est aliquam, egestas nunc dapibus, dapibus risus.\
+Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
+Nullam vitae condimentum lectus, quis maximus elit.\
+<br />\
+Nunc ac nisi risus. Integer eget augue vel risus commodo blandit. Nulla faucibus convallis neque sed eleifend. Vestibulum\
+dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac habitasse platea dictumst.",
+        timestamp: new Date(2016, 0, 1, 2, 3, 4, 567),
+        response: true
+      },
+      {id: 3, content: "OK!", timestamp: new Date(2016, 0, 2, 15, 16, 17, 567), response: false}
+    ];
+
     var Contact = React.createClass({
         render: function() {
           return (
@@ -197,28 +235,107 @@
       }
     });
 
+    var Message = React.createClass({
+      getInitialState: function() {
+        return {received: 0};
+      },
+      render: function() {
+        var timestamp = shortDateFormat(this.props.timestamp);
+        return (
+          <li className={this.props.response ? 'chatBox-inverted' : null}>
+            <div className="chatBox-panel">
+              <div className="chatBox-body">
+                <p>{this.props.content}
+                  <span className="pull-right timestamp">
+                    <small className="text-muted">{timestamp}</small> <Message.ReceivedMarker />
+                  </span>
+                </p>
+              </div>
+            </div>
+          </li>
+        );
+      }
+    });
+
+    Message.ReceivedMarker = React.createClass({
+      getInitialState: function() {
+        return {received: 0};
+      },
+      render: function() {
+        var checkMark = null;
+        if (this.state.received > 0) {
+          checkMark = '&#x2714;';
+          if (this.state.received > 1) {
+            checkMark += <span style="margin-left:-0.5em;">&#x2714;</span>;
+          }
+        }
+        return (
+          <span>{checkMark}</span>
+        );
+      }
+    });
+
+    Message.Send = React.createClass({
+      render: function() {
+        return (
+          <div className="input-group">
+            <label htmlFor="sendMessage" className="sr-only">Add topic</label>
+            <input id="sendMessage" className="form-control" type="text" placeholder="New message" />
+            <span className= "input-group-btn">
+              <button className= "btn btn-default" type = "button">
+                <i className="glyphicon glyphicon-send"></i>
+              </button>
+            </span>
+          </div>
+        );
+      }
+    });
+    var MessagesView = React.createClass({
+      getInitialState: function() {
+        return {messages: []};
+      },
+      componentDidMount: function() {
+        this.setState({messages: messagesList});
+      },
+      render: function() {
+        var messageNodes = this.state.messages.map(function(msg) {
+          return (
+            <Message content={msg.content} timestamp={msg.timestamp} response={msg.response} key={msg.id} />
+          );
+        });
+        return (
+          <ul className="chatBox">
+            {messageNodes}
+          </ul>
+        );
+      }
+    });
+
     var AppView = React.createClass({
       getInitialState: function() {
-        return {loggedIn: false};
+        return {loggedIn: false, chatTitle: "Bob Smith"};
       },
       handleLogin: function(ok) {
         this.setState({loggedIn: ok});
       },
       render: function() {
         return (
-          <div className="container-fluid">
-          <div className="row">
+          <div className="container-fluid fullScreen">
+          <div className="row fullScreen">
             <div className="menuContainer">
               {this.state.loggedIn ? <ContactsView data={contactsData} /> : <LoginView onLogin={this.handleLogin} />}
             </div>
             <div className="col-md-12 messagesContainer">
-              <div className="row">
-              <div className="panel panel-default">
+              <div className="row fullScreen">
+              <div className="panel panel-default fullScreen">
                 <div className="panel-heading">
-                  <h3 className="panel-title">Chat with X</h3>
+                  <h3 className="panel-title">{this.state.chatTitle}</h3>
                 </div>
                 <div className="panel-body">
-                  Messages go here
+                  <MessagesView />
+                </div>
+                <div className="panel-footer">
+                  <Message.Send />
                 </div>
               </div>
               </div>