Chat: Title; Minimization and new messages and connectivity notification.

Scrummer/Code/Controls/ChatControl.cs

@@ -20,6 +20,7 @@ namespace Scrummer.Code.Controls
 
         private Panel _divChatWindow = null;
         private Panel _divChatContainer = null;
+        private Panel _divChatTitleBar = null;
 
         #endregion
 
@@ -94,6 +95,13 @@ namespace Scrummer.Code.Controls
             _divChatWindow = new Panel { ID = "divChatWindow", CssClass = "divChatWindow" };
             Controls.Add(_divChatWindow);
 
+            _divChatTitleBar = new Panel { ID = "divChatTitleBar", CssClass = "divChatTitleBar" };
+            _divChatWindow.Controls.Add(_divChatTitleBar);
+
+            CLabel lblTitle = new CLabel();
+            lblTitle.ID = "lblTitle";
+            _divChatTitleBar.Controls.Add(lblTitle);
+
             _divChatContainer = new Panel { ID = "divChatContainer", CssClass = "divChatContainer" };
             _divChatWindow.Controls.Add(_divChatContainer);
             _divChatContainer.Width = _width;
@@ -133,11 +141,16 @@ namespace Scrummer.Code.Controls
             sbCfg.AppendFormat("  hidUserName: \"{0}\",\n", hidUserName.ClientID);
             sbCfg.AppendFormat("  hidIDMessage: \"{0}\",\n", hidIDMessage.ClientID);
             sbCfg.AppendFormat("  hidLastUser: \"{0}\",\n", hidLastUser.ClientID);
-            sbCfg.AppendFormat("  hidStatus: \"{0}\",\n", hidStatus.ClientID);
             sbCfg.AppendFormat("  txtText: \"{0}\",\n", txtText.ClientID);
             sbCfg.AppendFormat("  btnSend: \"{0}\",\n", btnSend.ClientID);
             sbCfg.AppendFormat("  IDBoard: {0},\n", _idBoard);
-            sbCfg.AppendFormat("  ServiceUrl: \"{0}\"\n", _serviceUrl);
+            sbCfg.AppendFormat("  ServiceUrl: \"{0}\",\n", _serviceUrl);
+            sbCfg.AppendFormat("  Texts: {{\n", _serviceUrl);
+            sbCfg.AppendFormat("    Chat: \"{0}\",\n", "Chat");
+            sbCfg.AppendFormat("    Close: \"{0}\",\n", "Close X");
+            sbCfg.AppendFormat("    NewMessages: \"{0}\",\n", "New messages");
+            sbCfg.AppendFormat("    Disconnected: \"{0}\",\n", "Disconnected");
+            sbCfg.AppendFormat("  }}\n");
             sbCfg.AppendFormat("}};\n");
             sbCfg.AppendFormat("RunChat({0});\n", strCfgName);
             sbCfg.AppendFormat("</script>\n");

Scrummer/Code/Controls/ChatHandler.cs

@@ -75,8 +75,9 @@ namespace Scrummer.Code
         {
             int idBoard = Convert.ToInt32(context.Request.Params["idBoard"]);
             int idMessage = Convert.ToInt32(context.Request.Params["idMessage"]);
+            int poolData = Convert.ToInt32(context.Request.Params["PoolData"]);
             MessageBoard messageBoard;
-            bool mustWait = true;
+            bool mustWait = (poolData == 1);
             do
             {
                 if (_chatBoards.ContainsKey(idBoard))
@@ -87,6 +88,7 @@ namespace Scrummer.Code
                     {
                         mustWait = false;
                         ResponseObject(context, listMessages);
+                        return;
                     }
                 }
                 if (mustWait)
@@ -94,6 +96,7 @@ namespace Scrummer.Code
                     lock (_monitor) { Monitor.Wait(_monitor, 10000); }
                 }
             } while (mustWait);
+            ResponseObject(context, new List<Message>());
         }
 
         private void ProcessSender(HttpContext context)

Scrummer/Scripts/10. Chat.js

@@ -3,6 +3,35 @@
     cfg.hidIDMessage = GetElement(cfg.hidIDMessage);
     cfg.hidUserName = GetElement(cfg.hidUserName);
     cfg.hidLastUser = GetElement(cfg.hidLastUser);
