kopia lustrzana https://github.com/FacilMap/facilmap
Migrate "View as table" dialog to bootstrap
Candid Dauth
rodzic
4d3864ccc8
commit
e1951a6ce4
|
|
@ -193,6 +193,10 @@ table.border input, table.border textarea, table.border select {
|
|||
width: 1px;
|
||||
}
|
||||
|
||||
.modal-fs {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.messages {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,44 @@
|
|||
<h2 ng-repeat-start="type in types">{{type.name}}</h2>
|
||||
<table ng-if="type.type == 'marker'" class="border">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
|
||||
<th>Position</th>
|
||||
<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="marker in markers | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
|
||||
<td>{{marker.name}}</td>
|
||||
<td>{{marker.lat}},{{marker.lon}}</td>
|
||||
<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="marker.data[field.name]"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table ng-repeat-end ng-if="type.type == 'line'" class="border">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
|
||||
<th class="sort" ng-click="sort(type, '__distance')">Distance <span ng-class="getSortIcon(type, '__distance')"></span></th>
|
||||
<th class="sort" ng-click="sort(type, '__time')">Time <span ng-class="getSortIcon(type, '__time')"></span></th>
|
||||
<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="line in lines | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
|
||||
<td>{{line.name}}</td>
|
||||
<td>{{round(line.distance, 2)}} km</td>
|
||||
<td><span ng-show="line.time != null">{{formatTime(line.time)}} h ({{routingMode(line.mode)}})</span></td>
|
||||
<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="line.data[field.name]"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="modal-header">
|
||||
<button class="close" ng-click="$dismiss()"><span aria-hidden="true">×</span></button>
|
||||
<h3 class="modal-title">Table</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h2 ng-repeat-start="type in types">{{type.name}}</h2>
|
||||
<table ng-if="type.type == 'marker'" class="table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
|
||||
<th>Position</th>
|
||||
<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="marker in markers | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
|
||||
<td>{{marker.name}}</td>
|
||||
<td>{{marker.lat}},{{marker.lon}}</td>
|
||||
<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="marker.data[field.name]"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table ng-repeat-end ng-if="type.type == 'line'" class="table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" ng-click="sort(type, '__name')">Name <span ng-class="getSortIcon(type, '__name')"></span></th>
|
||||
<th class="sort" ng-click="sort(type, '__distance')">Distance <span ng-class="getSortIcon(type, '__distance')"></span></th>
|
||||
<th class="sort" ng-click="sort(type, '__time')">Time <span ng-class="getSortIcon(type, '__time')"></span></th>
|
||||
<th class="sort" ng-repeat="field in type.fields" ng-click="sort(type, field.name)">{{field.name}} <span ng-class="getSortIcon(type, field.name)"></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="line in lines | fpType:type.id | orderBy : getSortField(type) : sortOrder[type.id]">
|
||||
<td>{{line.name}}</td>
|
||||
<td>{{round(line.distance, 2)}} km</td>
|
||||
<td><span ng-show="line.time != null">{{formatTime(line.time)}} h ({{routingMode(line.mode)}})</span></td>
|
||||
<td ng-repeat="field in type.fields" fp-type-field-content="field" fp-type-field-model="line.data[field.name]"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" ng-click="$dismiss()">Close</button>
|
||||
</div>
|
||||
|
|
@ -11,7 +11,23 @@
|
|||
};
|
||||
});
|
||||
|
||||
fp.app.factory("fpTable", function(fpSocket, fpDialogs, $rootScope, fpTypeFields) {
|
||||
fp.app.factory("fpTable", function(fpSocket, $rootScope, $uibModal) {
|
||||
return {
|
||||
showTable : function() {
|
||||
var socket = fpSocket($rootScope.padId);
|
||||
socket.updateBbox({ top: 90, left: -180, right: 180, bottom: -90, zoom: 0 });
|
||||
|
||||
$uibModal.open({
|
||||
templateUrl: "table/table.html",
|
||||
scope: socket,
|
||||
controller: "fpTableCtrl",
|
||||
size: "fs"
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
fp.app.controller("fpTableCtrl", function($scope, fpTypeFields) {
|
||||
function _getField(type, fieldName) {
|
||||
for(var i=0; i<type.fields.length; i++) {
|
||||
if(type.fields[i].name == fieldName)
|
||||
|
|
@ -23,39 +39,34 @@
|
|||
return (text ? ""+text : "").trim().toLowerCase().replace(/\d+/g, function(m) { return ("000000000"+m).slice(-10) });
|
||||
}
|
||||
|
||||
return {
|
||||
showTable : function() {
|
||||
var socket = fpSocket($rootScope.padId);
|
||||
socket.updateBbox({ top: 90, left: -180, right: 180, bottom: -90, zoom: 0 });
|
||||
$scope.sort = function(type, field) {
|
||||
$scope.sortOrder[type.id] = (($scope.sortField[type.id] == null ? "__name" : $scope.sortField[type.id]) == field ? !$scope.sortOrder[type.id] : false);
|
||||
$scope.sortField[type.id] = field;
|
||||
};
|
||||
|
||||
socket.sort = function(type, field) {
|
||||
socket.sortOrder[type.id] = ((socket.sortField[type.id] == null ? "__name" : socket.sortField[type.id]) == field ? !socket.sortOrder[type.id] : false);
|
||||
socket.sortField[type.id] = field;
|
||||
$scope.getSortField = function(type) {
|
||||
var f = $scope.sortField[type.id];
|
||||
|
||||
if(f == null || f == "__name" || f == "__distance" || f == "__time")
|
||||
return function(it) { return _normaliseNumbers(it[f ? f.replace(/^__/, "") : "name"]) };
|
||||
else
|
||||
return function(it) { return _normaliseNumbers($("<div/>").append(fpTypeFields.formatField(_getField(type, f), it.data[f])).text()); };
|
||||
};
|
||||
|
||||
$scope.getSortIcon = function(type, fieldName) {
|
||||
if(($scope.sortField[type.id] == null ? "__name" : $scope.sortField[type.id]) == fieldName) {
|
||||
return {
|
||||
'glyphicon': true,
|
||||
'glyphicon-triangle-bottom': !$scope.sortOrder[type.id],
|
||||
'glyphicon-triangle-top': $scope.sortOrder[type.id]
|
||||
};
|
||||
|
||||
socket.getSortField = function(type) {
|
||||
var f = socket.sortField[type.id];
|
||||
|
||||
if(f == null || f == "__name" || f == "__distance" || f == "__time")
|
||||
return function(it) { return _normaliseNumbers(it[f ? f.replace(/^__/, "") : "name"]) };
|
||||
else
|
||||
return function(it) { return _normaliseNumbers($("<div/>").append(fpTypeFields.formatField(_getField(type, f), it.data[f])).text()); };
|
||||
};
|
||||
|
||||
socket.getSortIcon = function(type, fieldName) {
|
||||
return {
|
||||
'ui-icon': ((socket.sortField[type.id] == null ? "__name" : socket.sortField[type.id]) == fieldName),
|
||||
'ui-icon-triangle-1-s': !socket.sortOrder[type.id],
|
||||
'ui-icon-triangle-1-n': socket.sortOrder[type.id]
|
||||
};
|
||||
};
|
||||
|
||||
socket.sortField = { };
|
||||
socket.sortOrder = { };
|
||||
|
||||
fpDialogs.open("table/table.html", socket, "Table", null, true);
|
||||
} else {
|
||||
return { };
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
$scope.sortField = { };
|
||||
$scope.sortOrder = { };
|
||||
})
|
||||
|
||||
})(FacilPad, jQuery, angular);
|
||||
Ładowanie…
Reference in New Issue