Add connecting state

app/views/index.scala.html

@@ -28,7 +28,11 @@
           <a ng-click="service.disconnect()">Disconnect</a>
         </p>
 
-        <form class="pull-right" ng-hide="service.isConnected()">
+        <p class="pull-right" ng-show="service.status == 'connecting'">
+          Connecting...
+        </p>
+
+        <form class="pull-right" ng-show="service.status == 'disconnected'">
           <input id="username" name="username" class="input-small" type="text" ng-model="username" placeholder="Username">
           <button class="btn" type="submit" ng-click="service.connect(username); username=''">Sign in</button>
         </form>

public/javascripts/chatServices.js

@@ -8,8 +8,9 @@ angular.module('chatServices', [])
     username: '',
     error: null,
     messages: [],
+    status: 'disconnected',
     isConnected: function() {
-      return this.username != '';
+      return this.status == 'connected';
     },
     addListener: function(f) {
       messageListeners.add(f);
@@ -43,7 +44,9 @@ angular.module('chatServices', [])
   }
 
   service.connect = function(username) {
+    if(service.status != 'disconnected') return;
     service.error = null;
+    service.status = 'connecting';
     chatSocket = new WS(jsRoutes.controllers.Application.chat(username, getRoom()).webSocketURL());
     chatSocket.onmessage = wrap(function(event) {
       var message = JSON.parse(event.data);
@@ -56,6 +59,7 @@ angular.module('chatServices', [])
     });
     chatSocket.onopen = wrap(function() {
       $rootScope.$broadcast('ws:connected', username);
+      service.status = 'connected';
       service.username = username;
       ping = $interval(function() {
         service.send('/ping');
@@ -63,6 +67,7 @@ angular.module('chatServices', [])
     });
     chatSocket.onclose = wrap(function() {
       $rootScope.$broadcast('ws:disconnected');
+      service.status = 'disconnected';
       service.username = '';
       $interval.cancel(ping);
     });
@@ -93,12 +98,6 @@ angular.module('chatServices', [])
       }
       service.messages.push(message);
     },
-    getError: function() {
-      return Connection.error;
-    },
-    connect: Connection.connect,
-    disconnect: Connection.disconnect,
-    isConnected: Connection.isConnected,
     send: Connection.send
   };
 

public/javascripts/main.js

@@ -28,12 +28,13 @@ function ViewCtrl($scope, Connection) {
   });
 }
 
-function LoginCtrl($scope, Chat) {
-  $scope.service = Chat;
+function LoginCtrl($scope, Connection) {
+  $scope.service = Connection;
 }
 
-function ChatCtrl($scope, Chat) {
-  $scope.service = Chat;
+function ChatCtrl($scope, Chat, Connection) {
+  $scope.service = Connection;
+  $scope.chat = Chat;
 
   $scope.onType = function(event) {
     if(event.keyCode == 13) {

public/javascripts/tabooServices.js

@@ -76,7 +76,7 @@ angular.module('tabooServices', [])
     game.status();
   }
 
-  if(Chat.isConnected()) {
+  if(Chat.username != '') {
     init();
   }
 

public/partials/chatRoom.html

@@ -3,9 +3,9 @@
   <div class="page-header">
     <h1>Not connected</h1>
   </div>
-  <div ng-show="service.getError()" class="alert-message error">
+  <div ng-show="service.error" class="alert-message error">
     <p>
-    <strong>Oops!</strong> <span>{{service.getError()}}</span>
+    <strong>Oops!</strong> <span>{{service.error}}</span>
     </p>
   </div>
   <div class="span10">
@@ -19,7 +19,7 @@
   <div class="row">
     <div class="span10" id="main">
       <div id="messages">
-        <div class="message {{message.kind}} {{message.user == service.username ? 'me' : ''}}" ng-repeat="message in service.messages">
+        <div class="message {{message.kind}} {{message.user == chat.username ? 'me' : ''}}" ng-repeat="message in chat.messages">
           <span>{{message.user}}</span>
           <p>{{message.message}}</p>
         </div>