moved controller communication to the , added user name to the toolba…

…r, on start open the first user
angel1st · Feb 11, 2016 · 6fb7af7 · 6fb7af7
1 parent 83e41b4
commit 6fb7af7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 23 deletions.
diff --git a/src/app/components/chat/chat.directive.js b/src/app/components/chat/chat.directive.js
@@ -18,19 +18,14 @@
     return directive;
 
     /** @ngInject */
-    function ChatController($scope) {
+    function ChatController($rootScope, $scope) {
       var chat = this;
-
       chat.messages = [];
-      chat.avatar = faker.image.avatar();
-      chat.name = faker.name.findName();
-      chat.user = {
-        name: faker.name.findName(),
-        avatar: faker.image.avatar()
-      };
       chat.sendMessage = sendMessage;
 
-      $scope.$on("OPEN_CHAT", function(event, user){
+      var user = $scope.main.user;
+
+      $rootScope.$on("OPEN_CHAT", function(event, user){
         chat.messages = [];
         getMessages(user);
       });
@@ -39,8 +34,8 @@
         chat.messages.push({
           user: true,
           text: chat.myMessage,
-          name: chat.user.name,
-          avatar: chat.user.avatar
+          name: user.name,
+          avatar: user.avatar
         });
         chat.myMessage = "";
       }

diff --git a/src/app/components/chat/chat.html b/src/app/components/chat/chat.html
@@ -17,7 +17,7 @@
 	  </md-list>
 	</md-content>
 </div>
-<form layout="row" style="margin-bottom: 20px; padding: 20px;" ng-submit="chat.sendMessage()">
+<form layout="row" style="padding: 20px;" ng-submit="chat.sendMessage()">
 	<md-input-container flex layout-align="center" layout-fill>
 	  <label>What do you want to say?</label>
 	  <input type="text" ng-model="chat.myMessage"></input>

diff --git a/src/app/components/main/main.directive.js b/src/app/components/main/main.directive.js
@@ -10,19 +10,18 @@
       restrict: 'E',
       templateUrl: 'app/components/main/main.html',
       controller: MainController,
-      controllerAs: 'vm'
+      controllerAs: 'main'
     };
 
     return directive;
 
   function MainController($scope) {
-    var vm = this;
+    var main = this;
 
-    // this.openChat = openChat;
-
-    // function openChat(user){
-    //   $scope.$broadcast("OPEN_CHAT", user);
-    // }
+    main.user = {
+      name: faker.name.findName(),
+      avatar: faker.image.avatar()
+    };
   }
   }
 

diff --git a/src/app/components/main/main.html b/src/app/components/main/main.html
@@ -1,8 +1,12 @@
     <!-- Container #1 (see wireframe) -->
-  <md-toolbar layout="row" layout-align="center center">
-    <div layout-margin>
+  <md-toolbar layout="row">
+    <div layout="row" flex layout-margin layout-align="center center">
       MyChat
     </div>
+    <div layout="row" layout-margin layout-align="right center" style="float: right;">
+      {{main.user.name}}
+      <img ng-src="{{main.user.avatar}}" class="md-avatar" style="height: 40px; width: auto;"></img>
+    </div>
   </md-toolbar>
 
   <!-- Container #2 -->

diff --git a/src/app/components/sidebar/sidebar.directive.js b/src/app/components/sidebar/sidebar.directive.js
@@ -17,12 +17,13 @@
     return directive;
 
     /** @ngInject */
-    function SidebarController($scope) {
+    function SidebarController($rootScope) {
       var vm = this;
 
       vm.users = [];
       vm.openChat = openChat;
       getUsers();
+      openChat(vm.users[0]);
 
       function getUsers(){
         for(var i=0; i<15; i++)
@@ -34,7 +35,7 @@
       }
 
       function openChat(user){
-        $scope.$emit("OPEN_CHAT", user);
+        $rootScope.$emit("OPEN_CHAT", user);
       }
     }
   }