Enhance aircraft details display to match dump1090 format

- Add country lookup from ICAO hex codes with flag display
- Implement UTC clocks and last update time indicators
- Enhance aircraft table with ICAO, squawk, and RSSI columns
- Add color-coded RSSI signal strength indicators
- Fix calculateDistance returning string instead of number
- Accept all SBS-1 message types for complete data capture
- Improve data merging to preserve country and registration

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-08-23 23:20:31 +02:00
commit c8562a4f0d
5 changed files with 457 additions and 41 deletions

View file

@ -12,6 +12,24 @@
<div id="app">
<header class="header">
<h1>SkyView</h1>
<div class="clock-section">
<div class="clock-display">
<div class="clock" id="utc-clock">
<div class="clock-face">
<div class="clock-hand hour-hand" id="utc-hour"></div>
<div class="clock-hand minute-hand" id="utc-minute"></div>
</div>
<div class="clock-label">UTC</div>
</div>
<div class="clock" id="update-clock">
<div class="clock-face">
<div class="clock-hand hour-hand" id="update-hour"></div>
<div class="clock-hand minute-hand" id="update-minute"></div>
</div>
<div class="clock-label">Last Update</div>
</div>
</div>
</div>
<div class="stats-summary">
<span id="aircraft-count">0 aircraft</span>
<span id="connection-status" class="connected">Connected</span>
@ -60,27 +78,32 @@
<div id="table-view" class="view">
<div class="table-controls">
<input type="text" id="search-input" placeholder="Search by flight, callsign, or hex...">
<input type="text" id="search-input" placeholder="Search by flight, ICAO, or squawk...">
<select id="sort-select">
<option value="distance">Distance</option>
<option value="altitude">Altitude</option>
<option value="speed">Speed</option>
<option value="flight">Flight</option>
<option value="icao">ICAO</option>
<option value="squawk">Squawk</option>
<option value="age">Age</option>
<option value="rssi">RSSI</option>
</select>
</div>
<div class="table-container">
<table id="aircraft-table">
<thead>
<tr>
<th>ICAO</th>
<th>Flight</th>
<th>Hex</th>
<th>Type</th>
<th>Squawk</th>
<th>Altitude</th>
<th>Speed</th>
<th>Track</th>
<th>Distance</th>
<th>Track</th>
<th>Msgs</th>
<th>Seen</th>
<th>Age</th>
<th>RSSI</th>
</tr>
</thead>
<tbody id="aircraft-tbody">
@ -100,8 +123,8 @@
<div class="stat-value" id="messages-sec">0</div>
</div>
<div class="stat-card">
<h3>Signal Strength</h3>
<div class="stat-value" id="signal-strength">0 dB</div>
<h3>Avg RSSI</h3>
<div class="stat-value" id="signal-strength">0 dBFS</div>
</div>
<div class="stat-card">
<h3>Max Range</h3>