Browse Source

mdl css added, remaking everything

master
arnaucode 8 years ago
parent
commit
5332f6d0db
10 changed files with 95 additions and 332 deletions
  1. +3
    -0
      www/index.html
  2. +1
    -1
      www/js/app.js
  3. +17
    -20
      www/js/travel.js
  4. +5
    -218
      www/js/travels.js
  5. +5
    -9
      www/js/user.js
  6. +1
    -21
      www/js/users.js
  7. +2
    -1
      www/templates/menu.html
  8. +1
    -1
      www/templates/offerCar.html
  9. +3
    -7
      www/templates/signup.html
  10. +57
    -54
      www/templates/travel.html

+ 3
- 0
www/index.html

@ -11,6 +11,9 @@
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-indigo.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

+ 1
- 1
www/js/app.js

@ -94,7 +94,7 @@ angular.module('starter', [
})
.state('app.travel', {
url: '/travels/:travelId',
url: '/travels/:travelid',
views: {
'menuContent': {
templateUrl: 'templates/travel.html',

+ 17
- 20
www/js/travel.js

@ -1,25 +1,25 @@
angular.module('app.travel', ['pascalprecht.translate'])
.controller('TravelCtrl', function($scope, $stateParams, $http, $ionicModal, $ionicPopup, $filter) {
if(localStorage.getItem('c_token')){// adding token to the headers
$http.defaults.headers.common['X-Access-Token'] = localStorage.getItem('c_token');
}
$scope.storageusername=localStorage.getItem("c_username");
console.log($stateParams.travelId);
$scope.travels= JSON.parse(localStorage.getItem('c_travels'));
$scope.travel = $filter('filter')($scope.travels, $stateParams.travelId, true)[0];
/*$http.get(urlapi + 'travels/comment/'+$stateParams.travelId)
.success(function(data, status, headers,config){
$scope.travel={};
$scope.doRefresh = function() {
/* travels refresh: */
$http.get(urlapi + 'travels/id/' + $stateParams.travelid)
.then(function(data){
console.log('data success travels');
console.log(data); // for browser console
$scope.comments = data; // for UI
})
.error(function(data, status, headers,config){
$scope.travel = data.data; // for UI
$scope.$broadcast('scroll.refreshComplete');//refresher stop
}, function(data){
console.log('data error');
})
.then(function(result){
comments = result.data;
});*/
$scope.$broadcast('scroll.refreshComplete');//refresher stop
$ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
});
};
$scope.doRefresh();
$scope.deleteTravel = function(){
@ -147,9 +147,6 @@ console.log($scope.newComment);
});
$scope.closeNewComment();
};
console.log("a");
console.log($scope.storageusername);
console.log($scope.travel.owner);
$scope.arrayObjectIndexOf = function(myArray, searchTerm, property) {

+ 5
- 218
www/js/travels.js

@ -3,236 +3,23 @@ angular.module('app.travels', ['pascalprecht.translate'])
.controller('TravelsCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) {
$scope.travels=[];
$scope.doRefresh = function() {
/* travels refresh: */
$http.get(urlapi + 'travels')
.success(function(data, status, headers,config){
.then(function(data){
console.log('data success travels');
console.log(data); // for browser console
$scope.travels = data; // for UI
localStorage.setItem('c_travels', JSON.stringify($scope.travels));
localStorage.setItem('c_travelsLastDate', JSON.stringify(new Date()));
$scope.travels = data.data; // for UI
$scope.$broadcast('scroll.refreshComplete');//refresher stop
})
.error(function(data, status, headers,config){
}, function(data){
console.log('data error');
$scope.$broadcast('scroll.refreshComplete');//refresher stop
$ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
})
.then(function(result){
travels = result.data;
$ionicLoading.show({ template: 'Travels actualized from server!', noBackdrop: true, duration: 2000 });
});
/* users refresh: */
$http.get(urlapi + 'users')
.success(function(data, status, headers, config){
console.log('data success users');
console.log(data); // for browser console
$scope.users = data; // for UI
localStorage.setItem('c_users', JSON.stringify($scope.users));
$scope.$broadcast('scroll.refreshComplete');//refresher stop
//set userdata
$scope.userdata = $filter('filter')($scope.users, {username: $scope.storageusername}, true)[0];
console.log("userdata");
console.log($scope.userdata);
localStorage.setItem("c_userdata", JSON.stringify($scope.userdata));
})
.error(function(data, status, headers,config){
console.log('data error');
$scope.$broadcast('scroll.refreshComplete');//refresher stop
})
.then(function(result){
users = result.data;
});
};
$scope.newtravel={};
/*$scope.newtravel={
title: "prova",
from: "prova",
to: "prova",
seats: 3,
package: true,
phone: 123,
telegram: "telusr",
description: "this is the description of prova"
};*/
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/newofferingtravel.html', {
scope: $scope
}).then(function(modal) {
$scope.modalOffering = modal;
});
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/newaskingtravel.html', {
scope: $scope
}).then(function(modal) {
$scope.modalAsking = modal;
});
$ionicModal.fromTemplateUrl('templates/newaskingpackage.html', {
scope: $scope
}).then(function(modal) {
$scope.modalPackage = modal;
});
// Triggered in the login modal to close it
$scope.closeNewOfferingTravel = function() {
$scope.modalOffering.hide();
};
// Triggered in the login modal to close it
$scope.closeNewAskingTravel = function() {
$scope.modalAsking.hide();
};
$scope.closeNewAskingPackage = function() {
$scope.modalPackage.hide();
};
// Open the login modal
$scope.showNewOfferingTravel = function() {
$scope.modalOffering.show();
};
// Open the login modal
$scope.showNewAskingTravel = function() {
$scope.modalAsking.show();
};
$scope.showNewAskingPackage = function() {
$scope.modalPackage.show();
};
// Perform the login action when the user submits the login form
$scope.doNewOfferingTravel = function() {
console.log('Doing new travel', $scope.newtravel);
$scope.newtravel.icon="lorry";
$scope.newtravel.generateddate=$scope.newtravel.date;
/*$scope.newtravel.owner=localStorage.getItem("c_username");
$scope.newtravel.telegram=JSON.parse(localStorage.getItem("c_userdata")).telegram;
$scope.newtravel.phone=JSON.parse(localStorage.getItem("c_userdata")).phone;*/
$scope.newtravel.modality="offering";
//$scope.newtravel.token=localStorage.getItem("c_token");
console.log($scope.newtravel);
$http({
url: urlapi + '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);
$scope.travels=response.data;
localStorage.setItem('c_travels', JSON.stringify($scope.travels));
localStorage.setItem('c_travelsLastDate', JSON.stringify(new Date()));
$scope.newtravel={};
if(response.data.success==false){
$ionicLoading.show({ template: 'failed to generate new travel', noBackdrop: true, duration: 2000 });
}
},
function(response) { // optional
// failed
$ionicLoading.show({ template: 'failed to generate new publication, all input fields needed', noBackdrop: true, duration: 2000 });
});
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeNewOfferingTravel();
}, 1000);
};
$scope.doNewAskingTravel = function() {
console.log('Doing new travel', $scope.newtravel);
$scope.newtravel.icon="lorry";
$scope.newtravel.generateddate=$scope.newtravel.date;
/*$scope.newtravel.owner=localStorage.getItem("c_username");
$scope.newtravel.telegram=JSON.parse(localStorage.getItem("c_userdata")).telegram;
$scope.newtravel.phone=JSON.parse(localStorage.getItem("c_userdata")).phone;*/
$scope.newtravel.modality="asking";
console.log($scope.newtravel);
$http({
url: urlapi + '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);
$scope.travels=response.data;
localStorage.setItem('c_travels', JSON.stringify($scope.travels));
localStorage.setItem('c_travelsLastDate', JSON.stringify(new Date()));
$scope.newtravel={};
if(response.data.success==false){
$ionicLoading.show({ template: 'failed to generate new asking travel', noBackdrop: true, duration: 2000 });
}
},
function(response) { // optional
// failed
$ionicLoading.show({ template: 'failed to generate new publication, all input fields needed', noBackdrop: true, duration: 2000 });
});
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeNewAskingTravel();
}, 1000);
};
$scope.doNewAskingPackage = function() {
console.log('Doing new package', $scope.newtravel);
$scope.newtravel.icon="lorry";
$scope.newtravel.generateddate=$scope.newtravel.date;
/*$scope.newtravel.owner=localStorage.getItem("c_username");
$scope.newtravel.telegram=JSON.parse(localStorage.getItem("c_userdata")).telegram;
$scope.newtravel.phone=JSON.parse(localStorage.getItem("c_userdata")).phone;*/
$scope.newtravel.package=true;
$scope.newtravel.modality="package";
console.log($scope.newtravel);
$http({
url: urlapi + '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);
$scope.travels=response.data;
localStorage.setItem('c_travels', JSON.stringify($scope.travels));
localStorage.setItem('c_travelsLastDate', JSON.stringify(new Date()));
$scope.newtravel={};
if(response.data.success==false){
$ionicLoading.show({ template: 'failed to generate new asking package', noBackdrop: true, duration: 2000 });
}
},
function(response) { // optional
// failed
$ionicLoading.show({ template: 'failed to generate new publication, all input fields needed', noBackdrop: true, duration: 2000 });
});
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeNewAskingPackage();
}, 1000);
};
$scope.doRefresh();
});

