commit

README.md

@@ -1,22 +1,11 @@
-# collectivecarApp
+# carsincommonApp
 
-server code: https://github.com/idoctnef/collectivecarServer
+server code: https://github.com/arnaucode/carsincommonServer
 
 
-##To Do List:
+**ToDos:**
-(Backend and Frontend common thins, are in the Backend readme.md)
-**Frontend:**
 ```
--translate system                       --> done
+-page for user to view joins that has done
-
+-allow travel crator to accept join petitions and reject people
--quan el login falla, que avisi de que ha fallat
+-add to travel the date of destination
-
-
--UX design
--interface graphic design
--icons
--api more secure and robust (comprovations, hash passwords, ...)
-
--web page (webapp) --> (de moment es pot penjar la app en versió web tal qual,
-  que es podrà fer servir des d'un navegador com si fós la app)
 ```

www/css/style.css

@@ -134,6 +134,47 @@
     color: #ffffff!important;
 }*/
 
+.o_grey50{
+    background: #FAFAFA!important;
+    color: #000000!important;
+}
+.o_grey100{
+    background: #F5F5F5!important;
+    color: #000000!important;
+}
+.o_grey200{
+    background: #EEEEEE!important;
+    color: #000000!important;
+}
+.o_grey300{
+    background: #E0E0E0!important;
+    color: #000000!important;
+}
+.o_grey400{
+    background: #BDBDBD!important;
+    color: #000000!important;
+}
+.o_grey500{
+    background: #9E9E9E!important;
+    color: #000000!important;
+}
+.o_grey600{
+    background: #757575!important;
+    color: #ffffff!important;
+}
+.o_grey700{
+    background: #616161!important;
+    color: #ffffff!important;
+}
+.o_grey800{
+    background: #424242!important;
+    color: #ffffff!important;
+}
+.o_grey900{
+    background: #212121!important;
+    color: #ffffff!important;
+}
+
 .o_purple50{
     background: #EDE7F6!important;
     color: #000000!important;
@@ -210,6 +251,30 @@
 .o_text_white{
     color: #ffffff!important;
 }
+
+.o_text_grey400{
+    color: #BDBDBD!important;
+}
+.o_text_grey500{
+    color: #9E9E9E!important;
+}
+.o_text_grey600{
+    color: #757575!important;
+}
+.o_text_grey700{
+    color: #616161!important;
+}
+.o_text_grey800{
+    color: #424242!important;
+}
+.o_text_grey900{
+    color: #212121!important;
+}
+
+
+.o_text_purple300{
+    color: #9575CD!important;
+}
 .o_text_purple400{
     color: #7E57C2!important;
 }

www/js/app.js

@@ -6,9 +6,9 @@
 // 'starter.controllers' is found in controllers.js
 
 
-//var urlapi = "http://localhost:3000/api/";
+var urlapi = "http://localhost:3000/api/";
 //var urlapi="https://collectivecar.paas.primustech.io/api/";
-var urlapi="http://147.83.7.158:3000/api/";
+//var urlapi="http://147.83.7.158:3000/api/";
 
 
 angular.module('starter', [

www/js/offerCar.js

@@ -47,6 +47,9 @@ angular.module('app.offerCar', ['pascalprecht.translate', 'ui-leaflet'])
         console.log($scope.newtravel.to.name);
         $http.get('http://nominatim.openstreetmap.org/search?q=' + $scope.newtravel.from.name + '&format=json&limit=1')
         .then(function(data) {
+            console.log(data);
+            if(data.data[0])
+            {
                 $scope.newtravel.from.lat=data.data[0].lat;
                 $scope.newtravel.from.long=data.data[0].lon;
                 $scope.newtravel.from.name=data.data[0].display_name;
@@ -55,8 +58,11 @@ angular.module('app.offerCar', ['pascalprecht.translate', 'ui-leaflet'])
                     lng: Number(data.data[0].lon),
                     message: data.data[0].display_name
                 });
+            }
             $http.get('http://nominatim.openstreetmap.org/search?q=' + $scope.newtravel.to.name + '&format=json&limit=1')
             .then(function(data) {
+                if(data.data[0])
+                {
                     $scope.newtravel.to.lat=data.data[0].lat;
                     $scope.newtravel.to.long=data.data[0].lon;
                     $scope.newtravel.to.name=data.data[0].display_name;
@@ -65,6 +71,7 @@ angular.module('app.offerCar', ['pascalprecht.translate', 'ui-leaflet'])
                         lng: Number(data.data[0].lon),
                         message: data.data[0].display_name
                     });
+                }
             });
         });
 

www/js/travel.js

