chat formatting, in process of adding ability to download chat images

brusinow · Jul 24, 2016 · 9daeecf · 9daeecf
1 parent 0f7fa2d
commit 9daeecf
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 88 deletions.
diff --git a/RoadWarrior/config.xml b/RoadWarrior/config.xml
@@ -7,7 +7,7 @@
   <author email="[email protected]" href="http://www.brentrusinowdev.com">
       Brent Rusinow
     </author>
-  <content src="http://192.168.0.20:8100" original-src="index.html"/>
+  <content src="index.html"/>
   <allow-navigation href="*"/>
   <preference name="webviewbounce" value="false"/>
   <preference name="UIWebViewBounce" value="false"/>

diff --git a/RoadWarrior/scss/ionic.app.scss b/RoadWarrior/scss/ionic.app.scss
@@ -136,6 +136,25 @@ input[type="url"], input[type="search"], input[type="tel"], input[type="color"]
   font-size: 16px !important;
 }*/
 
+.bar-header {
+  height: 50px !important;
+}
+
+.has-header {
+  top: 50px !important;
+}
+
+
+
+.bar .title {
+  top: 11px !important;
+  height: 40px !important;
+}
+
+.bar .button.back-button, .bar button.back-button {
+  top: 9px !important;
+}
+
 
 .bar.bar-dark {
   border-color: $dark !important;

diff --git a/RoadWarrior/www/css/ionic.app.css b/RoadWarrior/www/css/ionic.app.css
@@ -94,6 +94,19 @@ input[type="date"], input[type="month"], input[type="time"], input[type="week"],
 input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
   font-size: 16px !important;
 }*/
+.bar-header {
+  height: 50px !important; }
+
+.has-header {
+  top: 50px !important; }
+
+.bar .title {
+  top: 11px !important;
+  height: 40px !important; }
+
+.bar .button.back-button, .bar button.back-button {
+  top: 9px !important; }
+
 .bar.bar-dark {
   border-color: #c42644 !important;
   background-image: linear-gradient(0deg, #c42644, #c42644 50%, transparent 50%) !important; }

diff --git a/RoadWarrior/www/css/ionic.app.min.css b/RoadWarrior/www/css/ionic.app.min.css
diff --git a/RoadWarrior/www/js/app.js b/RoadWarrior/www/js/app.js
@@ -263,18 +263,6 @@ angular.module('roadWarrior', ['ionic','ionic.service.core', 'firebase','ngMessa
         currentAuth: authRequire,
         thisGroup: function(ActiveGroup, currentAuth){
           return ActiveGroup(currentAuth.uid).$loaded();
-        },
-        main: function($firebaseArray, thisGroup){
-          var chatRef = firebase.database().ref('messages/'+thisGroup.groupId+'/main');
-          return $firebaseArray(chatRef.limitToLast(1)).$loaded();
-        },
-        show: function($firebaseArray, thisGroup){
-          var chatRef = firebase.database().ref('messages/'+thisGroup.groupId+'/showRelated');
-          return $firebaseArray(chatRef.limitToLast(1)).$loaded();
-        },
-        fun: function($firebaseArray, thisGroup){
-          var chatRef = firebase.database().ref('messages/'+thisGroup.groupId+'/fun');
-          return $firebaseArray(chatRef.limitToLast(1)).$loaded();
         }
       }
     })
@@ -292,24 +280,25 @@ angular.module('roadWarrior', ['ionic','ionic.service.core', 'firebase','ngMessa
         thisGroup: function(ActiveGroup, currentAuth){
           return ActiveGroup(currentAuth.uid).$loaded();
         },
-        posts: function($firebaseArray, thisGroup){     
-          var chatRef = firebase.database().ref('messages/'+thisGroup.groupId+'/main');
-          return $firebaseArray(chatRef.limitToLast(100)).$loaded();    
-        },
-        profile: function(Profile, currentAuth){
-          return Profile(currentAuth.uid).$loaded();
-        },
         chatName: function(){
           var name = {
             formatted: "Main",
             lowerCase: "main"
           }
           return name;
         }
-    }
+      }
     })