+ 5
- 9
www/js/user.js

@ -4,18 +4,14 @@ angular.module('app.user', ['pascalprecht.translate'])
$scope.user={};
$http.get(urlapi + 'users/getByUserId/'+$stateParams.userid)
.success(function(data, status, headers,config){
$http.get(urlapi + 'users/id/'+$stateParams.userid)
.then(function(data, status, headers,config){
console.log('data success');
console.log(data); // for browser console
$scope.user = data; // for UI
})
.error(function(data, status, headers,config){
$scope.user = data.data; // for UI
},function(data, status, headers,config){
console.log('data error');
})
.then(function(result){
travels = result.data;
});
});

+ 1
- 21
www/js/users.js

@ -6,27 +6,6 @@ angular.module('app.users', ['pascalprecht.translate'])
$scope.users=JSON.parse(localStorage.getItem('c_users'));
$scope.doRefresh = function() {
/* travels refresh: */
$http.get(urlapi + 'travels')
.success(function(data, status, headers,config){
console.log('data success');
console.log(data); // for browser console
$scope.travels = data; // for UI
localStorage.setItem('c_travels', JSON.stringify($scope.travels));
localStorage.setItem('c_travelsLastDate', JSON.stringify(new Date()));
$scope.$broadcast('scroll.refreshComplete');//refresher stop
})
.error(function(data, status, headers,config){
console.log('data error');
$scope.$broadcast('scroll.refreshComplete');//refresher stop
$ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
})
.then(function(result){
travels = result.data;
$ionicLoading.show({ template: 'Travels actualized from server!', noBackdrop: true, duration: 2000 });
});
/* users refresh: */
$http.get(urlapi + 'users')
@ -51,4 +30,5 @@ angular.module('app.users', ['pascalprecht.translate'])
users = result.data;
});
};
$scope.doRefresh();
});

+ 2
- 1
www/templates/menu.html

@ -44,7 +44,8 @@
<i class="icon ion-person-stalker"></i> {{'Users' | translate }}
</a>
<a class="item item-icon-left o_bSidenav" menu-close href="#/app/notifications">
<i class="icon ion-android-notifications-none"></i> {{'Notifications' | translate }}
<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>
</a>
<a class="item item-icon-left o_bSidenav" menu-close href="#/app/settings">

+ 1
- 1
www/templates/offerCar.html

@ -50,7 +50,7 @@
<input ng-model="newtravel.description" type="text" placeholder="Description">
</label>
<p class="padding">
<button ng-click="createTravel()" class="button button-calm o_floatRight">
<button ng-click="createTravel()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent o_floatRight">
{{'Create_travel' | translate}}
</button>
</p>

+ 3
- 7
www/templates/signup.html

@ -29,16 +29,12 @@
<input type="text" ng-model="signupData.telegram">
</label>
<label class="item item-input">
<span class="input-label">{{'Description' | translate }}*</span>
<span class="input-label">{{'Description' | translate }}</span>
<input type="text" ng-model="signupData.description">
</label>
<!--<label class="item item-input">
<span class="input-label">{{'Avatar' | translate }}</span>
<input type="text" ng-model="signupData.avatar">
</label>-->
<p>{{'Avatar' | translate }}*: <b>{{signupData.avatar}}</b></p>
<!--<p>{{'Avatar' | translate }}*: <b>{{signupData.avatar}}</b></p>
<img ng-repeat="avatar in avatars" ng-click="avatarSelect('{{avatar}}')" ng-src="img/avatars/{{avatar}}.png" class="o-imgSelectAvatar" >
-->
<label class="item">
<button class="button button-block button-positive" type="submit">{{'Signup' | translate }}</button>
</label>

