up

web/src/components/StatusBanner.svelte

@@ -9,11 +9,16 @@
   export let gustWarningThreshold = 50; // km/h
   export let graylineWindow = 30; // minutes avant/après sunrise/sunset
 
-  // FlexRadio frequency and mode
+  // FlexRadio status
   $: frequency = flexradio?.frequency || 0;
   $: mode = flexradio?.mode || '';
   $: txEnabled = flexradio?.tx || false;
   $: connected = flexradio?.connected || false;
+  $: radioOn = flexradio?.radio_on || false;
+  $: radioInfo = flexradio?.radio_info || '';
+  $: callsign = flexradio?.callsign || '';
+  $: model = flexradio?.model || '';
+  $: activeSlices = flexradio?.active_slices || 0;
 
   // Grayline calculation
   let sunrise = null;
@@ -55,6 +60,16 @@
     updateTimeToNextEvent();
   }
 
+  $: console.log('FlexRadio status:', {
+    connected,
+    radioOn,
+    frequency,
+    activeSlices,
+    radioInfo,
+    callsign,
+    model
+  });
+
   // Simplified sun calculation (based on NOAA algorithm)
   function getSunTimes(date, lat, lon) {
     const rad = Math.PI / 180;
@@ -228,6 +243,13 @@
 
   $: currentBand = getBand(frequency);
   $: bandColor = getBandColor(currentBand);
+  
+  // Determine what to show for FlexRadio - MODIFIÉ
+  $: showFrequency = radioOn && frequency > 0;
+  $: showRadioOnNoSlice = radioOn && frequency === 0 && activeSlices === 0;
+  $: showRadioOnWithSliceNoFreq = radioOn && frequency === 0 && activeSlices > 0;
+  $: showNotConnected = !connected;
+  $: showConnectedNoRadio = connected && !radioOn;
 </script>
 
 <div class="status-banner" class:has-warning={hasAnyWarning}>
@@ -237,7 +259,8 @@
       📻
     </div>
     
-    {#if connected && frequency > 0}
+    {#if showFrequency}
+      <!-- Radio is on and has active slice with frequency -->
       <div class="frequency-display">
         <span class="frequency" style="--band-color: {bandColor}">
           {formatFrequency(frequency)}
@@ -256,17 +279,51 @@
           {mode}
         </span>
       {/if}
+               
+    {:else if showRadioOnWithSliceNoFreq}
+      <!-- Radio is on with slice but frequency is 0 (maybe slice just created) -->
+      <div class="radio-status">
+        <span class="radio-on-indicator">●</span>
+        <span class="radio-status-text">Slice active, waiting for frequency...</span>
+        {#if model}
+          <span class="model-badge">{model}</span>
+        {/if}
+        {#if callsign}
+          <span class="callsign-badge">{callsign}</span>
+        {/if}
+      </div>
       
-      {#if txEnabled}
-        <span class="tx-indicator">
-          TX
-        </span>
-      {/if}
-    {:else}
+    {:else if showRadioOnNoSlice}
+      <!-- Radio is on but no active slice -->
+      <div class="radio-status">
+        <span class="radio-on-indicator">●</span>
+        <span class="radio-status-text">{radioInfo || 'Radio is on'}</span>
+        {#if model}
+          <span class="model-badge">{model}</span>
+        {/if}
+        {#if callsign}
+          <span class="callsign-badge">{callsign}</span>
+        {/if}
+      </div>
+      
+    {:else if showConnectedNoRadio}
+      <!-- TCP connected but radio not responding -->
+      <div class="radio-status">
+        <span class="radio-off-indicator">○</span>
+        <span class="radio-status-text">TCP connected, radio off</span>
+      </div>
+      
+    {:else if showNotConnected}
+      <!-- Not connected at all -->
       <span class="no-signal">FlexRadio non connecté</span>
+      
+    {:else}
+      <!-- Default/unknown state -->
+      <span class="no-signal">Checking FlexRadio...</span>
     {/if}
   </div>
 
+
   <!-- Separator -->
   <div class="separator"></div>
 
@@ -304,7 +361,7 @@
       
       {#if isGrayline}
         <span class="grayline-badge" class:sunrise={graylineType === 'sunrise'} class:sunset={graylineType === 'sunset'}>
-          ✨ GRAYLINE
+          ✨ Grayline
         </span>
       {:else if timeToNextEvent}
         <span class="next-event">
@@ -312,7 +369,7 @@
         </span>
       {/if}
     {:else}
-      <span class="no-location">📍 Position non configurée</span>
+      <span class="no-location">📍 Position not set</span>
     {/if}
   </div>
 
@@ -342,7 +399,7 @@
     {#if !hasAnyWarning}
       <div class="status-ok">
         <span class="ok-icon">✓</span>
-        <span class="ok-text">Météo OK</span>
+        <span class="ok-text">Weather OK</span>
       </div>
     {/if}
   </div>
@@ -444,6 +501,58 @@
     50% { opacity: 0.6; }
   }
 
+  .slice-waiting {
+  color: #fbbf24; /* Jaune pour "en attente" */
+  animation: pulse 1.5s infinite;
+}
+
+  /* Radio status indicators */
+  .radio-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .radio-on-indicator {
+    color: #22c55e;
+    font-size: 16px;
+    animation: pulse 2s infinite;
+  }
+
+  .radio-off-indicator {
+    color: #ef4444;
+    font-size: 16px;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  .radio-status-text {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 14px;
+  }
+
+  .model-badge {
+    padding: 3px 8px;
+    background: rgba(79, 195, 247, 0.2);
+    border: 1px solid rgba(79, 195, 247, 0.4);
+    border-radius: 4px;
+    font-size: 12px;
+    color: #4fc3f7;
+  }
+
+  .callsign-badge {
+    padding: 3px 8px;
+    background: rgba(34, 197, 94, 0.2);
+    border: 1px solid rgba(34, 197, 94, 0.4);
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #22c55e;
+  }
+
   .no-signal {
     color: rgba(255, 255, 255, 0.4);
     font-size: 14px;