wikipoints/views/tracks/edit.php

<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">
					<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-8">
						<input type="text" class="form-control" id="trackDescription<?= $track->id ?>" placeholder="В этот день..." value="<?= $track->description ?>">
					</div>
					<div class="col-sm-1">
						<a href="/edittrack/deletetrack/id/<?= $track->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="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">
	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();
			}
		});
	}
</script>