Match Komoot import page layout to Wahoo import page
- Switch to max-w-4xl to match the generic import page - Move the trigger button to the header row (title on left, action on right) - Show progress inline as "X / Y" in the header while running - Progress card only appears once a batch exists; empty state is a centered paragraph like the generic page's "no workouts" message - Link to /activities on completion instead of a separate paragraph Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer
parent
5ff7af8a81
commit
600ecc6685
1 changed files with 89 additions and 88 deletions
|
|
@ -50,8 +50,6 @@ export async function action({ request }: Route.ActionArgs) {
|
||||||
const user = await getSessionUser(request);
|
const user = await getSessionUser(request);
|
||||||
if (!user) return redirect("/auth/login");
|
if (!user) return redirect("/auth/login");
|
||||||
|
|
||||||
// Delegate to the API route — just redirect so the page reloads with
|
|
||||||
// the new batch after the POST.
|
|
||||||
const resp = await fetch(
|
const resp = await fetch(
|
||||||
new URL("/api/sync/komoot/import", new URL(request.url).origin),
|
new URL("/api/sync/komoot/import", new URL(request.url).origin),
|
||||||
{ method: "POST", headers: { cookie: request.headers.get("cookie") ?? "" } },
|
{ method: "POST", headers: { cookie: request.headers.get("cookie") ?? "" } },
|
||||||
|
|
@ -78,107 +76,110 @@ export default function KomootImportPage({ loaderData }: Route.ComponentProps) {
|
||||||
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||||
|
|
||||||
const isActive = batch?.status === "pending" || batch?.status === "running";
|
const isActive = batch?.status === "pending" || batch?.status === "running";
|
||||||
|
const isIdle = triggerFetcher.state === "idle";
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isActive) {
|
if (isActive) {
|
||||||
pollingRef.current = setInterval(() => {
|
pollingRef.current = setInterval(() => revalidator.revalidate(), 2000);
|
||||||
revalidator.revalidate();
|
|
||||||
}, 2000);
|
|
||||||
}
|
}
|
||||||
return () => {
|
return () => { if (pollingRef.current) clearInterval(pollingRef.current); };
|
||||||
if (pollingRef.current) clearInterval(pollingRef.current);
|
|
||||||
};
|
|
||||||
}, [isActive]);
|
}, [isActive]);
|
||||||
|
|
||||||
const elapsedSeconds = batch
|
const elapsedSeconds = batch
|
||||||
? Math.floor(
|
? Math.floor(
|
||||||
(batch.completedAt
|
((batch.completedAt ? new Date(batch.completedAt) : new Date()).getTime()
|
||||||
? new Date(batch.completedAt).getTime()
|
- new Date(batch.startedAt).getTime()) / 1000,
|
||||||
: Date.now()) - new Date(batch.startedAt).getTime(),
|
)
|
||||||
) / 1000
|
|
||||||
: 0;
|
: 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto max-w-2xl px-4 py-8">
|
<div className="mx-auto max-w-4xl px-4 py-8">
|
||||||
<h1 className="text-2xl font-bold text-gray-900">
|
{/* Header row — mirrors sync.import.$provider layout */}
|
||||||
{t("sync.importFrom", { provider: "Komoot" })}
|
<div className="flex items-center justify-between">
|
||||||
</h1>
|
<h1 className="text-2xl font-bold text-gray-900">
|
||||||
|
{t("sync.importFrom", { provider: "Komoot" })}
|
||||||
|
</h1>
|
||||||
|
|
||||||
<div className="mt-6 rounded-lg border border-gray-200 p-6">
|
{isActive ? (
|
||||||
{!batch && (
|
<span className="text-sm text-gray-500">
|
||||||
<div className="text-center">
|
{batch.totalFound > 0
|
||||||
<p className="text-gray-600">{t("komoot.import.noImportYet")}</p>
|
? t("sync.importingProgress", {
|
||||||
<triggerFetcher.Form method="post" className="mt-4">
|
current: batch.importedCount + batch.duplicateCount,
|
||||||
<button
|
total: batch.totalFound,
|
||||||
type="submit"
|
})
|
||||||
disabled={triggerFetcher.state !== "idle"}
|
: t("komoot.import.status.running")}
|
||||||
className="rounded-md bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
</span>
|
||||||
>
|
) : (
|
||||||
{triggerFetcher.state !== "idle"
|
<triggerFetcher.Form method="post">
|
||||||
? t("komoot.import.starting")
|
<button
|
||||||
: t("komoot.import.startImport")}
|
type="submit"
|
||||||
</button>
|
disabled={!isIdle}
|
||||||
</triggerFetcher.Form>
|
className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
|
||||||
</div>
|
>
|
||||||
)}
|
{!isIdle ? t("komoot.import.starting") : t("komoot.import.startImport")}
|
||||||
|
</button>
|
||||||
{batch && (
|
</triggerFetcher.Form>
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<StatusBadge status={batch.status} t={t} />
|
|
||||||
{(batch.status === "completed" || batch.status === "failed") && (
|
|
||||||
<triggerFetcher.Form method="post">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={triggerFetcher.state !== "idle"}
|
|
||||||
className="text-sm text-blue-600 hover:underline disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{t("komoot.import.runAgain")}
|
|
||||||
</button>
|
|
||||||
</triggerFetcher.Form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isActive && (
|
|
||||||
<div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
|
|
||||||
<div
|
|
||||||
className="h-2 rounded-full bg-blue-500 transition-all duration-500"
|
|
||||||
style={{
|
|
||||||
width: batch.totalFound > 0
|
|
||||||
? `${Math.round(((batch.importedCount + batch.duplicateCount) / batch.totalFound) * 100)}%`
|
|
||||||
: "5%",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<dl className="grid grid-cols-3 gap-4 text-center">
|
|
||||||
<StatBox label={t("komoot.import.found")} value={batch.totalFound} />
|
|
||||||
<StatBox label={t("komoot.import.imported")} value={batch.importedCount} />
|
|
||||||
<StatBox label={t("komoot.import.skipped")} value={batch.duplicateCount} />
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
{batch.status === "completed" && (
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
{t("komoot.import.completedIn", { duration: formatDuration(elapsedSeconds) })}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{batch.status === "failed" && batch.errorMessage && (
|
|
||||||
<p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
||||||
{batch.errorMessage}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{batch?.status === "completed" && (
|
{/* Progress card — shown once a batch exists */}
|
||||||
<p className="mt-4 text-center text-sm text-gray-500">
|
{batch && (
|
||||||
<a href={`/users/me`} className="text-blue-600 hover:underline">
|
<div className="mt-6 rounded-lg border border-gray-200 p-6">
|
||||||
{t("komoot.import.viewActivities")}
|
<div className="flex items-center justify-between">
|
||||||
</a>
|
<StatusBadge status={batch.status} t={t} />
|
||||||
</p>
|
{(batch.status === "completed" || batch.status === "failed") && (
|
||||||
|
<triggerFetcher.Form method="post">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!isIdle}
|
||||||
|
className="text-sm text-blue-600 hover:underline disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{t("komoot.import.runAgain")}
|
||||||
|
</button>
|
||||||
|
</triggerFetcher.Form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isActive && (
|
||||||
|
<div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-gray-100">
|
||||||
|
<div
|
||||||
|
className="h-2 rounded-full bg-blue-500 transition-all duration-500"
|
||||||
|
style={{
|
||||||
|
width: batch.totalFound > 0
|
||||||
|
? `${Math.round(((batch.importedCount + batch.duplicateCount) / batch.totalFound) * 100)}%`
|
||||||
|
: "5%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<dl className="mt-4 grid grid-cols-3 gap-4 text-center">
|
||||||
|
<StatBox label={t("komoot.import.found")} value={batch.totalFound} />
|
||||||
|
<StatBox label={t("komoot.import.imported")} value={batch.importedCount} />
|
||||||
|
<StatBox label={t("komoot.import.skipped")} value={batch.duplicateCount} />
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
{batch.status === "completed" && (
|
||||||
|
<p className="mt-3 text-sm text-gray-500">
|
||||||
|
{t("komoot.import.completedIn", { duration: formatDuration(elapsedSeconds) })}
|
||||||
|
{" · "}
|
||||||
|
<a href="/activities" className="text-blue-600 hover:underline">
|
||||||
|
{t("komoot.import.viewActivities")}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{batch.status === "failed" && batch.errorMessage && (
|
||||||
|
<p className="mt-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||||
|
{batch.errorMessage}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty state — no batch yet */}
|
||||||
|
{!batch && (
|
||||||
|
<p className="mt-8 text-center text-gray-500">{t("komoot.import.noImportYet")}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue