Added chat screen

functions/index.js

@@ -1,10 +1,10 @@
-var functions = require('firebase-functions');
+// var functions = require('firebase-functions');
 
 // // converts the "text" key of messages pushed to /messages to uppercase
-// exports.upperCaser = functions.database().path('/messages/{id}').on('value', function(event) {
+// exports.upperCaser = functions.database().path('/messages/{id}/title/').on('value', function(event) {
 //   // prevent infinite loops
 //   if (event.data.child('uppercased').val()) { return; }
-//
+
 //   return event.data.ref.update({
 //     text: event.data.child('text').val().toUpperCase(),
 //     uppercased: true

www/css/style.css

@@ -17,4 +17,38 @@
     left: 31px;
     top: 14px;
     font-size: 33px;
+}
+.reset{
+	float: right;
+    margin: 24px;
+    margin-top: 0;
+    font-size: 40px;
+}
+.full{
+    height: 570px;
+    width: 100%;
+    background: #f7f7f7;
+    margin: 0;
+    padding: 0;
+}
+.compose{
+	position: absolute;
+    bottom: 70px;
+    width: 100%;
+}
+.compose label{
+	float: left;
+	padding-left: 5px;
+}
+.compose input{
+	float: right;
+    border: 1px solid #333;
+	width: 56%;
+    margin-right: 6px;
+    margin-top: -10px;
+    border-radius: 4px;
+}
+.compose button{
+    float: right;
+    margin-top: -5px;
 }

www/js/controllers.js

@@ -1,28 +1,14 @@
 angular.module('starter.controllers', [])
 
-.controller('DashCtrl', function($scope, $firebaseArray) {
-
-
-    var messagesRef = firebase.database().ref().child("messages");
-
-    // all server changes are applied in realtime
-    $scope.messages = $firebaseArray(messagesRef);
-
-
-  $scope.addNewMessage =function(){
-
-
-      $scope.messages.push('xxxx')    
-
-
-  }
+.controller('DashCtrl', function($scope, messageMain) {
 
 
+  messageMain().$bindTo($scope, "msgs")
 
 
 })
 
-.controller('ChatsCtrl', function($scope, Chats) {
+.controller('ChatsCtrl', function($scope, userMessages) {
   // With the new view caching in Ionic, Controllers are only called
   // when they are recreated or on app start, instead of every page change.
   // To listen for when this page is active (for example, to refresh data),
@@ -31,10 +17,25 @@ angular.module('starter.controllers', [])
   //$scope.$on('$ionicView.enter', function(e) {
   //});
 
-  $scope.chats = Chats.all();
-  $scope.remove = function(chat) {
-    Chats.remove(chat);
-  };
+  //$scope.chats = Chats.all();
+  userMessages().$bindTo($scope, "userMessages")
+
+
+  $scope.sendMsg = function(){
+
+
+    var ref = firebase.database().ref("userMessages");
+    ref.push({ 'text': $scope.msgBody, 'pic': $scope.randPic() });
+    $scope.msgBody = '';
+
+
+
+  }
+
+  $scope.randPic = function(){
+    return parseInt(Math.random() * (5 - 1) + 1);
+  }
+
 })
 
 .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {

www/js/services.js

@@ -1,53 +1,54 @@
 angular.module('starter.services', ['firebase'])
 
-.factory('Chats', function() {
-  // Might use a resource here that returns a JSON array
-
-  // Some fake testing data
-  var chats = [{
-    id: 0,
-    name: 'Ben Sparrow',
-    lastText: 'You on your way?',
-    face: 'img/ben.png'
-  }, {
-    id: 1,
-    name: 'Max Lynx',
-    lastText: 'Hey, it\'s me',
-    face: 'img/max.png'
-  }, {
-    id: 2,
-    name: 'Adam Bradleyson',
-    lastText: 'I should buy a boat',
-    face: 'img/adam.jpg'
-  }, {
-    id: 3,
-    name: 'Perry Governor',
-    lastText: 'Look at my mukluks!',
-    face: 'img/perry.png'
-  }, {
-    id: 4,
-    name: 'Mike Harrington',
-    lastText: 'This is wicked good ice cream.',
-    face: 'img/mike.png'
-  }];
-
-  return {
-    all: function() {
-      return chats;
-    },
-    remove: function(chat) {
-      chats.splice(chats.indexOf(chat), 1);
-    },
-    get: function(chatId) {
-      for (var i = 0; i < chats.length; i++) {
-        if (chats[i].id === parseInt(chatId)) {
-          return chats[i];
-        }
-      }
-      return null;
+
+
+
+.factory("messageMain", ["$firebaseObject",
+  function($firebaseObject) {
+    return function() {
+      // create a reference to the database node where we will store our data
+      var ref = firebase.database().ref("msgs");
+
+
+      // return it as a synchronized object
+      return $firebaseObject(ref);
     }
-  };
-})
+  }
+])
+
+.factory("userMessages", ["$firebaseObject",
+  function($firebaseObject) {
+    return function() {
+      // create a reference to the database node where we will store our data
+      var ref = firebase.database().ref("userMessages");
+
+
+      // return it as a synchronized object
+      return $firebaseObject(ref);
+    }
+  }
+])
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

www/templates/tab-chats.html

@@ -1,16 +1,21 @@
 <ion-view view-title="Chats">
   <ion-content>
     <ion-list>
-      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
-        <img ng-src="{{chat.face}}">
-        <h2>{{chat.name}}</h2>
-        <p>{{chat.lastText}}</p>
-        <i class="icon ion-chevron-right icon-accessory"></i>
+      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in userMessages" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
+      <img ng-src="img/{{chat.pic}}.gif">
+        <p>{{chat.text}}</p>
 
-        <ion-option-button class="button-assertive" ng-click="remove(chat)">
-          Delete
-        </ion-option-button>
       </ion-item>
     </ion-list>
+
+
   </ion-content>
+
+  <div class="compose">
+    <button ng-click="sendMsg()">Send</button>
+    <input type="text" ng-model="msgBody" />
+    <label class="pull-right">Whatcha Say?</label>
+  </div>
+
+
 </ion-view>

www/templates/tab-dash.html

@@ -1,17 +1,8 @@
 <ion-view>
-  <ion-content class="padding">
+  <ion-content scroll="false">
 
+ 	<textarea class="full" id="msgsMain" ng-model="msgs.mainMessage"  ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" ></textarea>
 
-  <ion-list>
-    <ion-item ng-repeat="msg in messages">
-     {{msg}}!
-    </ion-item>
-  </ion-list>
-
-
-
-
-    <button class="btn- btn-info" ng-click="addNewMessage()">+</button>
 
   </ion-content>
 </ion-view>

www/templates/tab-tic.html

@@ -16,7 +16,7 @@ <h1 class="text-center" ng-show="name"> Hey {{name}}</h1>
     </div>
 
 
-    <button ng-click="resetBoard()">Reset</button>
+    <button ng-click="resetBoard()" class="reset"><span class="ion-ios-refresh"></span></button>
 
   </ion-content>
 </ion-view>

www/templates/tabs.html

@@ -5,21 +5,24 @@
 -->
 <ion-tabs class="tabs-icon-top tabs-color-active-positive">
 
-  <!-- Chat Tab -->
-  <ion-tab title="Chat" icon-off="ion-ios-pulse" icon-on="ion-chatbubble" href="#/tab/dash">
+  <!-- Canvas Tab -->
+  <ion-tab title="Chat Canavs" icon-off="ion-chatbubble" icon-on="ion-chatbubble" href="#/tab/dash">
     <ion-nav-view name="tab-dash"></ion-nav-view>
   </ion-tab>
 
-  <!-- Users Tab -->
-  <ion-tab title="Users" icon-off="ion-person-stalker" icon-on="ion-ios-chatboxes" href="#/tab/chats">
+   <!-- Chat Tab -->
+  <ion-tab title="Chat Bubble" icon-off="ion-chatbubbles" icon-on="ion-chatbubbles" href="#/tab/chats">
     <ion-nav-view name="tab-chats"></ion-nav-view>
   </ion-tab>
+
+
 
   <!-- Users Tab -->
-  <ion-tab title="Users" icon-off="ion-person-stalker" icon-on="ion-ios-chatboxes" href="#/tab/tic">
+  <ion-tab title="TicTacToe" icon-off="ion-ios-grid-view" icon-on="ion-ios-grid-view" href="#/tab/tic">
     <ion-nav-view name="tab-tic"></ion-nav-view>
   </ion-tab>
 
 
 
+
 </ion-tabs>