implemented in the app: show selected travel, add new travels to the server, menu icons

app/www/css/style.css

@@ -1 +1,15 @@
 /* Empty. Add your own CSS if you like */
+.o-imgMenu{
+    width: 25px!important;
+    height: 25px!important;
+}
+.o-imgTitle{
+    width: 40px!important;
+    height: 40px!important;
+}
+.o-bold{
+    font-weight: bold!important;
+}
+.o-float-right{
+    float: right;
+}

app/www/js/app.js

@@ -59,7 +59,7 @@ angular.module('starter', ['ionic', 'starter.controllers'])
       }
     })
 
-  .state('app.single', {
+  .state('app.travel', {
     url: '/travels/:travelId',
     views: {
       'menuContent': {

app/www/js/controllers.js

@@ -42,31 +42,83 @@ angular.module('starter.controllers', [])
 })
 
 
-.controller('TravelsCtrl', function($scope, $http) {
-  /*$scope.travels = [
-    { id: 1, title: 'Travel1', description: "description for travel 1", owner: "user1", icon: "car" },
-    { id: 2, title: 'Travel2', description: "description for travel 2", owner: "user2", icon: "station-wagon" },
-    { id: 3, title: 'Travel3', description: "description for travel 3", owner: "user3", icon: "van" },
-    { id: 4, title: 'Travel4', description: "description for travel 4", owner: "user1", icon: "station-wagon" },
-    { id: 5, title: 'Travel5', description: "description for travel 5", owner: "user2", icon: "minivan" },
-    { id: 6, title: 'Travel6', description: "description for travel 6", owner: "user3", icon: "lorry" },
-    { id: 7, title: 'Travel7', description: "description for travel 7", owner: "user1", icon: "sport-car" },
-    { id: 8, title: 'Travel8', description: "description for travel 8", owner: "user2", icon: "jeep" }
-];*/
+.controller('TravelsCtrl', function($scope, $http, $ionicModal, $timeout) {
     $scope.travels="";
     $http.get('http://localhost:3000/api/travels')
     .success(function(data, status, headers,config){
-      console.log('data success');
-      console.log(data); // for browser console
-      $scope.travels = data; // for UI
+        console.log('data success');
+        console.log(data); // for browser console
+        $scope.travels = data; // for UI
     })
     .error(function(data, status, headers,config){
-      console.log('data error');
+        console.log('data error');
     })
     .then(function(result){
-      travels = result.data;
+        travels = result.data;
+    });
+
+
+    $scope.newtravel={};
+
+  // Create the login modal that we will use later
+  $ionicModal.fromTemplateUrl('templates/newtravel.html', {
+    scope: $scope
+  }).then(function(modal) {
+    $scope.modal = modal;
   });
+  // Triggered in the login modal to close it
+  $scope.closeNewTravel = function() {
+    $scope.modal.hide();
+  };
+
+  // Open the login modal
+  $scope.showNewTravel = function() {
+    $scope.modal.show();
+  };
+  // Perform the login action when the user submits the login form
+  $scope.doNewTravel = function() {
+    console.log('Doing new travel', $scope.newtravel);
+    $scope.newtravel.icon="lorry";
+    $scope.newtravel.generateddate=$scope.newtravel.date;
+    $scope.newtravel.owner="user";
+    console.log($scope.newtravel);
+    $http({
+        url: 'http://localhost:3000/api/travels',
+        method: "POST",
+        data: $scope.newtravel
+    })
+    .then(function(response) {
+            // success
+            console.log("response: ");
+            console.log(response);
+            $scope.newtravel._id=response.data._id;
+            $scope.travels.push($scope.newtravel);
+    },
+    function(response) { // optional
+            // failed
+    });
+
+    // Simulate a login delay. Remove this and replace with your login
+    // code if using a login system
+    $timeout(function() {
+      $scope.closeNewTravel();
+    }, 1000);
+  };
 })
-.controller('TravelCtrl', function($scope, $stateParams) {
-    //$scope.travel=travels.get($stateParams.travelId);
+
+.controller('TravelCtrl', function($scope, $stateParams, $http) {
+    $scope.travel="";
+    console.log($stateParams.travelId);
+    $http.get('http://localhost:3000/api/travels/'+$stateParams.travelId)
+        .success(function(data, status, headers,config){
+            console.log('data success');
+            console.log(data); // for browser console
+            $scope.travel = data; // for UI
+        })
+        .error(function(data, status, headers,config){
+            console.log('data error');
+        })
+        .then(function(result){
+            travels = result.data;
+    });
 });

app/www/templates/menu.html

@@ -22,18 +22,26 @@
           Login
         </ion-item>
         <ion-item menu-close href="#/app/travels">
+            <img class='o-imgMenu' src="img/rss-symbol.png" />
+          Last publications
+        </ion-item>
+        <ion-item menu-close href="#/app/travels">
+            <img class='o-imgMenu' src="img/road.png" />
           Travels
         </ion-item>
         <ion-item menu-close href="#/app/browse">
+            <img class='o-imgMenu' src="img/box.png" />
           Transport material
         </ion-item>
         <ion-item menu-close href="#/app/search">
+            <img class='o-imgMenu' src="img/carimg/station-wagon.png" />
           Available cars
         </ion-item>
         <ion-item menu-close href="#/app/browse">
           Ask for a car
         </ion-item>
         <ion-item menu-close href="#/app/browse">
+            <img class='o-imgMenu' src="img/community.png" />
           Users
         </ion-item>
       </ion-list>

app/www/templates/newtravel.html

@@ -0,0 +1,54 @@
+<ion-modal-view view-title="Travel">
+  <ion-content>
+
+    <h4>
+        <img class='o-imgTitle' src="img/road.png" />
+        New Travel {{newtravel.title}}
+    </h4>
+    <form class="list">
+        <label class="item item-input">
+            <span class="input-label"t>Title</span>
+            <input ng-model="newtravel.title" class="positive" type="text" placeholder="">
+        </label>
+
+        <label class="item item-input">
+            <span class="input-label">From</span>
+            <input ng-model="newtravel.from" type="text" placeholder="">
+        </label>
+        <label class="item item-input">
+            <span class="input-label">To</span>
+            <input ng-model="newtravel.to" type="text" placeholder="">
+        </label>
+
+        <label class="item item-input">
+            <span class="input-label">nºSeats</span>
+            <input ng-model="newtravel.seats" type="number" placeholder="">
+        </label>
+
+        <label class="item item-input">
+            <span class="input-label">Date</span>
+            <input ng-model="newtravel.date" type="date" placeholder="">
+        </label>
+        <label class="item item-input">
+            <span class="input-label">hour</span>
+            <input ng-model="newtravel.date" type="time" placeholder="">
+        </label>
+        <label class="item item-input">
+            <span class="input-label">phone contact</span>
+            <input ng-model="newtravel.phone" type="number" placeholder="">
+        </label>
+
+        <label class="item item-input item-floating-label">
+            <span class="input-label">Description</span>
+            <input ng-model="newtravel.description" type="text" placeholder="Description">
+        </label>
+        <button ng-click="closeNewTravel()" class="button button-assertive">
+           Cancel
+        </button>
+        <button ng-click="doNewTravel()" class="button button-calm">
+           Create travel
+        </button>
+    </form>
+
+  </ion-content>
+</ion-modal-view>

app/www/templates/travel.html

@@ -1,5 +1,23 @@
 <ion-view view-title="Travel">
   <ion-content>
-    <h1>{{travel.title}}</h1>
+    <div class="item item-avatar">
+        <img ng-src="img/carimg/{{travel.icon}}.png">
+        <h2>{{travel.title}}</h2>
+        <p>{{travel.owner}}</p>
+    </div>
+    <div class="item item-body">
+        <div class="badge item-note">{{travel.date | date:"dd/MM HH:mm a"}}</div>
+        <p><img class='o-imgTitle' src="img/from-to.png" />{{travel.from}} - {{travel.to}}</p>
+        <p>nº car seats: {{trave.seats}}</p>
+        <p class="o-bold">{{travel.description}}</p>
+        <br>
+        <p>
+            <img class='o-imgMenu' src="img/smartphone.png" /> {{travel.phone}}
+        </p>
+
+        <p class='text-right'>
+          <a href="#" class="button button-calm o-pull-right">Ask to join</a>
+        </p>
+    </div>
   </ion-content>
 </ion-view>

app/www/templates/travels.html

@@ -1,11 +1,19 @@
 <ion-view view-title="Travels">
   <ion-content>
+
     <div class="list">
-        <a ng-repeat="travel in travels" class="item item-avatar" href="#/app/travels/{{travel.id}}">
+        <div class="">
+            <a ng-click="showNewTravel()" class="button icon ion-plus o-float-right"></a>
+        </div>
+        <a ng-repeat="travel in travels | orderBy: 'date'" class="item item-avatar" href="#/app/travels/{{travel._id}}">
           <img ng-src="img/carimg/{{travel.icon}}.png">
           <h2>{{travel.title}}</h2>
-          <p>{{travel.description}}</p>
+          <p>
+              {{travel.description}}
+          </p>
+          <p class="">nºseats: {{travel.seats}}</p>
           <div class="badge badge-calm item-note">{{travel.owner}}</div>
+          <div class="badge badge-calm item-note">{{travel.date | date:"dd/MM HH:mm a"}}</div>
         </a>
     </div>
   </ion-content>

server/controllers/travelController.js

@@ -59,7 +59,8 @@ exports.addTravel = function(req, res) {
 	    date:   req.body.date,
 	    generateddate:   req.body.generateddate,
 		seats: req.body.seats,
-		icon: req.body.icon
+		icon: req.body.icon,
+		phone: req.body.phone
 	});
 
 	travel.save(function(err, travel) {

server/models/travelModel.js

@@ -11,6 +11,7 @@ var travelSchema = new Schema({
     date: { type: Date },
     generateddate: { type: Date },
     seats: { type: Number },
-    icon: { type: String }
+    icon: { type: String },
+    phone: { type: Number }
 })
 module.exports = mongoose.model('travelModel', travelSchema);

server/server.js

@@ -71,6 +71,7 @@ apiRoutes.route('/travels')
 apiRoutes.route('/travels/:id')
 .get(travelCtrl.findById)
 
+/* OJU AQUÏ TREC la verificació de token temporalment, per fer les proves des de l'app
 // route middleware to verify a token
 apiRoutes.use(function(req, res, next) {
 
@@ -101,7 +102,7 @@ apiRoutes.use(function(req, res, next) {
     });
 
   }
-});
+});*/
 
 apiRoutes.route('/users/:id')
   .put(userCtrl.updateUser)