285 lines
12 KiB
Svelte
285 lines
12 KiB
Svelte
<script>
|
|
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
|
|
|
|
export let watchlist;
|
|
export let spots;
|
|
export let showOnlyActive = false;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
let newCallsign = '';
|
|
let watchlistSpots = [];
|
|
let refreshInterval;
|
|
|
|
$: matchingSpots = countWatchlistSpots(spots, watchlist);
|
|
|
|
// ✅ Tri alphanumérique simple : 0-9 puis A-Z
|
|
$: displayList = getDisplayList(watchlist, watchlistSpots, showOnlyActive);
|
|
|
|
// ✅ Rafraîchir automatiquement les spots de la watchlist
|
|
$: if (watchlist.length > 0) {
|
|
fetchWatchlistSpots();
|
|
}
|
|
|
|
// ✅ Rafraîchir aussi quand les spots changent (temps réel)
|
|
$: if (spots.length > 0 && watchlist.length > 0) {
|
|
fetchWatchlistSpots();
|
|
}
|
|
|
|
onMount(() => {
|
|
// Rafraîchir toutes les 10 secondes pour être sûr
|
|
refreshInterval = setInterval(() => {
|
|
if (watchlist.length > 0) {
|
|
fetchWatchlistSpots();
|
|
}
|
|
}, 10000);
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (refreshInterval) {
|
|
clearInterval(refreshInterval);
|
|
}
|
|
});
|
|
|
|
function getDisplayList(wl, wlSpots, activeOnly) {
|
|
let list = wl;
|
|
|
|
if (activeOnly) {
|
|
// Filtrer pour ne montrer que les callsigns avec des spots actifs
|
|
list = wl.filter(cs => {
|
|
const spots = wlSpots.filter(s => s.dx === cs || s.dx.startsWith(cs));
|
|
return spots.length > 0;
|
|
});
|
|
}
|
|
|
|
// Tri alphanumérique : 0-9 puis A-Z
|
|
return [...list].sort((a, b) => a.localeCompare(b, 'en', { numeric: true }));
|
|
}
|
|
|
|
async function fetchWatchlistSpots() {
|
|
try {
|
|
const response = await fetch('/api/watchlist/spots');
|
|
const json = await response.json();
|
|
|
|
if (json.success) {
|
|
watchlistSpots = json.data || [];
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching watchlist spots:', error);
|
|
}
|
|
}
|
|
|
|
function countWatchlistSpots(allSpots, wl) {
|
|
return allSpots.filter(spot =>
|
|
wl.some(pattern => spot.DX === pattern || spot.DX.startsWith(pattern))
|
|
).length;
|
|
}
|
|
|
|
function getMatchingSpotsForCallsign(callsign) {
|
|
const spots = watchlistSpots.filter(s => s.dx === callsign || s.dx.startsWith(callsign));
|
|
|
|
// ✅ Trier les spots par heure décroissante (plus récent en premier)
|
|
return spots.sort((a, b) => {
|
|
// Comparer les heures UTC (format "HH:MM")
|
|
const timeA = a.utcTime || "00:00";
|
|
const timeB = b.utcTime || "00:00";
|
|
return timeB.localeCompare(timeA);
|
|
});
|
|
}
|
|
|
|
async function addToWatchlist() {
|
|
const callsign = newCallsign.trim().toUpperCase();
|
|
|
|
if (!callsign) {
|
|
dispatch('toast', { message: 'Please enter a callsign', type: 'warning' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/watchlist/add', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ callsign })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
newCallsign = '';
|
|
dispatch('toast', { message: `${callsign} added to watchlist`, type: 'success' });
|
|
await fetchWatchlistSpots();
|
|
} else {
|
|
dispatch('toast', { message: 'Failed to add callsign', type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding to watchlist:', error);
|
|
dispatch('toast', { message: `Error: ${error.message}`, type: 'error' });
|
|
}
|
|
}
|
|
|
|
async function removeFromWatchlist(callsign) {
|
|
try {
|
|
const response = await fetch('/api/watchlist/remove', {
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ callsign })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
dispatch('toast', { message: `${callsign} removed from watchlist`, type: 'success' });
|
|
await fetchWatchlistSpots();
|
|
} else {
|
|
dispatch('toast', { message: 'Failed to remove callsign', type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error removing from watchlist:', error);
|
|
dispatch('toast', { message: `Error: ${error.message}`, type: 'error' });
|
|
}
|
|
}
|
|
|
|
function handleKeyPress(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
addToWatchlist();
|
|
}
|
|
}
|
|
|
|
function sendSpot(spot) {
|
|
const event = new CustomEvent('sendSpot', {
|
|
detail: {
|
|
callsign: spot.dx,
|
|
frequency: spot.frequencyMhz,
|
|
mode: spot.mode
|
|
}
|
|
});
|
|
window.dispatchEvent(event);
|
|
}
|
|
|
|
// ✅ Fonction pour le toggle
|
|
function toggleActiveOnly() {
|
|
showOnlyActive = !showOnlyActive;
|
|
}
|
|
</script>
|
|
|
|
<div class="h-full flex flex-col" style="height: 100%; max-height: 100%;">
|
|
<div class="p-3 border-b border-slate-700/50 flex-shrink-0">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-bold">Watchlist</h2>
|
|
<button
|
|
on:click={toggleActiveOnly}
|
|
class="px-3 py-1.5 text-xs rounded transition-colors flex items-center gap-2 {showOnlyActive ? 'bg-blue-600 text-white' : 'bg-slate-700/50 text-slate-300 hover:bg-slate-700'}">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
|
|
</svg>
|
|
{showOnlyActive ? 'Show All' : 'Active Only'}
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-slate-400 mb-3">{matchingSpots} matching spots</p>
|
|
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
bind:value={newCallsign}
|
|
on:keypress={handleKeyPress}
|
|
placeholder="Enter callsign or prefix (e.g., VK9)"
|
|
class="flex-1 px-3 py-2 bg-slate-700/50 border border-slate-600 rounded text-sm text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
|
/>
|
|
<button
|
|
on:click={addToWatchlist}
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition-colors">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 p-3 overflow-y-auto" style="overflow-y: auto; min-height: 0; flex: 1 1 0;">
|
|
{#if displayList.length === 0}
|
|
<div class="text-center py-8 text-slate-400">
|
|
<svg class="w-12 h-12 mx-auto mb-3 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
<p class="text-sm">{showOnlyActive ? 'No active spots for watchlist callsigns' : 'No callsigns in watchlist'}</p>
|
|
<p class="text-xs mt-1">{showOnlyActive ? 'Click "Active Only" to see all entries' : 'Add callsigns or prefixes to monitor'}</p>
|
|
</div>
|
|
{:else}
|
|
{#each displayList as callsign}
|
|
{@const matchingSpots = getMatchingSpotsForCallsign(callsign)}
|
|
{@const count = matchingSpots.length}
|
|
{@const neededCount = matchingSpots.filter(s => !s.workedBandMode).length}
|
|
{@const borderClass = neededCount > 0 ? 'border-orange-500/30' : 'border-slate-700/50'}
|
|
|
|
<div class="mb-3 p-3 bg-slate-900/30 rounded hover:bg-slate-700/30 transition-colors border {borderClass}">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<div class="font-bold text-pink-400 text-lg">{callsign}</div>
|
|
{#if count > 0}
|
|
<span class="text-xs text-slate-400">{count} active spot{count !== 1 ? 's' : ''}</span>
|
|
{#if neededCount > 0}
|
|
<span class="px-1.5 py-0.5 bg-orange-500/20 text-orange-400 rounded text-xs font-semibold">{neededCount} needed</span>
|
|
{:else}
|
|
<span class="px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded text-xs font-semibold">All worked</span>
|
|
{/if}
|
|
{:else}
|
|
<span class="text-xs text-slate-500">No active spots</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<button
|
|
on:click={() => removeFromWatchlist(callsign)}
|
|
title="Remove from watchlist"
|
|
class="px-2 py-1 text-xs bg-red-600/20 hover:bg-red-600/40 text-red-400 rounded transition-colors">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
|
|
{#if count > 0}
|
|
<div class="mt-2 space-y-1 max-h-48 overflow-y-auto" style="overflow-y: auto;">
|
|
{#each matchingSpots.slice(0, 10) as spot}
|
|
<button
|
|
on:click={() => sendSpot(spot)}
|
|
class="w-full flex items-center justify-between p-2 bg-slate-800/50 rounded text-xs hover:bg-slate-700/50 transition-colors {!spot.workedBandMode ? 'border-l-2 border-orange-500' : ''}"
|
|
title="Click to send to Log4OM and tune radio">
|
|
<div class="flex items-center gap-2 flex-1 min-w-0">
|
|
{#if spot.workedBandMode}
|
|
<svg class="w-4 h-4 text-green-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
{:else}
|
|
<svg class="w-4 h-4 text-orange-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
|
</svg>
|
|
{/if}
|
|
<span class="font-bold text-blue-400">{spot.dx}</span>
|
|
<span class="px-1.5 py-0.5 bg-slate-700/50 rounded flex-shrink-0">{spot.band}</span>
|
|
<span class="px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded flex-shrink-0">{spot.mode}</span>
|
|
<span class="text-slate-400 font-mono truncate">{spot.frequencyMhz}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 flex-shrink-0 ml-2">
|
|
{#if spot.workedBandMode}
|
|
<span class="px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded text-xs font-semibold">Worked</span>
|
|
{:else if spot.newDXCC}
|
|
<span class="px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded text-xs font-semibold">New DXCC!</span>
|
|
{:else if spot.newBand && spot.newMode}
|
|
<span class="px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded text-xs font-semibold">New B&M!</span>
|
|
{:else if spot.newBand}
|
|
<span class="px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded text-xs font-semibold">New Band!</span>
|
|
{:else if spot.newMode}
|
|
<span class="px-1.5 py-0.5 bg-orange-500/20 text-orange-400 rounded text-xs font-semibold">New Mode!</span>
|
|
{:else}
|
|
<span class="px-1.5 py-0.5 bg-orange-500/20 text-orange-400 rounded text-xs font-semibold">Needed!</span>
|
|
{/if}
|
|
<span class="text-slate-500">{spot.utcTime}</span>
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="mt-2 text-xs text-slate-500 text-center py-2 bg-slate-800/30 rounded">No active spots</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div> |