+
+// media: function($firebaseArray, thisGroup, chatName){
+//           var mediaRef = firebase.database().ref('media/'+thisGroup.groupId+'/'+chatName.lowerCase);
+//           return $firebaseArray(mediaRef).$loaded(); 
+//         },
+
+
     .state('tab.chats-show', {
       url: '/chats/show',
+      cache: true,
       views: {
         'tab-chats': {
           templateUrl: 'templates/tab-chatsTopic.html',
@@ -321,30 +310,18 @@ angular.module('roadWarrior', ['ionic','ionic.service.core', 'firebase','ngMessa
         thisGroup: function(ActiveGroup, currentAuth){
           return ActiveGroup(currentAuth.uid).$loaded();
         },
-         chatName: function(){
+        chatName: function(){
           var name = {
             formatted: "Show Related",
             lowerCase: "show"
           }
           return name;
-        },
-        posts: function($firebaseArray, thisGroup, chatName){     
-          console.log("is chatName here? ",chatName);
-          var chatRef = firebase.database().ref('messages/'+thisGroup.groupId+'/'+chatName.lowerCase);
-          return $firebaseArray(chatRef.limitToLast(100)).$loaded();    
-        },
-        media: function($firebaseArray, thisGroup, chatName){
-          var mediaRef = firebase.database().ref('media/'+thisGroup.groupId+'/'+chatName.lowerCase);
-          return $firebaseArray(mediaRef).$loaded(); 
-        },
-        profile: function(Profile, currentAuth){
-          return Profile(currentAuth.uid).$loaded();
-        }
-
-    }
+        } 
+      }
     })
     .state('tab.chats-fun', {
       url: '/chats/fun',
+      cache: true,
       views: {
         'tab-chats': {
           templateUrl: 'templates/tab-chatsTopic.html',
@@ -356,13 +333,6 @@ angular.module('roadWarrior', ['ionic','ionic.service.core', 'firebase','ngMessa
         thisGroup: function(ActiveGroup, currentAuth){
           return ActiveGroup(currentAuth.uid).$loaded();
         },
-        posts: function($firebaseArray, thisGroup){     
-          var chatRef = firebase.database().ref('messages/'+thisGroup.groupId+'/fun');
-          return $firebaseArray(chatRef.limitToLast(100)).$loaded();    
-        },
-        profile: function(Profile, currentAuth){
-          return Profile(currentAuth.uid).$loaded();
-        },
         chatName: function(){
           var name = {
             formatted: "Fun",

diff --git a/RoadWarrior/www/js/controllers/chat_controller.js b/RoadWarrior/www/js/controllers/chat_controller.js
@@ -3,28 +3,31 @@ angular.module('roadWarrior.controllers')
 
 
 
-.controller('ChatsCtrl', function($scope, thisGroup, main, show, fun, chatMessages, Profile, currentAuth, ActiveGroup, $cordovaCamera, $ionicScrollDelegate, $ionicModal, $ionicActionSheet, $timeout, $state, moment) {
-
+.controller('ChatsCtrl', function($scope, thisGroup, chatMessages, Profile, currentAuth, ActiveGroup, $cordovaCamera, $ionicScrollDelegate, $ionicModal, $ionicActionSheet, $timeout, $state, moment) {
+  Profile(currentAuth.uid).$bindTo($scope, "profile");
+
+
+
   $scope.chats = {
     main: {
-      data: main,
+      data: chatMessages(thisGroup.groupId,'main',1),
       title: "Main",
       toChat: function(){
-        $state.go("tab.chats-main");
+      $state.go("tab.chats-main");
       }
     },
     show: {
-      data: show,
+      data: chatMessages(thisGroup.groupId,'show',1),
       title: "Show Related",
       toChat: function(){
-        $state.go("tab.chats-show");
+      $state.go("tab.chats-show");
       }
     },
     fun: {
-      data: fun,
+      data: chatMessages(thisGroup.groupId,'fun',1),
       title: "Fun",
       toChat: function(){
-        $state.go("tab.chats-fun");
+      $state.go("tab.chats-fun");
       }
     }
   }
@@ -34,27 +37,26 @@ angular.module('roadWarrior.controllers')
 
 
 
-.controller('ChatsTopicCtrl', function($scope, thisGroup, posts, profile, chatName, chatMessages, currentAuth, ActiveGroup, $cordovaCamera, $ionicScrollDelegate, $ionicModal, $ionicActionSheet, $timeout,$state, moment) {
-
+.controller('ChatsTopicCtrl', function($scope, $q, thisGroup, chatName, chatMessages, Profile, currentAuth, ActiveGroup, $cordovaCamera, $ionicScrollDelegate, $ionicModal, $ionicActionSheet, $timeout,$state, moment) {
+  Profile(currentAuth.uid).$bindTo($scope, "profile");
   $scope.chatName = chatName;
 
   $scope.postDate = {};
   $scope.showTime = false;
-  $scope.showChat = false;
 
-  $scope.posts = posts;
-  $scope.posts.$loaded().then(function(){
-   $ionicScrollDelegate.scrollBottom(true); 
-    $scope.showChat = true;
+  $scope.posts = chatMessages(thisGroup.groupId,chatName.lowerCase,100);
+  $scope.posts.$loaded().then(function(){  
+    $timeout(function() {
+        $ionicScrollDelegate.scrollBottom(true);
+    }, 600);
   })
 
 
   $scope.posts.$watch(scrollBottom);
-  $scope.profile = profile;
 
 
   function scrollBottom() {
-    $ionicScrollDelegate.$getByHandle('chat').scrollBottom();
+    $ionicScrollDelegate.$getByHandle('chat').scrollBottom(true);
   }
 
   function addPost(message, url) {
@@ -126,8 +128,11 @@ angular.module('roadWarrior.controllers')
 
 
 function takeARealPicture(cameraIndex){
+    $scope.postId = "";
     navigator.camera.getPicture(onSuccess, onFail, {
-      quality: 50,
+      quality: 75,
+      targetWidth: 1000,
+      targetHeight: 1000,
       sourceType: cameraIndex === 2 ? 2 : 1,
       cameraDirection: cameraIndex,
       destinationType: Camera.DestinationType.DATA_URL,
@@ -193,15 +198,16 @@ function takeARealPicture(cameraIndex){
         }, function(error) {
             console.log("error here? ",error);
         }, function() {
-            var rec = $scope.posts.$getRecord($scope.postId)
-            console.log("what is rec? ",rec);
-            var downloadURL = uploadTask.snapshot.downloadURL;
-            rec.firebase = downloadURL;
-            $scope.posts.$save(rec).then(function(ref) {
-              ref.key === rec.$id; // true
-            });
-
-            // handle image here
+            $timeout(function () {
+              var rec = $scope.posts.$getRecord($scope.postId)
+              console.log("what is rec? ",rec);
+              var downloadURL = uploadTask.snapshot.downloadURL;
+              rec.firebase = downloadURL;
+              $scope.posts.$save(rec).then(function(ref) {
+                console.log("update saved to message object");
+                ref.key === rec.$id; // true
+              });
+            }, 1000);
         });
     });
 

diff --git a/RoadWarrior/www/js/services.js b/RoadWarrior/www/js/services.js
@@ -24,20 +24,11 @@ angular.module('roadWarrior.services', [])
 
 
 
-.factory("chatMessages", ["$firebaseArray", function($firebaseArray) {
-  return { 
-    main: function(groupId){
-      var chatRef = firebase.database().ref('messages/'+groupId+'/main')
-      return $firebaseArray(chatRef.limitToLast(100));
-    },
-    show: function(groupId){
-      var chatRef = firebase.database().ref('messages/'+groupId+'/showRelated')
-      return $firebaseArray(chatRef.limitToLast(100));
-    },
-    fun: function(groupId){
-      var chatRef = firebase.database().ref('messages/'+groupId+'/fun')
-      return $firebaseArray(chatRef.limitToLast(100));
-    }
+.factory("chatMessages", ["$firebaseArray", 
+  function($firebaseArray) {
+  return function(groupId, topic, messageNumber){
+      var chatRef = firebase.database().ref('messages/'+groupId+'/'+topic);
+      return $firebaseArray(chatRef.limitToLast(messageNumber));
   }
 }])
 

diff --git a/RoadWarrior/www/templates/tab-chatsTopic.html b/RoadWarrior/www/templates/tab-chatsTopic.html
@@ -3,15 +3,15 @@
  <ion-content delegate-handle="chat" id="chat-list" on-hold="showTime = !showTime"
   class="content-stable mh-padding">
 
-    <div ng-show="showChat" ng-repeat="post in posts track by $index" >
+    <div ng-repeat="post in posts track by $index" >
     <div class="chat-date" ng-if="sameDay(post.timestamp, posts[$index-1].timestamp)">{{post.timestamp | toDate}}</div>
 
      <div ng-if="post.user !== profile.name && post.user !== posts[$index - 1].user" class="messageName slide-right" ng-class="{'slide-right': !showTime, '': showTime}">{{post.user}}</div>
 
     <div ng-class="{other:post.user !== profile.name}" class="messages">
       <div class="message slide-right" ng-class="{'slide-right': !showTime, '': showTime}">
         <span ng-if="post.message">{{post.message}}</span>
-        <a ng-if="post.img" ng-click="showImage(post.img)"><img ng-if="post.img" ng-src="{{post.img}}" class="post-img" /></a>
+        <img ng-if="post.img" ng-click="showImage(post.img)" ng-src="{{post.img}}" class="post-img" />
       </div>
 
       <div class="time slide-right" ng-class="{'slide-right': !showTime, '': showTime}">