@smartnet360/svelte-components 0.0.119 → 0.0.120

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

@@ -0,0 +1,597 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { loadAntennas } from '../utils/db-utils';
+  import type { Antenna, ExternalAntennaInput, ViewMode, PatternType, ChartEngineType, PatternDisplayMode } from '../types';
+  import AntennaControls from './AntennaControls.svelte';
+  import AntennaSettingsModal from './AntennaSettingsModal.svelte';
+  import { PolarLineChart, PolarAreaChart } from './chart-engines/index';
+  import { findAntennaBySpec } from '../utils/antenna-helpers';
+
+  /**
+   * AntennaTools - Main antenna pattern visualization component
+   * 
+   * Two operating modes:
+   * 1. External Data Mode: Parent provides antenna specs via externalAntenna1/externalAntenna2 props
+   *    - Antenna selection is hidden, tilts come from external data
+   *    - Parent controls which antenna is displayed
+   * 
+   * 2. Standalone Mode (default): User selects antennas from database
+   *    - Full UI with antenna selection dropdowns
+   *    - Settings modal for data management
+   */
+
+  interface Props {
+    // === External Data Mode Props ===
+    /** External antenna 1 specification (activates external mode) */
+    externalAntenna1?: ExternalAntennaInput | null;
+    /** External antenna 2 specification (for compare mode) */
+    externalAntenna2?: ExternalAntennaInput | null;
+    
+    // === Standalone Mode Initialization Props ===
+    /** Initial antenna 1 name to pre-select (standalone mode only) */
+    initialAntenna1Name?: string;
+    /** Initial antenna 2 name to pre-select (standalone mode only) */
+    initialAntenna2Name?: string;
+    /** Initial electrical tilt for antenna 1 */
+    initialEtilt1?: number;
+    /** Initial electrical tilt for antenna 2 */
+    initialEtilt2?: number;
+    /** Initial mechanical tilt for antenna 1 */
+    initialMtilt1?: number;
+    /** Initial mechanical tilt for antenna 2 */
+    initialMtilt2?: number;
+    
+    // === Common Props ===
+    /** Initial view mode */
+    initialViewMode?: ViewMode;
+    /** Label for antenna 1 (e.g., cell name) */
+    antenna1Label?: string;
+    /** Label for antenna 2 (e.g., cell name) */
+    antenna2Label?: string;
+    /** Hide the settings button */
+    hideSettings?: boolean;
+  }
+
+  let {
+    // External mode
+    externalAntenna1 = null,
+    externalAntenna2 = null,
+    // Standalone mode initialization
+    initialAntenna1Name = undefined,
+    initialAntenna2Name = undefined,
+    initialEtilt1 = 0,
+    initialEtilt2 = 0,
+    initialMtilt1 = 0,
+    initialMtilt2 = 0,
+    // Common
+    initialViewMode = 'single',
+    antenna1Label = undefined,
+    antenna2Label = undefined,
+    hideSettings = false,
+  }: Props = $props();
+
+  // === Derived: Operating Mode ===
+  let isExternalMode = $derived(externalAntenna1 !== null && externalAntenna1 !== undefined);
+
+  // === State ===
+  let antennas = $state<Antenna[]>([]);
+  let selectedAntenna = $state<Antenna | null>(null);
+  let selectedAntenna2 = $state<Antenna | null>(null);
+  let isLoading = $state(true);
+  let loadError = $state<string | null>(null);
+
+  // Tilt values (index for electrical, direct value for mechanical)
+  let ant1ElectricalTilt = $state(0);
+  let ant2ElectricalTilt = $state(0);
+  let ant1MechanicalTilt = $state(initialMtilt1);
+  let ant2MechanicalTilt = $state(initialMtilt2);
+
+  // Viewing mode and pattern settings
+  let viewMode = $state<ViewMode>(initialViewMode);
+  let patternType = $state<PatternType>('vertical');
+  let chartEngine = $state<ChartEngineType>('polar-line');
+  let patternDisplayMode = $state<PatternDisplayMode>('normalized');
+
+  // Settings modal state
+  let showSettingsModal = $state(false);
+
+  // Available tilt options (will be set from antenna data)
+  let availableElectricalTilts = $state<string[]>(['0', '2', '4', '6', '8']);
+
+  // === External Mode: React to external antenna changes ===
+  $effect(() => {
+    if (isExternalMode && antennas.length > 0) {
+      // Find and set antenna 1 from external spec
+      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;
+        } else {
+          console.warn('[AntennaTools] External antenna 1 not found in database:', externalAntenna1.name);
+        }
+      }
+      
+      // Find and set antenna 2 from external spec (for compare mode)
+      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';
+          }
+        }
+      }
+    }
+  });
+
+  // === Handlers ===
+  function handleAntenna1Change(antenna: Antenna | null) {
+    selectedAntenna = antenna;
+    if (antenna) {
+      updateAvailableTilts(antenna);
+    }
+  }
+
+  function handleAntenna2Change(antenna: Antenna | null) {
+    selectedAntenna2 = antenna;
+  }
+
+  function handleTilt1Change(tilt: number) {
+    ant1ElectricalTilt = tilt;
+  }
+
+  function handleTilt2Change(tilt: number) {
+    ant2ElectricalTilt = tilt;
+  }
+
+  function handleMechTilt1Change(tilt: number) {
+    ant1MechanicalTilt = tilt;
+  }
+
+  function handleMechTilt2Change(tilt: number) {
+    ant2MechanicalTilt = tilt;
+  }
+
+  function openSettings() {
+    showSettingsModal = true;
+  }
+
+  function closeSettings() {
+    showSettingsModal = false;
+  }
+
+  async function handleDataRefresh() {
+    try {
+      antennas = await loadAntennas();
+      
+      // Reinitialize antenna selections after data refresh
+      if (antennas.length > 0 && !isExternalMode) {
+        selectedAntenna = antennas[0];
+        selectedAntenna2 = antennas.length > 1 ? antennas[1] : antennas[0];
+        
+        // Reset tilt values
+        ant1ElectricalTilt = 0;
+        ant1MechanicalTilt = 0;
+        ant2ElectricalTilt = 0;
+        ant2MechanicalTilt = 0;
+      }
+    } catch (error) {
+      console.error('[AntennaTools] Failed to refresh data:', error);
+    }
+  }
+
+  // === Helpers ===
+  function updateAvailableTilts(antenna: Antenna) {
+    // Collect ALL available tilts from all antennas with the same name
+    const sameName = antennas.filter(a => a.name === antenna.name);
+    const allTilts = new Set<string>();
+    sameName.forEach(a => {
+      if (a.tilt) {
+        const tiltStr = a.tilt.toString();
+        if (tiltStr.includes(',')) {
+          tiltStr.split(',').forEach(t => allTilts.add(t.trim()));
+        } else {
+          allTilts.add(tiltStr.trim());
+        }
+      }
+    });
+    availableElectricalTilts = Array.from(allTilts).sort((a, b) => parseFloat(a) - parseFloat(b));
+  }
+
+  function getAvailableTiltsForAntenna(antenna: Antenna): string[] {
+    const sameName = antennas.filter(a => a.name === antenna.name);
+    const allTilts = new Set<string>();
+    sameName.forEach(a => {
+      if (a.tilt) {
+        const tiltStr = a.tilt.toString();
+        if (tiltStr.includes(',')) {
+          tiltStr.split(',').forEach(t => allTilts.add(t.trim()));
+        } else {
+          allTilts.add(tiltStr.trim());
+        }
+      }
+    });
+    return Array.from(allTilts).sort((a, b) => parseFloat(a) - parseFloat(b));
+  }
+
+  function findTiltIndex(tilts: string[], tiltValue: number): number {
+    const index = tilts.findIndex(t => parseInt(t, 10) === tiltValue);
+    return index >= 0 ? index : 0;
+  }
+
+  function generateChartTitle(): string {
+    if (viewMode === 'compare' && selectedAntenna && selectedAntenna2) {
+      const label1 = antenna1Label || selectedAntenna.name;
+      const label2 = antenna2Label || selectedAntenna2.name;
+      return `${label1} vs ${label2}`;
+    } else if (selectedAntenna) {
+      const label = antenna1Label || selectedAntenna.name;
+      return `${label} - Pattern Analysis`;
+    }
+    return 'Antenna Pattern Analysis';
+  }
+
+  // === Initialization ===
+  onMount(async () => {
+    try {
+      isLoading = true;
+      loadError = null;
+      
+      // Load antenna data from database
+      antennas = await loadAntennas();
+      
+      if (antennas.length === 0) {
+        // No antennas in database - show empty state
+        isLoading = false;
+        return;
+      }
+      
+      // External mode: antenna selection handled by $effect
+      if (isExternalMode) {
+        isLoading = false;
+        return;
+      }
+      
+      // Standalone mode: Initialize antenna selections
+      if (initialAntenna1Name) {
+        const found = findAntennaBySpec(antennas, { name: initialAntenna1Name });
+        selectedAntenna = found || antennas[0];
+      } else {
+        selectedAntenna = antennas[0];
+      }
+      
+      if (selectedAntenna) {
+        updateAvailableTilts(selectedAntenna);
+        ant1ElectricalTilt = findTiltIndex(availableElectricalTilts, initialEtilt1);
+      }
+      
+      // Set antenna 2 selection
+      if (initialAntenna2Name) {
+        const found2 = findAntennaBySpec(antennas, { name: initialAntenna2Name });
+        selectedAntenna2 = found2 || (antennas.length > 1 ? antennas[1] : antennas[0]);
+      } else {
+        selectedAntenna2 = antennas.length > 1 ? antennas[1] : antennas[0];
+      }
+      
+      if (selectedAntenna2) {
+        const ant2Tilts = getAvailableTiltsForAntenna(selectedAntenna2);
+        ant2ElectricalTilt = findTiltIndex(ant2Tilts, initialEtilt2);
+      }
+      
+    } catch (error) {
+      console.error('[AntennaTools] Failed to initialize:', error);
+      loadError = error instanceof Error ? error.message : 'Failed to load antenna data';
+    } finally {
+      isLoading = false;
+    }
+  });
+</script>
+
+<div class="container-fluid mt-4">
+  {#if isLoading}
+    <!-- Loading State -->
+    <div class="d-flex justify-content-center align-items-center" style="min-height: 400px;">
+      <div class="text-center">
+        <div class="spinner-border text-primary mb-3" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+        <p class="text-muted">Loading antenna data...</p>
+      </div>
+    </div>
+  {:else if loadError}
+    <!-- Error State -->
+    <div class="alert alert-danger" role="alert">
+      <i class="bi bi-exclamation-triangle me-2"></i>
+      {loadError}
+    </div>
+  {:else if antennas.length === 0}
+    <!-- Empty State -->
+    <div class="text-center py-5">
+      <i class="bi bi-broadcast text-muted" style="font-size: 4rem;"></i>
+      <h4 class="mt-3">No Antenna Data</h4>
+      <p class="text-muted mb-4">
+        Import antenna patterns to get started.
+      </p>
+      {#if !hideSettings}
+        <button 
+          type="button" 
+          class="btn btn-primary btn-lg"
+          onclick={openSettings}
+        >
+          <i class="bi bi-database me-2"></i>
+          Open Database
+        </button>
+      {/if}
+    </div>
+  {:else}
+    <!-- Main Content -->
+    
+    <!-- Controls Row -->
+    <div class="row mb-3">
+      <div class="col-md-2">
+        <div class="form-label">View Mode:</div>
+        <div class="btn-group w-100" role="group" aria-label="View mode selection">
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="singleMode" 
+            bind:group={viewMode} 
+            value="single"
+          >
+          <label class="btn btn-outline-primary" for="singleMode">Single</label>
+
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="compareMode" 
+            bind:group={viewMode} 
+            value="compare"
+          >
+          <label class="btn btn-outline-primary" for="compareMode">Compare</label>
+        </div>
+      </div>
+
+      <div class="col-md-2">
+        <div class="form-label">Chart Type:</div>
+        <div class="btn-group w-100" role="group" aria-label="Chart type selection">
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="polarLineChart" 
+            bind:group={chartEngine} 
+            value="polar-line"
+          >
+          <label class="btn btn-outline-primary" for="polarLineChart">Line</label>
+
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="polarAreaChart" 
+            bind:group={chartEngine} 
+            value="polar-area"
+          >
+          <label class="btn btn-outline-primary" for="polarAreaChart">Area</label>
+        </div>
+      </div>
+
+      <div class="col-md-3">
+        <div class="form-label">Display Mode:</div>
+        <div class="btn-group w-100" role="group" aria-label="Pattern display mode selection">
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="normalizedMode" 
+            bind:group={patternDisplayMode} 
+            value="normalized"
+          >
+          <label class="btn btn-outline-primary" for="normalizedMode">Pattern</label>
+
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="gainAdjustedMode" 
+            bind:group={patternDisplayMode} 
+            value="gain-adjusted"
+          >
+          <label class="btn btn-outline-primary" for="gainAdjustedMode">+Gain</label>
+        </div>
+      </div>
+
+      <div class="col-md-2">
+        <div class="form-label">Pattern Type:</div>
+        <div class="btn-group w-100" role="group" aria-label="Pattern type selection">
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="horizontalPattern" 
+            bind:group={patternType} 
+            value="horizontal"
+          >
+          <label class="btn btn-outline-primary" for="horizontalPattern">Horizontal</label>
+
+          <input 
+            type="radio" 
+            class="btn-check" 
+            id="verticalPattern" 
+            bind:group={patternType} 
+            value="vertical"
+          >
+          <label class="btn btn-outline-primary" for="verticalPattern">Vertical</label>
+        </div>
+      </div>
+
+      <div class="col-md-3">
+        {#if !hideSettings}
+          <div class="form-label">Actions:</div>
+          <button 
+            type="button" 
+            class="btn btn-outline-secondary w-100"
+            onclick={openSettings}
+            title="Database"
+          >
+            <i class="bi bi-database"></i> Database
+          </button>
+        {:else}
+          <!-- Spacer when settings hidden -->
+          <div></div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Main Layout Row -->
+    <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>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Center Column - Chart -->
+      <div class="col-md-6">
+        <div class="card">
+          <div class="card-body p-1">
+            {#if chartEngine === 'polar-line'}
+              <PolarLineChart
+                {selectedAntenna}
+                {selectedAntenna2}
+                {viewMode}
+                {patternType}
+                {patternDisplayMode}
+                {ant1ElectricalTilt}
+                {ant1MechanicalTilt}
+                {ant2ElectricalTilt}
+                {ant2MechanicalTilt}
+                title={generateChartTitle()}
+              />
+            {:else if chartEngine === 'polar-area'}
+              <PolarAreaChart
+                {selectedAntenna}
+                {selectedAntenna2}
+                {viewMode}
+                {patternType}
+                {patternDisplayMode}
+                {ant1ElectricalTilt}
+                {ant1MechanicalTilt}
+                {ant2ElectricalTilt}
+                {ant2MechanicalTilt}
+                title={generateChartTitle()}
+              />
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <!-- 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>
+            </div>
+          {/if}
+        {:else}
+          <!-- Empty space to keep chart centered in single mode -->
+          <div></div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- Settings Modal (only in standalone mode) -->
+{#if !hideSettings}
+  <AntennaSettingsModal 
+    show={showSettingsModal} 
+    onClose={closeSettings} 
+    onDataRefresh={handleDataRefresh}
+  />
+{/if}
+
+<style>
+  /* Chart container */
+  :global(.plotly .plot-container) {
+    border-radius: 8px !important;
+  }
+
+  /* Main chart card styling */
+  .card {
+    border: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+  }
+</style>

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

@@ -0,0 +1,42 @@
+import type { ExternalAntennaInput, ViewMode } from '../types';
+/**
+ * AntennaTools - Main antenna pattern visualization component
+ *
+ * Two operating modes:
+ * 1. External Data Mode: Parent provides antenna specs via externalAntenna1/externalAntenna2 props
+ *    - Antenna selection is hidden, tilts come from external data
+ *    - Parent controls which antenna is displayed
+ *
+ * 2. Standalone Mode (default): User selects antennas from database
+ *    - Full UI with antenna selection dropdowns
+ *    - Settings modal for data management
+ */
+interface Props {
+    /** External antenna 1 specification (activates external mode) */
+    externalAntenna1?: ExternalAntennaInput | null;
+    /** External antenna 2 specification (for compare mode) */
+    externalAntenna2?: ExternalAntennaInput | null;
+    /** Initial antenna 1 name to pre-select (standalone mode only) */
+    initialAntenna1Name?: string;
+    /** Initial antenna 2 name to pre-select (standalone mode only) */
+    initialAntenna2Name?: string;
+    /** Initial electrical tilt for antenna 1 */
+    initialEtilt1?: number;
+    /** Initial electrical tilt for antenna 2 */
+    initialEtilt2?: number;
+    /** Initial mechanical tilt for antenna 1 */
+    initialMtilt1?: number;
+    /** Initial mechanical tilt for antenna 2 */
+    initialMtilt2?: number;
+    /** Initial view mode */
+    initialViewMode?: ViewMode;
+    /** Label for antenna 1 (e.g., cell name) */
+    antenna1Label?: string;
+    /** Label for antenna 2 (e.g., cell name) */
+    antenna2Label?: string;
+    /** Hide the settings button */
+    hideSettings?: boolean;
+}
+declare const AntennaTools: import("svelte").Component<Props, {}, "">;
+type AntennaTools = ReturnType<typeof AntennaTools>;
+export default AntennaTools;