Apply Anpassung_1: art-specific object logic, responsive design, remove Kuppel field

- Sonnenführung: fixes Sonne as sole object, no selector shown
- BEO-Sitzung / Technischer Dienst: object field hidden, DB stays empty
- Kuppel field removed from form (determined by active tab)
- Responsive layout: single-column on mobile, side-by-side on sm+
- Touch-friendly input sizes (py-3, text-base)
- Compact header and tab labels on small screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-27 18:05:40 +02:00
parent 12be2f1db2
commit 6a655212bf
4 changed files with 125 additions and 85 deletions

View File

@@ -43,17 +43,22 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
}
return (
<div className="min-h-screen bg-white py-4 px-4">
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">Logbuch Sternwarte Welzheim</h1>
<div className="flex items-center gap-4">
<span className="text-sm text-gray-600">
<div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4">
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#FFFFDD]">
{/* Header */}
<div className="flex justify-between items-start sm:items-center mb-4 gap-2">
<h1 className="text-xl sm:text-3xl font-bold leading-tight">
Logbuch<span className="hidden sm:inline"> Sternwarte Welzheim</span>
</h1>
<div className="flex items-center gap-2 shrink-0">
<span className="text-xs sm:text-sm text-gray-600 hidden sm:inline">
{kuerzel} {beoName}
</span>
<span className="text-xs text-gray-600 sm:hidden">{kuerzel}</span>
<button
onClick={handleLogout}
className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
>
Abmelden
</button>
@@ -61,24 +66,25 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
</div>
{/* Kuppel-Tabs */}
<div className="flex gap-1 mb-4 border-b-2 border-gray-300">
<div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto">
{KUPPELN.map((k) => (
<button
key={k}
onClick={() => { setActiveKuppel(k); setEditEntry(null); }}
className={`px-5 py-2 text-sm font-medium rounded-t-lg transition-colors ${
className={`px-3 sm:px-5 py-2 text-sm font-medium rounded-t-lg transition-colors whitespace-nowrap ${
activeKuppel === k
? 'bg-[#85B7D7] text-black border-2 border-b-0 border-gray-300'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
>
Kuppel {k}
<span className="sm:hidden">{k}</span>
<span className="hidden sm:inline">Kuppel {k}</span>
</button>
))}
</div>
{/* Eingabe/Liste-Tabs */}
<div className="flex gap-1 mb-6 border-b border-gray-200">
<div className="flex gap-1 mb-5 border-b border-gray-200">
{(['eingabe', 'liste'] as const).map((tab) => (
<button
key={tab}
@@ -119,14 +125,14 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
/>
)}
<footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
<footer className="mt-8 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
<div>
<a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
mailto:rxf@gmx.de
rxf@gmx.de
</a>
</div>
<div className="text-right">
Version {version} {buildDate}
v{version} {buildDate}
</div>
</footer>
</main>

View File

@@ -1,34 +1,33 @@
import { NextRequest, NextResponse } from 'next/server';
import { query } from '@/lib/db';
import { query, getPool } from '@/lib/db';
import { getSession } from '@/lib/session';
import type { SelectedObjekt } from '@/types/logbuch';
const LIST_SQL =
'SELECT' +
' l.ID, l.Kuppel, l.ArtFuehrung,' +
" DATE_FORMAT(l.Beginn, '%Y-%m-%dT%H:%i') AS Beginn," +
" DATE_FORMAT(l.Ende, '%Y-%m-%dT%H:%i') AS Ende," +
' l.Besucher, l.Bemerkungen,' +
' l.WetterTemp, l.WetterFeuchte, l.WetterDruck,' +
' l.created_by, l.created_at,' +
" GROUP_CONCAT(DISTINCT bk.kuerzel ORDER BY bk.kuerzel SEPARATOR ', ') AS BEOs," +
" GROUP_CONCAT(DISTINCT lo.ObjektName ORDER BY lo.ObjektName SEPARATOR ', ') AS Objekte" +
' FROM logbuch l' +
' LEFT JOIN logbuch_beos lb ON lb.LogbuchID = l.ID' +
' LEFT JOIN (SELECT id, `kürzel` AS kuerzel FROM beos) bk ON bk.id = lb.BeoID' +
' LEFT JOIN logbuch_objekte lo ON lo.LogbuchID = l.ID' +
' WHERE l.Kuppel = ?' +
' GROUP BY l.ID' +
' ORDER BY l.Beginn DESC';
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const kuppel = searchParams.get('kuppel') || 'West';
const limit = Math.min(parseInt(searchParams.get('limit') || '20'), 100);
try {
const rows = await query(
`SELECT
l.ID, l.Kuppel, l.ArtFuehrung,
DATE_FORMAT(l.Beginn, '%Y-%m-%dT%H:%i') AS Beginn,
DATE_FORMAT(l.Ende, '%Y-%m-%dT%H:%i') AS Ende,
l.Besucher, l.Bemerkungen,
l.WetterTemp, l.WetterFeuchte, l.WetterDruck,
l.created_by, l.created_at,
GROUP_CONCAT(DISTINCT b.Kuerzel ORDER BY b.Kuerzel SEPARATOR ', ') AS BEOs,
GROUP_CONCAT(DISTINCT lo.ObjektName ORDER BY lo.ObjektName SEPARATOR ', ') AS Objekte
FROM logbuch l
LEFT JOIN logbuch_beos lb ON lb.LogbuchID = l.ID
LEFT JOIN beos b ON b.ID = lb.BeoID
LEFT JOIN logbuch_objekte lo ON lo.LogbuchID = l.ID
WHERE l.Kuppel = ?
GROUP BY l.ID
ORDER BY l.Beginn DESC
LIMIT ?`,
[kuppel, limit]
);
const rows = await query(LIST_SQL + ` LIMIT ${limit}`, [kuppel]);
return NextResponse.json(rows);
} catch (error) {
console.error('GET /api/logbuch:', error);
@@ -44,9 +43,10 @@ export async function POST(request: NextRequest) {
const body = await request.json();
const { Kuppel, ArtFuehrung, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
const [result] = await (await import('@/lib/db')).getPool().execute(
`INSERT INTO logbuch (Kuppel, ArtFuehrung, Beginn, Ende, Besucher, Bemerkungen, WetterTemp, WetterFeuchte, WetterDruck, created_by)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
const pool = getPool();
const [result] = await pool.execute(
'INSERT INTO logbuch (Kuppel, ArtFuehrung, Beginn, Ende, Besucher, Bemerkungen, WetterTemp, WetterFeuchte, WetterDruck, created_by)' +
' VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
[
Kuppel, ArtFuehrung, Beginn, Ende,
Besucher ?? 0,
@@ -71,9 +71,7 @@ export async function POST(request: NextRequest) {
if (existing[0]) {
objektId = existing[0].ID;
} else {
const [ins] = await (await import('@/lib/db')).getPool().execute(
'INSERT INTO objekte (Name) VALUES (?)', [obj.Name]
) as [{ insertId: number }, unknown];
const [ins] = await pool.execute('INSERT INTO objekte (Name) VALUES (?)', [obj.Name]) as [{ insertId: number }, unknown];
objektId = ins.insertId;
}
}