@smartnet360/svelte-components 0.0.123 → 0.0.125

package/dist/apps/antenna-tools/components/AntennaControls.svelte

@@ -15,6 +15,8 @@
     onElectricalTiltChange?: (index: number) => void;
     onMechanicalTiltChange?: (tilt: number) => void;
     showStatus?: boolean;
+    /** Requested frequency from external mode - will be highlighted */
+    requestedFrequency?: number | null;
   }
 
   let {
@@ -27,7 +29,8 @@
     onAntennaChange,
     onElectricalTiltChange,
     onMechanicalTiltChange,
-    showStatus = true
+    showStatus = true,
+    requestedFrequency = null
   }: Props = $props();
 
   // Internal state for slider values
@@ -36,6 +39,20 @@
   let internalSelectedAntenna = $state(selectedAntenna);
   let selectedFrequency = $state<number | null>(null);
 
+  // Check if requested frequency is available for the selected antenna
+  let frequencyError = $derived.by(() => {
+    if (!requestedFrequency || !internalSelectedAntenna) return null;
+    
+    // Get all frequencies available for this antenna
+    const sameNameAntennas = antennas.filter(a => a.name === internalSelectedAntenna!.name);
+    const availableFreqs = [...new Set(sameNameAntennas.map(a => a.frequency))];
+    
+    if (!availableFreqs.includes(requestedFrequency)) {
+      return `Requested frequency ${requestedFrequency} MHz is not available for this antenna. Available: ${availableFreqs.sort((a, b) => a - b).join(', ')} MHz`;
+    }
+    return null;
+  });
+
   // Update internal state when props change
   $effect(() => {
     internalElectricalTiltIndex = electricalTiltIndex;
@@ -305,18 +322,36 @@
     return colors[theme];
   }
 
+  // Type for frequency info with original frequency
+  interface FrequencyInfo {
+    band: number;
+    originalFrequency: number;
+  }
+
   // Get unique frequency bands for the selected antenna name
-  let uniqueFrequencies = $state<number[]>([]);
+  let uniqueFrequencies = $state<FrequencyInfo[]>([]);
   $effect(() => {
     if (antennas.length > 0 && internalSelectedAntenna) {
       // Get frequencies only for the selected antenna name
       const sameNameAntennas = antennas.filter(a => a.name === internalSelectedAntenna!.name);
-      const frequencies = [...new Set(sameNameAntennas.map(a => a.frequency))].sort((a, b) => a - b);
+      
+      // Create unique frequency entries with original frequency
+      const freqMap = new Map<number, number>();
+      sameNameAntennas.forEach(a => {
+        // Keep the first original frequency for each band
+        if (!freqMap.has(a.frequency)) {
+          freqMap.set(a.frequency, a.originalFrequency);
+        }
+      });
+      
+      const frequencies = Array.from(freqMap.entries())
+        .map(([band, orig]) => ({ band, originalFrequency: orig }))
+        .sort((a, b) => a.band - b.band);
       uniqueFrequencies = frequencies;
       
       // Auto-select frequency if there's only one option
       if (frequencies.length === 1) {
-        selectedFrequency = frequencies[0];
+        selectedFrequency = frequencies[0].band;
       }
     } else {
       uniqueFrequencies = [];
@@ -348,10 +383,14 @@
     }
   });
 
-  // Format frequency for display (700, 800 -> "700 MHz", "800 MHz")
+  // Format frequency for display (band [original] -> "700 [712]")
   function formatFrequency(freq: number): string {
     return `${freq} MHz`;
   }
+  
+  function formatFrequencyWithOriginal(info: FrequencyInfo): string {
+    return `${info.band} [${info.originalFrequency}]`;
+  }
 </script>
 
 <div class="card h-100">
@@ -396,24 +435,47 @@
       {/if}
     </div>
 
+    <!-- Frequency Error Message -->
+    {#if frequencyError}
+      <div class="alert alert-danger py-2 mb-3" role="alert">
+        <i class="bi bi-exclamation-triangle-fill me-2"></i>
+        <small>{frequencyError}</small>
+      </div>
+    {/if}
+
     <!-- Frequency Band Filter -->
     {#if uniqueFrequencies.length > 1}
       <div class="mb-3">
         <div class="form-label">
           <strong>Frequency Band:</strong>
+          {#if requestedFrequency && !frequencyError}
+            <span class="badge bg-info ms-2">Requested: {requestedFrequency} MHz</span>
+          {/if}
         </div>
         <div class="d-flex flex-wrap gap-1">
-          {#each uniqueFrequencies as freq}
+          {#each uniqueFrequencies as freqInfo}
+            {@const isRequested = requestedFrequency === freqInfo.band}
+            {@const isSelected = selectedFrequency === freqInfo.band}
             <button 
               type="button" 
-              class="btn btn-sm {selectedFrequency === freq ? 'btn-primary' : 'btn-outline-secondary'}"
-              onclick={() => handleFrequencyChange(freq)}
+              class="btn btn-sm {isSelected ? 'btn-primary' : isRequested ? 'btn-outline-info border-2' : 'btn-outline-secondary'}"
+              class:fw-bold={isRequested}
+              onclick={() => handleFrequencyChange(freqInfo.band)}
             >
-              {formatFrequency(freq)}
+              {formatFrequencyWithOriginal(freqInfo)}
+              {#if isRequested && !isSelected}
+                <i class="bi bi-arrow-left-short"></i>
+              {/if}
             </button>
           {/each}
         </div>
       </div>
+    {:else if uniqueFrequencies.length === 1 && requestedFrequency && uniqueFrequencies[0].band !== requestedFrequency}
+      <!-- Single frequency but doesn't match requested -->
+      <div class="alert alert-warning py-2 mb-3" role="alert">
+        <i class="bi bi-exclamation-triangle-fill me-2"></i>
+        <small>Requested {requestedFrequency} MHz, but only {uniqueFrequencies[0].band} MHz available</small>
+      </div>
     {/if}
 
     <!-- Electrical Tilt Control -->

package/dist/apps/antenna-tools/components/AntennaControls.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     onElectricalTiltChange?: (index: number) => void;
     onMechanicalTiltChange?: (tilt: number) => void;
     showStatus?: boolean;
+    /** Requested frequency from external mode - will be highlighted */
+    requestedFrequency?: number | null;
 }
 declare const AntennaControls: import("svelte").Component<Props, {}, "">;
 type AntennaControls = ReturnType<typeof AntennaControls>;

package/dist/apps/antenna-tools/components/AntennaSettingsModal.svelte

@@ -1,11 +1,8 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import JsonImporter from './JsonImporter.svelte';
   import MSIConverter from './MSIConverter.svelte';
-  import DbNotification from './DbNotification.svelte';
   import DatabaseViewer from './DatabaseViewer.svelte';
-  import { exportAntennas, clearAllAntennas } from '../utils/db-utils';
   import type { BandDefinition } from '../types';
 
   interface Props {
@@ -18,42 +15,12 @@
 
   let { show, onClose, onDataRefresh, customBands }: Props = $props();
 
-  let activeTab = $state<'view' | 'import' | 'msi' | 'export' | 'manage'>('view');
-  let showClearConfirm = $state(false);
+  let activeTab = $state<'view' | 'manage'>('view');
 
   // Handle data refresh after import operations
   function handleDataRefresh() {
     onDataRefresh?.();
   }
-
-  // Export data as JSON
-  async function handleExport() {
-    try {
-      await exportAntennas();
-    } catch (error) {
-      console.error('Export failed:', error);
-    }
-  }
-
-  // Clear all data with confirmation
-  async function handleClearData() {
-    if (!showClearConfirm) {
-      showClearConfirm = true;
-      return;
-    }
-
-    try {
-      await clearAllAntennas();
-      showClearConfirm = false;
-      handleDataRefresh();
-    } catch (error) {
-      console.error('Clear data failed:', error);
-    }
-  }
-
-  function cancelClear() {
-    showClearConfirm = false;
-  }
 </script>
 
 <!-- Modal -->
@@ -91,33 +58,12 @@
               >
                 <i class="bi bi-table me-2"></i>View Data
               </button>
-              <button 
-                class="nav-link {activeTab === 'import' ? 'active' : ''}"
-                type="button"
-                onclick={() => activeTab = 'import'}
-              >
-                <i class="bi bi-upload me-2"></i>Import JSON
-              </button>
-              <button 
-                class="nav-link {activeTab === 'msi' ? 'active' : ''}"
-                type="button"
-                onclick={() => activeTab = 'msi'}
-              >
-                <i class="bi bi-file-earmark-text me-2"></i>Import MSI
-              </button>
-              <button 
-                class="nav-link {activeTab === 'export' ? 'active' : ''}"
-                type="button"
-                onclick={() => activeTab = 'export'}
-              >
-                <i class="bi bi-download me-2"></i>Export Data
-              </button>
               <button 
                 class="nav-link {activeTab === 'manage' ? 'active' : ''}"
                 type="button"
                 onclick={() => activeTab = 'manage'}
               >
-                <i class="bi bi-trash me-2"></i>Manage Data
+                <i class="bi bi-database-gear me-2"></i>Manage Database
               </button>
             </div>
           </div>
@@ -132,118 +78,10 @@
               </div>
             {/if}
 
-            <!-- Import JSON Tab -->
-            {#if activeTab === 'import'}
-              <div class="tab-pane fade show active">
-                <div class="row">
-                  <div class="col-12">
-                    <h5 class="mb-3">Import Antenna Data from JSON</h5>
-                    <JsonImporter onDataRefresh={handleDataRefresh} />
-                  </div>
-                </div>
-              </div>
-            {/if}
-
-            <!-- Import MSI Tab -->
-            {#if activeTab === 'msi'}
-              <div class="tab-pane fade show active">
-                <div class="row">
-                  <div class="col-12">
-                    <h5 class="mb-3">Import MSI Pattern Files</h5>
-                    <MSIConverter onDataRefresh={handleDataRefresh} {customBands} />
-                  </div>
-                </div>
-              </div>
-            {/if}
-
-            <!-- Export Data Tab -->
-            {#if activeTab === 'export'}
-              <div class="tab-pane fade show active">
-                <div class="row">
-                  <div class="col-12">
-                    <h5 class="mb-3">Export Antenna Data</h5>
-                    
-                    <div class="card border-success">
-                      <div class="card-body text-center">
-                        <i class="bi bi-download text-success" style="font-size: 3rem;"></i>
-                        <h6 class="mt-3 mb-3">Download Data Backup</h6>
-                        <p class="text-muted mb-4">
-                          Export all antenna patterns and metadata as a JSON file.
-                        </p>
-                        <button 
-                          type="button" 
-                          class="btn btn-success btn-lg"
-                          onclick={handleExport}
-                        >
-                          <i class="bi bi-download me-2"></i>
-                          Export JSON File
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            {/if}
-
-            <!-- Manage Data Tab -->
+            <!-- Manage Database Tab -->
             {#if activeTab === 'manage'}
               <div class="tab-pane fade show active">
-                <div class="row">
-                  <div class="col-12">
-                    <h5 class="mb-3">Manage Database</h5>
-
-                    <!-- Database Status -->
-                    <div class="card border-info mb-4">
-                      <div class="card-body">
-                        <h6 class="card-title">
-                          <i class="bi bi-info-circle me-2"></i>Database Status
-                        </h6>
-                        <DbNotification />
-                      </div>
-                    </div>
-
-                    <!-- Clear Data Section -->
-                    <div class="card border-danger">
-                      <div class="card-body">
-                        <p class="text-muted mb-3">
-                          Permanently delete all antenna data from the database.
-                        </p>
-                        
-                        {#if !showClearConfirm}
-                          <button 
-                            type="button" 
-                            class="btn btn-outline-danger"
-                            onclick={handleClearData}
-                          >
-                            <i class="bi bi-trash me-2"></i>
-                            Clear All Data
-                          </button>
-                        {:else}
-                          <div class="alert alert-danger" role="alert">
-                            <strong>Are you sure?</strong> This will permanently delete all antenna data.
-                          </div>
-                          <div class="d-flex gap-2">
-                            <button 
-                              type="button" 
-                              class="btn btn-danger"
-                              onclick={handleClearData}
-                            >
-                              <i class="bi bi-trash me-2"></i>
-                              Yes, Delete All Data
-                            </button>
-                            <button 
-                              type="button" 
-                              class="btn btn-secondary"
-                              onclick={cancelClear}
-                            >
-                              Cancel
-                            </button>
-                          </div>
-                        {/if}
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                <MSIConverter onDataRefresh={handleDataRefresh} {customBands} />
               </div>
             {/if}
 
@@ -296,12 +134,4 @@
     border-bottom-color: #0d6efd;
     background: none;
   }
-  
-  .card {
-    transition: box-shadow 0.15s ease-in-out;
-  }
-  
-  .card:hover {
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  }
 </style>

package/dist/apps/antenna-tools/components/AntennaTools.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import { loadAntennas } from '../utils/db-utils';
   import type { Antenna, ExternalAntennaInput, ViewMode, PatternType, ChartEngineType, PatternDisplayMode, BandDefinition } from '../types';
   import AntennaControls from './AntennaControls.svelte';
@@ -110,12 +110,13 @@
       if (externalAntenna1) {
         const found = findAntennaBySpec(antennas, externalAntenna1);
         if (found) {
-          selectedAntenna = found;
-          // Update available tilts
-          updateAvailableTilts(found);
-          // Set tilts from external spec
-          ant1ElectricalTilt = findTiltIndex(availableElectricalTilts, externalAntenna1.electricalTilt ?? 0);
-          ant1MechanicalTilt = externalAntenna1.mechanicalTilt ?? 0;
+          // Use untrack to prevent infinite loop from state updates
+          untrack(() => {
+            selectedAntenna = found;
+            updateAvailableTilts(found);
+            ant1ElectricalTilt = findTiltIndex(availableElectricalTilts, externalAntenna1.electricalTilt ?? 0);
+            ant1MechanicalTilt = externalAntenna1.mechanicalTilt ?? 0;
+          });
         } else {
           console.warn('[AntennaTools] External antenna 1 not found in database:', externalAntenna1.name);
         }
@@ -125,13 +126,14 @@
       if (externalAntenna2) {
         const found2 = findAntennaBySpec(antennas, externalAntenna2);
         if (found2) {
-          selectedAntenna2 = found2;
-          ant2ElectricalTilt = findTiltIndex(getAvailableTiltsForAntenna(found2), externalAntenna2.electricalTilt ?? 0);
-          ant2MechanicalTilt = externalAntenna2.mechanicalTilt ?? 0;
-          // Auto-switch to compare mode if antenna 2 is provided
-          if (viewMode === 'single') {
-            viewMode = 'compare';
-          }
+          untrack(() => {
+            selectedAntenna2 = found2;
+            ant2ElectricalTilt = findTiltIndex(getAvailableTiltsForAntenna(found2), externalAntenna2.electricalTilt ?? 0);
+            ant2MechanicalTilt = externalAntenna2.mechanicalTilt ?? 0;
+            if (viewMode === 'single') {
+              viewMode = 'compare';
+            }
+          });
         }
       }
     }
@@ -455,40 +457,22 @@
     <div class="row">
       <!-- Left Column - Antenna 1 Controls -->
       <div class="col-md-3">
-        {#if !isExternalMode}
-          <AntennaControls 
-            antennas={antennas}
-            selectedAntenna={selectedAntenna}
-            antennaNumber={1}
-            electricalTiltIndex={ant1ElectricalTilt}
-            mechanicalTilt={ant1MechanicalTilt}
-            colorTheme="primary"
-            onAntennaChange={handleAntenna1Change}
-            onElectricalTiltChange={handleTilt1Change}
-            onMechanicalTiltChange={handleMechTilt1Change}
-          />
-        {:else}
-          <!-- External mode: Show antenna info card -->
-          <div class="card border-primary">
-            <div class="card-header bg-primary text-white">
-              <i class="bi bi-broadcast me-2"></i>
-              {antenna1Label || 'Antenna 1'}
-            </div>
-            <div class="card-body">
-              {#if selectedAntenna}
-                <h6 class="card-title">{selectedAntenna.name}</h6>
-                <div class="small text-muted">
-                  <div><strong>Band:</strong> {selectedAntenna.frequency}</div>
-                  <div><strong>E-Tilt:</strong> {availableElectricalTilts[ant1ElectricalTilt] || 0}°</div>
-                  <div><strong>M-Tilt:</strong> {ant1MechanicalTilt}°</div>
-                  {#if selectedAntenna.gain_dBd}
-                    <div><strong>Gain:</strong> {selectedAntenna.gain_dBd} dBd</div>
-                  {/if}
-                </div>
-              {:else}
-                <p class="text-muted mb-0">Antenna not found in database</p>
-              {/if}
-            </div>
+        <!-- Show full controls in both modes - external mode just pre-selects the antenna -->
+        <AntennaControls 
+          antennas={antennas}
+          selectedAntenna={selectedAntenna}
+          antennaNumber={1}
+          electricalTiltIndex={ant1ElectricalTilt}
+          mechanicalTilt={ant1MechanicalTilt}
+          colorTheme="primary"
+          onAntennaChange={handleAntenna1Change}
+          onElectricalTiltChange={handleTilt1Change}
+          onMechanicalTiltChange={handleMechTilt1Change}
+          requestedFrequency={isExternalMode ? externalAntenna1?.frequency : null}
+        />
+        {#if isExternalMode && antenna1Label}
+          <div class="badge bg-primary w-100 mt-2 py-2">
+            <i class="bi bi-link-45deg me-1"></i>{antenna1Label}
           </div>
         {/if}
       </div>
@@ -531,40 +515,22 @@
       <!-- Right Column - Antenna 2 Controls (only in compare mode) -->
       <div class="col-md-3">
         {#if viewMode === 'compare'}
-          {#if !isExternalMode}
-            <AntennaControls 
-              antennas={antennas}
-              selectedAntenna={selectedAntenna2}
-              antennaNumber={2}
-              electricalTiltIndex={ant2ElectricalTilt}
-              mechanicalTilt={ant2MechanicalTilt}
-              colorTheme="warning"
-              onAntennaChange={handleAntenna2Change}
-              onElectricalTiltChange={handleTilt2Change}
-              onMechanicalTiltChange={handleMechTilt2Change}
-            />
-          {:else}
-            <!-- External mode: Show antenna 2 info card -->
-            <div class="card border-warning">
-              <div class="card-header bg-warning text-dark">
-                <i class="bi bi-broadcast me-2"></i>
-                {antenna2Label || 'Antenna 2'}
-              </div>
-              <div class="card-body">
-                {#if selectedAntenna2}
-                  <h6 class="card-title">{selectedAntenna2.name}</h6>
-                  <div class="small text-muted">
-                    <div><strong>Band:</strong> {selectedAntenna2.frequency}</div>
-                    <div><strong>E-Tilt:</strong> {getAvailableTiltsForAntenna(selectedAntenna2)[ant2ElectricalTilt] || 0}°</div>
-                    <div><strong>M-Tilt:</strong> {ant2MechanicalTilt}°</div>
-                    {#if selectedAntenna2.gain_dBd}
-                      <div><strong>Gain:</strong> {selectedAntenna2.gain_dBd} dBd</div>
-                    {/if}
-                  </div>
-                {:else}
-                  <p class="text-muted mb-0">Antenna not found in database</p>
-                {/if}
-              </div>
+          <!-- Show full controls in both modes -->
+          <AntennaControls 
+            antennas={antennas}
+            selectedAntenna={selectedAntenna2}
+            antennaNumber={2}
+            electricalTiltIndex={ant2ElectricalTilt}
+            mechanicalTilt={ant2MechanicalTilt}
+            colorTheme="warning"
+            onAntennaChange={handleAntenna2Change}
+            onElectricalTiltChange={handleTilt2Change}
+            onMechanicalTiltChange={handleMechTilt2Change}
+            requestedFrequency={isExternalMode ? externalAntenna2?.frequency : null}
+          />
+          {#if isExternalMode && antenna2Label}
+            <div class="badge bg-warning text-dark w-100 mt-2 py-2">
+              <i class="bi bi-link-45deg me-1"></i>{antenna2Label}
             </div>
           {/if}
         {:else}

package/dist/apps/antenna-tools/components/DatabaseViewer.svelte

@@ -134,8 +134,8 @@
             />
           </div>
           <div class="col-md-5">
-            <label class="form-label">Filter by Band</label>
-            <div class="btn-group w-100 flex-wrap" role="group">
+            <span class="form-label d-block">Filter by Band</span>
+            <div class="btn-group w-100 flex-wrap" role="group" aria-label="Filter by frequency band">
               <button 
                 type="button" 
                 class="btn btn-sm {selectedBand === null ? 'btn-primary' : 'btn-outline-primary'}"
@@ -187,8 +187,7 @@
         <thead class="table-light sticky-top">
           <tr>
             <th>Model Name</th>
-            <th class="text-center" style="width: 80px;">Band</th>
-            <th class="text-center" style="width: 100px;">Orig. Freq</th>
+            <th class="text-center" style="width: 120px;">Band [Orig]</th>
             <th class="text-center" style="width: 70px;">Tilt</th>
             <th class="text-center" style="width: 80px;">Gain</th>
             <th class="text-center" style="width: 60px;">H-Pts</th>
@@ -206,9 +205,7 @@
               </td>
               <td class="text-center">
                 <span class="badge bg-primary">{antenna.frequency}</span>
-              </td>
-              <td class="text-center text-muted">
-                {antenna.originalFrequency} MHz
+                <span class="text-muted small">[{antenna.originalFrequency}]</span>
               </td>
               <td class="text-center">
                 {antenna.tilt}°
@@ -225,7 +222,7 @@
             </tr>
           {:else}
             <tr>
-              <td colspan="7" class="text-center text-muted py-4">
+              <td colspan="6" class="text-center text-muted py-4">
                 No antennas match your search criteria
               </td>
             </tr>