@@ -1,13 +1,15 @@
 angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
 
 .controller('TravelCtrl', function($scope, $stateParams, $http,
-        $ionicModal, $ionicLoading, $ionicPopup, $filter) {
+        $ionicModal, $ionicLoading, $ionicPopup, $filter,
+        leafletData, leafletBoundsHelpers) {
 
     $scope.center= {
-        lat: 0,
+        /*lat: 0,
         lng: 0,
-        zoom: 1
+        zoom: 1*/
     };
+    $scope.bounds={};
     $scope.markers=[];
     $scope.tiles= {
         url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
@@ -35,6 +37,12 @@ angular.module('app.travel', ['pascalprecht.translate', 'ui-leaflet'])
                 lng: Number($scope.travel.to.long),
                 message: $scope.travel.to.name
             });
+            $scope.center= {
+                lat: (Number($scope.travel.from.lat)+Number($scope.travel.to.lat))/2,
+                lng: (Number($scope.travel.from.long)+Number($scope.travel.to.long))/2,
+                zoom: 4
+            };
+
             $scope.$broadcast('scroll.refreshComplete');//refresher stop
 
         }, function(data){

www/templates/help.html

@@ -1,7 +1,7 @@
 <ion-view view-title="{{'Help' | translate}}">
   <ion-content class="padding">
     <p>
-      (help instructions here)
+      (not ready yet)
     </p>
     <p>
       This is a car sharing App.
@@ -11,30 +11,51 @@
       <br>
       There are <b>3 types of publication</b>:
     </p>
-    <p>
+    <md-tabs md-dynamic-height md-border-bottom>
-      <ul class="list">
+      <md-tab label="Offer">
-        <li class="item">
+        <md-content class="md-padding">
-          <h4>Travel offer</h4>
+            <div class="card">
-          <img ng-src="img/offering.png" class="o-img-new"/>
+              <div class="item item-divider o_purple500">
+                <i class="icon ion-android-car"></i> Travel offer
+              </div>
+              <div class="item item-text-wrap">
                 For example: I'm going with my car to a place, in my car can go more people.
-        </li>
+              </div>
-        <li class="item">
+            </div>
-          <h4>Travel ask</h4>
+        </md-content>
-          <img ng-src="img/package.png" class="o-img-new"/>
+      </md-tab>
+      <md-tab label="Ask">
+        <md-content class="md-padding">
+            <div class="card">
+              <div class="item item-divider o_purple400">
+                 <i class="icon ion-help"></i> Travel ask
+              </div>
+              <div class="item item-text-wrap">
                 For example: I need to travel a place, can somebody take me there?
-        </li>
+              </div>
-        <li class="item">
+            </div>
-          <h4>Package send ask</h4>
+        </md-content>
-          <img ng-src="img/asking.png" class="o-img-new"/>
+      </md-tab>
+      <md-tab label="Package">
+        <md-content class="md-padding">
+            <div class="card">
+              <div class="item item-divider o_purple300">
+                 <i class="icon ion-ios-box"></i> Package send ask
+              </div>
+              <div class="item item-text-wrap">
                 For example: I need to send some package to a place, can somebody carry it to there?
-        </li>
+              </div>
-      </ul>
+            </div>
-    </p>
+        </md-content>
+      </md-tab>
+    </md-tabs>
+
+
+
     <p>
-      To <b>create a new publication</b>, just need to go in to 'Travels' section in the main menu, and select one of the 3 top buttons:
+      To <b>create a new publication</b>, just need to click the 'New Travel' button on the right of footer menu,
-      <img ng-src="img/newpackage.png" class="o-img-new"/>
+      and select wich type of publication is.
-      <img ng-src="img/newasking.png" class="o-img-new"/>
+
-      <img ng-src="img/newoffering.png" class="o-img-new"/>
     </p>
     <br><br>
     <p>(not finished yet)...</p>

www/templates/main.html

@@ -23,6 +23,7 @@
       <a href="#/app/notifications" class="item item-icon-left o_purpleG300to500">
         <i class="icon ion-android-notifications"></i>
         {{'Notifications' | translate }}
+        <span class="badge o_purple300">{{storageuser.notifications.length}}</span>
       </a>
       <a href="#/app/settings" class="item item-icon-left o_purpleG300to500">
       <i class="icon ion-settings"></i>

www/templates/menu.html

@@ -49,8 +49,8 @@
         </a>
         <a class="item item-icon-left o_bSidenav" menu-close ng-href="#/app/notifications">
           <i class="icon ion-android-notifications-none"></i>
-          <span class="mdl-badge" data-badge="4">{{'Notifications' | translate }}</span>
+          {{'Notifications' | translate }}
-          <span class="badge badge-positive">{{userdata.notifications.length}}</span>
+          <span class="badge o_purple300">{{storageuser.notifications.length}}</span>
         </a>
         <a class="item item-icon-left o_bSidenav" menu-close ng-href="#/app/settings">
           <i class="icon ion-settings"></i> {{'Settings' | translate }}

www/templates/travel.html

@@ -1,15 +1,18 @@
 <ion-view view-title="{{'Travel' | translate}}">
   <ion-content class="has-footer">
     <div class="item item-icon-left">
-      <div class="item-note o-text-right">
+      <div class="item-note">
         <p>
             <md-button ng-href="#/app/users/{{travel.user._id}}">
                 <img class="o_userImgCircularMini" ng-src="{{travel.user.avatar}}"></img>
                 {{travel.user.username}}
             </md-button>
+            <p  class="text-right">
+              <a ng-click="deleteTravel()" class="button button-small o_bRed"
+              ng-show="storageuser._id==travel.user._id">
+                  <i class="icon ion-trash-a"></i>
+              </a>
             </p>
-        <p ng-show="storageuser._id==travel.user._id" class="text-right">
-          <a ng-click="deleteTravel()" class="button button-small o_bRed"><i class="icon ion-trash-a"></i></a>
         </p>
       </div>
       <h2>
@@ -19,6 +22,7 @@
 
     <leaflet width="100%" height="40%" markers="markers" center="center"
     tiles="tiles" id="map-simple-map"></leaflet>
+
     <div ng-show="storageuser._id!=travel.user._id" class="text-right">
       <p class='text-right'>
         <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)==-1">
