346 lines
11 KiB
TypeScript
346 lines
11 KiB
TypeScript
import { Button } from "@/shared/components/ui/button"
|
|
import { Card, CardContent } from "@/shared/components/ui/card"
|
|
import { Switch } from "@/shared/components/ui/switch"
|
|
import { useDb } from "@/shared/db/provider"
|
|
import { useDeviceId } from "@/shared/hooks/use-device-id"
|
|
import { useFollows } from "@/shared/hooks/use-follows"
|
|
import { usePush } from "@/shared/hooks/use-push"
|
|
import { usePwaUpdate } from "@/shared/hooks/use-pwa-update"
|
|
import { fetchTopics } from "@/shared/lib/aw-api"
|
|
import { BACKEND_URL, VAPID_PUBLIC_KEY } from "@/shared/lib/constants"
|
|
import { useCallback, useEffect, useState } from "react"
|
|
import { type GeoResult, clearGeoCache, detectFromCoords, loadCachedResult } from "../../location/lib/geo"
|
|
import { NotificationGuide } from "./notification-guide"
|
|
|
|
function isStandalone(): boolean {
|
|
if (typeof window === "undefined") return false
|
|
return (
|
|
window.matchMedia("(display-mode: standalone)").matches ||
|
|
("standalone" in navigator && (navigator as { standalone?: boolean }).standalone === true)
|
|
)
|
|
}
|
|
|
|
export function SettingsPage() {
|
|
const db = useDb()
|
|
const deviceId = useDeviceId()
|
|
const { needRefresh, checkForUpdate, applyUpdate } = usePwaUpdate()
|
|
const push = usePush()
|
|
const { follow } = useFollows()
|
|
const [checking, setChecking] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const [result, setResult] = useState<GeoResult | null>(null)
|
|
const [errorMsg, setErrorMsg] = useState<string | null>(null)
|
|
const [showGuide, setShowGuide] = useState(false)
|
|
const [devHealth, setDevHealth] = useState<string | null>(null)
|
|
const [devPush, setDevPush] = useState<string | null>(null)
|
|
const [devTopics, setDevTopics] = useState<string | null>(null)
|
|
const [devPoliticians, setDevPoliticians] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
loadCachedResult(db).then((cached) => {
|
|
if (cached) setResult(cached)
|
|
})
|
|
}, [db])
|
|
|
|
const detect = useCallback(
|
|
(skipCache: boolean) => {
|
|
if (!navigator.geolocation) {
|
|
setErrorMsg("Standortbestimmung wird nicht unterstützt")
|
|
return
|
|
}
|
|
setLoading(true)
|
|
setErrorMsg(null)
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (pos) => {
|
|
try {
|
|
const r = await detectFromCoords(db, pos.coords.latitude, pos.coords.longitude, skipCache)
|
|
setResult(r)
|
|
} catch (e) {
|
|
setErrorMsg(String(e))
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
},
|
|
(err) => {
|
|
setErrorMsg(err.message)
|
|
setLoading(false)
|
|
},
|
|
)
|
|
},
|
|
[db],
|
|
)
|
|
|
|
function handleClearCache() {
|
|
clearGeoCache(db)
|
|
setResult(null)
|
|
}
|
|
|
|
async function handleCheckUpdate() {
|
|
setChecking(true)
|
|
try {
|
|
await checkForUpdate()
|
|
} finally {
|
|
setChecking(false)
|
|
}
|
|
}
|
|
|
|
const hasLocation = result && result.mandates.length > 0
|
|
const standalone = isStandalone()
|
|
|
|
if (showGuide) {
|
|
return <NotificationGuide onBack={() => setShowGuide(false)} />
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 py-4 space-y-6 pb-4">
|
|
{/* --- Notifications --- */}
|
|
{VAPID_PUBLIC_KEY && (
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2">
|
|
Benachrichtigungen
|
|
</h2>
|
|
<Card className="py-0 gap-0">
|
|
<CardContent className="p-0 divide-y divide-border">
|
|
{push.permission === "denied" ? (
|
|
<div className="px-4 py-3">
|
|
<span className="text-destructive text-sm">
|
|
Benachrichtigungen sind blockiert. Bitte in den Systemeinstellungen aktivieren.
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<span className="text-sm" id="push-label">
|
|
Push-Benachrichtigungen
|
|
</span>
|
|
<Switch
|
|
checked={push.subscribed}
|
|
disabled={push.loading}
|
|
aria-labelledby="push-label"
|
|
onCheckedChange={() => {
|
|
if (push.subscribed) push.unsubscribe()
|
|
else push.subscribe()
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
{!standalone && (
|
|
<button
|
|
type="button"
|
|
className="w-full flex items-center justify-between px-4 py-3 text-sm hover:bg-muted transition-colors"
|
|
onClick={() => setShowGuide(true)}
|
|
>
|
|
Einrichtung auf dem iPhone
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="w-4 h-4 text-muted-foreground"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
aria-hidden="true"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
)}
|
|
|
|
{/* --- Location --- */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2">Standort</h2>
|
|
|
|
{loading && (
|
|
<div className="flex items-center justify-center h-16 mb-3">
|
|
<div className="w-6 h-6 border-3 border-primary border-t-transparent rounded-full animate-spin" />
|
|
<span className="ml-3 text-sm text-muted-foreground">{hasLocation ? "Aktualisiere…" : "Erkenne…"}</span>
|
|
</div>
|
|
)}
|
|
|
|
{errorMsg && (
|
|
<div className="mb-3 p-3 bg-destructive/10 rounded-lg text-destructive text-sm" role="alert">
|
|
{errorMsg}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{!hasLocation && !loading && (
|
|
<Button size="lg" onClick={() => detect(false)}>
|
|
Standort erkennen
|
|
</Button>
|
|
)}
|
|
{hasLocation && (
|
|
<>
|
|
<Button size="sm" variant="outline" onClick={() => detect(true)} disabled={loading}>
|
|
Abgeordnete neu laden
|
|
</Button>
|
|
<Button size="sm" variant="outline" onClick={handleClearCache} disabled={loading}>
|
|
Cache löschen
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* --- App Update --- */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2">App-Update</h2>
|
|
<Card className="py-0 gap-0">
|
|
<CardContent className="p-0">
|
|
{needRefresh ? (
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<span className="text-sm">Neue Version verfügbar</span>
|
|
<Button size="sm" onClick={applyUpdate}>
|
|
Jetzt aktualisieren
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<span className="text-sm">App ist aktuell</span>
|
|
<Button size="sm" variant="outline" onClick={handleCheckUpdate} disabled={checking}>
|
|
{checking ? "Prüfe…" : "Prüfen"}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* --- About --- */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2">Info</h2>
|
|
<Card className="py-0 gap-0">
|
|
<CardContent className="p-0 divide-y divide-border">
|
|
<div className="flex justify-between px-4 py-3">
|
|
<span className="text-sm">Datenquelle</span>
|
|
<a
|
|
href="https://www.abgeordnetenwatch.de"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-primary"
|
|
>
|
|
abgeordnetenwatch.de
|
|
</a>
|
|
</div>
|
|
<div className="flex justify-between px-4 py-3">
|
|
<span className="text-sm">Geräte-ID</span>
|
|
<span className="font-mono text-xs max-w-[50%] truncate">{deviceId}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* --- Developer --- */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2">Entwickler</h2>
|
|
<Card className="py-0 gap-0">
|
|
<CardContent className="p-0 divide-y divide-border">
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<span className="text-sm">Backend Health</span>
|
|
<div className="flex items-center gap-2">
|
|
{devHealth && (
|
|
<span className={`text-xs ${devHealth === "ok" ? "text-green-600" : "text-destructive"}`}>
|
|
{devHealth}
|
|
</span>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={async () => {
|
|
setDevHealth(null)
|
|
try {
|
|
const res = await fetch(`${BACKEND_URL}/health`)
|
|
setDevHealth(res.ok ? "ok" : `${res.status}`)
|
|
} catch (e) {
|
|
setDevHealth(String(e))
|
|
}
|
|
}}
|
|
>
|
|
Prüfen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<span className="text-sm">Test-Push</span>
|
|
<div className="flex items-center gap-2">
|
|
{devPush && (
|
|
<span className={`text-xs ${devPush === "ok" ? "text-green-600" : "text-destructive"}`}>
|
|
{devPush}
|
|
</span>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={async () => {
|
|
setDevPush(null)
|
|
try {
|
|
const res = await fetch(`${BACKEND_URL}/push/test`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ device_id: deviceId }),
|
|
})
|
|
setDevPush(res.ok ? "ok" : `${res.status}`)
|
|
} catch (e) {
|
|
setDevPush(String(e))
|
|
}
|
|
}}
|
|
>
|
|
Senden
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<span className="text-sm">Alle Themen folgen</span>
|
|
<div className="flex items-center gap-2">
|
|
{devTopics && <span className="text-xs text-green-600">{devTopics}</span>}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={async () => {
|
|
setDevTopics(null)
|
|
try {
|
|
const topics = await fetchTopics()
|
|
for (const t of topics) follow("topic", t.id, t.label)
|
|
setDevTopics(`${topics.length}`)
|
|
} catch (e) {
|
|
setDevTopics(String(e))
|
|
}
|
|
}}
|
|
>
|
|
Folgen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<span className="text-sm">Alle Abgeordnete folgen</span>
|
|
<div className="flex items-center gap-2">
|
|
{devPoliticians && <span className="text-xs text-green-600">{devPoliticians}</span>}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={async () => {
|
|
setDevPoliticians(null)
|
|
const cached = await loadCachedResult(db)
|
|
if (!cached || cached.mandates.length === 0) {
|
|
setDevPoliticians("Kein Standort-Cache")
|
|
return
|
|
}
|
|
for (const m of cached.mandates) {
|
|
follow("politician", m.politician.id, m.politician.label)
|
|
}
|
|
setDevPoliticians(`${cached.mandates.length}`)
|
|
}}
|
|
>
|
|
Folgen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|