unjoin implemented, and travel display re-organized

www/css/style.css

@@ -28,3 +28,11 @@
     width: 30px!important;
     height: 30px!important;
 }
+.o-badgeCollectivized{
+  background: #33CD5F;
+  padding: 5px;
+  border-radius: 5px;
+  font-size: 12px;
+  color: #ffffff;
+  font-weight: bold;
+}

www/js/app.js

@@ -32,11 +32,11 @@ angular.module('starter', ['ionic', 'starter.controllers'])
     controller: 'AppCtrl'
   })
 
-  .state('app.search', {
-    url: '/search',
+  .state('app.settings', {
+    url: '/settings',
     views: {
       'menuContent': {
-        templateUrl: 'templates/search.html'
+        templateUrl: 'templates/settings.html'
       }
     }
   })

www/js/controllers.js

@@ -22,6 +22,7 @@ angular.module('starter.controllers', [])
   $scope.signupData= {};
 
   $scope.storageusername=localStorage.getItem("c_username");
+  $scope.storageavatar=localStorage.getItem("c_avatar");
   // Create the login modal that we will use later
   $ionicModal.fromTemplateUrl('templates/login.html', {
     scope: $scope
@@ -317,7 +318,7 @@ angular.module('starter.controllers', [])
   };
 })
 
-.controller('TravelCtrl', function($scope, $stateParams, $http, $ionicModal) {
+.controller('TravelCtrl', function($scope, $stateParams, $http, $ionicModal, $ionicPopup) {
     if(localStorage.getItem('c_token')){// adding token to the headers
         $http.defaults.headers.common['X-Access-Token'] = localStorage.getItem('c_token');
     }
@@ -361,29 +362,66 @@ angular.module('starter.controllers', [])
     });
 
     $scope.deleteTravel = function(){
-        console.log("delete travel: " + $stateParams.travelId);
+
+       var confirmPopup = $ionicPopup.confirm({
+         title: 'Deleting publication',
+         template: 'Are you sure you want to delete <b>'+ $scope.travel.title+'</b>?'
+       });
+       confirmPopup.then(function(res) {
+       if(res) {
+         console.log('You are sure');
+         console.log("delete travel: " + $stateParams.travelId);
+         $http({
+             url: urlapi + 'travels/' + $stateParams.travelId,
+             method: "DELETE"
+         })
+         .then(function(response) {
+                 console.log(response);
+         },
+         function(response) { // optional
+                 // failed
+         });
+       } else {
+         console.log('You are not sure');
+       }
+     });
+
+
+    };
+    $scope.joinTravel = function(){
+        $scope.newjoin={
+            travelId: $stateParams.travelId,
+            joinedUserId: localStorage.getItem("c_userid"),
+            joinedUsername: localStorage.getItem("c_username"),
+            joinedAvatar: localStorage.getItem("c_avatar")
+        };
         $http({
-            url: urlapi + 'travels/' + $stateParams.travelId,
-            method: "DELETE"
+            url: urlapi + 'travels/join/' + $stateParams.travelId,
+            method: "POST",
+            data: $scope.newjoin
         })
         .then(function(response) {
+                // success
+                console.log("response: ");
                 console.log(response);
+
         },
         function(response) { // optional
                 // failed
         });
     };
-    $scope.joinTravel = function(){
-        $scope.newjoin={
+    $scope.unjoinTravel = function(){
+        console.log("unjoin");
+        $scope.unjoin={
             travelId: $stateParams.travelId,
             joinedUserId: localStorage.getItem("c_userid"),
             joinedUsername: localStorage.getItem("c_username"),
             joinedAvatar: localStorage.getItem("c_avatar")
         };
         $http({
-            url: urlapi + 'travels/join/' + $stateParams.travelId,
+            url: urlapi + 'travels/unjoin/' + $stateParams.travelId,
             method: "POST",
-            data: $scope.newjoin
+            data: $scope.unjoin
         })
         .then(function(response) {
                 // success
@@ -395,9 +433,6 @@ angular.module('starter.controllers', [])
                 // failed
         });
     };
-    $scope.unjoinTravel = function(){
-        console.log("unjoin");
-    };
 
     /* adding comment */
     $scope.doingNewComment=false;

www/templates/menu.html

@@ -32,7 +32,11 @@
             <img class='o-imgMenu' src="img/users.png" />
           Users
         </ion-item>
-        <ion-item menu-close href="#/app/search">
+        <ion-item menu-close href="#/app/users/{{storageusername}}" ng-show="storageusername">
+            <img class='o-imgMenu' ng-src="img/avatars/{{storageavatar}}.png" />
+          {{storageusername}}
+        </ion-item>
+        <ion-item menu-close href="#/app/settings">
             <img class='o-imgMenu' src="img/settings.png" />
           Settings
         </ion-item>

www/templates/search.html

@@ -1,5 +0,0 @@
-<ion-view view-title="Search">
-  <ion-content>
-    <h1>Search</h1>
-  </ion-content>
-</ion-view>

www/templates/settings.html

@@ -0,0 +1,5 @@
+<ion-view view-title="Settings">
+  <ion-content>
+    <h1>Settings</h1>
+  </ion-content>
+</ion-view>

www/templates/travel.html

@@ -4,33 +4,49 @@
         <img ng-src="img/{{travel.modality}}.png" />
         <div class="item-note o-text-right">
             <a class="badge badge-calm" href="#/app/users/{{travel.owner}}">{{travel.owner}}</a>
+            <br>
+            <p ng-show="storageusername==travel.owner" class="text-right">
+                <a href="#" ng-click="deleteTravel()" class="button button-small button-assertive o-pull-right"><i class="icon ion-trash-a"></i></a>
+            </p>
         </div>
         <h2>{{travel.title}}</h2>
         <div class="">{{travel.date | date:"dd/MM HH:mm a"}}</div>
     </div>
     <div class="item item-body">
-        <div class='o-float-right o-text-right'>
-            <span class="badge badge-balanced" ng-show="travel.collectivized">Collectivized</span>
+      <div class='row'>
 
-            <br>
-            <div class="o-mini-text" ng-show="travel.package">
+          <p class="o-bold">{{travel.description}}</p>
+      </div>
+      <div class='row'>
+        <div class='col'>
+          <p ng-show="travel.phone">
+              <img class='o-imgMenu' src="img/smartphone.png" /> {{travel.phone}}
+          </p>
+          <p ng-show="travel.telegram">
+              <img class='o-imgMenu' src="img/telegram.png" /> {{travel.telegram}}
+          </p>
+
+          <p><img class='o-imgTitle' src="img/from-to.png" />{{travel.from}} - {{travel.to}}</p>
+        </div>
+        <div class='col o-text-right'>
+          <p ng-show="travel.collectivized">
+            <span class="o-badgeCollectivized">Collectivized</span>
+          </p>
+          <p ng-show="travel.package">
+            <div class="o-mini-text">
                 <div ng-show="travel.modality=='offering'">can carry package <img src="img/package.png" class="o-imgMenu" /></div>
                 <div ng-show="travel.modality=='asking'">need to carry package <img src="img/package.png" class="o-imgMenu" /></div>
             </div>
+          </p>
+
+            <p>
+                <div ng-show="travel.modality=='offering'">nº car seats: {{travel.seats}}</div>
+                <div ng-show="travel.modality=='asking'">nº people: {{travel.seats}}</div>
+            </p>
         </div>
-        <p><img class='o-imgTitle' src="img/from-to.png" />{{travel.from}} - {{travel.to}}</p>
-        <p>
-            <div ng-show="travel.modality=='offering'">nº car seats: {{travel.seats}}</div>
-            <div ng-show="travel.modality=='asking'">nº people: {{travel.seats}}</div>
-        </p>
-        <p class="o-bold">{{travel.description}}</p>
+      </div>
         <br>
-        <p ng-show="travel.phone">
-            <img class='o-imgMenu' src="img/smartphone.png" /> {{travel.phone}}
-        </p>
-        <p ng-show="travel.telegram">
-            <img class='o-imgMenu' src="img/telegram.png" /> {{travel.telegram}}
-        </p>
+
 
         <div ng-show="storageusername">
             <p class='text-right' ng-show="storageusername!==travel.owner">
@@ -46,9 +62,6 @@
                 <a ng-show="travel.modality=='package'" ng-click="unjoinTravel()" href="#" class="button button-assertive o-pull-right">Unoffer car</a>
               </div>
             </p>
-            <p ng-show="storageusername==travel.owner" class="text-right">
-                <a href="#" ng-click="deleteTravel()" class="button button-assertive o-pull-right">Delete</a>
-            </p>
         </div>
     </div>
     <div class="item item-body" ng-show="joins[0]">
@@ -66,18 +79,17 @@
             </a>
         </div>
         <div ng-show="storageusername">
-          <a ng-click="showNewComment()" ng-show="!doingNewComment" class="button button-calm right">New comment</a>
+          <a ng-click="showNewComment()" ng-show="!doingNewComment" class="button button-small button-calm right">New comment</a>
         </div>
         <form class="list" ng-show="doingNewComment">
             <label class="item item-input item-floating-label">
-                <span class="input-label">Comment</span>
                 <input ng-model="newComment.comment" type="text" placeholder="Comment">
             </label>
 
-            <button ng-click="closeNewComment()" class="button button-assertive">
+            <button ng-click="closeNewComment()" class="button button-small button-assertive">
                Cancel
             </button>
-            <button ng-click="doNewComment()" class="button button-calm">
+            <button ng-click="doNewComment()" class="button button-small button-calm">
                Post comment
             </button>
         </form>

www/templates/travels.html

@@ -16,6 +16,13 @@
                 <input type="search" placeholder="search..." ng-model="search">
             </label>
         </div>
+
+        <div class="card" ng-show="!travels">
+          <div class="item item-text-wrap">
+            No data in memory.<br>
+            Pull from top to refresh
+          </div>
+        </div>
         <a ng-repeat="travel in travels | orderBy: 'date' | filter: search" class="item item-avatar" href="#/app/travels/{{travel._id}}">
           <img ng-src="img/{{travel.modality}}.png"/>
           <h2>{{travel.title}}</h2>