implemented infinite scroll on travels, user avatar show image, added username on travels list

www/js/travel.js

@@ -49,7 +49,11 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
         }, function(data) {
           console.log('data error');
           $scope.$broadcast('scroll.refreshComplete'); //refresher stop
-            $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
+          $ionicLoading.show({
+            template: 'Error connecting server',
+            noBackdrop: true,
+            duration: 2000
+          });
 
         });
     };
@@ -96,7 +100,11 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
             console.log("data: ");
             console.log(data);
             if (data.data.success == false) {
-                $ionicLoading.show({template: 'Error on unjoin', noBackdrop: true, duration: 2000});
+              $ionicLoading.show({
+                template: 'Error on unjoin',
+                noBackdrop: true,
+                duration: 2000
+              });
             } else {
               $scope.travel = data.data;
             }
@@ -115,7 +123,11 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
             console.log("data: ");
             console.log(data);
             if (data.data.success == false) {
-                $ionicLoading.show({template: 'Error on unjoin', noBackdrop: true, duration: 2000});
+              $ionicLoading.show({
+                template: 'Error on unjoin',
+                noBackdrop: true,
+                duration: 2000
+              });
             } else {
               $scope.travel = data.data;
             }
@@ -129,13 +141,19 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
       $http({
           url: urlapi + 'travels/declineJoin/' + $stateParams.travelid,
           method: "POST",
-            data: {userid: joinPetition._id}
+          data: {
+            userid: joinPetition._id
+          }
         })
         .then(function(data) {
             console.log("data: ");
             console.log(data);
             if (data.data.success == false) {
-                $ionicLoading.show({template: 'Error on declining', noBackdrop: true, duration: 2000});
+              $ionicLoading.show({
+                template: 'Error on declining',
+                noBackdrop: true,
+                duration: 2000
+              });
             } else {
               $scope.travel = data.data;
               console.log("success");
@@ -150,13 +168,19 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
       $http({
           url: urlapi + 'travels/acceptJoin/' + $stateParams.travelid,
           method: "POST",
-            data: {userid: joinPetition._id}
+          data: {
+            userid: joinPetition._id
+          }
         })
         .then(function(data) {
             console.log("data: ");
             console.log(data);
             if (data.data.success == false) {
-                $ionicLoading.show({template: 'Error on accepting', noBackdrop: true, duration: 2000});
+              $ionicLoading.show({
+                template: 'Error on accepting',
+                noBackdrop: true,
+                duration: 2000
+              });
             } else {
               $scope.travel = data.data;
               console.log("success");
@@ -168,6 +192,12 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
     };
 
     $scope.leaveTravel = function() {
+      var confirmPopup = $ionicPopup.confirm({
+        title: 'Leaving travel',
+        template: 'Are you sure you want to leave <b>' + $scope.travel.title + '</b>?'
+      });
+      confirmPopup.then(function(res) {
+        if (res) {
           $http({
               url: urlapi + 'travels/leave/' + $stateParams.travelid,
               method: "POST",
@@ -177,7 +207,11 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
                 console.log("data: ");
                 console.log(data);
                 if (data.data.success == false) {
-                $ionicLoading.show({template: 'Error on unjoin', noBackdrop: true, duration: 2000});
+                  $ionicLoading.show({
+                    template: 'Error on unjoin',
+                    noBackdrop: true,
+                    duration: 2000
+                  });
                 } else {
                   $scope.travel = data.data;
                 }
@@ -185,6 +219,10 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
               function(response) { // optional
                 // failed
               });
+        } else {
+          console.log('You are not sure');
+        }
+      });
     };
 
     /* adding comment */
@@ -218,7 +256,11 @@ console.log($scope.newComment);
 
             if (response.data.success == false) {
 
-                  $ionicLoading.show({ template: 'failed to generate new asking package', noBackdrop: true, duration: 2000 });
+              $ionicLoading.show({
+                template: 'failed to generate new asking package',
+                noBackdrop: true,
+                duration: 2000
+              });
             }
           },
           function(response) { // optional
@@ -230,8 +272,7 @@ console.log($scope.newComment);
 
     $scope.userHasJoined = function(myArray, searchTerm) {
       //console.log(myArray+", "+searchTerm);
-        if(myArray)
-        {
+      if (myArray) {
         for (var i = 0, len = myArray.length; i < len; i++) {
           //console.log(myArray[i] + " - " + searchTerm);
           if (myArray[i]._id === searchTerm) {

www/js/travels.js

@@ -1,7 +1,7 @@
 angular.module('app.travels', ['pascalprecht.translate'])
 
   .controller('TravelsCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) {
-
+    $scope.loadMorePagination = true;
 
     $scope.travels = [];
     $scope.page = 0;
@@ -14,19 +14,33 @@ angular.module('app.travels', ['pascalprecht.translate'])
           //$scope.travels = data.data; // for UI
           $scope.travels = $scope.travels.concat(data.data);
           $scope.$broadcast('scroll.refreshComplete'); //refresher stop
+          $scope.$broadcast('scroll.infiniteScrollComplete');
+          if (data.data.length < 1) {
+              console.log("setting loadMorePagination to false");
+            $scope.loadMorePagination = false;
+          }
 
         }, function(data) {
           console.log('data error');
           $scope.$broadcast('scroll.refreshComplete'); //refresher stop
-            $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
+          $ionicLoading.show({
+            template: 'Error connecting server',
+            noBackdrop: true,
+            duration: 2000
+          });
 
         });
     };
     $scope.doRefresh();
 
     $scope.paginationNext = function() {
+      if ($scope.loadMorePagination == true) {
         $scope.page++;
         console.log($scope.page);
         $scope.doRefresh();
+    }else{
+        console.log("limit pagination reached");
+        $scope.$broadcast('scroll.infiniteScrollComplete');
+    }
     };
   });

www/js/user.js

@@ -11,8 +11,7 @@ angular.module('app.user', ['pascalprecht.translate'])
           console.log('data success');
           console.log(data); // for browser console
           $scope.user = data.data; // for UI
-            if($scope.storageuser._id==$scope.user._id)
-            {
+          if ($scope.storageuser._id == $scope.user._id) {
             localStorage.setItem("cim_app_userdata", JSON.stringify(data.data));
           }
           $scope.$broadcast('scroll.refreshComplete'); //refresher stop
@@ -34,7 +33,11 @@ angular.module('app.user', ['pascalprecht.translate'])
             // success
             if (data.data.success == false) {
               console.log("failed");
-                $ionicLoading.show({template: 'Error on like', noBackdrop: true, duration: 2000});
+              $ionicLoading.show({
+                template: 'Error on like',
+                noBackdrop: true,
+                duration: 2000
+              });
             } else {
               $scope.user = data.data; // for UI
             }
@@ -54,7 +57,11 @@ angular.module('app.user', ['pascalprecht.translate'])
             // success
             if (data.data.success == false) {
               console.log("failed");
-                $ionicLoading.show({template: 'Error on unlike', noBackdrop: true, duration: 2000});
+              $ionicLoading.show({
+                template: 'Error on unlike',
+                noBackdrop: true,
+                duration: 2000
+              });
             } else {
               $scope.user = data.data; // for UI
             }
@@ -86,7 +93,9 @@ angular.module('app.user', ['pascalprecht.translate'])
 
             $scope.users = response.data;
             localStorage.setItem('c_users', JSON.stringify($scope.users));
-                $scope.user = $filter('filter')($scope.users, {username: $stateParams.username}, true)[0];
+            $scope.user = $filter('filter')($scope.users, {
+              username: $stateParams.username
+            }, true)[0];
 
           },
           function(response) { // optional
@@ -113,7 +122,9 @@ angular.module('app.user', ['pascalprecht.translate'])
 
             $scope.users = response.data;
             localStorage.setItem('c_users', JSON.stringify($scope.users));
-                $scope.user = $filter('filter')($scope.users, {username: $stateParams.username}, true)[0];
+            $scope.user = $filter('filter')($scope.users, {
+              username: $stateParams.username
+            }, true)[0];
 
           },
           function(response) { // optional
@@ -146,4 +157,34 @@ angular.module('app.user', ['pascalprecht.translate'])
       }
       return -1;
     };
+
+    //show image
+    $ionicModal.fromTemplateUrl('templates/imgView.html', {
+      scope: $scope,
+      animation: 'slide-in-up'
+    }).then(function(modal) {
+      $scope.modal = modal;
+    });
+    $scope.openModal = function() {
+      $scope.modal.show();
+    };
+    $scope.closeModal = function() {
+      $scope.modal.hide();
+    };
+    // Cleanup the modal when we're done with it!
+    $scope.$on('$destroy', function() {
+      $scope.modal.remove();
+    });
+    // Execute action on hide modal
+    $scope.$on('modal.hidden', function() {
+      // Execute action
+    });
+    // Execute action on remove modal
+    $scope.$on('modal.removed', function() {
+      // Execute action
+    });
+    $scope.showImg = function() {
+      console.log("show image");
+      $scope.openModal();
+    };
   });

www/templates/imgView.html

@@ -0,0 +1,9 @@
+<ion-view view-title="{{'Users' | translate}}">
+  <ion-content>
+    <ion-header-bar class="bar bar-header">
+      <a class="button" ng-click="modal.hide()">Back</a>
+      <h1 class="title">{{user.username}} profile image</h1>
+    </ion-header-bar>
+    <img ng-click="modal.hide()" ng-src="{{user.avatar}}" style="width:100%;" />
+  </ion-content>
+</ion-view>

www/templates/notifications.html

@@ -5,23 +5,21 @@
     <div ng-show="!notifications[0]" class="item">
       No notifications yet
     </div>
-    <a ng-repeat="notification in notifications | orderBy: '-date'"  ng-show="notification.state=='pendent'"
-    class="item item-icon-left c_deepPurple100" href="#/app/{{notification.link}}">
+    <a ng-repeat="notification in notifications | orderBy: '-date'" ng-show="notification.state=='pendent'" class="item item-icon-left item-text-wrap c_deepPurple100" href="#/app/{{notification.link}}">
+      <div class="item-note text-right">
+        <div class="o_text_purple600">{{notification.date | date:"dd/MM"}}</div>
+        <div class="o_text_purple600">{{notification.date | date:"HH:mm:ss"}}</div>
+      </div>
       <i ng-show="notification.state=='pendent'" class="icon ion-android-notifications-none o_text_purple600"></i>
       <h2>{{notification.message}}</h2>
+    </a>
+    <a ng-repeat="notification in notifications | orderBy: '-date'" ng-show="notification.state=='viewed'" class="item item-icon-left item-text-wrap" href="#/app/{{notification.link}}">
       <div class="item-note text-right">
         <div class="o_text_purple600">{{notification.date | date:"dd/MM"}}</div>
         <div class="o_text_purple600">{{notification.date | date:"HH:mm:ss"}}</div>
       </div>
-      </a>
-    <a ng-repeat="notification in notifications | orderBy: '-date'"  ng-show="notification.state=='viewed'"
-    class="item item-icon-left" href="#/app/{{notification.link}}">
       <i ng-show="notification.state=='viewed'" class="icon ion-android-notifications-none"></i>
       <h2>{{notification.message}}</h2>
-        <div class="item-note text-right">
-            <div class="o_text_purple600">{{notification.date | date:"dd/MM"}}</div>
-            <div class="o_text_purple600">{{notification.date | date:"HH:mm:ss"}}</div>
-        </div>
     </a>
   </ion-content>
 </ion-view>

www/templates/travel.html

@@ -51,22 +51,23 @@
       <p class='text-right'>
         <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)==-1">
             <div ng-show="userHasJoined(travel.joins, storageuser._id)==-1">
-                <a ng-show="travel.type=='offering'" ng-click="joinTravel()" class="button o_purple300">{{'Ask_to_join' | translate}}</a>
-                <a ng-show="travel.type=='asking'" ng-click="joinTravel()" class="button o_purple300">{{'Offer_car' | translate}}</a>
-                <a ng-show="travel.type=='package'" ng-click="joinTravel()" class="button o_purple300">{{'Offer_car' | translate}}</a>
+                <a ng-show="travel.type=='offering'" ng-click="joinTravel()" class="button button-small o_purple300">{{'Ask_to_join' | translate}}</a>
+                <a ng-show="travel.type=='asking'" ng-click="joinTravel()" class="button button-small o_purple300">{{'Offer_car' | translate}}</a>
+                <a ng-show="travel.type=='package'" ng-click="joinTravel()" class="button button-small o_purple300">{{'Offer_car' | translate}}</a>
             </div>
         </div>
 
         <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)>-1">
-            <a ng-show="travel.type=='offering'" ng-click="unjoinTravel()" class="button o_purple100">{{'Unjoin' | translate}}</a>
-            <a ng-show="travel.type=='asking'" ng-click="unjoinTravel()" class="button o_purple100">{{'Unoffer_car' | translate}}</a>
-            <a ng-show="travel.type=='package'" ng-click="unjoinTravel()" class="button o_purple100">{{'Unoffer_car' | translate}}</a>
+            <a ng-show="travel.type=='offering'" ng-click="unjoinTravel()" class="button button-small o_purple100">{{'Unjoin' | translate}}</a>
+            <a ng-show="travel.type=='asking'" ng-click="unjoinTravel()" class="button button-small o_purple100">{{'Unoffer_car' | translate}}</a>
+            <a ng-show="travel.type=='package'" ng-click="unjoinTravel()" class="button button-small o_purple100">{{'Unoffer_car' | translate}}</a>
         </div>
 
         <div ng-show="userHasJoined(travel.joins, storageuser._id)>-1">
-            <a ng-show="travel.type=='offering'" ng-click="leaveTravel()" class="button o_bRed">{{'Leave' | translate}}</a>
-            <a ng-show="travel.type=='asking'" ng-click="" class="button o_purple100">{{'Leave' | translate}}</a>
-            <a ng-show="travel.type=='package'" ng-click="" class="button o_purple100">{{'Leave' | translate}}</a>
+            You have been accepted!
+            <a ng-show="travel.type=='offering'" ng-click="leaveTravel()" class="button button-small o_bRed">{{'Leave' | translate}}</a>
+            <a ng-show="travel.type=='asking'" ng-click="" class="button button-small o_purple100">{{'Leave' | translate}}</a>
+            <a ng-show="travel.type=='package'" ng-click="" class="button button-small o_purple100">{{'Leave' | translate}}</a>
         </div>
       </p>
     </div>

www/templates/travels.html

@@ -20,6 +20,9 @@
         </div>
         <a ng-repeat="travel in travels | orderBy: 'date' | filter: search"
         class="item item-icon-left" href="#/app/travels/{{travel._id}}">
+        <div class="item-note text-right">
+            {{travel.user.username}}
+        </div>
           <i class="icon ion-android-car o_text_grey700"></i>
           <h2 class="o_text_grey800">{{travel.title}}</h2>
           <div class="item-note text-right">
@@ -34,8 +37,13 @@
           </p>
         </a>
     </div>
-    <div class="button" ng-click="paginationNext()">
+    <!--<div class="button" ng-click="paginationNext()">
         {{'load_more' | translate}}
-    </div>
+    </div>-->
+    <ion-infinite-scroll
+    ng-if="loadMorePagination"
+    on-infinite="paginationNext()"
+    distance="1%">
+  </ion-infinite-scroll>
   </ion-content>
 </ion-view>

www/templates/user.html

@@ -1,11 +1,13 @@
 <ion-view view-title="{{'User' | translate}} {{user.username}}">
-  <ion-content class="has-footer">
-      <ion-refresher
-        pulling-text="{{'Pull_to_refresh' | translate}}..."
-        on-refresh="doRefresh()">
+  <ion-content>
+    <ion-refresher pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()">
     </ion-refresher>
     <div class="o_userProfileBackground">
-        <img ng-src="{{user.avatar}}" class="o_userImgCircular" />
+      <img ng-click="showImg()" ng-src="{{user.avatar}}" class="o_userImgCircular" />
+      <!--
+        show image disabled, here the code prepared to enable show image:
+        <img ng-click="showImg()" ng-src="{{user.avatar}}" class="o_userImgCircular" />
+    -->
       <h3 class="o_text_white">{{user.username}}</h3>
       <p>{{user.description}}</p>
       <p>{{user.email}}</p>
@@ -19,8 +21,7 @@
     </div>
     <div class="">
       <div class="row">
-          <a class="tab-item" ng-show="user.telegram"
-          ng-href="http://telegram.me/{{user.telegram}}">
+        <a class="tab-item" ng-show="user.telegram" ng-href="http://telegram.me/{{user.telegram}}">
               <i class="icon ion-paper-airplane"></i>
               @{{user.telegram}}
           </a>