Browse Source

commit

master
arnaucode 7 years ago
parent
commit
6135fc0267
10 changed files with 202 additions and 86 deletions
  1. +6
    -17
      README.md
  2. +65
    -0
      www/css/style.css
  3. +2
    -2
      www/js/app.js
  4. +20
    -13
      www/js/offerCar.js
  5. +11
    -3
      www/js/travel.js
  6. +45
    -24
      www/templates/help.html
  7. +1
    -0
      www/templates/main.html
  8. +2
    -2
      www/templates/menu.html
  9. +43
    -13
      www/templates/travel.html
  10. +7
    -12
      www/templates/travels.html

+ 6
- 17
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:
(Backend and Frontend common thins, are in the Backend readme.md)
**Frontend:**
**ToDos:**
``` ```
-translate system --> done
-quan el login falla, que avisi de que ha fallat
-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)
-page for user to view joins that has done
-allow travel crator to accept join petitions and reject people
-add to travel the date of destination
``` ```

+ 65
- 0
www/css/style.css

@ -134,6 +134,47 @@
color: #ffffff!important; 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{ .o_purple50{
background: #EDE7F6!important; background: #EDE7F6!important;
color: #000000!important; color: #000000!important;
@ -210,6 +251,30 @@
.o_text_white{ .o_text_white{
color: #ffffff!important; 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{ .o_text_purple400{
color: #7E57C2!important; color: #7E57C2!important;
} }

+ 2
- 2
www/js/app.js

@ -6,9 +6,9 @@
// 'starter.controllers' is found in controllers.js // '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="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', [ angular.module('starter', [

+ 20
- 13
www/js/offerCar.js

@ -47,24 +47,31 @@ angular.module('app.offerCar', ['pascalprecht.translate', 'ui-leaflet'])
console.log($scope.newtravel.to.name); console.log($scope.newtravel.to.name);
$http.get('http://nominatim.openstreetmap.org/search?q=' + $scope.newtravel.from.name + '&format=json&limit=1') $http.get('http://nominatim.openstreetmap.org/search?q=' + $scope.newtravel.from.name + '&format=json&limit=1')
.then(function(data) { .then(function(data) {
$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;
$scope.markers.push({
lat: Number(data.data[0].lat),
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) {
$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;
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;
$scope.markers.push({ $scope.markers.push({
lat: Number(data.data[0].lat), lat: Number(data.data[0].lat),
lng: Number(data.data[0].lon), lng: Number(data.data[0].lon),
message: data.data[0].display_name 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;
$scope.markers.push({
lat: Number(data.data[0].lat),
lng: Number(data.data[0].lon),
message: data.data[0].display_name
});
}
}); });
}); });

+ 11
- 3
www/js/travel.js

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

+ 45
- 24
www/templates/help.html

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

+ 1
- 0
www/templates/main.html

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

+ 2
- 2
www/templates/menu.html

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

+ 43
- 13
www/templates/travel.html

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

+ 7
- 12
www/templates/travels.html

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

Loading…
Cancel
Save