636 lines
20 KiB
Svelte
636 lines
20 KiB
Svelte
<script>
|
|
import { onMount, onDestroy } from 'svelte';
|
|
import { soundManager } from './lib/soundManager.js';
|
|
import Header from './components/Header.svelte';
|
|
import StatsCards from './components/StatsCards.svelte';
|
|
import FilterBar from './components/FilterBar.svelte';
|
|
import SpotsTable from './components/SpotsTable.svelte';
|
|
import Sidebar from './components/Sidebar.svelte';
|
|
import Toast from './components/Toast.svelte';
|
|
import ErrorBanner from './components/ErrorBanner.svelte';
|
|
import { spotWorker } from './lib/spotWorker.js';
|
|
import { spotCache } from './lib/spotCache.js';
|
|
import LogsTab from './components/LogsTab.svelte';
|
|
|
|
|
|
// State
|
|
let spots = [];
|
|
let filteredSpots = [];
|
|
let stats = {
|
|
totalSpots: 0,
|
|
activeSpotters: 0,
|
|
newDXCC: 0,
|
|
connectedClients: 0,
|
|
totalContacts: 0,
|
|
clusterStatus: 'disconnected',
|
|
flexStatus: 'disconnected',
|
|
myCallsign: '',
|
|
filters: { skimmer: false, ft8: false, ft4: false }
|
|
};
|
|
let topSpotters = [];
|
|
let watchlist = []; // ✅ Initialisé vide, sera rempli par WebSocket
|
|
let recentQSOs = [];
|
|
let logStats = { today: 0, thisWeek: 0, thisMonth: 0, total: 0 };
|
|
let dxccProgress = { worked: 0, total: 340, percentage: 0 };
|
|
let solarData = { sfi: 'N/A', sunspots: 'N/A', aIndex: 'N/A', kIndex: 'N/A' };
|
|
|
|
let activeTab = 'stats';
|
|
let showOnlyActive = false; // ✅ État global pour persister entre les onglets
|
|
let wsStatus = 'disconnected';
|
|
let errorMessage = '';
|
|
let toastMessage = '';
|
|
let toastType = 'info';
|
|
let logs = [];
|
|
|
|
let spotFilters = {
|
|
showAll: true,
|
|
showNewDXCC: false,
|
|
showNewBand: false,
|
|
showNewMode: false,
|
|
showNewBandMode: false,
|
|
showNewSlot: false,
|
|
showWorked: false,
|
|
showWatchlist: false,
|
|
showDigital: false,
|
|
showSSB: false,
|
|
showCW: false,
|
|
band160M: false,
|
|
band80M: false,
|
|
band60M: false,
|
|
band40M: false,
|
|
band30M: false,
|
|
band20M: false,
|
|
band17M: false,
|
|
band15M: false,
|
|
band12M: false,
|
|
band10M: false,
|
|
band6M: false
|
|
};
|
|
|
|
// WebSocket
|
|
let ws;
|
|
let reconnectTimer;
|
|
let reconnectAttempts = 0;
|
|
let maxReconnectAttempts = 10;
|
|
let isShuttingDown = false;
|
|
let filterTimeout;
|
|
let isFiltering = false;
|
|
let cacheLoaded = false;
|
|
let notifiedSpots = new Set();
|
|
|
|
$: {
|
|
if (spotFilters.showAll) {
|
|
filteredSpots = spots;
|
|
isFiltering = false;
|
|
if (filterTimeout) {
|
|
clearTimeout(filterTimeout);
|
|
filterTimeout = null;
|
|
}
|
|
} else {
|
|
if (filterTimeout) {
|
|
clearTimeout(filterTimeout);
|
|
}
|
|
|
|
filterTimeout = setTimeout(async () => {
|
|
isFiltering = true;
|
|
try {
|
|
filteredSpots = await spotWorker.filterSpots(spots, spotFilters, watchlist);
|
|
} catch (error) {
|
|
console.error('Filter error:', error);
|
|
filteredSpots = spots;
|
|
} finally {
|
|
isFiltering = false;
|
|
filterTimeout = null;
|
|
}
|
|
}, 150);
|
|
}
|
|
}
|
|
|
|
function applyFilters(allSpots, filters, wl) {
|
|
const bandFiltersActive = filters.band160M || filters.band80M || filters.band60M ||
|
|
filters.band40M || filters.band30M || filters.band20M || filters.band17M ||
|
|
filters.band15M || filters.band12M || filters.band10M || filters.band6M;
|
|
|
|
const typeFiltersActive = filters.showNewDXCC || filters.showNewBand ||
|
|
filters.showNewMode || filters.showNewBandMode || filters.showNewSlot ||
|
|
filters.showWorked || filters.showWatchlist;
|
|
|
|
const modeFiltersActive = filters.showDigital || filters.showSSB || filters.showCW;
|
|
|
|
return allSpots.filter(spot => {
|
|
let matchesBand = false;
|
|
let matchesType = false;
|
|
let matchesMode = false;
|
|
|
|
if (bandFiltersActive) {
|
|
matchesBand = (
|
|
(filters.band160M && spot.Band === '160M') ||
|
|
(filters.band80M && spot.Band === '80M') ||
|
|
(filters.band60M && spot.Band === '60M') ||
|
|
(filters.band40M && spot.Band === '40M') ||
|
|
(filters.band30M && spot.Band === '30M') ||
|
|
(filters.band20M && spot.Band === '20M') ||
|
|
(filters.band17M && spot.Band === '17M') ||
|
|
(filters.band15M && spot.Band === '15M') ||
|
|
(filters.band12M && spot.Band === '12M') ||
|
|
(filters.band10M && spot.Band === '10M') ||
|
|
(filters.band6M && spot.Band === '6M')
|
|
);
|
|
}
|
|
|
|
if (typeFiltersActive) {
|
|
if (filters.showWatchlist) {
|
|
const inWatchlist = wl.some(pattern =>
|
|
spot.DX === pattern || spot.DX.startsWith(pattern)
|
|
);
|
|
if (inWatchlist) matchesType = true;
|
|
}
|
|
if (filters.showNewDXCC && spot.NewDXCC) matchesType = true;
|
|
else if (filters.showNewBandMode && spot.NewBand && spot.NewMode && !spot.NewDXCC) matchesType = true;
|
|
else if (filters.showNewBand && spot.NewBand && !spot.NewMode && !spot.NewDXCC) matchesType = true;
|
|
else if (filters.showNewMode && spot.NewMode && !spot.NewBand && !spot.NewDXCC) matchesType = true;
|
|
else if (filters.showNewSlot && spot.NewSlot && !spot.NewDXCC && !spot.NewBand && !spot.NewMode) matchesType = true;
|
|
else if (filters.showWorked && spot.Worked) matchesType = true;
|
|
}
|
|
|
|
if (modeFiltersActive) {
|
|
const mode = spot.Mode || '';
|
|
if (filters.showDigital && ['FT8', 'FT4', 'RTTY'].includes(mode)) matchesMode = true;
|
|
if (filters.showSSB && ['SSB', 'USB', 'LSB'].includes(mode)) matchesMode = true;
|
|
if (filters.showCW && mode === 'CW') matchesMode = true;
|
|
}
|
|
|
|
const numActiveFilterTypes = [bandFiltersActive, typeFiltersActive, modeFiltersActive].filter(Boolean).length;
|
|
|
|
if (numActiveFilterTypes === 0) return false;
|
|
if (numActiveFilterTypes === 1) {
|
|
if (bandFiltersActive) return matchesBand;
|
|
if (typeFiltersActive) return matchesType;
|
|
if (modeFiltersActive) return matchesMode;
|
|
}
|
|
if (numActiveFilterTypes === 2) {
|
|
if (bandFiltersActive && typeFiltersActive) return matchesBand && matchesType;
|
|
if (bandFiltersActive && modeFiltersActive) return matchesBand && matchesMode;
|
|
if (typeFiltersActive && modeFiltersActive) return matchesType && matchesMode;
|
|
}
|
|
if (numActiveFilterTypes === 3) {
|
|
return matchesBand && matchesType && matchesMode;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
}
|
|
|
|
function toggleFilter(filterName) {
|
|
if (filterName === 'showAll') {
|
|
spotFilters = {
|
|
showAll: true,
|
|
showNewDXCC: false,
|
|
showNewBand: false,
|
|
showNewMode: false,
|
|
showNewBandMode: false,
|
|
showNewSlot: false,
|
|
showWorked: false,
|
|
showWatchlist: false,
|
|
showDigital: false,
|
|
showSSB: false,
|
|
showCW: false,
|
|
band160M: false,
|
|
band80M: false,
|
|
band60M: false,
|
|
band40M: false,
|
|
band30M: false,
|
|
band20M: false,
|
|
band17M: false,
|
|
band15M: false,
|
|
band12M: false,
|
|
band10M: false,
|
|
band6M: false
|
|
};
|
|
} else {
|
|
spotFilters.showAll = false;
|
|
spotFilters[filterName] = !spotFilters[filterName];
|
|
|
|
const anyActive = Object.keys(spotFilters).some(key =>
|
|
key !== 'showAll' && spotFilters[key]
|
|
);
|
|
if (!anyActive) {
|
|
spotFilters.showAll = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
function connectWebSocket() {
|
|
if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
|
|
return;
|
|
}
|
|
|
|
wsStatus = 'connecting';
|
|
|
|
try {
|
|
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsHost = window.location.host; // Prend automatiquement l'IP:port depuis l'URL
|
|
ws = new WebSocket(`${wsProtocol}//${wsHost}/api/ws`);
|
|
|
|
ws.onopen = () => {
|
|
console.log('WebSocket connected');
|
|
wsStatus = 'connected';
|
|
reconnectAttempts = 0;
|
|
errorMessage = '';
|
|
showToast('✅ Connected to DX Cluster', 'connection');
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
handleWebSocketMessage(message);
|
|
} catch (error) {
|
|
console.error('Error parsing WebSocket message:', error);
|
|
}
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
console.error('WebSocket error:', error);
|
|
wsStatus = 'disconnected';
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log('WebSocket closed');
|
|
wsStatus = 'disconnected';
|
|
|
|
if (isShuttingDown) {
|
|
console.log('App is shutting down, skip reconnection');
|
|
return;
|
|
}
|
|
|
|
if (reconnectAttempts < maxReconnectAttempts) {
|
|
reconnectAttempts++;
|
|
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
|
|
errorMessage = `Connection lost. Reconnecting in ${delay/1000}s... (attempt ${reconnectAttempts}/${maxReconnectAttempts})`;
|
|
|
|
reconnectTimer = setTimeout(() => {
|
|
connectWebSocket();
|
|
}, delay);
|
|
} else {
|
|
errorMessage = 'Unable to connect to server. Please refresh the page.';
|
|
}
|
|
};
|
|
} catch (error) {
|
|
console.error('Error creating WebSocket:', error);
|
|
wsStatus = 'disconnected';
|
|
}
|
|
}
|
|
|
|
function handleWebSocketMessage(message) {
|
|
switch (message.type) {
|
|
case 'stats':
|
|
stats = message.data;
|
|
spotCache.saveMetadata('stats', stats).catch(err => console.error('Cache save error:', err));
|
|
break;
|
|
case 'spots':
|
|
const newSpots = message.data || [];
|
|
|
|
// Détecter si votre indicatif a été spotté
|
|
if (stats.myCallsign && newSpots.length > 0) {
|
|
newSpots.forEach(spot => {
|
|
if (spot.DX === stats.myCallsign && !notifiedSpots.has(spot.ID)) {
|
|
notifiedSpots.add(spot.ID);
|
|
showToast(
|
|
`📢 You were spotted by ${spot.SpotterCallsign} on ${spot.FrequencyMhz} (${spot.Band} ${spot.Mode})`,
|
|
'mycall'
|
|
);
|
|
}
|
|
});
|
|
|
|
// ✅ Nettoyer les anciens IDs (garder seulement 200 derniers)
|
|
if (notifiedSpots.size > 200) {
|
|
const arr = Array.from(notifiedSpots);
|
|
notifiedSpots = new Set(arr.slice(-200));
|
|
}
|
|
}
|
|
|
|
spots = newSpots;
|
|
|
|
// ✅ Debounce la sauvegarde du cache (toutes les 30 secondes max)
|
|
if (spots.length > 0) {
|
|
if (window.cacheSaveTimeout) clearTimeout(window.cacheSaveTimeout);
|
|
window.cacheSaveTimeout = setTimeout(() => {
|
|
spotCache.saveSpots(spots).catch(err => console.error('Cache save error:', err));
|
|
window.cacheSaveTimeout = null; // ✅ Nettoyer la référence
|
|
}, 30000); // 30 secondes
|
|
}
|
|
break;
|
|
case 'watchlist':
|
|
watchlist = message.data || [];
|
|
spotCache.saveMetadata('watchlist', watchlist).catch(err => console.error('Cache save error:', err));
|
|
break;
|
|
case 'log':
|
|
recentQSOs = message.data || [];
|
|
if (recentQSOs.length > 0) {
|
|
spotCache.saveQSOs(recentQSOs).catch(err => console.error('Cache save error:', err));
|
|
}
|
|
break;
|
|
case 'appLog':
|
|
// Un seul log applicatif
|
|
if (message.data) {
|
|
logs = [...logs, message.data];
|
|
// Garder seulement les 500 derniers
|
|
if (logs.length > 500) {
|
|
logs = logs.slice(-500);
|
|
}
|
|
}
|
|
break;
|
|
case 'appLogs':
|
|
// Logs initiaux (au chargement)
|
|
logs = message.data || [];
|
|
break;
|
|
|
|
case 'logStats':
|
|
logStats = message.data || {};
|
|
break;
|
|
case 'dxccProgress':
|
|
dxccProgress = message.data || { worked: 0, total: 340, percentage: 0 };
|
|
break;
|
|
case 'milestone':
|
|
const milestoneData = message.data;
|
|
const toastType = milestoneData.type === 'qso' ? 'milestone' : 'band';
|
|
showToast(milestoneData.message, toastType);
|
|
break;
|
|
case 'watchlistAlert':
|
|
// Dispatch custom event for watchlist alert
|
|
const alertEvent = new CustomEvent('watchlistAlert', {
|
|
detail: message.data
|
|
});
|
|
window.dispatchEvent(alertEvent);
|
|
|
|
// Play sound if enabled
|
|
if (message.data.playSound) {
|
|
soundManager.playWatchlistAlert('medium');
|
|
}
|
|
|
|
// Show toast notification
|
|
showToast(
|
|
`🎯 ${message.data.callsign} spotted on ${message.data.band} ${message.data.mode}!`,
|
|
'success'
|
|
);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function showToast(message, type = 'info') {
|
|
toastMessage = message;
|
|
toastType = type;
|
|
setTimeout(() => {
|
|
toastMessage = '';
|
|
}, 5000);
|
|
}
|
|
|
|
async function fetchSolarData() {
|
|
try {
|
|
const response = await fetch('/api/solar');
|
|
const json = await response.json();
|
|
if (json.success) {
|
|
solarData = {
|
|
sfi: json.data.sfi || 'N/A',
|
|
sunspots: json.data.sunspots || 'N/A',
|
|
aIndex: json.data.aIndex || 'N/A',
|
|
kIndex: json.data.kIndex || 'N/A'
|
|
};
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching solar data:', error);
|
|
}
|
|
}
|
|
|
|
async function sendCallsign(callsign, frequency, mode) {
|
|
try {
|
|
const response = await fetch('/api/send-callsign', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ callsign, frequency, mode })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
showToast(`📻 Tuned to ${callsign} • ${frequency} • ${mode}`, 'radio');
|
|
} else {
|
|
showToast('❌ Failed to send to radio', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error sending callsign:', error);
|
|
showToast(`❌ Connection error: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async function updateClusterFilter(filterName, value) {
|
|
try {
|
|
const response = await fetch('/api/filters', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ [filterName]: value })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
stats.filters[filterName] = value;
|
|
const filterLabel = filterName.toUpperCase();
|
|
const status = value ? 'ON' : 'OFF';
|
|
showToast(`🔧 ${filterLabel} filter ${status}`, 'success');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating filter:', error);
|
|
showToast(`❌ Failed to update filter: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async function shutdownApp() {
|
|
try {
|
|
// ✅ Désactiver la reconnexion et masquer l'erreur IMMÉDIATEMENT
|
|
isShuttingDown = true;
|
|
errorMessage = '';
|
|
maxReconnectAttempts = 0;
|
|
|
|
// ✅ Fermer le WebSocket proprement
|
|
if (ws) {
|
|
ws.onclose = null; // Désactiver le handler de reconnexion
|
|
ws.close();
|
|
}
|
|
if (reconnectTimer) clearTimeout(reconnectTimer);
|
|
wsStatus = 'disconnected';
|
|
|
|
showToast('⚡ Shutting down FlexDXCluster...', 'warning');
|
|
|
|
// ✅ Envoyer la commande de shutdown au backend
|
|
const response = await fetch('/api/shutdown', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
// ✅ Afficher le message de shutdown après un court délai
|
|
setTimeout(() => {
|
|
document.body.innerHTML = `
|
|
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
|
|
<div class="text-center">
|
|
<svg class="w-24 h-24 mx-auto mb-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
|
FlexDXCluster Stopped
|
|
</h1>
|
|
<p class="text-slate-400 text-lg">The application has been shut down successfully.</p>
|
|
<p class="text-slate-500 text-sm mt-4">You can close this window.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}, 500);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error shutting down:', error);
|
|
if (!isShuttingDown) {
|
|
showToast(`❌ Shutdown failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
// ✅ Initialiser IndexedDB
|
|
try {
|
|
await spotCache.init();
|
|
|
|
soundManager.setEnabled(false);
|
|
|
|
// ✅ Charger les données du cache immédiatement
|
|
const cachedSpots = await spotCache.getSpots();
|
|
if (cachedSpots.length > 0) {
|
|
spots = cachedSpots;
|
|
cacheLoaded = true;
|
|
console.log('📦 Loaded data from cache');
|
|
}
|
|
|
|
// Charger watchlist du cache
|
|
const cachedWatchlist = await spotCache.getMetadata('watchlist');
|
|
if (cachedWatchlist) {
|
|
watchlist = cachedWatchlist;
|
|
}
|
|
|
|
// Charger QSOs du cache
|
|
const cachedQSOs = await spotCache.getQSOs();
|
|
if (cachedQSOs.length > 0) {
|
|
recentQSOs = cachedQSOs;
|
|
}
|
|
|
|
// Charger stats du cache
|
|
const cachedStats = await spotCache.getMetadata('stats');
|
|
if (cachedStats) {
|
|
stats = cachedStats;
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to initialize cache:', error);
|
|
}
|
|
|
|
// Initialiser le worker
|
|
spotWorker.init();
|
|
|
|
// Se connecter au WebSocket (qui va mettre à jour avec les données fraîches)
|
|
connectWebSocket();
|
|
fetchSolarData();
|
|
|
|
const solarInterval = setInterval(fetchSolarData, 15 * 60 * 1000);
|
|
|
|
const handleSendSpot = (e) => {
|
|
sendCallsign(e.detail.callsign, e.detail.frequency, e.detail.mode);
|
|
};
|
|
window.addEventListener('sendSpot', handleSendSpot);
|
|
|
|
return () => {
|
|
spotWorker.terminate();
|
|
spotCache.close();
|
|
if (ws) ws.close();
|
|
if (reconnectTimer) clearTimeout(reconnectTimer);
|
|
clearInterval(solarInterval);
|
|
window.removeEventListener('sendSpot', handleSendSpot);
|
|
};
|
|
});
|
|
|
|
onDestroy(() => {
|
|
console.log('Cleaning up App...');
|
|
|
|
// ✅ Nettoyer tous les timeouts
|
|
if (filterTimeout) {
|
|
clearTimeout(filterTimeout);
|
|
filterTimeout = null;
|
|
}
|
|
|
|
if (window.cacheSaveTimeout) {
|
|
clearTimeout(window.cacheSaveTimeout);
|
|
window.cacheSaveTimeout = null;
|
|
}
|
|
|
|
notifiedSpots.clear();
|
|
|
|
console.log('App cleanup complete');
|
|
});
|
|
|
|
</script>
|
|
|
|
<div class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white min-h-screen p-2">
|
|
|
|
{#if errorMessage}
|
|
<ErrorBanner message={errorMessage} on:close={() => errorMessage = ''} />
|
|
{/if}
|
|
|
|
{#if toastMessage}
|
|
<Toast message={toastMessage} type={toastType} />
|
|
{/if}
|
|
|
|
<Header
|
|
{stats}
|
|
{solarData}
|
|
{wsStatus}
|
|
{cacheLoaded}
|
|
{soundManager}
|
|
on:shutdown={shutdownApp}
|
|
/>
|
|
|
|
<StatsCards
|
|
{stats}
|
|
on:filterChange={(e) => updateClusterFilter(e.detail.name, e.detail.value)}
|
|
/>
|
|
|
|
<FilterBar
|
|
{spotFilters}
|
|
{spots}
|
|
{watchlist}
|
|
{isFiltering}
|
|
on:toggleFilter={(e) => toggleFilter(e.detail)}
|
|
/>
|
|
|
|
<div class="grid grid-cols-[2.8fr_1.2fr] gap-3 overflow-hidden" style="height: calc(100vh - 280px); min-height: 500px;">
|
|
<div class="overflow-hidden">
|
|
<SpotsTable
|
|
spots={filteredSpots}
|
|
{watchlist}
|
|
myCallsign={stats.myCallsign}
|
|
on:clickSpot={(e) => sendCallsign(e.detail.callsign, e.detail.frequency, e.detail.mode)}
|
|
/>
|
|
</div>
|
|
|
|
<div class="overflow-hidden">
|
|
<Sidebar
|
|
bind:activeTab
|
|
bind:showOnlyActive
|
|
{topSpotters}
|
|
{spots}
|
|
{watchlist}
|
|
{recentQSOs}
|
|
{logStats}
|
|
{dxccProgress}
|
|
{logs}
|
|
on:toast={(e) => showToast(e.detail.message, e.detail.type)}
|
|
on:clearLogs={() => logs = []}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div> |