kyle/vip-coordinator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add QR code to enrollment screen for Traccar Client setup

Browse Source 
Generate a QR code URL containing device ID, server URL, and update
interval that the Traccar Client app can scan to auto-configure.
The enrollment modal now shows the QR prominently with manual setup
collapsed as a fallback. Also pins Traccar to 6.11 and fixes Docker
health checks (IPv6/curl issues).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kyle
2026-02-03 20:54:59 +01:00
parent 1e162b4f7c
commit a0d0cbc8f6
5 changed files with 84 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/pages/GpsTracking.tsx
View File

@@ -768,18 +768,37 @@ export function GpsTracking() {
</div>
)}
{/* Manual Configuration - Traccar Client doesn't reliably scan QR codes */}
<div className="bg-blue-50 dark:bg-blue-950/30 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
<div className="flex items-center gap-2 mb-3">
<Smartphone className="h-5 w-5 text-blue-600" />
{/* QR Code - scan with Traccar Client app to auto-configure */}
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-border text-center">
<div className="flex items-center justify-center gap-2 mb-3">
<QrCode className="h-5 w-5 text-primary" />
<span className="text-sm font-medium">Scan with Traccar Client</span>
</div>
<div className="flex justify-center mb-3">
<QRCodeSVG
value={enrollmentResult.qrCodeUrl}
size={200}
level="M"
includeMargin
/>
</div>
<p className="text-xs text-muted-foreground">
Open Traccar Client app → tap the QR icon → scan this code
</p>
</div>
{/* Download links */}
<div className="bg-blue-50 dark:bg-blue-950/30 p-3 rounded-lg border border-blue-200 dark:border-blue-800">
<div className="flex items-center gap-2 mb-2">
<Smartphone className="h-4 w-4 text-blue-600" />
<span className="text-sm font-medium text-blue-800 dark:text-blue-200">Download Traccar Client</span>
</div>
<div className="flex gap-2 justify-center mb-3">
<div className="flex gap-2 justify-center">
<a
href="https://apps.apple.com/app/traccar-client/id843156974"
target="_blank"
rel="noopener noreferrer"
className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
className="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
>
iOS App Store
</a>
@@ -787,56 +806,54 @@ export function GpsTracking() {
href="https://play.google.com/store/apps/details?id=org.traccar.client"
target="_blank"
rel="noopener noreferrer"
className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700"
className="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700"
>
Google Play
</a>
</div>
<p className="text-xs text-center text-blue-700 dark:text-blue-300">
Must use official Traccar Client app (not other GPS apps)
</p>
</div>
<div className="space-y-3">
<div>
<label className="text-xs text-muted-foreground">Device ID</label>
<div className="flex items-center gap-2">
<code className="flex-1 bg-muted p-2 rounded text-sm font-mono">
{enrollmentResult.deviceIdentifier}
</code>
<button
onClick={() => copyToClipboard(enrollmentResult.deviceIdentifier)}
className="p-2 hover:bg-muted rounded transition-colors"
>
<Copy className="h-4 w-4" />
</button>
{/* Manual fallback - collapsible */}
<details className="bg-muted/30 rounded-lg border border-border">
<summary className="p-3 text-sm font-medium cursor-pointer hover:bg-muted/50 transition-colors">
Manual Setup (if QR doesn't work)
</summary>
<div className="px-3 pb-3 space-y-2">
<div>
<label className="text-xs text-muted-foreground">Device ID</label>
<div className="flex items-center gap-2">
<code className="flex-1 bg-muted p-2 rounded text-sm font-mono">
{enrollmentResult.deviceIdentifier}
</code>
<button
onClick={() => copyToClipboard(enrollmentResult.deviceIdentifier)}
className="p-2 hover:bg-muted rounded transition-colors"
>
<Copy className="h-4 w-4" />
</button>
</div>
</div>
</div>
<div>
<label className="text-xs text-muted-foreground">Server URL</label>
<div className="flex items-center gap-2">
<code className="flex-1 bg-muted p-2 rounded text-sm font-mono text-xs">
{enrollmentResult.serverUrl}
</code>
<button
onClick={() => copyToClipboard(enrollmentResult.serverUrl)}
className="p-2 hover:bg-muted rounded transition-colors"
>
<Copy className="h-4 w-4" />
</button>
<div>
<label className="text-xs text-muted-foreground">Server URL</label>
<div className="flex items-center gap-2">
<code className="flex-1 bg-muted p-2 rounded text-sm font-mono text-xs">
{enrollmentResult.serverUrl}
</code>
<button
onClick={() => copyToClipboard(enrollmentResult.serverUrl)}
className="p-2 hover:bg-muted rounded transition-colors"
>
<Copy className="h-4 w-4" />
</button>
</div>
</div>
<ol className="text-xs space-y-1 list-decimal list-inside text-muted-foreground mt-2">
<li>Open Traccar Client and enter Device ID and Server URL above</li>
<li>Set frequency to {settings?.updateIntervalSeconds || 60} seconds</li>
<li>Tap "Service Status" to start tracking</li>
</ol>
</div>
</div>
<div className="bg-muted/50 p-3 rounded-lg">
<p className="text-sm font-medium mb-2">Driver Instructions:</p>
<ol className="text-sm space-y-1 list-decimal list-inside text-muted-foreground">
<li>Download "Traccar Client" from App Store or Play Store</li>
<li>Open app and enter the Device ID and Server URL</li>
<li>Set frequency to {settings?.updateIntervalSeconds || 60} seconds</li>
<li>Tap "Service Status" to start tracking</li>
</ol>
</div>
</details>
<button
onClick={() => { setShowEnrollModal(false); setEnrollmentResult(null); }}

1
frontend/src/types/gps.ts
View File

@@ -83,6 +83,7 @@ export interface EnrollmentResponse {
success: boolean;
deviceIdentifier: string;
serverUrl: string;
qrCodeUrl: string;
instructions: string;
signalMessageSent?: boolean;
}