From 3a7d0818ac9ba95a95de9cbee7456a0eafcbcefc Mon Sep 17 00:00:00 2001
From: Krivchikov Dmitry <KrivchikovDA@gmail.com>
Date: Mon, 13 Jun 2016 14:09:24 +0300
Subject: [PATCH] =?UTF-8?q?ADD=20=D0=BC=D0=B8=D0=BD=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=80=D1=82=D0=B0=20=D0=BD=D0=B0=20=D1=80=D0=B5=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BA=D1=82=D0=BE=D1=80=D0=B5=20=D1=82=D1=80=D0=B5=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 controllers/EdittrackController.php |  2 +-
 controllers/TracksController.php    |  3 ++
 views/tracks/edit.php               | 71 +++++++++++++++++++++++------
 3 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/controllers/EdittrackController.php b/controllers/EdittrackController.php
index f69139d..2766ccb 100644
--- a/controllers/EdittrackController.php
+++ b/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);
 	}
diff --git a/controllers/TracksController.php b/controllers/TracksController.php
index 1bdbec4..16f56dd 100644
--- a/controllers/TracksController.php
+++ b/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) {
diff --git a/views/tracks/edit.php b/views/tracks/edit.php
index 8f79568..83e2685 100644
--- a/views/tracks/edit.php
+++ b/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>
-						<?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="#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/>
@@ -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 += 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 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>