Kometentabellen können sortiert werden
This commit is contained in:
+92
-24
@@ -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'; ?>
|
||||
|
||||
Reference in New Issue
Block a user