@smartnet360/svelte-components 0.0.119 → 0.0.120

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

@@ -0,0 +1,304 @@
+<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';
+
+  interface Props {
+    show: boolean;
+    onClose: () => void;
+    onDataRefresh?: () => void;
+  }
+
+  let { show, onClose, onDataRefresh }: Props = $props();
+
+  let activeTab = $state<'view' | 'import' | 'msi' | 'export' | 'manage'>('view');
+  let showClearConfirm = $state(false);
+
+  // 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 -->
+{#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-database me-2"></i>
+            Antenna Database
+          </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 === 'view' ? 'active' : ''}"
+                type="button"
+                onclick={() => activeTab = 'view'}
+              >
+                <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
+              </button>
+            </div>
+          </div>
+
+          <!-- Tab Content -->
+          <div class="tab-content p-4">
+            
+            <!-- View Data Tab -->
+            {#if activeTab === 'view'}
+              <div class="tab-pane fade show active">
+                <DatabaseViewer />
+              </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} />
+                  </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">
+                        <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>
+              </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-tools/components/AntennaSettingsModal.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    show: boolean;
+    onClose: () => void;
+    onDataRefresh?: () => void;
+}
+declare const AntennaSettingsModal: import("svelte").Component<Props, {}, "">;
+type AntennaSettingsModal = ReturnType<typeof AntennaSettingsModal>;
+export default AntennaSettingsModal;