added webapp to view travels

This commit is contained in:
arnaucode
2018-06-16 21:15:56 +02:00
parent 3691142a88
commit 1d9f657bba
19 changed files with 924 additions and 1 deletions

48
app/views/travel/travel.html Executable file
View File

@@ -0,0 +1,48 @@
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="panel">
<div class="panel-body">
<div class="pull-right">
<!-- <div class="row-picture" style="font-size:140%; text-align:right;" title="user">
<img style="width:40px;" class="circle" ng-src="{{travel.user.avatar}}" alt="icon"> {{travel.user.username}}
</div> -->
{{travel.date | date:"dd/MM HH:mm a"}}
</div>
<div class="list-group">
<div class="list-group-item">
<div class="pull-right"></div>
<h4>
<i ng-show="travel.type=='offering'" class="fa fa-car fa-2x"></i>
<i ng-show="travel.type=='asking'" class="fa fa-question fa-2x"></i>
<i ng-show="travel.type=='package'" class="fa fa-archive fa-2x"></i>
{{travel.title}}
</h4>
</div>
</div>
<p>
From: <b>{{travel.from.name}}</b>
</p>
<p>
To: <b>{{travel.from.name}}</b>
</p>
<p ng-show="travel.description">
Description: <b>{{travel.description}}</b>
</p>
<p ng-show="travel.package">
Can carry package
</p>
</div>
</div>
<div class="panel">
<div class="panel-heading c_deepPurple300">
<h3 class="panel-title">Map</h3>
</div>
<div class="panel-body">
<leaflet width="100%" height="400px" markers="markers" center="center"
tiles="tiles" id="map-simple-map"></leaflet>
</div>
</div>
</div>
</div>

61
app/views/travel/travel.js Executable file
View File

@@ -0,0 +1,61 @@
'use strict';
angular.module('app.travel', ['ngRoute', 'ui-leaflet'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/travel/:travelid', {
templateUrl: 'views/travel/travel.html',
controller: 'TravelCtrl'
});
}])
.controller('TravelCtrl', function($scope, $http, $routeParams,
leafletData, leafletBoundsHelpers) {
$scope.travel = {};
//map
$scope.center = {
/*lat: 0,
lng: 0,
zoom: 1*/
};
$scope.bounds = {};
$scope.markers = [];
$scope.tiles = {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
options: {
attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
};
$http.get(urlapi + 'travels/id/' + $routeParams.travelid)
.then(function(data, status, headers, config) {
console.log('data success');
console.log(data);
$scope.travel = data.data;
//map
$scope.markers = [];
$scope.markers.push({
lat: Number($scope.travel.from.lat),
lng: Number($scope.travel.from.long),
message: $scope.travel.from.name
});
$scope.markers.push({
lat: Number($scope.travel.to.lat),
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
};
}, function(data, status, headers, config) {
console.log('data error');
});
});