added user and travel page
arnaucode idoctnef@openmailbox.org
Tue, 25 Jul 2017 22:55:36 +0200
10 files changed,
250 insertions(+),
60 deletions(-)
M
README.md
→
README.md
@@ -1,1 +1,6 @@
-# carsincommonAdminWeb+# carsincommonAdminWeb + +- server code: https://github.com/arnaucode/carsincommonServer +- frontend app code: https://github.com/arnaucode/carsincommonApp +- images server: https://github.com/arnaucode/goImgServer +- admin web: https://github.com/arnaucode/carsincommonAdminWeb
M
app.js
→
app.js
@@ -1,12 +1,17 @@
'use strict'; +var urlapi = "http://localhost:3000/api/"; +//var urlapi = "http://192.168.1.36:3000/api/"; +//var urlapi = "http://51.255.193.106:3000/api/"; + // Declare app level module which depends on views, and components angular.module('adminApp', [ 'ngRoute', 'ngMessages', 'angularBootstrapMaterial', 'app.main', - 'app.user' + 'app.user', + 'app.travel' ]). config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { $locationProvider.hashPrefix('!');
M
index.html
→
index.html
@@ -59,6 +59,7 @@ <!-- your app's js -->
<script src="app.js"></script> <script src="views/main/main.js"></script> <script src="views/user/user.js"></script> + <script src="views/travel/travel.js"></script> </body> </html>
M
views/main/main.html
→
views/main/main.html
@@ -10,39 +10,17 @@ <h3 class="panel-title">All users</h3>
</div> <div class="panel-body"> <div class="list-group"> - <div class="list-group-item"> - <div class="row-picture"> - <img class="circle" src="http://lorempixel.com/56/56/people/2" alt="icon"> - </div> - <div class="row-content"> - <h4 class="list-group-item-heading">User 1</h4> - - <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus</p> - </div> - </div> - <div class="list-group-separator"></div> - <div class="list-group-item"> - <div class="row-picture"> - <img class="circle" src="http://lorempixel.com/56/56/people/5" alt="icon"> - </div> - <div class="row-content"> - <h4 class="list-group-item-heading">User 2</h4> - - <p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p> - </div> - </div> - <div class="list-group-separator"></div> - <div class="list-group-item"> + <a ng-repeat="user in users" ng-href="#!/user/{{user._id}}" class="list-group-item"> <div class="row-picture"> - <img class="circle" src="http://lorempixel.com/56/56/people/11" alt="icon"> + <img class="circle" ng-src="{{user.avatar}}" alt="icon"> </div> <div class="row-content"> - <h4 class="list-group-item-heading">User 3</h4> + <h4 class="list-group-item-heading">{{user.username}}</h4> - <p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p> + <p class="list-group-item-text">{{user.description}}</p> </div> - </div> - <div class="list-group-separator"></div> + <div class="list-group-separator"></div> + </a> </div> <br> <div class="btn btn-raised c_deepPurple300">See all</div>@@ -58,30 +36,26 @@ <div class="panel-body">
<table class="table table-striped table-hover "> <thead> <tr> - <th>From</th> - <th>To</th> + <th>Type</th> + <th>Title</th> + <th>Date</th> <th>User</th> <th>nºJoins</th> + <th></th> </tr> </thead> <tbody> - <tr> - <td>Greece</td> - <td>Portugal</td> - <td>User1</td> - <td>2</td> - </tr> - <tr> - <td>Paris</td> - <td>Roma</td> - <td>User2</td> - <td>3</td> - </tr> - <tr> - <td>Madrid</td> - <td>Dublin</td> - <td>User1</td> - <td>1</td> + <tr ng-repeat="travel in travels"> + <td>{{travel.type}}</td> + <td>{{travel.title}}</td> + <td>{{travel.date | date}}</td> + <td> + <a ng-href="#!/user/{{travel.user._id}}"> + {{travel.user.username}} + </a> + </td> + <td>{{travel.joins.length}}</td> + <td><a ng-href="#!/travel/{{travel._id}}">View</a></td> </tr> </tbody> </table>
M
views/main/main.js
→
views/main/main.js
@@ -9,6 +9,27 @@ controller: 'MainCtrl'
}); }]) -.controller('MainCtrl', [function() { +.controller('MainCtrl', function($scope, $http) { + $scope.users = []; + $scope.loadMorePagination = true; + $scope.page = 0; + + $http.get(urlapi + 'users?page=' + $scope.page) + .then(function(data) { + console.log('data success'); + console.log(data); + $scope.users=data.data; + + }, function(data) { + console.log('data error'); + }); + $http.get(urlapi + 'travels?page=' + $scope.page) + .then(function(data) { + console.log('data success'); + console.log(data); + $scope.travels=data.data; -}]); + }, function(data) { + console.log('data error'); + }); +});
A
views/travel/travel.html
@@ -0,0 +1,77 @@
+<div ng-include="'views/navbar.html'"></div> + + +<div class="container"> + <div class="row"> + <div class="col-sm-4"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">{{travel.title}}</h3> + </div> + <div class="panel-body"> + <p> + From: {{travel.from.name}} + </p> + <p> + To: {{travel.from.name}} + </p> + <p ng-show="travel.package"> + Can transport package + </p> + </div> + </div> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">Map</h3> + </div> + <div class="panel-body"> + here the map + </div> + </div> + </div> + <div class="col-sm-4"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">{{travel.joinPetitions.length}} Pendent joins</h3> + </div> + <div class="panel-body"> + <div class="list-group"> + <a ng-repeat="user in travel.joinPetitions" ng-href="#!/user/{{user._id}}" class="list-group-item"> + <div class="row-picture"> + <img class="circle" ng-src="{{user.avatar}}" alt="icon"> + </div> + <div class="row-content"> + <h4 class="list-group-item-heading">{{user.username}}</h4> + + <p class="list-group-item-text">{{user.description}}</p> + </div> + <div class="list-group-separator"></div> + </a> + </div> + </div> + </div> + </div> + + <div class="col-sm-4"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">Accepted users {{travel.joins.length}}/{{travel.seats}}</h3> + </div> + <div class="panel-body"> + <div class="list-group"> + <a ng-repeat="user in travel.joins" ng-href="#!/user/{{user._id}}" class="list-group-item"> + <div class="row-picture"> + <img class="circle" ng-src="{{user.avatar}}" alt="icon"> + </div> + <div class="row-content"> + <h4 class="list-group-item-heading">{{user.username}}</h4> + + <p class="list-group-item-text">{{user.description}}</p> + </div> + <div class="list-group-separator"></div> + </a> + </div> + </div> + </div> + </div> + </div>
A
views/travel/travel.js
@@ -0,0 +1,23 @@
+'use strict'; + +angular.module('app.travel', ['ngRoute']) + +.config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/travel/:travelid', { + templateUrl: 'views/travel/travel.html', + controller: 'TravelCtrl' + }); +}]) + +.controller('TravelCtrl', function($scope, $http, $routeParams) { + $scope.travel = {}; + $http.get(urlapi + 'travels/id/' + $routeParams.travelid) + .then(function(data, status, headers, config) { + console.log('data success'); + console.log(data); + + $scope.travel = data.data; + }, function(data, status, headers, config) { + console.log('data error'); + }); +});
M
views/user/user.html
→
views/user/user.html
@@ -1,5 +1,80 @@
-<p>This is the partial for view 2.</p> -<p> - Showing of 'interpolate' filter: - {{ 'Current version is v%VERSION%.' | interpolate }} -</p> +<div ng-include="'views/navbar.html'"></div> + + +<div class="container"> + <div class="row"> + <div class="col-sm-4"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">User profile</h3> + </div> + <div class="panel-body"> + <div class="list-group"> + <a ng-href="#!/user" class="list-group-item"> + <div class="row-picture"> + <img class="circle" ng-src="{{user.avatar}}" alt="icon"> + </div> + <div class="row-content"> + <h4 class="list-group-item-heading">{{user.username}}</h4> + + <p class="list-group-item-text">{{user.description}}</p> + </div> + </a> + </div> + <p> + {{user.email}} + </p> + <p> + {{user.telegram}} + </p> + <p> + {{user.phone}} + </p> + </div> + </div> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">User likes</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + </div> + <div class="col-sm-8"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">User travels</h3> + </div> + <div class="panel-body"> + <table class="table table-striped table-hover "> + <thead> + <tr> + <th>Type</th> + <th>Title</th> + <th>Date</th> + <th>User</th> + <th>nºJoins</th> + <th></th> + </tr> + </thead> + <tbody> + <tr ng-repeat="travel in user.travels"> + <td>{{travel.type}}</td> + <td>{{travel.title}}</td> + <td>{{travel.date | date}}</td> + <td> + <a ng-href="#!/user/{{travel.user._id}}"> + {{travel.user.username}} + </a> + </td> + <td>{{travel.joins.length}}</td> + <td><a ng-href="#!/travel/{{travel._id}}">View</a></td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> +</div>
M
views/user/user.js
→
views/user/user.js
@@ -3,12 +3,21 @@
angular.module('app.user', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/user', { + $routeProvider.when('/user/:userid', { templateUrl: 'views/user/user.html', controller: 'UserCtrl' }); }]) -.controller('UserCtrl', [function() { +.controller('UserCtrl', function($scope, $http, $routeParams) { + $scope.user = {}; + $http.get(urlapi + 'users/id/' + $routeParams.userid) + .then(function(data, status, headers, config) { + console.log('data success'); + console.log(data); -}]); + $scope.user = data.data; + }, function(data, status, headers, config) { + console.log('data error'); + }); +});