@smartnet360/svelte-components 0.0.10 → 0.0.12

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

@@ -0,0 +1,339 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import { loadAntennas } from '../utils/db-utils';
+  import type { Antenna } from '../db';
+  import AntennaControls from './AntennaControls.svelte';
+  import AntennaSettingsModal from './AntennaSettingsModal.svelte';
+  import { 
+    createAntennaChartData,
+    createChartLayout,
+    createChartConfig,
+    generateChartTitle,
+    type PlotlyTraceData
+  } from '../utils/plotly-chart-utils';
+
+  let Plotly: any;
+  let chartDiv = $state<HTMLDivElement>();
+  let antennas = $state<Antenna[]>([]);
+  let selectedAntenna = $state<Antenna | null>(null);
+  let selectedAntenna2 = $state<Antenna | null>(null);
+  let chartInitialized = $state(false);
+
+  // External Bootstrap slider values
+  let ant1ElectricalTilt = $state(0);
+  let ant2ElectricalTilt = $state(0);
+  let ant1MechanicalTilt = $state(0);
+  let ant2MechanicalTilt = $state(0);
+
+  // Viewing mode and pattern visibility
+  let viewMode = $state<'single' | 'compare'>('single');
+  let patternType = $state<'horizontal' | 'vertical'>('vertical');
+
+  // 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']);
+
+  // Handle antenna selection from controls
+  function handleAntenna1Change(antenna: Antenna | null) {
+    selectedAntenna = antenna;
+    if (antenna) {
+      // Update available electrical tilts based on selected antenna
+      availableElectricalTilts = antenna.tilt ? 
+        antenna.tilt.split(',').map(t => t.trim()) : 
+        ['0', '2', '4', '6', '8'];
+      ant1ElectricalTilt = 0;
+      ant1MechanicalTilt = 0;
+    }
+  }
+
+  function handleAntenna2Change(antenna: Antenna | null) {
+    selectedAntenna2 = antenna;
+    if (antenna) {
+      ant2ElectricalTilt = 0;
+      ant2MechanicalTilt = 0;
+    }
+  }
+
+  // Handle electrical tilt changes from controls
+  function handleTilt1Change(tilt: number) {
+    ant1ElectricalTilt = tilt;
+  }
+
+  function handleTilt2Change(tilt: number) {
+    ant2ElectricalTilt = tilt;
+  }
+
+  // Handle mechanical tilt changes from controls  
+  function handleMechTilt1Change(tilt: number) {
+    ant1MechanicalTilt = tilt;
+  }
+
+  function handleMechTilt2Change(tilt: number) {
+    ant2MechanicalTilt = tilt;
+  }
+
+  // Handle settings modal
+  function openSettings() {
+    showSettingsModal = true;
+  }
+
+  function closeSettings() {
+    showSettingsModal = false;
+  }
+
+  // Handle data refresh from settings modal
+  async function handleDataRefresh() {
+    try {
+      antennas = await loadAntennas();
+      
+      // Reinitialize antenna selections after data refresh
+      if (antennas.length > 0) {
+        selectedAntenna = antennas[0];
+        if (antennas.length > 1) {
+          selectedAntenna2 = antennas[1];
+        } else {
+          selectedAntenna2 = antennas[0];
+        }
+        
+        // Reset tilt values
+        ant1ElectricalTilt = 0;
+        ant1MechanicalTilt = 0;
+        ant2ElectricalTilt = 0;
+        ant2MechanicalTilt = 0;
+        
+        // Update chart if initialized
+        if (chartInitialized) {
+          await updateChart();
+        }
+      }
+      
+      console.log('Data refreshed from settings modal');
+    } catch (error) {
+      console.error('Failed to refresh data:', error);
+    }
+  }
+
+  // Watch for slider changes and update chart
+  $effect(() => {
+    if (chartInitialized) {
+      updateChart();
+    }
+  });
+
+  onMount(async () => {
+    if (browser) {
+      try {
+        // Load Plotly and antenna data
+        Plotly = await import('plotly.js-dist-min');
+        antennas = await loadAntennas();
+        
+        if (antennas.length > 0) {
+          // Set default antenna selection for antenna 1
+          selectedAntenna = antennas[0];
+          if (selectedAntenna.tilt) {
+            availableElectricalTilts = selectedAntenna.tilt.split(',').map(t => t.trim());
+          }
+          
+          // Set default antenna selection for antenna 2 (for compare mode)
+          if (antennas.length > 1) {
+            selectedAntenna2 = antennas[1];
+          } else {
+            selectedAntenna2 = antennas[0]; // Use same antenna if only one available
+          }
+          
+          await initializeChart();
+        }
+      } catch (error) {
+        console.error('Failed to initialize:', error);
+      }
+    }
+  });
+
+  async function initializeChart() {
+    if (!Plotly || !chartDiv) return;
+
+    const data = createAntennaChartData(
+      selectedAntenna,
+      selectedAntenna2,
+      viewMode,
+      patternType === 'horizontal',
+      patternType === 'vertical',
+      ant1ElectricalTilt,
+      ant1MechanicalTilt,
+      ant2ElectricalTilt,
+      ant2MechanicalTilt
+    );
+    const title = generateChartTitle(viewMode, selectedAntenna, selectedAntenna2);
+    const layout = createChartLayout(title);
+    const config = createChartConfig();
+
+    try {
+      await Plotly.newPlot(chartDiv, data, layout, config);
+      chartInitialized = true;
+      console.log('Chart initialized with antenna controls');
+    } catch (error) {
+      console.error('Failed to create chart:', error);
+    }
+  }
+
+  async function updateChart() {
+    if (!Plotly || !chartDiv || !chartInitialized) return;
+
+    try {
+      const data = createAntennaChartData(
+        selectedAntenna,
+        selectedAntenna2,
+        viewMode,
+        patternType === 'horizontal',
+        patternType === 'vertical',
+        ant1ElectricalTilt,
+        ant1MechanicalTilt,
+        ant2ElectricalTilt,
+        ant2MechanicalTilt
+      );
+      const title = generateChartTitle(viewMode, selectedAntenna, selectedAntenna2);
+      await Plotly.react(chartDiv, data, createChartLayout(title));
+    } catch (error) {
+      console.error('Failed to update chart:', error);
+    }
+  }
+</script>
+
+<div class="container-fluid mt-4">
+
+
+  <!-- Viewing Mode and Pattern Visibility Controls -->
+  <div class="row mb-4">
+    <div class="col-md-4">
+      <div class="form-label">Viewing Mode:</div>
+      <div class="btn-group w-100" role="group" aria-label="Viewing mode selection">
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="singleMode" 
+          bind:group={viewMode} 
+          value="single"
+        >
+        <label class="btn btn-outline-primary" for="singleMode">Single Antenna</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-4">
+      <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-4">
+      <div class="form-label">Actions:</div>
+      <button 
+        type="button" 
+        class="btn btn-outline-secondary w-100"
+        onclick={openSettings}
+        title="Settings"
+      >
+        <i class="bi bi-gear"></i> Settings
+      </button>
+    </div>
+  </div>
+
+  <div class="row">
+    <!-- Left Column - Antenna 1 Controls -->
+    <div class="col-md-3">
+      <AntennaControls 
+        antennas={antennas}
+        selectedAntenna={selectedAntenna}
+        antennaNumber={1}
+        electricalTiltIndex={ant1ElectricalTilt}
+        mechanicalTilt={ant1MechanicalTilt}
+        colorTheme="primary"
+        onAntennaChange={handleAntenna1Change}
+        onElectricalTiltChange={handleTilt1Change}
+        onMechanicalTiltChange={handleMechTilt1Change}
+      />
+    </div>
+
+    <!-- Center Column - Chart (always centered) -->
+    <div class="col-md-6">
+      <div class="card">
+        <div class="card-body p-1">
+          <div bind:this={chartDiv} style="height: 700px;"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column - Antenna 2 Controls (only in compare mode) -->
+    <div class="col-md-3">
+      {#if viewMode === 'compare'}
+        <AntennaControls 
+          antennas={antennas}
+          selectedAntenna={selectedAntenna2}
+          antennaNumber={2}
+          electricalTiltIndex={ant2ElectricalTilt}
+          mechanicalTilt={ant2MechanicalTilt}
+          colorTheme="warning"
+          onAntennaChange={handleAntenna2Change}
+          onElectricalTiltChange={handleTilt2Change}
+          onMechanicalTiltChange={handleMechTilt2Change}
+        />
+      {:else}
+        <!-- Empty space to keep chart centered in single mode -->
+        <div></div>
+      {/if}
+    </div>
+  </div>
+
+  
+</div>
+
+<!-- Settings Modal -->
+<AntennaSettingsModal 
+  show={showSettingsModal} 
+  onClose={closeSettings} 
+  on:dataRefresh={handleDataRefresh}
+/>
+
+<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-pattern/components/AntennaDiagrams.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AntennaDiagrams: import("svelte").Component<Record<string, never>, {}, "">;
+type AntennaDiagrams = ReturnType<typeof AntennaDiagrams>;
+export default AntennaDiagrams;

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

@@ -0,0 +1,299 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import JsonImporter from './JsonImporter.svelte';
+  import MSIConverter from './MSIConverter.svelte';
+  import DbNotification from './DbNotification.svelte';
+  import { exportAntennas, clearAllAntennas } from '../utils/db-utils';
+  import { dbStatus } from '../stores/db-status';
+
+  interface Props {
+    show: boolean;
+    onClose: () => void;
+  }
+
+  let { show, onClose }: Props = $props();
+
+  const dispatch = createEventDispatcher();
+  
+  let activeTab = $state<'import' | 'export' | 'manage' | 'msi'>('import');
+  let showClearConfirm = $state(false);
+
+  // Handle data refresh after import operations
+  function handleDataRefresh() {
+    dispatch('dataRefresh');
+  }
+
+  // Export data as JSON
+  async function handleExport() {
+    try {
+      await exportAntennas();
+      console.log('Data exported successfully');
+    } 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();
+      console.log('All data cleared successfully');
+    } catch (error) {
+      console.error('Clear data failed:', error);
+    }
+  }
+
+  function cancelClear() {
+    showClearConfirm = false;
+  }
+</script>
+
+<!-- Modal -->
+{#if show}
+  <!-- Modal backdrop -->
+  <div class="modal-backdrop fade show"></div>
+  
+  <!-- Modal dialog -->
+  <div class="modal fade show d-block" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
+      <div class="modal-content">
+        <!-- Modal Header -->
+        <div class="modal-header border-bottom">
+          <h4 class="modal-title">
+            <i class="bi bi-gear me-2"></i>
+            Antenna Data Management
+          </h4>
+          <button 
+            type="button" 
+            class="btn-close" 
+            onclick={onClose}
+            aria-label="Close"
+          ></button>
+        </div>
+
+        <!-- Modal Body -->
+        <div class="modal-body p-0">
+          <!-- Tab Navigation -->
+          <div class="border-bottom">
+            <div class="nav nav-tabs">
+              <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
+              </button>
+            </div>
+          </div>
+
+          <!-- Tab Content -->
+          <div class="tab-content p-4">
+            
+            <!-- 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 on:dataRefresh={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 on:dataRefresh={handleDataRefresh} />
+                  </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 -->
+            {#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">
+                        <h6 class="card-title text-danger">
+                          <i class="bi bi-exclamation-triangle me-2"></i>Danger Zone
+                        </h6>
+                        <p class="text-muted mb-3">
+                          Permanently delete all antenna data from the database. This action cannot be undone.
+                        </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>
+              </div>
+            {/if}
+
+          </div>
+        </div>
+
+        <!-- Modal Footer -->
+        <div class="modal-footer border-top">
+          <button 
+            type="button" 
+            class="btn btn-secondary" 
+            onclick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  
+  .modal-xl {
+    max-width: 1140px;
+  }
+  
+  .nav-tabs {
+    border-bottom: 1px solid #dee2e6;
+  }
+  
+  .nav-tabs .nav-link {
+    border: none;
+    border-bottom: 3px solid transparent;
+    background: none;
+    color: #6c757d;
+    padding: 1rem 1.5rem;
+  }
+  
+  .nav-tabs .nav-link:hover {
+    border-bottom-color: #e9ecef;
+    color: #495057;
+  }
+  
+  .nav-tabs .nav-link.active {
+    color: #0d6efd;
+    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-pattern/components/AntennaSettingsModal.svelte.d.ts

@@ -0,0 +1,24 @@
+interface Props {
+    show: boolean;
+    onClose: () => void;
+}
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AntennaSettingsModal: $$__sveltets_2_IsomorphicComponent<Props, {
+    dataRefresh: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type AntennaSettingsModal = InstanceType<typeof AntennaSettingsModal>;
+export default AntennaSettingsModal;