90 lines
5.2 KiB
HTML
90 lines
5.2 KiB
HTML
<!-- Satellite Data Modal -->
|
||
<div class="modal fade" id="satelliteModal" tabindex="-1" aria-labelledby="satelliteModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="satelliteModalLabel">
|
||
<i class="bi bi-satellite"></i> Информация о спутнике
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||
</div>
|
||
<div class="modal-body" id="satelliteModalBody">
|
||
<div class="text-center py-4">
|
||
<div class="spinner-border text-primary" role="status">
|
||
<span class="visually-hidden">Загрузка...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Function to show satellite modal
|
||
function showSatelliteModal(satelliteId) {
|
||
const modal = new bootstrap.Modal(document.getElementById('satelliteModal'));
|
||
modal.show();
|
||
|
||
const modalBody = document.getElementById('satelliteModalBody');
|
||
modalBody.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-warning" role="status"><span class="visually-hidden">Загрузка...</span></div></div>';
|
||
|
||
fetch('/api/satellite/' + satelliteId + '/')
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error('Ошибка загрузки данных спутника');
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
let html = '<div class="container-fluid"><div class="row g-3">' +
|
||
'<div class="col-md-6"><div class="card h-100">' +
|
||
'<div class="card-header bg-light"><strong><i class="bi bi-info-circle"></i> Основная информация</strong></div>' +
|
||
'<div class="card-body"><table class="table table-sm table-borderless mb-0"><tbody>' +
|
||
'<tr><td class="text-muted" style="width: 40%;">Название:</td><td><strong>' + data.name + '</strong></td></tr>';
|
||
|
||
if (data.alternative_name && data.alternative_name !== '-') {
|
||
html += '<tr><td class="text-muted">Альтернативное название:</td><td><strong>' + data.alternative_name + '</strong></td></tr>';
|
||
}
|
||
|
||
html += '<tr><td class="text-muted">NORAD ID:</td><td>' + data.norad + '</td></tr>' +
|
||
'<tr><td class="text-muted">Подспутниковая точка:</td><td><strong>' + data.undersat_point + '</strong></td></tr>' +
|
||
'<tr><td class="text-muted">Диапазоны:</td><td>' + data.bands + '</td></tr>' +
|
||
'</tbody></table></div></div></div>' +
|
||
'<div class="col-md-6"><div class="card h-100">' +
|
||
'<div class="card-header bg-light"><strong><i class="bi bi-calendar"></i> Дополнительная информация</strong></div>' +
|
||
'<div class="card-body"><table class="table table-sm table-borderless mb-0"><tbody>' +
|
||
'<tr><td class="text-muted" style="width: 40%;">Дата запуска:</td><td><strong>' + data.launch_date + '</strong></td></tr>' +
|
||
'<tr><td class="text-muted">Создан:</td><td>' + data.created_at + '</td></tr>' +
|
||
'<tr><td class="text-muted">Кем создан:</td><td>' + data.created_by + '</td></tr>' +
|
||
'<tr><td class="text-muted">Обновлён:</td><td>' + data.updated_at + '</td></tr>' +
|
||
'<tr><td class="text-muted">Кем обновлён:</td><td>' + data.updated_by + '</td></tr>' +
|
||
'</tbody></table></div></div></div>';
|
||
|
||
if (data.comment && data.comment !== '-') {
|
||
html += '<div class="col-12"><div class="card">' +
|
||
'<div class="card-header bg-light"><strong><i class="bi bi-chat-left-text"></i> Комментарий</strong></div>' +
|
||
'<div class="card-body"><p class="mb-0">' + data.comment + '</p></div></div></div>';
|
||
}
|
||
|
||
if (data.url) {
|
||
html += '<div class="col-12"><div class="card">' +
|
||
'<div class="card-header bg-light"><strong><i class="bi bi-link-45deg"></i> Ссылка</strong></div>' +
|
||
'<div class="card-body">' +
|
||
'<a href="' + data.url + '" target="_blank" class="btn btn-sm btn-outline-primary">' +
|
||
'<i class="bi bi-box-arrow-up-right"></i> Открыть ссылку</a>' +
|
||
'</div></div></div>';
|
||
}
|
||
|
||
html += '</div></div>';
|
||
modalBody.innerHTML = html;
|
||
})
|
||
.catch(error => {
|
||
modalBody.innerHTML = '<div class="alert alert-danger" role="alert">' +
|
||
'<i class="bi bi-exclamation-triangle"></i> ' + error.message + '</div>';
|
||
});
|
||
}
|
||
</script>
|