ADD миникарта на редакторе трека

controllers/EdittrackController.php

@@ -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);
 	}

controllers/TracksController.php

@@ -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) {

views/tracks/edit.php

@@ -1,5 +1,5 @@
 <?php
-	$tracksCounter = 1;
+$tracksCounter = 1;
 ?>
 <a href="/tracks/" class="btn btn-success pull-right">
 	<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
@@ -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)):?>
+						<?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>
+							<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>
+			<div id="trackpointsContainer<?= $track->id ?>" style="display: none;">
-		<?php $tracksCounter++; endforeach; ?>
+				<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/>
@@ -66,7 +76,7 @@
 	<h3 onclick="$('#waypointsBlock').toggle()" style="cursor: pointer;">Путевые точки (<?= count($waypoints) ?>)</h3>
 	<div id="waypointsBlock" style="display: none;">
 		<!--<hr/>-->
-		<?php foreach ($waypoints as $waypoint): ?>
+	<?php foreach ($waypoints as $waypoint): ?>
 			<form onfocusout="saveChangesWaypoint(<?= $waypoint->id ?>)" class="form-horizontal">
 				<div class="form-group">
 					<div class="col-sm-3">
@@ -81,13 +91,23 @@
 				</div>
 			</form>
 			<!--<hr/>-->
-		<?php endforeach; ?>
+	<?php endforeach; ?>
 		<span id="waypointSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
 		<span id="waypointSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
 	</div>
 <?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('');
+				$('#trackpointsList' + id).html('');
 				if (typeof (data) != 'undefined') {
+					latlngs = new Array();
 					for (var i = 0; i < data.length; i++) {
-						$(makeRow(data[i])).appendTo('#trackpointsList'+id);
+						$(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: '&copy; <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 += 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 += ' <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>