238 lines
9.2 KiB
PHP
238 lines
9.2 KiB
PHP
<?php
|
||
$tracksCounter = 1;
|
||
?>
|
||
<a href="/tracks/" class="btn btn-success pull-right">
|
||
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
|
||
Выйти из редактора
|
||
</a>
|
||
<a href="/?track=<?= $trip->id ?>" class="btn btn-success pull-right"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span></a>
|
||
<h3 onclick="$('#tripBlock').toggle(100)" style="cursor: pointer;">Свойства трека</h3>
|
||
<form onfocusout="saveChangesTrip()" id="tripBlock">
|
||
<div class="form-group">
|
||
<label for="tripName">Название трека</label>
|
||
<input type="text" class="form-control" id="tripName" placeholder="Великолепное путешествие <?= date('Y') ?>" value="<?= $trip->name ?>">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tripDescription">Описание Трека</label>
|
||
<input type="text" class="form-control" id="tripDescription" placeholder="Это было незабываемое путешествие!..." value="<?= $trip->description ?>">
|
||
</div>
|
||
<a href="/edittrack/deletetrip/id/<?= $trip->id ?>" class="btn btn-danger pull-right" onclick="return confirm('Вы уверены, что хотите удалить трек?')">
|
||
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
|
||
Удалить трек
|
||
</a>
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox" id="tripIsPublic" <?= ($trip->status == Trips::STATUS_PUBLIC) ? 'checked="checked"' : '' ?>> Публичный трек (его могут видеть другие пользователи)
|
||
</label>
|
||
</div>
|
||
|
||
<span id="tripSavedOK" style="color: #999; display: none;">изменения сохранены...</span>
|
||
<span id="tripSavedError" style="color: #900; display: none;">при сохранении возникла ошибка!</span>
|
||
<br/>
|
||
</form>
|
||
|
||
<?php if ($tracks): ?>
|
||
<h3 onclick="$('#tracksBlock').toggle()" style="cursor: pointer;">Фрагменты трека (<?= count($tracks) ?>)</h3>
|
||
<div id="tracksBlock" style="display: none;">
|
||
<!--<hr/>-->
|
||
<?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 ?>">
|
||
</div>
|
||
<div class="col-sm-7">
|
||
<input type="text" class="form-control" id="trackDescription<?= $track->id ?>" placeholder="В этот день..." value="<?= $track->description ?>">
|
||
</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="#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="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/>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($waypoints): ?>
|
||
<h3 onclick="$('#waypointsBlock').toggle()" style="cursor: pointer;">Путевые точки (<?= count($waypoints) ?>)</h3>
|
||
<div id="waypointsBlock" style="display: none;">
|
||
<!--<hr/>-->
|
||
<?php foreach ($waypoints as $waypoint): ?>
|
||
<form onfocusout="saveChangesWaypoint(<?= $waypoint->id ?>)" class="form-horizontal">
|
||
<div class="form-group">
|
||
<div class="col-sm-3">
|
||
<input type="text" class="form-control" id="waypointName<?= $waypoint->id ?>" placeholder="А здесь..." value="<?= $waypoint->name ?>">
|
||
</div>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control" id="waypointDescription<?= $waypoint->id ?>" placeholder="Здесь очень..." value="<?= $waypoint->description ?>">
|
||
</div>
|
||
<div class="col-sm-1">
|
||
<a href="/edittrack/deletewaypoint/id/<?= $waypoint->id ?>" class="btn btn-danger" onclick="return confirm('Вы уверены, что хотите удалить путевую точку?')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<!--<hr/>-->
|
||
<?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();
|
||
$('#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>
|