Вынес в отдельные 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::addStyle('/css/leaflet.css');
|
||||
|
||||
self::addScript('/js/editTrack.js');
|
||||
self::addStyle('/css/editTrack.css');
|
||||
|
||||
$id = intval(App::getParam('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 @@
|
|||
/*
|
||||
* To change this license header, choose License Headers in Project Properties.
|
||||
* To change this template file, choose Tools | Templates
|
||||
* and open the template in the editor.
|
||||
*/
|
||||
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, 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>
|
||||
</div>
|
||||
|
||||
<span id="tripSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
|
||||
<span id="tripSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
|
||||
<span id="tripSavedOK" class="savedOK">изменения сохранены...</span>
|
||||
<span id="tripSavedError" class="savedError">при сохранении возникла ошибка!</span>
|
||||
<br/>
|
||||
</form>
|
||||
|
||||
|
|
@ -36,9 +36,9 @@ $tracksCounter = 1;
|
|||
<div id="tracksBlock" style="display: none;">
|
||||
<!--<hr/>-->
|
||||
<?php foreach ($tracks as $track): ?>
|
||||
<a name="trackpointsList<?= $track->id ?>"/>
|
||||
<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 ?>">
|
||||
|
|
@ -55,19 +55,19 @@ $tracksCounter = 1;
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="trackpointsContainer<?= $track->id ?>" style="display: none;">
|
||||
<table style="height: 500px; width: 100%;">
|
||||
<div id="trackpointsContainer<?= $track->id ?>" class="trackpointsContainer">
|
||||
<table>
|
||||
<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>
|
||||
<td><div id="trackpointsList<?= $track->id ?>" class="trackpointsList"></div></td>
|
||||
<td><div id="trackpointsMap<?= $track->id ?>" class="trackpointsMap"></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>
|
||||
<span id="trackSavedOK" class="savedOK">изменения сохранены...</span>
|
||||
<span id="trackSavedError" class="savedError">при сохранении возникла ошибка!</span>
|
||||
<br/>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
@ -92,146 +92,7 @@ $tracksCounter = 1;
|
|||
</form>
|
||||
<!--<hr/>-->
|
||||
<?php endforeach; ?>
|
||||
<span id="waypointSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
|
||||
<span id="waypointSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
|
||||
<span id="waypointSavedOK" class="savedOK">изменения сохранены...</span>
|
||||
<span id="waypointSavedError" class="savedError">при сохранении возникла ошибка!</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();
|
||||
$('#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