@smartnet360/svelte-components 0.0.119 → 0.0.120

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

@@ -0,0 +1,558 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import type { Antenna } from '../types';
+  import { sortAntennasWithRecent, addToRecentAntennas } from '../utils/recent-antennas';
+
+  interface Props {
+    antennas?: Antenna[];
+    selectedAntenna?: Antenna | null;
+    antennaNumber: 1 | 2;
+    electricalTiltIndex?: number;
+    mechanicalTilt?: number;
+    colorTheme?: 'primary' | 'warning' | 'success' | 'info' | 'secondary';
+    onAntennaChange?: (antenna: Antenna | null) => void;
+    onElectricalTiltChange?: (index: number) => void;
+    onMechanicalTiltChange?: (tilt: number) => void;
+    showStatus?: boolean;
+  }
+
+  let {
+    antennas = [],
+    selectedAntenna = null,
+    antennaNumber,
+    electricalTiltIndex = 0,
+    mechanicalTilt = 0,
+    colorTheme = 'primary',
+    onAntennaChange,
+    onElectricalTiltChange,
+    onMechanicalTiltChange,
+    showStatus = true
+  }: Props = $props();
+
+  // Internal state for slider values
+  let internalElectricalTiltIndex = $state(electricalTiltIndex);
+  let internalMechanicalTilt = $state(mechanicalTilt);
+  let internalSelectedAntenna = $state(selectedAntenna);
+  let selectedFrequency = $state<number | null>(null);
+
+  // Update internal state when props change
+  $effect(() => {
+    internalElectricalTiltIndex = electricalTiltIndex;
+  });
+
+  $effect(() => {
+    internalMechanicalTilt = mechanicalTilt;
+  });
+
+  $effect(() => {
+    // Only update internal state if the prop actually changed
+    // Avoid overwriting user selections
+    if (selectedAntenna !== internalSelectedAntenna) {
+      internalSelectedAntenna = selectedAntenna;
+    }
+  });
+
+    // Get available electrical tilts from antennas with the selected name and frequency
+  let availableElectricalTilts = $state<string[]>(['0']);
+  $effect(() => {
+    let newTilts: string[] = ['0'];
+
+    if (internalSelectedAntenna) {
+      // Find ALL antennas with the same name and frequency to collect all electrical tilts
+      let sameName = antennas.filter(a => a.name === internalSelectedAntenna!.name);
+      
+      // If frequency is selected, filter by it
+      if (selectedFrequency) {
+        sameName = sameName.filter(a => a.frequency === selectedFrequency);
+      }
+      
+      const allTilts = new Set<string>();
+      
+      sameName.forEach(antenna => {
+        if (antenna.tilt) {
+          const tiltString = antenna.tilt.toString();
+          if (tiltString.includes(',')) {
+            tiltString.split(',').forEach(t => allTilts.add(t.trim()));
+          } else {
+            allTilts.add(tiltString);
+          }
+        }
+      });
+      
+      // Convert to sorted array
+      newTilts = Array.from(allTilts).sort((a, b) => parseFloat(a) - parseFloat(b));
+    }
+
+    // Only update if actually changed to prevent infinite loops
+    if (JSON.stringify(availableElectricalTilts) !== JSON.stringify(newTilts)) {
+      availableElectricalTilts = newTilts;
+    }
+  });
+
+  // Find the specific antenna that matches name, frequency, and electrical tilt
+  function findAntennaWithTilt(antennaName: string, tiltIndex: number): Antenna | null {
+    if (!antennaName) return null;
+    
+    // Handle case where availableElectricalTilts might not be populated yet
+    const targetTilt = availableElectricalTilts[tiltIndex] || '0';
+    
+    // Find antenna with matching name, frequency, and electrical tilt
+    return antennas.find(antenna => {
+      if (antenna.name !== antennaName) return false;
+      
+      // If frequency is selected, must match
+      if (selectedFrequency && antenna.frequency !== selectedFrequency) return false;
+      
+      if (antenna.tilt) {
+        const tiltString = antenna.tilt.toString();
+        const antennasTilts = tiltString.includes(',') 
+          ? tiltString.split(',').map(t => t.trim())
+          : [tiltString];
+        
+        return antennasTilts.includes(targetTilt);
+      }
+      
+      return targetTilt === '0'; // Default tilt
+    }) || null;
+  }
+
+  // Handle frequency selection
+  function handleFrequencyChange(frequency: number) {
+    selectedFrequency = frequency;
+    
+    if (internalSelectedAntenna) {
+      // STEP 1: Calculate available tilts for the new frequency
+      let sameName = antennas.filter(a => a.name === internalSelectedAntenna!.name && a.frequency === frequency);
+      
+      const allTilts = new Set<string>();
+      sameName.forEach(antenna => {
+        if (antenna.tilt) {
+          const tiltString = antenna.tilt.toString();
+          if (tiltString.includes(',')) {
+            tiltString.split(',').forEach(t => allTilts.add(t.trim()));
+          } else {
+            allTilts.add(tiltString);
+          }
+        }
+      });
+      
+      const newAvailableTilts = Array.from(allTilts).sort((a, b) => parseFloat(a) - parseFloat(b));
+      
+      // STEP 2: Determine the best tilt index to use
+      let bestTiltIndex = 0;
+      let bestTiltValue = '0';
+      
+      if (newAvailableTilts.length > 0) {
+        // Prefer '0' tilt if available, otherwise use first available
+        if (newAvailableTilts.includes('0')) {
+          bestTiltIndex = newAvailableTilts.indexOf('0');
+          bestTiltValue = '0';
+        } else {
+          bestTiltIndex = 0;
+          bestTiltValue = newAvailableTilts[0];
+        }
+      }
+      
+      // STEP 3: Find antenna with the new frequency and best tilt
+      const antennaWithNewFreq = antennas.find(antenna => {
+        if (antenna.name !== internalSelectedAntenna!.name) return false;
+        if (antenna.frequency !== frequency) return false;
+        
+        // Check if this antenna has the target tilt
+        if (antenna.tilt) {
+          const antennaTiltString = antenna.tilt.toString();
+          const antennaTilts = antennaTiltString.includes(',') 
+            ? antennaTiltString.split(',').map(t => t.trim())
+            : [antennaTiltString];
+          return antennaTilts.includes(bestTiltValue);
+        }
+        return bestTiltValue === '0';
+      });
+
+      if (antennaWithNewFreq) {
+        internalSelectedAntenna = antennaWithNewFreq;
+        internalElectricalTiltIndex = bestTiltIndex;
+        
+        onAntennaChange?.(antennaWithNewFreq);
+        onElectricalTiltChange?.(bestTiltIndex);
+      } else {
+        // Reset tilt to 0 as fallback
+        internalElectricalTiltIndex = 0;
+        onElectricalTiltChange?.(0);
+      }
+    } else {
+      internalElectricalTiltIndex = 0;
+      onElectricalTiltChange?.(0);
+    }
+  }
+
+  // Handle antenna selection
+  function handleAntennaChange(event: Event) {
+    const target = event.target as HTMLSelectElement;
+    const antennaName = target.value;
+    
+    // Reset tilt and frequency values when antenna changes
+    internalElectricalTiltIndex = 0;
+    internalMechanicalTilt = 0;
+    selectedFrequency = null;
+    
+    // Handle "Select Antenna" case (empty string)
+    if (!antennaName) {
+      internalSelectedAntenna = null;
+      onAntennaChange?.(null);
+      onElectricalTiltChange?.(0);
+      onMechanicalTiltChange?.(0);
+      return;
+    }
+    
+    // First, find ANY antenna with this name to get available tilts
+    const sampleAntenna = antennas.find(a => a.name === antennaName);
+    if (sampleAntenna && sampleAntenna.tilt) {
+      const tiltString = sampleAntenna.tilt.toString();
+      const tilts = tiltString.includes(',') 
+        ? tiltString.split(',').map(t => t.trim())
+        : [tiltString];
+      
+      // Try to find antenna with '0' tilt first, otherwise use first available
+      let tiltToUse = tilts.includes('0') ? '0' : tilts[0];
+      let tiltIndexToUse = tilts.includes('0') ? tilts.indexOf('0') : 0;
+      
+      // Find the specific antenna with the chosen tilt
+      const newAntenna = antennas.find(antenna => {
+        if (antenna.name !== antennaName) return false;
+        if (antenna.tilt) {
+          const antennaTiltString = antenna.tilt.toString();
+          const antennaTilts = antennaTiltString.includes(',') 
+            ? antennaTiltString.split(',').map(t => t.trim())
+            : [antennaTiltString];
+          return antennaTilts.includes(tiltToUse);
+        }
+        return tiltToUse === '0';
+      });
+      
+      internalSelectedAntenna = newAntenna || null;
+      internalElectricalTiltIndex = tiltIndexToUse;
+      
+    } else {
+      // Fallback: use findAntennaWithTilt with index 0
+      const newAntenna = findAntennaWithTilt(antennaName, 0);
+      internalSelectedAntenna = newAntenna;
+    }
+    
+    onAntennaChange?.(internalSelectedAntenna);
+    onElectricalTiltChange?.(internalElectricalTiltIndex);
+    onMechanicalTiltChange?.(0);
+    
+    // Track antenna selection in recent list
+    if (internalSelectedAntenna) {
+      addToRecentAntennas(internalSelectedAntenna);
+    }
+  }
+
+  // Handle electrical tilt changes
+  function handleElectricalTiltChange() {
+    // When tilt changes, find the antenna with the new tilt value
+    if (internalSelectedAntenna) {
+      const antennaWithNewTilt = findAntennaWithTilt(internalSelectedAntenna.name, internalElectricalTiltIndex);
+      if (antennaWithNewTilt) {
+        internalSelectedAntenna = antennaWithNewTilt;
+        onAntennaChange?.(antennaWithNewTilt);
+      }
+    }
+    onElectricalTiltChange?.(internalElectricalTiltIndex);
+  }
+
+  // Handle mechanical tilt changes
+  function handleMechanicalTiltChange() {
+    onMechanicalTiltChange?.(internalMechanicalTilt);
+  }
+
+  // Get current electrical tilt value as string
+  let currentElectricalTilt = $state('0');
+  $effect(() => {
+    currentElectricalTilt = availableElectricalTilts[internalElectricalTiltIndex] || '0';
+  });
+
+  // Get theme classes based on colorTheme prop
+  let themeClasses = $state({ header: '', textColor: '' });
+  $effect(() => {
+    themeClasses = {
+      header: getHeaderClass(colorTheme),
+      textColor: getTextColor(colorTheme)
+    };
+  });
+
+  function getHeaderClass(theme: 'primary' | 'warning' | 'success' | 'info' | 'secondary'): string {
+    const classes = {
+      primary: 'bg-primary text-white',
+      warning: 'bg-warning text-dark',
+      success: 'bg-success text-white',
+      info: 'bg-info text-white',
+      secondary: 'bg-secondary text-white'
+    };
+    return classes[theme];
+  }
+
+  function getTextColor(theme: 'primary' | 'warning' | 'success' | 'info' | 'secondary'): string {
+    const colors = {
+      primary: 'text-primary',
+      warning: 'text-warning',
+      success: 'text-success',
+      info: 'text-info',
+      secondary: 'text-secondary'
+    };
+    return colors[theme];
+  }
+
+  // Get unique frequency bands for the selected antenna name
+  let uniqueFrequencies = $state<number[]>([]);
+  $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);
+      uniqueFrequencies = frequencies;
+      
+      // Auto-select frequency if there's only one option
+      if (frequencies.length === 1) {
+        selectedFrequency = frequencies[0];
+      }
+    } else {
+      uniqueFrequencies = [];
+      selectedFrequency = null;
+    }
+  });
+
+  // Get unique antennas (by name, not by individual DB entries with different tilts)
+  let uniqueAntennas = $state<Antenna[]>([]);
+  let recentAntennas = $state<Antenna[]>([]);
+  let otherAntennas = $state<Antenna[]>([]);
+  
+  $effect(() => {
+    if (antennas.length > 0) {
+      // Group antennas by name and take the first one from each group
+      const antennaMap = new Map<string, Antenna>();
+      antennas.forEach(antenna => {
+        if (!antennaMap.has(antenna.name)) {
+          antennaMap.set(antenna.name, antenna);
+        }
+      });
+      const allUniqueAntennas = Array.from(antennaMap.values()).sort((a, b) => a.name.localeCompare(b.name));
+      
+      // Sort with recent antennas first
+      const { recent, others } = sortAntennasWithRecent(allUniqueAntennas);
+      recentAntennas = recent;
+      otherAntennas = others;
+      uniqueAntennas = [...recent, ...others];
+    }
+  });
+
+  // Format frequency for display (700, 800 -> "700 MHz", "800 MHz")
+  function formatFrequency(freq: number): string {
+    return `${freq} MHz`;
+  }
+</script>
+
+<div class="card h-100">
+  <div class="card-header {themeClasses.header}">
+    <h5 class="mb-0">Antenna {antennaNumber} Controls</h5>
+  </div>
+  
+  <div class="card-body">
+    <!-- Antenna Selection -->
+    <div class="mb-3">
+      <label for="antenna{antennaNumber}Select" class="form-label">
+        <strong>Select Antenna:</strong>
+      </label>
+      <select 
+        id="antenna{antennaNumber}Select"
+        class="form-select form-select-sm" 
+        value={internalSelectedAntenna?.name || ''}
+        onchange={handleAntennaChange}
+      >
+        <option value="">-- Select Antenna --</option>
+        
+        <!-- Recent Antennas -->
+        {#if recentAntennas.length > 0}
+          <optgroup label="Recent">
+            {#each recentAntennas as antenna}
+              <option value={antenna.name}>▸ {antenna.name}</option>
+            {/each}
+          </optgroup>
+        {/if}
+        
+        <!-- All Other Antennas -->
+        <optgroup label="All Antennas">
+          {#each otherAntennas as antenna}
+            <option value={antenna.name}>{antenna.name}</option>
+          {/each}
+        </optgroup>
+      </select>
+      {#if internalSelectedAntenna}
+        <small class="text-muted mt-1 d-block">
+          {formatFrequency(internalSelectedAntenna.frequency)} • {internalSelectedAntenna.gain_dBd} dBd
+        </small>
+      {/if}
+    </div>
+
+    <!-- Frequency Band Filter -->
+    {#if uniqueFrequencies.length > 1}
+      <div class="mb-3">
+        <div class="form-label">
+          <strong>Frequency Band:</strong>
+        </div>
+        <div class="d-flex flex-wrap gap-1">
+          {#each uniqueFrequencies as freq}
+            <button 
+              type="button" 
+              class="btn btn-sm {selectedFrequency === freq ? 'btn-primary' : 'btn-outline-secondary'}"
+              onclick={() => handleFrequencyChange(freq)}
+            >
+              {formatFrequency(freq)}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <!-- Electrical Tilt Control -->
+    <div class="mb-4">
+      <label for="ant{antennaNumber}ETilt" class="form-label">
+        Electrical Tilt: <strong class={themeClasses.textColor}>{currentElectricalTilt}°</strong>
+      </label>
+      <input 
+        type="range" 
+        class="form-range" 
+        id="ant{antennaNumber}ETilt"
+        min="0" 
+        max={availableElectricalTilts.length - 1}
+        step="1"
+        bind:value={internalElectricalTiltIndex}
+        oninput={handleElectricalTiltChange}
+        disabled={!internalSelectedAntenna}
+      >
+      <div class="d-flex justify-content-between">
+        <small class="text-muted">{availableElectricalTilts[0]}°</small>
+        <small class="text-muted">{availableElectricalTilts[availableElectricalTilts.length - 1]}°</small>
+      </div>
+    </div>
+
+    <!-- Mechanical Tilt Control -->
+    <div class="mb-3">
+      <label for="ant{antennaNumber}MTilt" class="form-label">
+        Mechanical Tilt: <strong class={themeClasses.textColor}>{internalMechanicalTilt}°</strong>
+      </label>
+      <input 
+        type="range" 
+        class="form-range" 
+        id="ant{antennaNumber}MTilt"
+        min="-10" 
+        max="10"
+        step="1"
+        bind:value={internalMechanicalTilt}
+        oninput={handleMechanicalTiltChange}
+        disabled={!internalSelectedAntenna}
+      >
+      <div class="d-flex justify-content-between">
+        <small class="text-muted">-10°</small>
+        <small class="text-muted">+10°</small>
+      </div>
+    </div>
+
+    <!-- Status Display -->
+    {#if showStatus && internalSelectedAntenna}
+      <div class="mt-3 p-3 bg-light rounded">
+        <h6 class="mb-2 {themeClasses.textColor}">Current Settings</h6>
+        <div class="row text-sm">
+          <div class="col-6">
+            <strong>E-Tilt:</strong><br>
+            <span class={themeClasses.textColor}>{currentElectricalTilt}°</span>
+          </div>
+          <div class="col-6">
+            <strong>M-Tilt:</strong><br>
+            <span class={themeClasses.textColor}>{internalMechanicalTilt}°</span>
+          </div>
+        </div>
+        <div class="mt-2">
+          <small class="text-muted">
+            <strong>Antenna:</strong> {internalSelectedAntenna.name}<br>
+            <strong>Band:</strong> {formatFrequency(internalSelectedAntenna.frequency)}<br>
+            <strong>Gain:</strong> {internalSelectedAntenna.gain_dBd} dBd
+          </small>
+        </div>
+      </div>
+    {:else if showStatus && !internalSelectedAntenna}
+      <div class="mt-3 p-3 bg-light rounded text-center">
+        <small class="text-muted">
+          <strong>No antenna selected</strong><br>
+          Please select an antenna from the dropdown above
+        </small>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Enhanced Bootstrap slider styling */
+  .form-range {
+    height: 8px;
+  }
+
+  .form-range::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    background: linear-gradient(145deg, #ffffff, #f8f9fa);
+    border: 2px solid #0d6efd;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transition: all 0.2s ease;
+  }
+
+  .form-range::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+  }
+
+  .form-range::-moz-range-thumb {
+    height: 20px;
+    width: 20px;
+    background: linear-gradient(145deg, #ffffff, #f8f9fa);
+    border: 2px solid #0d6efd;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transition: all 0.2s ease;
+    border-radius: 50%;
+  }
+
+  .form-range::-moz-range-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+  }
+
+  /* Card styling */
+  .card {
+    border: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .card-header {
+    border-radius: 12px 12px 0 0 !important;
+    border-bottom: none;
+  }
+
+  .text-sm {
+    font-size: 0.875rem;
+  }
+
+  /* Status panel styling */
+  .bg-light {
+    background-color: rgba(248, 249, 250, 0.8) !important;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Antenna } from '../types';
+interface Props {
+    antennas?: Antenna[];
+    selectedAntenna?: Antenna | null;
+    antennaNumber: 1 | 2;
+    electricalTiltIndex?: number;
+    mechanicalTilt?: number;
+    colorTheme?: 'primary' | 'warning' | 'success' | 'info' | 'secondary';
+    onAntennaChange?: (antenna: Antenna | null) => void;
+    onElectricalTiltChange?: (index: number) => void;
+    onMechanicalTiltChange?: (tilt: number) => void;
+    showStatus?: boolean;
+}
+declare const AntennaControls: import("svelte").Component<Props, {}, "">;
+type AntennaControls = ReturnType<typeof AntennaControls>;
+export default AntennaControls;