diff --git a/static/css/style.css b/static/css/style.css index b2c4899..cba00a8 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -124,6 +124,45 @@ body { background: #404040; } +.legend { + position: absolute; + bottom: 10px; + left: 10px; + background: rgba(45, 45, 45, 0.95); + border: 1px solid #404040; + border-radius: 8px; + padding: 1rem; + z-index: 1000; + min-width: 150px; +} + +.legend h4 { + margin: 0 0 0.5rem 0; + font-size: 0.9rem; + color: #ffffff; +} + +.legend-item { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.25rem; + font-size: 0.8rem; +} + +.legend-icon { + width: 16px; + height: 16px; + border-radius: 2px; + border: 1px solid #ffffff; +} + +.legend-icon.commercial { background: #00ff88; } +.legend-icon.cargo { background: #ff8c00; } +.legend-icon.military { background: #ff4444; } +.legend-icon.ga { background: #ffff00; } +.legend-icon.ground { background: #888888; } + .table-controls { display: flex; gap: 1rem; diff --git a/static/index.html b/static/index.html index 370cc23..b5cac57 100644 --- a/static/index.html +++ b/static/index.html @@ -31,6 +31,30 @@ + +
+

Aircraft Types

+
+ + Commercial +
+
+ + Cargo +
+
+ + Military +
+
+ + General Aviation +
+
+ + Ground +
+
diff --git a/static/js/app.js b/static/js/app.js index 7ba5696..84be511 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -243,16 +243,70 @@ class SkyView { return marker; } + getAircraftType(aircraft) { + if (aircraft.on_ground) return 'ground'; + + // Determine type based on flight number patterns and characteristics + const flight = aircraft.flight || ''; + + // Cargo airlines (simplified patterns) + if (/^(UPS|FDX|FX|ABX|ATN|5Y|QY)/i.test(flight)) return 'cargo'; + + // Military patterns (basic) + if (/^(RCH|CNV|MAC|EVAC|ARMY|NAVY|AF|USAF)/i.test(flight)) return 'military'; + + // General aviation (no airline code pattern) + if (flight.length > 0 && !/^[A-Z]{2,3}[0-9]/.test(flight)) return 'ga'; + + // Default commercial + return 'commercial'; + } + getAircraftIcon(aircraft) { const rotation = aircraft.track || 0; const hasPosition = aircraft.lat && aircraft.lon; - const color = hasPosition ? "#00ff88" : "#888888"; + const type = this.getAircraftType(aircraft); const size = hasPosition ? 24 : 18; + let color, icon; + + switch (type) { + case 'cargo': + color = hasPosition ? "#ff8c00" : "#666666"; + icon = ` + + + `; + break; + case 'military': + color = hasPosition ? "#ff4444" : "#666666"; + icon = ` + + + + `; + break; + case 'ga': + color = hasPosition ? "#ffff00" : "#666666"; + icon = ` + + `; + break; + case 'ground': + color = "#888888"; + icon = ` + G`; + break; + default: // commercial + color = hasPosition ? "#00ff88" : "#666666"; + icon = ` + + `; + break; + } + return ` - - - + ${icon} `; }