Вынес в отдельные JS и CSS всё по редактированию трека
This commit is contained in:
parent
3a7d0818ac
commit
ebc4bd02e4
|
|
@ -33,6 +33,9 @@ class TracksController extends Controller
|
||||||
self::addScript('/js/leaflet.js');
|
self::addScript('/js/leaflet.js');
|
||||||
self::addStyle('/css/leaflet.css');
|
self::addStyle('/css/leaflet.css');
|
||||||
|
|
||||||
|
self::addScript('/js/editTrack.js');
|
||||||
|
self::addStyle('/css/editTrack.css');
|
||||||
|
|
||||||
$id = intval(App::getParam('id'));
|
$id = intval(App::getParam('id'));
|
||||||
|
|
||||||
if (!$id) {
|
if (!$id) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
.savedOK {color: #999; display: none;}
|
||||||
|
.savedError {color: #900; display: none;}
|
||||||
|
|
||||||
|
.trackpointsContainer {display: none;}
|
||||||
|
.trackpointsContainer table {height: 500px; width: 100%; margin-bottom: 20px;}
|
||||||
|
.trackpointsContainer table td {width: 50%;}
|
||||||
|
|
||||||
|
.trackPoint:hover {background-color: #ddd;}
|
||||||
|
|
||||||
|
.trackpointsList {overflow-y: scroll; height: 500px;}
|
||||||
|
.trackpointsMap {height: 500px;}
|
||||||
|
|
@ -1,7 +1,140 @@
|
||||||
/*
|
var tracks = new Array;
|
||||||
* To change this license header, choose License Headers in Project Properties.
|
var maps = new Array;
|
||||||
* To change this template file, choose Tools | Templates
|
var markers = new Array;
|
||||||
* and open the template in the editor.
|
var icon = L.icon({
|
||||||
*/
|
iconUrl: '/ico/marker.png',
|
||||||
|
iconSize: [32, 37],
|
||||||
|
iconAnchor: [16, 37],
|
||||||
|
popupAnchor: [0, 1]
|
||||||
|
});
|
||||||
|
|
||||||
|
function saveChangesTrip()
|
||||||
|
{
|
||||||
|
$('#tripSavedOK').hide();
|
||||||
|
$('#tripSavedError').hide();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "/edittrack/trip/id/<?= $trip->id ?>",
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
name: $('#tripName').val(),
|
||||||
|
description: $('#tripDescription').val(),
|
||||||
|
isPublic: $('#tripIsPublic').prop('checked')
|
||||||
|
},
|
||||||
|
success: function (data) {
|
||||||
|
$('#tripSavedOK').show();
|
||||||
|
setTimeout(function () {
|
||||||
|
$('#tripSavedOK').fadeOut(300);
|
||||||
|
}, 2000);
|
||||||
|
},
|
||||||
|
error: function (data) {
|
||||||
|
$('#tripSavedError').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveChangesTrack(id)
|
||||||
|
{
|
||||||
|
$('#trackSavedOK').hide();
|
||||||
|
$('#trackSavedError').hide();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "/edittrack/track/id/" + id,
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
name: $('#trackName' + id).val(),
|
||||||
|
description: $('#trackDescription' + id).val()
|
||||||
|
},
|
||||||
|
success: function (data) {
|
||||||
|
$('#trackSavedOK').show();
|
||||||
|
setTimeout(function () {
|
||||||
|
$('#trackSavedOK').fadeOut(300);
|
||||||
|
}, 2000);
|
||||||
|
},
|
||||||
|
error: function (data) {
|
||||||
|
$('#trackSavedError').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveChangesWaypoint(id)
|
||||||
|
{
|
||||||
|
$('#waypointSavedOK').hide();
|
||||||
|
$('#waypointSavedError').hide();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "/edittrack/waypoint/id/" + id,
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
name: $('#waypointName' + id).val(),
|
||||||
|
description: $('#waypointDescription' + id).val()
|
||||||
|
},
|
||||||
|
success: function (data) {
|
||||||
|
$('#waypointSavedOK').show();
|
||||||
|
setTimeout(function () {
|
||||||
|
$('#waypointSavedOK').fadeOut(300);
|
||||||
|
}, 2000);
|
||||||
|
},
|
||||||
|
error: function (data) {
|
||||||
|
$('#waypointSavedError').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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, scrollWheelZoom: false}).setView([latlngs[0]['lat'], latlngs[0]['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])
|
||||||
|
|
||||||
|
maps[id].fitBounds(tracks[id].getBounds());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function (data) {
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeRow(data)
|
||||||
|
{
|
||||||
|
row = '<div class="trackPoint" onmouseover="moveMarker(' + data.trackId + ', ' + data.lat + ', ' + data.lng + ')">';
|
||||||
|
row += data.lat + ' / ' + data.lng;
|
||||||
|
// row += data.id + ' - ' + data.lat + ' / ' + data.lng;
|
||||||
|
row += ' <a href="/edittrack/cut/id/' + data.id + '" class="btn btn-default btn-sm" 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());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,8 +26,8 @@ $tracksCounter = 1;
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span id="tripSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
|
<span id="tripSavedOK" class="savedOK">изменения сохранены...</span>
|
||||||
<span id="tripSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
|
<span id="tripSavedError" class="savedError">при сохранении возникла ошибка!</span>
|
||||||
<br/>
|
<br/>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
@ -36,9 +36,9 @@ $tracksCounter = 1;
|
||||||
<div id="tracksBlock" style="display: none;">
|
<div id="tracksBlock" style="display: none;">
|
||||||
<!--<hr/>-->
|
<!--<hr/>-->
|
||||||
<?php foreach ($tracks as $track): ?>
|
<?php foreach ($tracks as $track): ?>
|
||||||
|
<a name="trackpointsList<?= $track->id ?>"/>
|
||||||
<form onfocusout="saveChangesTrack(<?= $track->id ?>)" class="form-horizontal">
|
<form onfocusout="saveChangesTrack(<?= $track->id ?>)" class="form-horizontal">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<a name="trackpointsList<?= $track->id ?>"/>
|
|
||||||
<div style="font-size: 20px" class="col-sm-1"><?= $track->distance() ?></div>
|
<div style="font-size: 20px" class="col-sm-1"><?= $track->distance() ?></div>
|
||||||
<div class="col-sm-2">
|
<div class="col-sm-2">
|
||||||
<input type="text" class="form-control" id="trackName<?= $track->id ?>" placeholder="День №__" value="<?= $track->name ?>">
|
<input type="text" class="form-control" id="trackName<?= $track->id ?>" placeholder="День №__" value="<?= $track->name ?>">
|
||||||
|
|
@ -55,19 +55,19 @@ $tracksCounter = 1;
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div id="trackpointsContainer<?= $track->id ?>" style="display: none;">
|
<div id="trackpointsContainer<?= $track->id ?>" class="trackpointsContainer">
|
||||||
<table style="height: 500px; width: 100%;">
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="width: 50%;"><div id="trackpointsList<?= $track->id ?>" style="overflow-y: scroll; height: 500px;"></div></td>
|
<td><div id="trackpointsList<?= $track->id ?>" class="trackpointsList"></div></td>
|
||||||
<td style="width: 50%;"><div id="trackpointsMap<?= $track->id ?>" style="height: 500px;"></div></td>
|
<td><div id="trackpointsMap<?= $track->id ?>" class="trackpointsMap"></div></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<?php $tracksCounter++;
|
<?php $tracksCounter++;
|
||||||
endforeach;
|
endforeach;
|
||||||
?>
|
?>
|
||||||
<span id="trackSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
|
<span id="trackSavedOK" class="savedOK">изменения сохранены...</span>
|
||||||
<span id="trackSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
|
<span id="trackSavedError" class="savedError">при сохранении возникла ошибка!</span>
|
||||||
<br/>
|
<br/>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
@ -92,146 +92,7 @@ $tracksCounter = 1;
|
||||||
</form>
|
</form>
|
||||||
<!--<hr/>-->
|
<!--<hr/>-->
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<span id="waypointSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
|
<span id="waypointSavedOK" class="savedOK">изменения сохранены...</span>
|
||||||
<span id="waypointSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
|
<span id="waypointSavedError" class="savedError">при сохранении возникла ошибка!</span>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?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();
|
|
||||||
$('#tripSavedError').hide();
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: "/edittrack/trip/id/<?= $trip->id ?>",
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
name: $('#tripName').val(),
|
|
||||||
description: $('#tripDescription').val(),
|
|
||||||
isPublic: $('#tripIsPublic').prop('checked')
|
|
||||||
},
|
|
||||||
success: function (data) {
|
|
||||||
$('#tripSavedOK').show();
|
|
||||||
setTimeout(function () {
|
|
||||||
$('#tripSavedOK').fadeOut(300);
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
error: function (data) {
|
|
||||||
$('#tripSavedError').show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveChangesTrack(id)
|
|
||||||
{
|
|
||||||
$('#trackSavedOK').hide();
|
|
||||||
$('#trackSavedError').hide();
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: "/edittrack/track/id/" + id,
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
name: $('#trackName' + id).val(),
|
|
||||||
description: $('#trackDescription' + id).val()
|
|
||||||
},
|
|
||||||
success: function (data) {
|
|
||||||
$('#trackSavedOK').show();
|
|
||||||
setTimeout(function () {
|
|
||||||
$('#trackSavedOK').fadeOut(300);
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
error: function (data) {
|
|
||||||
$('#trackSavedError').show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveChangesWaypoint(id)
|
|
||||||
{
|
|
||||||
$('#waypointSavedOK').hide();
|
|
||||||
$('#waypointSavedError').hide();
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: "/edittrack/waypoint/id/" + id,
|
|
||||||
method: "POST",
|
|
||||||
data: {
|
|
||||||
name: $('#waypointName' + id).val(),
|
|
||||||
description: $('#waypointDescription' + id).val()
|
|
||||||
},
|
|
||||||
success: function (data) {
|
|
||||||
$('#waypointSavedOK').show();
|
|
||||||
setTimeout(function () {
|
|
||||||
$('#waypointSavedOK').fadeOut(300);
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
error: function (data) {
|
|
||||||
$('#waypointSavedError').show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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) {
|
|
||||||
console.log(data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeRow(data)
|
|
||||||
{
|
|
||||||
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