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

17
backend/src/gps/gps.service.ts
View File

@@ -5,6 +5,7 @@ import {
BadRequestException,
OnModuleInit,
} from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { Cron, CronExpression } from '@nestjs/schedule';
import { PrismaService } from '../prisma/prisma.service';
import { SignalService } from '../signal/signal.service';
@@ -27,6 +28,7 @@ export class GpsService implements OnModuleInit {
private prisma: PrismaService,
private traccarClient: TraccarClientService,
private signalService: SignalService,
private configService: ConfigService,
) {}
async onModuleInit() {
@@ -141,6 +143,7 @@ export class GpsService implements OnModuleInit {
success: boolean;
deviceIdentifier: string;
serverUrl: string;
qrCodeUrl: string;
instructions: string;
signalMessageSent?: boolean;
}> {
@@ -192,6 +195,19 @@ export class GpsService implements OnModuleInit {
const serverUrl = this.traccarClient.getDeviceServerUrl();
const settings = await this.getSettings();
// Build QR code URL for Traccar Client app
// Format: https://server:5055?id=DEVICE_ID&interval=SECONDS
// The Traccar Client app parses this as: server URL (origin) + query params (id, interval, etc.)
const devicePort = this.configService.get<number>('TRACCAR_DEVICE_PORT') || 5055;
const traccarPublicUrl = this.traccarClient.getTraccarUrl();
const qrUrl = new URL(traccarPublicUrl);
qrUrl.port = String(devicePort);
qrUrl.searchParams.set('id', actualDeviceId);
qrUrl.searchParams.set('interval', String(settings.updateIntervalSeconds));
const qrCodeUrl = qrUrl.toString();
this.logger.log(`QR code URL for driver: ${qrCodeUrl}`);
const instructions = `
GPS Tracking Setup Instructions for ${driver.name}:
@@ -234,6 +250,7 @@ Note: GPS tracking is only active during shift hours (${settings.shiftStartHour}
success: true,
deviceIdentifier: actualDeviceId, // Return what Traccar actually stored
serverUrl,
qrCodeUrl,
instructions,
signalMessageSent,
};

2
docker-compose.yml
View File

@@ -52,7 +52,7 @@ services:
# Traccar GPS Tracking Server
traccar:
image: traccar/traccar:latest
image: traccar/traccar:6.11
container_name: vip-traccar
ports:
- "8082:8082" # Web UI & API

2
frontend/Dockerfile
View File

@@ -46,7 +46,7 @@ EXPOSE 80
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
CMD wget --no-verbose --tries=1 --spider http://127.0.0.1/ || exit 1
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

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;
}