ADD миникарта на редакторе трека
This commit is contained in:
parent
7860013f60
commit
3a7d0818ac
|
|
@ -187,7 +187,7 @@ class EdittrackController extends Controller
|
|||
App::error404();
|
||||
}
|
||||
|
||||
$trackpoints = TrackPoints::model()->getAll(array('where' => '`trackId` = ' . $track->id, 'asArray' => TRUE, 'noKeys' => TRUE,));
|
||||
$trackpoints = TrackPoints::model()->getAll(array('where' => '`trackId` = ' . $track->id, 'asArray' => TRUE, 'noKeys' => TRUE, 'order' => '`id`'));
|
||||
|
||||
self::renderPartial('json.php', $trackpoints);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@ class TracksController extends Controller
|
|||
|
||||
function actionEdit()
|
||||
{
|
||||
self::addScript('/js/leaflet.js');
|
||||
self::addStyle('/css/leaflet.css');
|
||||
|
||||
$id = intval(App::getParam('id'));
|
||||
|
||||
if (!$id) {
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<?php foreach ($tracks as $track): ?>
|
||||
<form onfocusout="saveChangesTrack(<?= $track->id ?>)" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<a name="trackpointsList<?= $track->id ?>"/>
|
||||
<div style="font-size: 20px" class="col-sm-1"><?= $track->distance() ?></div>
|
||||
<div class="col-sm-2">
|
||||
<input type="text" class="form-control" id="trackName<?= $track->id ?>" placeholder="День №__" value="<?= $track->name ?>">
|
||||
|
|
@ -47,15 +48,24 @@
|
|||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="/edittrack/deletetrack/id/<?= $track->id ?>" class="btn btn-danger" onclick="return confirm('Вы уверены, что хотите удалить фрагмент трека?')" title="Удалить фрагмент трека"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
|
||||
<a href="#" class="btn btn-default" onclick="loadTrackDetails(<?= $track->id ?>)" title="Просмотреть точки"><span class="glyphicon glyphicon-list" aria-hidden="true"></span></a>
|
||||
<a href="#trackpointsList<?= $track->id ?>" class="btn btn-default" onclick="loadTrackDetails(<?= $track->id ?>)" title="Просмотреть точки"><span class="glyphicon glyphicon-list" aria-hidden="true"></span></a>
|
||||
<?php if ($tracksCounter < count($tracks)): ?>
|
||||
<a href="/edittrack/mergetrack/id/<?= $track->id ?>" class="btn btn-default" onclick="return confirm('Вы уверены, что хотите совместить фрагмент трека с идущим ниже?')" title="Слить с идущим ниже"><span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="trackpointsList<?= $track->id ?>"></div>
|
||||
<?php $tracksCounter++; endforeach; ?>
|
||||
<div id="trackpointsContainer<?= $track->id ?>" style="display: none;">
|
||||
<table style="height: 500px; width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 50%;"><div id="trackpointsList<?= $track->id ?>" style="overflow-y: scroll; height: 500px;"></div></td>
|
||||
<td style="width: 50%;"><div id="trackpointsMap<?= $track->id ?>" style="height: 500px;"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<?php $tracksCounter++;
|
||||
endforeach;
|
||||
?>
|
||||
<span id="trackSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
|
||||
<span id="trackSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
|
||||
<br/>
|
||||
|
|
@ -88,6 +98,16 @@
|
|||
<?php endif; ?>
|
||||
|
||||
<script lang="javascript">
|
||||
var tracks = new Array;
|
||||
var maps = new Array;
|
||||
var markers = new Array;
|
||||
var icon = L.icon({
|
||||
iconUrl: '/ico/marker.png',
|
||||
iconSize: [32, 37],
|
||||
iconAnchor: [16, 37],
|
||||
popupAnchor: [0, 1]
|
||||
});
|
||||
|
||||
function saveChangesTrip()
|
||||
{
|
||||
$('#tripSavedOK').hide();
|
||||
|
|
@ -163,15 +183,34 @@
|
|||
|
||||
function loadTrackDetails(id)
|
||||
{
|
||||
$('#trackpointsContainer' + id).toggle();
|
||||
if ($('#trackpointsMap' + id).text() != '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "/edittrack/gettrackdetails/id/" + id,
|
||||
method: "POST",
|
||||
success: function (data) {
|
||||
$('#trackpointsList' + id).html('');
|
||||
if (typeof (data) != 'undefined') {
|
||||
latlngs = new Array();
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
$(makeRow(data[i])).appendTo('#trackpointsList' + id);
|
||||
latlngs.push({lat: data[i]['lat'], lng: data[i]['lng']})
|
||||
|
||||
}
|
||||
|
||||
maps[id] = L.map('trackpointsMap' + id, {zoomControl: true}).setView([latlngs[1]['lat'], latlngs[1]['lng']], 13);
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(maps[id]);
|
||||
|
||||
tracks[id] = L.polyline(latlngs, {color: '#F00', width: 4, opacity: 0.8});
|
||||
maps[id].addLayer(tracks[id]);
|
||||
|
||||
markers[id] = L.marker([latlngs[1]['lat'], latlngs[1]['lng']], {icon: icon});
|
||||
maps[id].addLayer(markers[id])
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
|
|
@ -182,11 +221,17 @@
|
|||
|
||||
function makeRow(data)
|
||||
{
|
||||
row = '<div class="trackPoint">';
|
||||
row = '<div class="trackPoint" onmouseover="moveMarker(' + data.trackId + ', ' + data.lat + ', ' + data.lng + ')">';
|
||||
row += data.id + ' - ' + data.lat + ' / ' + data.lng;
|
||||
row += ' <a href="/edittrack/cut/id/' + data.id + '" title="Разрезать трек в этой точке"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a> ';
|
||||
row += '</div>';
|
||||
return row;
|
||||
}
|
||||
|
||||
function moveMarker(mapId, lat, lng)
|
||||
{
|
||||
markers[mapId].setLatLng([lat, lng]);
|
||||
maps[mapId].setView([lat, lng], maps[mapId].getZoom());
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue