Eskimue/skyview.astronomiemuseum.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Begonnen die Favoriten seite aufzuräumen

Browse Source
This commit is contained in:
Eskimue
2026-04-12 10:34:38 +02:00
parent f51f6c0136
commit 48879f6b3b
1 changed files with 124 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/my_favorites.php
+124 -9
View File
@@ -280,7 +280,7 @@ function renderTrackedSatellitesSection(array $trackedSatellites, bool $oob = fa
{
ob_start();
?>
<div class="card" id="tracked-satellites-section"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
<div class="card" id="tracked-satellites-section" data-favorites-group="satellites"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
<h2>Meine Satelliten</h2>
<?php if (empty($trackedSatellites)): ?>
<p class="hint">Du hast noch keine Satelliten ausgewaehlt.</p>
@@ -337,7 +337,7 @@ function renderTrackedMinorplanetsSection(array $trackedMinorplanets, bool $oob
{
ob_start();
?>
<div class="card" id="tracked-minorplanets-section"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
<div class="card" id="tracked-minorplanets-section" data-favorites-group="minorplanets"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
<h2>Meine Kleinplaneten</h2>
<?php if (empty($trackedMinorplanets)): ?>
<p class="hint">Du hast noch keine Kleinplaneten ausgewaehlt.</p>
@@ -457,7 +457,7 @@ function renderTrackedCometsSection(array $trackedComets, bool $oob = false): st
{
ob_start();
?>
<div class="card" id="tracked-comets-section"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
<div class="card" id="tracked-comets-section" data-favorites-group="comets"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
<h2>Meine Kometen</h2>
<?php if (empty($trackedComets)): ?>
<p class="hint">Du hast noch keine Kometen ausgewaehlt.</p>
@@ -1754,8 +1754,48 @@ $loggedIn = true;
crossorigin=""
>
<style>
.favorites-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 1.25rem 0;
}
.favorites-tab-button {
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.05);
color: inherit;
border-radius: 999px;
padding: 0.7rem 1rem;
cursor: pointer;
font: inherit;
}
.favorites-tab-button[aria-selected="true"] {
background: rgba(110, 170, 255, 0.2);
border-color: rgba(110, 170, 255, 0.5);
}
.favorites-tab-panel[hidden] {
display: none !important;
}
.favorites-tab-panel {
margin-bottom: 1.5rem;
}
</style>
<?= renderMessages($successMessage, $errors) ?>
<div class="favorites-tabs" role="tablist" aria-label="Favoriten-Bereiche">
<button type="button" class="favorites-tab-button" id="favorites-tab-locations" data-tab-target="favorites-panel-locations" role="tab" aria-selected="true" aria-controls="favorites-panel-locations">Standorte</button>
<button type="button" class="favorites-tab-button" id="favorites-tab-satellites" data-tab-target="favorites-group-satellites" role="tab" aria-selected="false" aria-controls="favorites-panel-search" tabindex="-1">Satelliten</button>
<button type="button" class="favorites-tab-button" id="favorites-tab-minorplanets" data-tab-target="favorites-group-minorplanets" role="tab" aria-selected="false" aria-controls="favorites-panel-search" tabindex="-1">Kleinplaneten</button>
<button type="button" class="favorites-tab-button" id="favorites-tab-comets" data-tab-target="favorites-group-comets" role="tab" aria-selected="false" aria-controls="favorites-panel-search" tabindex="-1">Kometen</button>
</div>
<section id="favorites-panel-locations" class="favorites-tab-panel" role="tabpanel" aria-labelledby="favorites-tab-locations">
<div class="grid-2">
<div class="card" id="locations-section">
<h2>Standorte</h2>
@@ -1819,7 +1859,7 @@ $loggedIn = true;
<?php endif; ?>
</div>
<div class="card">
<div class="card" data-favorites-group="satellites">
<h2>Standort hinzufuegen</h2>
<p class="hint mb-md">Suche einen Ort, nutze den Browser-Standort oder klicke direkt in die Karte.</p>
@@ -1878,6 +1918,7 @@ $loggedIn = true;
</form>
</div>
</div>
</section>
<dialog class="admin-dialog" id="editLocationDialog">
<form method="post" action="" class="admin-dialog-card form-stack favorites-loading-form favorites-loading-form-htmx" data-loading-message="Standort wird aktualisiert..." hx-post="my_favorites.php" hx-target="#favorites-messages" hx-swap="outerHTML">
@@ -1918,8 +1959,9 @@ $loggedIn = true;
</form>
</dialog>
<section id="favorites-panel-search" class="favorites-tab-panel" role="tabpanel" aria-labelledby="favorites-tab-search" hidden>
<div class="grid-2">
<div class="card">
<div class="card" data-favorites-group="satellites">
<h2>Satelliten suchen</h2>
<form method="get" action="" class="favorites-loading-form favorites-loading-form-htmx favorites-search-form" data-loading-message="Satelliten werden gesucht. Das kann kurz dauern..." hx-get="my_favorites.php" hx-target="#satellite-search-results" hx-swap="outerHTML" hx-push-url="false">
<div class="input-row">
@@ -1979,7 +2021,7 @@ $loggedIn = true;
</div>
</div>
<div class="card">
<div class="card" data-favorites-group="minorplanets">
<h2>Kleinplaneten suchen</h2>
<form
method="get"
@@ -2048,7 +2090,7 @@ $loggedIn = true;
</div>
</div>
<div class="card">
<div class="card" data-favorites-group="comets">
<h2>Kometen suchen</h2>
<form
method="get"
@@ -2076,9 +2118,11 @@ $loggedIn = true;
<?= renderCometSearchResults($cometSearchQuery, $cometSearchResults) ?>
</div>
</div>
</section>
<section id="favorites-panel-tracked" class="favorites-tab-panel" role="tabpanel" aria-labelledby="favorites-tab-tracked" hidden>
<div class="grid-2">
<div class="card" id="tracked-satellites-section">
<div class="card" id="tracked-satellites-section" data-favorites-group="satellites">
<h2>Meine Satelliten</h2>
<?php if (empty($trackedSatellites)): ?>
<p class="hint">Du hast noch keine Satelliten ausgewählt.</p>
@@ -2127,7 +2171,7 @@ $loggedIn = true;
<?php endif; ?>
</div>
<div class="card" id="tracked-minorplanets-section">
<div class="card" id="tracked-minorplanets-section" data-favorites-group="minorplanets">
<h2>Meine Kleinplaneten</h2>
<?php if (empty($trackedMinorplanets)): ?>
<p class="hint">Du hast noch keine Kleinplaneten ausgewählt.</p>
@@ -2178,6 +2222,7 @@ $loggedIn = true;
<?= renderTrackedCometsSection($trackedComets) ?>
</div>
</section>
<script src="js/htmx.min.js"></script>
<script
@@ -2187,6 +2232,76 @@ $loggedIn = true;
></script>
<script>
(function () {
const tabButtons = Array.from(document.querySelectorAll('.favorites-tab-button'));
const tabPanels = Array.from(document.querySelectorAll('.favorites-tab-panel'));
const locationsPanel = document.getElementById('favorites-panel-locations');
const searchPanel = document.getElementById('favorites-panel-search');
const trackedPanel = document.getElementById('favorites-panel-tracked');
const groupCards = Array.from(document.querySelectorAll('[data-favorites-group]'));
if (tabButtons.length === 0 || tabPanels.length === 0 || !locationsPanel || !searchPanel || !trackedPanel) {
return;
}
function activateTab(panelId, focusButton = false) {
tabButtons.forEach((button) => {
const isActive = button.dataset.tabTarget === panelId;
button.setAttribute('aria-selected', isActive ? 'true' : 'false');
button.tabIndex = isActive ? 0 : -1;
if (isActive && focusButton) {
button.focus();
}
});
if (panelId === 'favorites-panel-locations') {
locationsPanel.hidden = false;
searchPanel.hidden = true;
trackedPanel.hidden = true;
groupCards.forEach((card) => {
card.hidden = false;
});
return;
}
const groupName = panelId.replace('favorites-group-', '');
locationsPanel.hidden = true;
searchPanel.hidden = false;
trackedPanel.hidden = false;
groupCards.forEach((card) => {
card.hidden = card.dataset.favoritesGroup !== groupName;
});
}
tabButtons.forEach((button, index) => {
button.addEventListener('click', () => {
activateTab(button.dataset.tabTarget);
});
button.addEventListener('keydown', (event) => {
if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
return;
}
event.preventDefault();
let nextIndex = index;
if (event.key === 'ArrowRight') {
nextIndex = (index + 1) % tabButtons.length;
} else if (event.key === 'ArrowLeft') {
nextIndex = (index - 1 + tabButtons.length) % tabButtons.length;
} else if (event.key === 'Home') {
nextIndex = 0;
} else if (event.key === 'End') {
nextIndex = tabButtons.length - 1;
}
activateTab(tabButtons[nextIndex].dataset.tabTarget, true);
});
});
})();
(function () {
const latInput = document.getElementById('latitude');
const lonInput = document.getElementById('longitude');