Kometentabellen können sortiert werden

This commit is contained in:
2026-04-14 08:48:35 +02:00
parent 516e18b3c1
commit 140d33a463
+92 -24
View File
@@ -479,6 +479,30 @@ arsort($orbitTypeCounts);
letter-spacing: 0.08em;
}
.comets-table th[data-sortable] {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.comets-table th[data-sortable]::after {
content: ' ⇅';
opacity: 0.35;
font-size: 0.78em;
}
.comets-table th[data-sortable][data-sort-dir="asc"]::after {
content: ' ↑';
opacity: 1;
color: #c9a84c;
}
.comets-table th[data-sortable][data-sort-dir="desc"]::after {
content: ' ↓';
opacity: 1;
color: #c9a84c;
}
.comets-table td {
color: #eef4ff;
}
@@ -601,13 +625,13 @@ arsort($orbitTypeCounts);
<table class="comets-table">
<thead>
<tr>
<th>Komet</th>
<th>Typ</th>
<th>RA</th>
<th>Dec</th>
<th>Perihel</th>
<th>Abstand</th>
<th title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
<th data-sortable>Komet</th>
<th data-sortable>Typ</th>
<th data-sortable>RA</th>
<th data-sortable>Dec</th>
<th data-sortable>Perihel</th>
<th data-sortable>Abstand</th>
<th data-sortable title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
</tr>
</thead>
<tbody>
@@ -619,6 +643,7 @@ arsort($orbitTypeCounts);
: ((int) $comet['days_from_today'] === 0
? 'Heute'
: (((int) $comet['days_from_today'] > 0 ? '+' : '') . (int) $comet['days_from_today'] . ' Tage'));
$perihelionTs = $comet['perihelion_date_object'] instanceof DateTimeImmutable ? $comet['perihelion_date_object']->getTimestamp() : '';
?>
<tr>
<td>
@@ -634,11 +659,11 @@ arsort($orbitTypeCounts);
</div>
</td>
<td><?= h((string) $comet['orbit_type_label']) ?></td>
<td><?= h((string) $comet['ra_display']) ?></td>
<td><?= h((string) $comet['dec_display']) ?></td>
<td><?= h((string) $comet['perihelion_date_display']) ?></td>
<td><span class="comets-days <?= $daysClass ?>"><?= h($daysLabel) ?></span></td>
<td title="r = <?= h((string) $comet['heliocentric_distance_display']) ?> AE, Δ = <?= h((string) $comet['geocentric_distance_display']) ?> AE"><?= h((string) $comet['estimated_magnitude_display']) ?></td>
<td data-sort-value="<?= h((string) ($comet['ra_hours'] ?? '')) ?>"><?= h((string) $comet['ra_display']) ?></td>
<td data-sort-value="<?= h((string) ($comet['dec_deg'] ?? '')) ?>"><?= h((string) $comet['dec_display']) ?></td>
<td data-sort-value="<?= h((string) $perihelionTs) ?>"><?= h((string) $comet['perihelion_date_display']) ?></td>
<td data-sort-value="<?= h((string) ($comet['days_from_today'] ?? '')) ?>"><span class="comets-days <?= $daysClass ?>"><?= h($daysLabel) ?></span></td>
<td data-sort-value="<?= h((string) ($comet['estimated_magnitude'] ?? '')) ?>" title="r = <?= h((string) $comet['heliocentric_distance_display']) ?> AE, Δ = <?= h((string) $comet['geocentric_distance_display']) ?> AE"><?= h((string) $comet['estimated_magnitude_display']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
@@ -657,13 +682,13 @@ arsort($orbitTypeCounts);
<table class="comets-table">
<thead>
<tr>
<th>Komet</th>
<th>Typ</th>
<th>RA</th>
<th>Dec</th>
<th>Perihel</th>
<th>Abstand</th>
<th title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
<th data-sortable>Komet</th>
<th data-sortable>Typ</th>
<th data-sortable>RA</th>
<th data-sortable>Dec</th>
<th data-sortable>Perihel</th>
<th data-sortable>Abstand</th>
<th data-sortable title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
</tr>
</thead>
<tbody>
@@ -675,6 +700,7 @@ arsort($orbitTypeCounts);
: ((int) $comet['days_from_today'] === 0
? 'Heute'
: (((int) $comet['days_from_today'] > 0 ? '+' : '') . (int) $comet['days_from_today'] . ' Tage'));
$perihelionTs = $comet['perihelion_date_object'] instanceof DateTimeImmutable ? $comet['perihelion_date_object']->getTimestamp() : '';
?>
<tr>
<td>
@@ -691,11 +717,11 @@ arsort($orbitTypeCounts);
</div>
</td>
<td><?= h((string) $comet['orbit_type_label']) ?></td>
<td><?= h((string) $comet['ra_display']) ?></td>
<td><?= h((string) $comet['dec_display']) ?></td>
<td><?= h((string) $comet['perihelion_date_display']) ?></td>
<td><span class="comets-days <?= $daysClass ?>"><?= h($daysLabel) ?></span></td>
<td title="r = <?= h((string) $comet['heliocentric_distance_display']) ?> AE, Δ = <?= h((string) $comet['geocentric_distance_display']) ?> AE"><?= h((string) $comet['estimated_magnitude_display']) ?></td>
<td data-sort-value="<?= h((string) ($comet['ra_hours'] ?? '')) ?>"><?= h((string) $comet['ra_display']) ?></td>
<td data-sort-value="<?= h((string) ($comet['dec_deg'] ?? '')) ?>"><?= h((string) $comet['dec_display']) ?></td>
<td data-sort-value="<?= h((string) $perihelionTs) ?>"><?= h((string) $comet['perihelion_date_display']) ?></td>
<td data-sort-value="<?= h((string) ($comet['days_from_today'] ?? '')) ?>"><span class="comets-days <?= $daysClass ?>"><?= h($daysLabel) ?></span></td>
<td data-sort-value="<?= h((string) ($comet['estimated_magnitude'] ?? '')) ?>" title="r = <?= h((string) $comet['heliocentric_distance_display']) ?> AE, Δ = <?= h((string) $comet['geocentric_distance_display']) ?> AE"><?= h((string) $comet['estimated_magnitude_display']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
@@ -705,4 +731,46 @@ arsort($orbitTypeCounts);
</section>
</div>
<script>
(function () {
function getCellValue(row, colIndex) {
const cell = row.cells[colIndex];
if (!cell) return '';
const sv = cell.getAttribute('data-sort-value');
if (sv !== null && sv !== '') return sv;
return cell.textContent.trim();
}
function compareValues(a, b) {
const numA = parseFloat(a);
const numB = parseFloat(b);
if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
return a.localeCompare(b, 'de', { sensitivity: 'base' });
}
document.querySelectorAll('.comets-table').forEach(function (table) {
const headers = table.querySelectorAll('th[data-sortable]');
headers.forEach(function (th, colIndex) {
th.addEventListener('click', function () {
const currentDir = th.getAttribute('data-sort-dir');
const ascending = currentDir !== 'asc';
headers.forEach(function (h) { h.removeAttribute('data-sort-dir'); });
th.setAttribute('data-sort-dir', ascending ? 'asc' : 'desc');
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
rows.sort(function (a, b) {
const av = getCellValue(a, colIndex);
const bv = getCellValue(b, colIndex);
const cmp = compareValues(av, bv);
return ascending ? cmp : -cmp;
});
rows.forEach(function (row) { tbody.appendChild(row); });
});
});
});
}());
</script>
<?php require __DIR__ . '/footer.php'; ?>