+    cfg.divChatContainer = GetElement(cfg.divChatContainer);
+    cfg.lblTitle = GetElement(cfg.lblTitle);
+    cfg.txtText = GetElement(cfg.txtText);
+    cfg.btnSend = GetElement(cfg.btnSend);
+
+    cfg.lblTitle.innerHTML = cfg.Texts.Chat;
+    cfg.lblTitle.className = "titleChatNormal";
+    cfg.divChatContainer.style.display = "none";
+    cfg.Minimized = true;
+    cfg.Connected = null;
+    cfg.FirstMessages = true;
+
+    cfg.lblTitle.onclick = function () {
+        if (cfg.Minimized) {
+            cfg.divChatContainer.style.display = "";
+            if (cfg.Connected) {
+                cfg.lblTitle.innerHTML = cfg.Texts.Close;
+                cfg.lblTitle.className = "titleChatNormal";
+            }
+            cfg.Minimized = false;
+        } else {
+            cfg.divChatContainer.style.display = "none";
+            if (cfg.Connected) {
+                cfg.lblTitle.innerHTML = cfg.Texts.Chat;
+                cfg.lblTitle.className = "titleChatNormal";
+            }
+            cfg.Minimized = true;
+        }
+    };
 
     var CreateMessageDOM = function (message, selfMessage, showUserName) {
         var divMessageRow = document.createElement("DIV");
@@ -36,9 +65,25 @@
     };
 
     var RequestChatData = function () {
-        var requestUrl = cfg.ServiceUrl + "?idBoard=" + cfg.IDBoard + "&idMessage=" + cfg.hidIDMessage.value;
+        var requestUrl = cfg.ServiceUrl +
+            "?idBoard=" + cfg.IDBoard +
+            "&idMessage=" + cfg.hidIDMessage.value +
+            "&PoolData=" + ((cfg.FirstMessages) ? "0" : "1");
         var ReciveChatData = function (responseText) {
 
+            // Mark as connected
+            if (cfg.Connected == false) {
+                if (cfg.Minimized) {
+                    cfg.lblTitle.innerHTML = cfg.Texts.Chat;
+                } else {
+                    cfg.lblTitle.innerHTML = cfg.Texts.Close;
+                }
+                cfg.lblTitle.className = "titleChatNormal";
+                cfg.txtText.disabled = false;
+                cfg.btnSend.disabled = false;
+            }
+            cfg.Connected = true;
+
             recvMsgs = JSON.parse(responseText);
             if (recvMsgs) {
                 var idMessage = parseInt(cfg.hidIDMessage.value);
@@ -57,8 +102,14 @@
                 }
                 cfg.divChat.appendChild(frag);
                 cfg.divChat.scrollTop = cfg.divChat.scrollHeight;
+                if (cfg.Minimized && cfg.FirstMessages == false) {
+                    cfg.lblTitle.innerHTML = cfg.Texts.NewMessages;
+                    cfg.lblTitle.className = "titleChatAlert";
+                }
             }
 
+            cfg.FirstMessages = false;
+
             // Reset pool
             window.setTimeout(function () {
                 RequestChatData();
@@ -66,6 +117,15 @@
         };
         var ErrorChatData = function () {
 
+            // Mark as disconnected
+            cfg.lblTitle.innerHTML = cfg.Texts.Disconnected;
+            cfg.lblTitle.className = "titleChatDisconnected";
+            cfg.txtText.disabled = true;
+            cfg.btnSend.disabled = true;
+            cfg.Connected = false;
+
+            cfg.FirstMessages = false;
+
             // Retry
             window.setTimeout(function () {
                 RequestChatData();

Scrummer/Styles/10. Chat.css

@@ -6,6 +6,46 @@
     border-radius: 5px;
     background-color: rgb(220,220,220);
     box-shadow: 0px 0px 5px black;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.divChatTitleBar{
+    text-align: right;
+}
+
+.titleChatNormal{
+    background-color: rgb(220,220,220);
+    cursor: pointer;
+    display: inline-block;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+@keyframes alert {
+    0%   {background-color: red;}
+    50%  {background-color: rgb(220,220,220);}
+    100%  {background-color: red;}
+}
+
+.titleChatAlert{
+    background-color: red;
+    animation-name: alert;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    cursor: pointer;
+    display: inline-block;
+    border-radius: 5px;
+    padding: 5px;
+}
+.titleChatDisconnected{
+    color: rgb(64,64,64);
+    background-color: rgb(220,220,220);
+    cursor: pointer;
+    display: inline-block;
+    border-radius: 5px;
+    padding: 5px;
 }
 
 .divChat {
@@ -16,6 +56,7 @@
     border-radius: 5px;
     border: solid 1px black;
     box-shadow: inset 0px 0px 5px black;
+    
 }
 
 .messageRow,
@@ -99,4 +140,13 @@
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     font-size: 12px;
     text-align: center;
+    cursor: pointer;
+    background-color: rgb(192,192,192);
+}
+.chatButton:hover {
+    background-color: rgb(220,220,220);
+}
+.chatButton:active {
+    background-color: rgb(220,220,220);
+    box-shadow: inset 0px 2px 5px rgba(255,255,255,1), inset 0px -2px 5px rgba(128,128,128,1);
 }