fix: correct Traccar Client setup instructions

- Remove unreliable QR code scanning, add direct app store links
- Fix server URL to use HTTP (not HTTPS) for port 5055
- OsmAnd protocol doesn't use SSL
- Emphasize that official Traccar Client app is required

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-02 23:23:00 +01:00
parent 0da2e7e8a6
commit 6a10785ec8
2 changed files with 27 additions and 18 deletions

View File

@@ -343,7 +343,7 @@ export class TraccarClientService implements OnModuleInit {
/** /**
* Get the device port URL for mobile app configuration * Get the device port URL for mobile app configuration
* Returns hostname:port for Traccar Client app to connect to * Returns full HTTP URL - port 5055 uses OsmAnd protocol without SSL
*/ */
getDeviceServerUrl(): string { getDeviceServerUrl(): string {
const port = this.configService.get<string>('TRACCAR_DEVICE_PORT') || '5055'; const port = this.configService.get<string>('TRACCAR_DEVICE_PORT') || '5055';
@@ -352,10 +352,10 @@ export class TraccarClientService implements OnModuleInit {
const traccarUrl = this.getTraccarUrl(); const traccarUrl = this.getTraccarUrl();
try { try {
const url = new URL(traccarUrl); const url = new URL(traccarUrl);
// Return just hostname:port (no protocol - the app handles that) // Return HTTP URL (not HTTPS) - OsmAnd protocol on port 5055 doesn't use SSL
return `${url.hostname}:${port}`; return `http://${url.hostname}:${port}`;
} catch { } catch {
return `localhost:${port}`; return `http://localhost:${port}`;
} }
} }

View File

@@ -776,23 +776,32 @@ export function GpsTracking() {
</div> </div>
)} )}
{/* QR Code for Traccar Client app */} {/* Manual Configuration - Traccar Client doesn't reliably scan QR codes */}
<div className="bg-white p-4 rounded-lg border border-border"> <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"> <div className="flex items-center gap-2 mb-3">
<QrCode className="h-5 w-5 text-primary" /> <Smartphone className="h-5 w-5 text-blue-600" />
<span className="text-sm font-medium text-foreground">Scan with Traccar Client</span> <span className="text-sm font-medium text-blue-800 dark:text-blue-200">Download Traccar Client</span>
</div> </div>
<div className="flex justify-center"> <div className="flex gap-2 justify-center mb-3">
{/* Traccar Client expects: serverUrl?id=xxx&interval=xxx&accuracy=high */} <a
<QRCodeSVG href="https://apps.apple.com/app/traccar-client/id843156974"
value={`https://${enrollmentResult.serverUrl.replace(/:\d+$/, '')}?id=${enrollmentResult.deviceIdentifier}&interval=${settings?.updateIntervalSeconds || 60}&accuracy=high`} target="_blank"
size={180} rel="noopener noreferrer"
level="M" className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
includeMargin={true} >
/> iOS App Store
</a>
<a
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"
>
Google Play
</a>
</div> </div>
<p className="text-xs text-center text-muted-foreground mt-2"> <p className="text-xs text-center text-blue-700 dark:text-blue-300">
Open Traccar Client Settings Scan QR Code Must use official Traccar Client app (not other GPS apps)
</p> </p>
</div> </div>