+ 57
- 54
www/templates/travel.html

@ -1,21 +1,24 @@
<ion-view view-title="{{'Travel' | translate}}">
<ion-content>
<div class="item item-avatar">
<img ng-src="img/{{travel.modality}}.png" />
<div class="item-note o-text-right">
<p>
<a class="o-badge-calm" href="#/app/users/{{travel.owner}}">{{travel.owner}}</a>
</p>
<p ng-show="storageusername==travel.owner" class="text-right">
<a 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>
<img ng-src="img/{{travel.type}}.png" />
<div class="item-note o-text-right">
<p>
<span class="mdl-chip mdl-chip--contact" ng-href="#/app/users/{{travel.user._id}}">
<img class="mdl-chip__contact" src="{{travel.user.avatar}}"></img>
<span class="mdl-chip__text">{{travel.user.username}}</span>
</span>
</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>{{travel.title}}</h2>
<div class="">{{travel.date | date:"dd/MM HH:mm a"}}</div>
</div>
<div class="item item-body">
<div class='row'>
<p class="o-bold">{{travel.description}}</p>
<p class="o-bold">{{travel.description}}</p>
</div>
<div class="row">
<p><img class='o-imgTitle' src="img/from-to.png" />{{travel.from}} --> {{travel.to}}</p>
@ -23,11 +26,11 @@
<div class='row'>
<div class='col'>
<p ng-show="travel.phone">
<img class='o-imgMenu' src="img/smartphone.png" /> {{travel.phone}}
<img class='o-imgMenu' src="img/smartphone.png" /> {{travel.user.phone}}
</p>
<p ng-show="travel.telegram">
<!--<a ng-href="https://telegram.me/{{travel.telegram}}" target="_blank" class="button">-->
<img class='o-imgMenu' src="img/telegram.png" /> @{{travel.telegram}}
<img class='o-imgMenu' src="img/telegram.png" /> @{{travel.user.telegram}}
<!--</a>-->
</p>
</div>
@ -37,65 +40,65 @@
</p>
<p ng-show="travel.package">
<div class="o-mini-text">
<div ng-show="travel.modality=='offering'">{{'Can_carry_package' | translate}} <img src="img/package.png" class="o-imgMenu" /></div>
<div ng-show="travel.modality=='asking'">{{'Need_to_carry_package' | translate}} <img src="img/package.png" class="o-imgMenu" /></div>
<div ng-show="travel.modality=='offering'">{{'Can_carry_package' | translate}} <img src="img/package.png" class="o-imgMenu" /></div>
<div ng-show="travel.modality=='asking'">{{'Need_to_carry_package' | translate}} <img src="img/package.png" class="o-imgMenu" /></div>
</div>
</p>
<p>
<div ng-show="travel.modality=='offering'">{{'n_Seats' | translate}}: {{travel.seats}}</div>
<div ng-show="travel.modality=='asking'">{{'n_People' | translate}}: {{travel.seats}}</div>
</p>
<p>
<div ng-show="travel.modality=='offering'">{{'n_Seats' | translate}}: {{travel.seats}}</div>
<div ng-show="travel.modality=='asking'">{{'n_People' | translate}}: {{travel.seats}}</div>
</p>
</div>
</div>
<br>
<br>
<div ng-show="storageusername && storageusername!=travel.owner" class="text-right">
<p class='text-right'>
<div ng-show="arrayObjectIndexOf(travel.joins, storageusername, 'joinedUsername')==-1">
<a ng-show="travel.modality=='offering'" ng-click="joinTravel()" class="button button-calm o-pull-right">{{'Ask_to_join' | translate}}</a>
<a ng-show="travel.modality=='asking'" ng-click="joinTravel()" class="button button-calm o-pull-right">{{'Offer_car' | translate}}</a>
<a ng-show="travel.modality=='package'" ng-click="joinTravel()" class="button button-calm o-pull-right">{{'Offer_car' | translate}}</a>
</div>
<div ng-show="storageuser._id!=travel.user._id" class="text-right">
<p class='text-right'>
<div ng-show="arrayObjectIndexOf(travel.joins, storageuser.username, 'joinPetitions')==-1">
<a ng-show="travel.modality=='offering'" ng-click="joinTravel()" class="button button-calm o-pull-right">{{'Ask_to_join' | translate}}</a>
<a ng-show="travel.modality=='asking'" ng-click="joinTravel()" class="button button-calm o-pull-right">{{'Offer_car' | translate}}</a>
<a ng-show="travel.modality=='package'" ng-click="joinTravel()" class="button button-calm o-pull-right">{{'Offer_car' | translate}}</a>
</div>
<div ng-show="arrayObjectIndexOf(travel.joins, storageusername, 'joinedUsername')!=-1">
<a ng-show="travel.modality=='offering'" ng-click="unjoinTravel()" class="button button-assertive o-pull-right">{{'Unjoin' | translate}}</a>
<a ng-show="travel.modality=='asking'" ng-click="unjoinTravel()" class="button button-assertive o-pull-right">{{'Unoffer_car' | translate}}</a>
<a ng-show="travel.modality=='package'" ng-click="unjoinTravel()" class="button button-assertive o-pull-right">{{'Unoffer_car' | translate}}</a>
</div>
</p>
</div>
<div ng-show="arrayObjectIndexOf(travel.joins, storageuser.username, 'joinPetitions')!=-1">
<a ng-show="travel.modality=='offering'" ng-click="unjoinTravel()" class="button button-assertive o-pull-right">{{'Unjoin' | translate}}</a>
<a ng-show="travel.modality=='asking'" ng-click="unjoinTravel()" class="button button-assertive o-pull-right">{{'Unoffer_car' | translate}}</a>
<a ng-show="travel.modality=='package'" ng-click="unjoinTravel()" class="button button-assertive o-pull-right">{{'Unoffer_car' | translate}}</a>
</div>
</p>
</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">
<img ng-src="img/avatars/{{join.joinedAvatar}}.png" class="o-img-joined" />{{join.joinedUsername}}<br>
</a>
{{'Joined_users' | translate}}:<br>
<a ng-repeat="join in travel.joins" ng-href="#/app/users/{{join.joinedUsername}}" class="button button-small button-dark">
<img ng-src="img/avatars/{{join.joinedAvatar}}.png" class="o-img-joined" />{{join.joinedUsername}}<br>
</a>
</div>
<div class="item item-body">
<div ng-show="travel.comments[0]">
{{'Comments' | translate}}:<br>
<a ng-repeat="comment in travel.comments" ng-href="#/app/users/{{comment.commentUsername}}" class="item">
<h3><img ng-src="img/avatars/{{comment.commentAvatar}}.png" class="o-img-joined" />{{comment.commentUsername}}</h3>
<p>{{comment.comment}}</p>
</a>
</div>
<div ng-show="storageusername">
<a ng-click="showNewComment()" ng-show="!doingNewComment" class="button button-small button-calm right">{{'New_comment' | translate}}</a>
</div>
<form class="list" ng-show="doingNewComment">
<label class="item item-input item-floating-label">
<div ng-show="travel.comments[0]">
{{'Comments' | translate}}:<br>
<a ng-repeat="comment in travel.comments" ng-href="#/app/users/{{comment.commentUsername}}" class="item">
<h3><img ng-src="img/avatars/{{comment.commentAvatar}}.png" class="o-img-joined" />{{comment.commentUsername}}</h3>
<p>{{comment.comment}}</p>
</a>
</div>
<div ng-show="storageusername">
<a ng-click="showNewComment()" ng-show="!doingNewComment" class="button button-small button-calm right">{{'New_comment' | translate}}</a>
</div>
<form class="list" ng-show="doingNewComment">
<label class="item item-input item-floating-label">
<input ng-model="newComment.comment" type="text" placeholder="Comment">
</label>
<button ng-click="closeNewComment()" class="button button-small button-assertive">
<button ng-click="closeNewComment()" class="button button-small button-assertive">
{{'Cancel' | translate}}
</button>
<button ng-click="doNewComment()" ng-show="newComment.comment" class="button button-small button-calm">
<button ng-click="doNewComment()" ng-show="newComment.comment" class="button button-small button-calm">
{{'Post_comment' | translate}}
</button>
</form>
</form>
</div>
</ion-content>
</ion-view>

Loading…
Cancel
Save