olemd/skyview
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases 11 Packages Wiki Activity Actions

feat: Enhance web interface with database integration and callsign management

Browse source 
- Add callsign management module for enhanced aircraft information
- Integrate database status display in web interface
- Update aircraft manager with database-backed callsign resolution
- Enhance user interface with database connectivity indicators
- Add embedded asset management for new database interface components

🤖 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-31 19:43:58 +02:00
commit 8019049c63
6 changed files with 303 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

41
assets/static/js/modules/aircraft-manager.js
View file

@ -1,7 +1,8 @@
// Aircraft marker and data management module
export class AircraftManager {
constructor(map) {
constructor(map, callsignManager = null) {
this.map = map;
this.callsignManager = callsignManager;
this.aircraftData = new Map();
this.aircraftMarkers = new Map();
this.aircraftTrails = new Map();
@ -228,6 +229,11 @@ export class AircraftManager {
// Handle popup exactly like Leaflet expects
if (marker.isPopupOpen()) {
marker.setPopupContent(this.createPopupContent(aircraft));
// Enhance callsign display for updated popup
const popupElement = marker.getPopup().getElement();
if (popupElement) {
this.enhanceCallsignDisplay(popupElement);
}
}
this.markerUpdateCount++;
@ -250,6 +256,14 @@ export class AircraftManager {
maxWidth: 450,
className: 'aircraft-popup'
});
// Enhance callsign display when popup opens
marker.on('popupopen', (e) => {
const popupElement = e.popup.getElement();
if (popupElement) {
this.enhanceCallsignDisplay(popupElement);
}
});
this.aircraftMarkers.set(icao, marker);
this.markerCreateCount++;
@ -435,7 +449,7 @@ export class AircraftManager {
<div class="flight-info">
<span class="icao-flag">${flag}</span>
<span class="flight-id">${aircraft.ICAO24 || 'N/A'}</span>
${aircraft.Callsign ? `→ <span class="callsign">${aircraft.Callsign}</span>` : ''}
${aircraft.Callsign ? `→ <span class="callsign-loading" data-callsign="${aircraft.Callsign}"><span class="callsign">${aircraft.Callsign}</span></span>` : ''}
</div>
</div>
@ -511,6 +525,29 @@ export class AircraftManager {
return minDistance === Infinity ? null : minDistance;
}
// Enhance callsign display in popup after it's created
async enhanceCallsignDisplay(popupElement) {
if (!this.callsignManager) return;
const callsignElements = popupElement.querySelectorAll('.callsign-loading');
for (const element of callsignElements) {
const callsign = element.dataset.callsign;
if (!callsign) continue;
try {
const callsignInfo = await this.callsignManager.getCallsignInfo(callsign);
const richDisplay = this.callsignManager.generateCallsignDisplay(callsignInfo, callsign);
element.innerHTML = richDisplay;
element.classList.remove('callsign-loading');
element.classList.add('callsign-enhanced');
} catch (error) {
console.warn(`Failed to enhance callsign display for ${callsign}:`, error);
// Keep the simple display on error
element.classList.remove('callsign-loading');
}
}
}
toggleTrails() {
this.showTrails = !this.showTrails;