Kometentabellen können sortiert werden
This commit is contained in:
+92
-24
@@ -479,6 +479,30 @@ arsort($orbitTypeCounts);
|
|||||||
letter-spacing: 0.08em;
|
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 {
|
.comets-table td {
|
||||||
color: #eef4ff;
|
color: #eef4ff;
|
||||||
}
|
}
|
||||||
@@ -601,13 +625,13 @@ arsort($orbitTypeCounts);
|
|||||||
<table class="comets-table">
|
<table class="comets-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Komet</th>
|
<th data-sortable>Komet</th>
|
||||||
<th>Typ</th>
|
<th data-sortable>Typ</th>
|
||||||
<th>RA</th>
|
<th data-sortable>RA</th>
|
||||||
<th>Dec</th>
|
<th data-sortable>Dec</th>
|
||||||
<th>Perihel</th>
|
<th data-sortable>Perihel</th>
|
||||||
<th>Abstand</th>
|
<th data-sortable>Abstand</th>
|
||||||
<th title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
|
<th data-sortable title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -619,6 +643,7 @@ arsort($orbitTypeCounts);
|
|||||||
: ((int) $comet['days_from_today'] === 0
|
: ((int) $comet['days_from_today'] === 0
|
||||||
? 'Heute'
|
? 'Heute'
|
||||||
: (((int) $comet['days_from_today'] > 0 ? '+' : '') . (int) $comet['days_from_today'] . ' Tage'));
|
: (((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>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@@ -634,11 +659,11 @@ arsort($orbitTypeCounts);
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td><?= h((string) $comet['orbit_type_label']) ?></td>
|
<td><?= h((string) $comet['orbit_type_label']) ?></td>
|
||||||
<td><?= h((string) $comet['ra_display']) ?></td>
|
<td data-sort-value="<?= h((string) ($comet['ra_hours'] ?? '')) ?>"><?= h((string) $comet['ra_display']) ?></td>
|
||||||
<td><?= h((string) $comet['dec_display']) ?></td>
|
<td data-sort-value="<?= h((string) ($comet['dec_deg'] ?? '')) ?>"><?= h((string) $comet['dec_display']) ?></td>
|
||||||
<td><?= h((string) $comet['perihelion_date_display']) ?></td>
|
<td data-sort-value="<?= h((string) $perihelionTs) ?>"><?= h((string) $comet['perihelion_date_display']) ?></td>
|
||||||
<td><span class="comets-days <?= $daysClass ?>"><?= h($daysLabel) ?></span></td>
|
<td data-sort-value="<?= h((string) ($comet['days_from_today'] ?? '')) ?>"><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['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>
|
</tr>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -657,13 +682,13 @@ arsort($orbitTypeCounts);
|
|||||||
<table class="comets-table">
|
<table class="comets-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Komet</th>
|
<th data-sortable>Komet</th>
|
||||||
<th>Typ</th>
|
<th data-sortable>Typ</th>
|
||||||
<th>RA</th>
|
<th data-sortable>RA</th>
|
||||||
<th>Dec</th>
|
<th data-sortable>Dec</th>
|
||||||
<th>Perihel</th>
|
<th data-sortable>Perihel</th>
|
||||||
<th>Abstand</th>
|
<th data-sortable>Abstand</th>
|
||||||
<th title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
|
<th data-sortable title="Grobe Helligkeitsschaetzung fuer heute nach H + 5 log(Delta) + 2,5 * n * log(r).">m grob</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -675,6 +700,7 @@ arsort($orbitTypeCounts);
|
|||||||
: ((int) $comet['days_from_today'] === 0
|
: ((int) $comet['days_from_today'] === 0
|
||||||
? 'Heute'
|
? 'Heute'
|
||||||
: (((int) $comet['days_from_today'] > 0 ? '+' : '') . (int) $comet['days_from_today'] . ' Tage'));
|
: (((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>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@@ -691,11 +717,11 @@ arsort($orbitTypeCounts);
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td><?= h((string) $comet['orbit_type_label']) ?></td>
|
<td><?= h((string) $comet['orbit_type_label']) ?></td>
|
||||||
<td><?= h((string) $comet['ra_display']) ?></td>
|
<td data-sort-value="<?= h((string) ($comet['ra_hours'] ?? '')) ?>"><?= h((string) $comet['ra_display']) ?></td>
|
||||||
<td><?= h((string) $comet['dec_display']) ?></td>
|
<td data-sort-value="<?= h((string) ($comet['dec_deg'] ?? '')) ?>"><?= h((string) $comet['dec_display']) ?></td>
|
||||||
<td><?= h((string) $comet['perihelion_date_display']) ?></td>
|
<td data-sort-value="<?= h((string) $perihelionTs) ?>"><?= h((string) $comet['perihelion_date_display']) ?></td>
|
||||||
<td><span class="comets-days <?= $daysClass ?>"><?= h($daysLabel) ?></span></td>
|
<td data-sort-value="<?= h((string) ($comet['days_from_today'] ?? '')) ?>"><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['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>
|
</tr>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -705,4 +731,46 @@ arsort($orbitTypeCounts);
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</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'; ?>
|
<?php require __DIR__ . '/footer.php'; ?>
|
||||||
|
|||||||
Reference in New Issue
Block a user