@smartnet360/svelte-components 0.0.11 → 0.0.12

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

@@ -0,0 +1,424 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import type { Antenna } from '../db';
+
+  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(() => {
+    internalSelectedAntenna = selectedAntenna;
+  });
+
+  // Get available electrical tilts from antennas with the selected name and frequency
+  let availableElectricalTilts = $state<string[]>(['0']);
+  $effect(() => {
+    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
+      availableElectricalTilts = Array.from(allTilts).sort((a, b) => parseFloat(a) - parseFloat(b));
+    } else {
+      availableElectricalTilts = ['0'];
+    }
+  });
+
+  // Find the specific antenna that matches name, frequency, and electrical tilt
+  function findAntennaWithTilt(antennaName: string, tiltIndex: number): Antenna | null {
+    if (!antennaName || !availableElectricalTilts[tiltIndex]) return null;
+    
+    const targetTilt = availableElectricalTilts[tiltIndex];
+    
+    // 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;
+    
+    // Reset tilt when frequency changes
+    internalElectricalTiltIndex = 0;
+    
+    // Find the antenna with the new frequency and default tilt
+    if (internalSelectedAntenna) {
+      const antennaWithNewFreq = findAntennaWithTilt(internalSelectedAntenna.name, 0);
+      if (antennaWithNewFreq) {
+        internalSelectedAntenna = antennaWithNewFreq;
+        onAntennaChange?.(antennaWithNewFreq);
+      }
+    }
+    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;
+    
+    // Find the specific antenna with the default tilt (index 0)
+    const newAntenna = findAntennaWithTilt(antennaName, 0);
+    internalSelectedAntenna = newAntenna;
+    
+    onAntennaChange?.(newAntenna);
+    onElectricalTiltChange?.(0);
+    onMechanicalTiltChange?.(0);
+  }
+
+  // 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[]>([]);
+  $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);
+        }
+      });
+      uniqueAntennas = Array.from(antennaMap.values()).sort((a, b) => a.name.localeCompare(b.name));
+    }
+  });
+</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>
+        {#each uniqueAntennas as antenna}
+          <option value={antenna.name}>{antenna.name}</option>
+        {/each}
+      </select>
+      {#if internalSelectedAntenna}
+        <small class="text-muted mt-1 d-block">
+          {internalSelectedAntenna.frequency} MHz • {internalSelectedAntenna.gain_dBd} dBd
+        </small>
+      {/if}
+    </div>
+
+    <!-- Frequency Band Filter -->
+    {#if uniqueFrequencies.length > 1}
+      <div class="mb-3">
+        <div class="form-label">
+          <strong>Frequency Filter:</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)}
+            >
+              {freq} MHz
+            </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>Frequency:</strong> {internalSelectedAntenna.frequency} MHz<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-pattern/components/AntennaControls.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Antenna } from '../db';
+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;

package/dist/apps/antenna-pattern/components/AntennaDataDropdown.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { base } from '$app/paths';
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  
+  let dropdown: HTMLLIElement | null = null;
+  let isOpen = false;
+  
+  // Toggle the dropdown manually
+  function toggleDropdown() {
+    isOpen = !isOpen;
+  }
+  
+  // Close dropdown when clicking outside
+  function handleClickOutside(event: MouseEvent) {
+    const target = event.target as Node | null;
+    if (dropdown && target && !dropdown.contains(target) && isOpen) {
+      isOpen = false;
+    }
+  }
+  
+  onMount(() => {
+    if (browser) {
+      document.addEventListener('click', handleClickOutside);
+    }
+    
+    return () => {
+      if (browser) {
+        document.removeEventListener('click', handleClickOutside);
+      }
+    };
+  });
+  
+  // For active state styling
+  $: isActive = $page.url.pathname.endsWith('/import-msi') || 
+               $page.url.pathname.endsWith('/import') || 
+               $page.url.pathname.endsWith('/download') || 
+               $page.url.pathname.endsWith('/clear') || 
+               $page.url.pathname.endsWith('/convert');
+</script>
+
+<li class="nav-item dropdown {isOpen ? 'show' : ''}" bind:this={dropdown}>
+  <button
+    type="button"
+    class="nav-link dropdown-toggle {isActive ? 'active' : ''}"
+    id="antennaDataDropdown"
+    on:click={toggleDropdown}
+    aria-expanded={isOpen}
+  >
+    Antenna Data
+  </button>
+  <ul class="dropdown-menu {isOpen ? 'show' : ''}" aria-labelledby="antennaDataDropdown">
+    <li><a class="dropdown-item {$page.url.pathname.endsWith('/import-msi') ? 'active' : ''}" href="{base}/apps/antenna-patterns/import-msi">Import MSI Files</a></li>
+    <li><a class="dropdown-item {$page.url.pathname.endsWith('/convert') ? 'active' : ''}" href="{base}/apps/antenna-patterns/convert">Convert MSI</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item {$page.url.pathname.endsWith('/import') ? 'active' : ''}" href="{base}/apps/antenna-patterns/import">Import JSON</a></li>
+    <li><a class="dropdown-item {$page.url.pathname.endsWith('/download') ? 'active' : ''}" href="{base}/apps/antenna-patterns/download">Download JSON</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item {$page.url.pathname.endsWith('/clear') ? 'active' : ''}" href="{base}/apps/antenna-patterns/clear">Clear Database</a></li>
+  </ul>
+</li>

package/dist/apps/antenna-pattern/components/AntennaDataDropdown.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AntennaDataDropdown: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AntennaDataDropdown = InstanceType<typeof AntennaDataDropdown>;
+export default AntennaDataDropdown;