@@ -35,8 +39,12 @@
       </p>
     </div>
     <div class="item item-icon-left">
-        <i class="icon ion-ios-location"></i>{{travel.from.name}} --> {{travel.to.name}}
+        <i class="icon ion-ios-location-outline"></i>From: {{travel.from.name}}
     </div>
+    <div class="item item-icon-left">
+        <i class="icon ion-ios-location"></i>To: {{travel.to.name}}
+    </div>
+
     <div class="item item-icon-left">
         <i class="icon ion-clipboard"></i> {{travel.description}}
     </div>
@@ -44,28 +52,50 @@
         <i class="icon ion-ios-box"></i> package
     </div>
     <div class="item item-icon-left" ng-show="travel.user.telegram">
-        <i class="icon ion-paper-airplane"></i> @{{user.telegram}}
+        <i class="icon ion-paper-airplane"></i> @{{travel.user.telegram}}
     </div>
     <div class="item item-icon-left" ng-show="travel.user.phone">
         <i class="icon ion-ios-telephone"></i> {{travel.user.phone}}
     </div>
-    <div class="item item-icon-left">
-        <i class="icon ion-ios-people"></i> {{travel.seats}} seats
-    </div>
 
-    <div class="item item-body">
+    <div class="item item-body" ng-show="travel.collectivized">
       <div class='row'>
         <div class='col o-text-right'>
-          <p ng-show="travel.collectivized">
+          <p>
             <span class="o-badgeCollectivized">{{'Collectivized' | translate}}</span>
           </p>
         </div>
       </div>
       <br>
-
-
-
     </div>
+
+    <div class="item item-icon-left">
+        <i class="icon ion-ios-people"></i>
+                <p>0/{{travel.seats}} seats</p>
+                <a ng-repeat="join in travel.joins" ng-href="#/app/users/{{join._id}}">
+                    <img class="o_userImgCircularMini" ng-src="{{join.avatar}}"></img>
+                </a>
+    </div>
+    <div class="">
+        <p>Pendent petitions</p>
+        <div class="row" ng-repeat="joinPetition in travel.joinPetitions">
+            <div class="col col-90">
+                <a class="item item-avatar"  ng-href="#/app/users/{{joinPetition._id}}">
+                    <img class="o_userImgCircularMini" ng-src="{{joinPetition.avatar}}"></img>
+                    <h2>{{joinPetition.username}}</h2>
+                </a>
+            </div>
+            <div class="col">
+                <button class="button button-small o_grey600">
+                    <i class="icon ion-close"></i>
+                </button><br>
+                <button class="button button-small o_purple400">
+                    <i class="icon ion-checkmark"></i>
+                </button><br>
+            </div>
+        </div>
+    </div>
+
     <div class="item item-body" ng-show="travel.joins[0]">
       {{'Joined_users' | translate}}:<br>
       <a ng-repeat="join in travel.joins" ng-href="#/app/users/{{join.joinedUsername}}" class="button button-small button-dark">

www/templates/travels.html

@@ -19,20 +19,15 @@
           </div>
         </div>
         <a ng-repeat="travel in travels | orderBy: 'date' | filter: search"
-        class="item item-avatar" href="#/app/travels/{{travel._id}}">
+        class="item item-icon-left" href="#/app/travels/{{travel._id}}">
-          <img ng-src="img/{{travel.type}}.png"/>
+          <i class="icon ion-android-car o_text_grey700"></i>
-          <h2 class="o_text_purple600">{{travel.title}}</h2>
+          <h2 class="o_text_grey800">{{travel.title}}</h2>
           <div class="item-note text-right">
-              <div class="o_text_purple400">{{travel.date | date:"dd/MM"}}</div>
+              <div class="o_text_purple300">{{travel.date | date:"dd/MM"}}</div>
-              <div class="o_text_purple400">{{travel.date | date:"HH:mm"}}h</div>
+              <div class="o_text_purple300">{{travel.date | date:"HH:mm"}}h</div>
-              <!--<div class="badge badge-calm">{{travel.owner}}</div>-->
           </div>
-          <p>
+          <p>{{travel.from.name}}</p>
-              {{travel.description}}
+          <p>{{travel.to.name}}</p>
-          </p>
-          <!--<p class="" ng-show="travel.modality=='offering'">nºseats: {{travel.seats}}</p>
-          <p class="" ng-show="travel.modality=='asking'">nºpeople: {{travel.seats}}</p>-->
-          <p class="">{{travel.from.name}} --> {{travel.to.name}}</p>
         </a>
     </div>
   </ion-content>