@smartnet360/svelte-components 0.0.134 → 0.0.136

package/dist/core/CellTable/CellTableDemo.svelte

@@ -1,336 +0,0 @@
-<script lang="ts">
-	import CellTablePanel from './CellTablePanel.svelte';
-	import type { CellTableGroupField, ColumnPreset, RowSelectionEvent, CellData } from './types';
-	import { generateCellsFromPreset, getGeneratorInfo, type GeneratorPreset } from '../../shared/demo';
-
-	let datasetSize: GeneratorPreset = $state('small');
-	let demoCells = $state(generateCellsFromPreset('small'));
-	let dataInfo = $derived(getGeneratorInfo(demoCells));
-	
-	let groupBy: CellTableGroupField = $state('none');
-	let columnPreset: ColumnPreset = $state('default');
-	let searchTerm = $state('');
-	
-	// Loading states
-	let isCreating = $state(false);
-	let isReloading = $state(false);
-	let isLoading = $derived(isCreating || isReloading);
-	
-	// Check if 5G-3500 already exists for the searched site
-	let has5G3500 = $derived.by(() => {
-		const siteId = searchTerm.trim();
-		if (!siteId) return false;
-		return demoCells.some(cell => 
-			cell.siteId.toLowerCase() === siteId.toLowerCase() && 
-			cell.fband === '5G-3500'
-		);
-	});
-	
-	// Create button disabled state
-	let createDisabled = $derived(!searchTerm.trim() || isLoading || has5G3500);
-	
-	// Tooltip for create button
-	let createTooltip = $derived.by(() => {
-		if (!searchTerm.trim()) return 'Enter a site ID first';
-		if (has5G3500) return '5G-3500 already exists for this site';
-		if (isCreating) return 'Creating...';
-		if (isReloading) return 'Reloading...';
-		return 'Create 5G-3500 cell for this site';
-	});
-
-	function handleSelectionChange(event: RowSelectionEvent) {
-		console.log('Selection changed:', event.ids);
-	}
-	
-	// Context menu action handlers
-	function handleViewCell(cell: CellData) {
-		console.log('View cell:', cell.id, cell.cellName);
-		alert(`Viewing cell: ${cell.cellName}`);
-	}
-	
-	function handleEditCell(cell: CellData) {
-		console.log('Edit cell:', cell.id, cell.cellName);
-		alert(`Edit cell: ${cell.cellName}`);
-	}
-	
-	function handleDeleteCell(cell: CellData) {
-		console.log('Delete cell:', cell.id, cell.cellName);
-		if (confirm(`Delete cell ${cell.cellName}?`)) {
-			demoCells = demoCells.filter(c => c.id !== cell.id);
-		}
-	}
-	
-	function handleShowOnMap(cell: CellData) {
-		console.log('Show on map:', cell.latitude, cell.longitude);
-		alert(`Show on map: ${cell.cellName}\nLat: ${cell.latitude}\nLon: ${cell.longitude}`);
-	}
-	
-	/**
-	 * Compare two selected cells' antenna configurations
-	 */
-	function handleCompareTwoCells(cell1: CellData, cell2: CellData) {
-		const params = new URLSearchParams();
-		
-		// Use antenna from both cells
-		if (cell1.antenna) params.set('ant1', cell1.antenna);
-		if (cell2.antenna) params.set('ant2', cell2.antenna);
-		
-		// Use electrical tilt values (parse first value if comma-separated)
-		const etilt1 = cell1.electricalTilt ? parseInt(cell1.electricalTilt.split(',')[0], 10) : 0;
-		const etilt2 = cell2.electricalTilt ? parseInt(cell2.electricalTilt.split(',')[0], 10) : 0;
-		params.set('etilt1', String(etilt1 || 0));
-		params.set('etilt2', String(etilt2 || 0));
-		
-		// Add cell name + status as labels
-		params.set('label1', `${cell1.cellName} (${cell1.status})`);
-		params.set('label2', `${cell2.cellName} (${cell2.status})`);
-		
-		const url = `/apps/antenna-compare?${params.toString()}`;
-		window.open(url, '_blank');
-	}
-	
-	function regenerateData() {
-		demoCells = generateCellsFromPreset(datasetSize);
-	}
-
-	function handleSearch() {
-		const term = searchTerm.trim().toLowerCase();
-		if (!term) {
-			// Reset to full dataset
-			demoCells = generateCellsFromPreset(datasetSize);
-			return;
-		}
-		// Filter by siteId (case-insensitive, partial match)
-		const allCells = generateCellsFromPreset(datasetSize);
-		demoCells = allCells.filter(cell => 
-			cell.siteId.toLowerCase().includes(term) ||
-			cell.cellName.toLowerCase().includes(term)
-		);
-		console.log(`Search "${term}": found ${demoCells.length} cells`);
-	}
-
-	function handleSearchKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			handleSearch();
-		}
-	}
-
-	// ============================================
-	// PLACEHOLDER FUNCTIONS - Replace with your API calls
-	// ============================================
-	
-	/**
-	 * Create a new 5G-3500 cell for the given site
-	 * TODO: Replace with your actual API call
-	 */
-	async function createCellForSite(siteId: string): Promise<void> {
-		// Simulate API call - replace with your implementation
-		console.log(`Creating 5G-3500 cell for site: ${siteId}`);
-		await new Promise(resolve => setTimeout(resolve, 1000));
-		console.log(`Cell created for site: ${siteId}`);
-	}
-	
-	/**
-	 * Reload site data after creation
-	 * TODO: Replace with your actual API call
-	 */
-	async function reloadSiteData(siteId: string): Promise<typeof demoCells> {
-		// Simulate API call - replace with your implementation
-		console.log(`Reloading data for site: ${siteId}`);
-		await new Promise(resolve => setTimeout(resolve, 500));
-		// For demo, just return filtered data
-		const allCells = generateCellsFromPreset(datasetSize);
-		return allCells.filter(cell => 
-			cell.siteId.toLowerCase().includes(siteId.toLowerCase())
-		);
-	}
-	
-	// ============================================
-	
-	/**
-	 * Handle create cell button click
-	 */
-	async function handleCreateCell() {
-		const siteId = searchTerm.trim();
-		if (!siteId || isLoading || has5G3500) return;
-		
-		try {
-			// Step 1: Create the cell
-			isCreating = true;
-			await createCellForSite(siteId);
-			isCreating = false;
-			
-			// Step 2: Reload the data
-			isReloading = true;
-			demoCells = await reloadSiteData(siteId);
-			isReloading = false;
-			
-			console.log('Cell created and data reloaded successfully');
-		} catch (error) {
-			console.error('Error creating cell:', error);
-			isCreating = false;
-			isReloading = false;
-		}
-	}
-</script>
-
-<div class="cell-table-page vh-100 d-flex flex-column">
-	<!-- Simple header for demo controls only -->
-	<div class="demo-controls bg-light border-bottom px-3 py-2 d-flex align-items-center gap-3 flex-wrap">
-		<div class="input-group input-group-sm" style="width: auto;">
-			<span class="input-group-text">Dataset</span>
-			<select class="form-select" bind:value={datasetSize} onchange={regenerateData}>
-				<option value="small">Small (~300)</option>
-				<option value="medium">Medium (~3K)</option>
-				<option value="large">Large (~15K)</option>
-				<option value="xlarge">XLarge (~60K)</option>
-			</select>
-		</div>
-		<span class="badge bg-info">
-			{dataInfo.totalCells.toLocaleString()} cells | {dataInfo.totalSites} sites
-		</span>
-		<span class="badge bg-secondary d-none d-md-inline">
-			{Object.entries(dataInfo.techBreakdown).map(([k, v]) => `${k}: ${v}`).join(' | ')}
-		</span>
-	</div>
-
-	<!-- CellTablePanel with integrated sidebar -->
-	<div class="flex-grow-1 overflow-hidden">
-		<CellTablePanel
-			cells={demoCells}
-			bind:groupBy
-			bind:columnPreset
-			selectable={true}
-			multiSelect={true}
-			showToolbar={true}
-			showExport={true}
-			headerFilters={true}
-			showDetailsSidebar={true}
-			sidebarWidth={320}
-			showScrollSpy={true}
-			title="Cell Data"
-			onselectionchange={handleSelectionChange}
-		>
-			{#snippet headerSearch()}
-				<div class="d-flex align-items-center gap-2">
-					<div class="input-group input-group-sm" style="width: 180px;">
-						<input 
-							type="text" 
-							class="form-control" 
-							placeholder="Search site or cell..."
-							bind:value={searchTerm}
-							onkeydown={handleSearchKeydown}
-							disabled={isLoading}
-						/>
-						<button 
-							class="btn btn-outline-primary" 
-							type="button"
-							onclick={handleSearch}
-							title="Search"
-							aria-label="Search"
-							disabled={isLoading}
-						>
-							{#if isReloading}
-								<span class="spinner-border spinner-border-sm" role="status"></span>
-							{:else}
-								<i class="bi bi-search"></i>
-							{/if}
-						</button>
-					</div>
-					<button 
-						class="btn btn-sm"
-						class:btn-outline-success={!has5G3500}
-						class:btn-success={has5G3500}
-						type="button"
-						onclick={handleCreateCell}
-						title={createTooltip}
-						aria-label="Create 5G-3500 cell"
-						disabled={createDisabled}
-					>
-						{#if isCreating}
-							<span class="spinner-border spinner-border-sm" role="status"></span>
-						{:else if has5G3500}
-							<i class="bi bi-check-lg"></i>
-						{:else}
-							<i class="bi bi-plus-lg"></i>
-						{/if}
-					</button>
-				</div>
-			{/snippet}
-
-			{#snippet footer({ selectedRows, selectedCount })}
-				<div class="d-flex align-items-center justify-content-between">
-					<span class="text-muted small">
-						{#if selectedCount > 0}
-							{selectedCount} cell(s) selected
-						{:else}
-							Click a row to view details
-						{/if}
-					</span>
-					<div class="btn-group">
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-success"
-							disabled={selectedCount !== 2}
-							title={selectedCount === 2 ? 'Compare Atoll antennas of selected cells' : 'Select exactly 2 cells to compare'}
-							onclick={() => handleCompareTwoCells(selectedRows[0], selectedRows[1])}
-						>
-							<i class="bi bi-broadcast-pin"></i>
-							<span class="d-none d-sm-inline ms-1">Compare Antennas</span>
-						</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-primary"
-							disabled={selectedCount === 0}
-							onclick={() => console.log('Process:', selectedRows.map(r => r.id))}
-						>
-							<i class="bi bi-gear"></i>
-							<span class="d-none d-sm-inline ms-1">Process</span>
-						</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-secondary"
-							disabled={selectedCount === 0}
-							onclick={() => console.log('Export:', selectedRows.map(r => r.id))}
-						>
-							<i class="bi bi-download"></i>
-							<span class="d-none d-sm-inline ms-1">Export</span>
-						</button>
-					</div>
-				</div>
-			{/snippet}
-
-			{#snippet contextMenu({ row, closeMenu })}
-				<div class="dropdown-menu show shadow-lg" style="min-width: 180px;">
-					<h6 class="dropdown-header text-truncate" style="max-width: 200px;">
-						<i class="bi bi-broadcast me-1"></i>{row.cellName}
-					</h6>
-					<div class="dropdown-divider"></div>
-					<button class="dropdown-item" onclick={() => { handleViewCell(row); closeMenu(); }}>
-						<i class="bi bi-eye me-2 text-primary"></i>View Details
-					</button>
-					<button class="dropdown-item" onclick={() => { handleEditCell(row); closeMenu(); }}>
-						<i class="bi bi-pencil me-2 text-warning"></i>Edit Cell
-					</button>
-					<button class="dropdown-item" onclick={() => { handleShowOnMap(row); closeMenu(); }}>
-						<i class="bi bi-geo-alt me-2 text-info"></i>Show on Map
-					</button>
-					<div class="dropdown-divider"></div>
-					<button class="dropdown-item text-danger" onclick={() => { handleDeleteCell(row); closeMenu(); }}>
-						<i class="bi bi-trash me-2"></i>Delete Cell
-					</button>
-				</div>
-			{/snippet}
-		</CellTablePanel>
-	</div>
-</div>
-
-<style>
-	.cell-table-page {
-		background: var(--bs-body-bg, #f8f9fa);
-	}
-
-	.demo-controls {
-		flex-shrink: 0;
-	}
-</style>

package/dist/core/CellTable/CellTableDemo.svelte.d.ts

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

package/dist/core/CellTable/history-api-helper.d.ts

@@ -1,79 +0,0 @@
-/**
- * Cell History API Helper
- *
- * Transform functions for converting database records to frontend-ready format.
- * Use these in your API endpoint before sending the response.
- */
-/**
- * Raw database record format (Oracle/SQL style - UPPER_CASE)
- */
-export interface CellHistoryDbRecord {
-    CELLNAME: string;
-    CONFIG_DATE: string | Date;
-    ANTENNA_TYPE: string;
-    PREV_ANTENNA_TYPE: string;
-    ANTOUTPUTPWR: number;
-    PREV_ANTOUTPUTPWR: number;
-    MECHANIC_TILT: number;
-    PREV_MECHANIC_TILT: number;
-    ELECTRONIC_TILT: number;
-    PREV_ELECTRONIC_TILT: number;
-    [key: string]: unknown;
-}
-/**
- * Frontend-ready API response format (camelCase)
- */
-export interface CellHistoryApiResponse {
-    cellName: string;
-    configDate: string;
-    antenna: string;
-    prevAntenna: string;
-    power: number;
-    prevPower: number;
-    mechanicalTilt: number;
-    prevMechanicalTilt: number;
-    electricalTilt: number;
-    prevElectricalTilt: number;
-    hasChanges: boolean;
-    changedFields: string[];
-}
-/**
- * Format a date to YYYY.MM.DD string
- */
-export declare function formatConfigDate(date: string | Date): string;
-/**
- * Transform a single database record to API response format
- */
-export declare function transformDbRecord(record: CellHistoryDbRecord): CellHistoryApiResponse;
-/**
- * Transform an array of database records to API response format
- *
- * @example
- * // In your API endpoint:
- * const dbRecords = await db.query('SELECT * FROM CELL_CONFIG_HISTORY WHERE CELLNAME = ?', [cellName]);
- * const response = transformDbRecords(dbRecords);
- * return json(response);
- */
-export declare function transformDbRecords(records: CellHistoryDbRecord[]): CellHistoryApiResponse[];
-/**
- * Example usage in a SvelteKit API endpoint:
- *
- * ```typescript
- * // src/routes/api/cell-history/[cellName]/+server.ts
- * import { json } from '@sveltejs/kit';
- * import { transformDbRecords } from './history-api-helper';
- * import { db } from '../../server/database';
- *
- * export async function GET({ params }) {
- *   const { cellName } = params;
- *
- *   const dbRecords = await db.query(`
- *     SELECT * FROM CELL_CONFIG_HISTORY
- *     WHERE CELLNAME = :cellName
- *     ORDER BY CONFIG_DATE DESC
- *   `, { cellName });
- *
- *   return json(transformDbRecords(dbRecords));
- * }
- * ```
- */

package/dist/core/CellTable/history-api-helper.js

@@ -1,83 +0,0 @@
-/**
- * Cell History API Helper
- *
- * Transform functions for converting database records to frontend-ready format.
- * Use these in your API endpoint before sending the response.
- */
-/**
- * Format a date to YYYY.MM.DD string
- */
-export function formatConfigDate(date) {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, '0');
-    const day = String(d.getDate()).padStart(2, '0');
-    return `${year}.${month}.${day}`;
-}
-/**
- * Transform a single database record to API response format
- */
-export function transformDbRecord(record) {
-    // Detect which fields changed
-    const changedFields = [];
-    if (record.ANTENNA_TYPE !== record.PREV_ANTENNA_TYPE) {
-        changedFields.push('antenna');
-    }
-    if (record.ANTOUTPUTPWR !== record.PREV_ANTOUTPUTPWR) {
-        changedFields.push('power');
-    }
-    if (record.MECHANIC_TILT !== record.PREV_MECHANIC_TILT) {
-        changedFields.push('mechanicalTilt');
-    }
-    if (record.ELECTRONIC_TILT !== record.PREV_ELECTRONIC_TILT) {
-        changedFields.push('electricalTilt');
-    }
-    return {
-        cellName: record.CELLNAME,
-        configDate: formatConfigDate(record.CONFIG_DATE),
-        antenna: record.ANTENNA_TYPE,
-        prevAntenna: record.PREV_ANTENNA_TYPE,
-        power: record.ANTOUTPUTPWR,
-        prevPower: record.PREV_ANTOUTPUTPWR,
-        mechanicalTilt: record.MECHANIC_TILT,
-        prevMechanicalTilt: record.PREV_MECHANIC_TILT,
-        electricalTilt: record.ELECTRONIC_TILT,
-        prevElectricalTilt: record.PREV_ELECTRONIC_TILT,
-        hasChanges: changedFields.length > 0,
-        changedFields
-    };
-}
-/**
- * Transform an array of database records to API response format
- *
- * @example
- * // In your API endpoint:
- * const dbRecords = await db.query('SELECT * FROM CELL_CONFIG_HISTORY WHERE CELLNAME = ?', [cellName]);
- * const response = transformDbRecords(dbRecords);
- * return json(response);
- */
-export function transformDbRecords(records) {
-    return records.map(transformDbRecord);
-}
-/**
- * Example usage in a SvelteKit API endpoint:
- *
- * ```typescript
- * // src/routes/api/cell-history/[cellName]/+server.ts
- * import { json } from '@sveltejs/kit';
- * import { transformDbRecords } from './history-api-helper';
- * import { db } from '../../server/database';
- *
- * export async function GET({ params }) {
- *   const { cellName } = params;
- *
- *   const dbRecords = await db.query(`
- *     SELECT * FROM CELL_CONFIG_HISTORY
- *     WHERE CELLNAME = :cellName
- *     ORDER BY CONFIG_DATE DESC
- *   `, { cellName });
- *
- *   return json(transformDbRecords(dbRecords));
- * }
- * ```
- */

package/dist/core/CellTable/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * CellTable Component - Exports
- *
- * A Bootstrap-themed Tabulator wrapper for displaying cell data
- */
-export { default as CellTable } from './CellTable.svelte';
-export { default as CellTableToolbar } from './CellTableToolbar.svelte';
-export { default as CellTablePanel } from './CellTablePanel.svelte';
-export { default as CellTableDemo } from './CellTableDemo.svelte';
-export { default as CellHistoryDemo } from './CellHistoryDemo.svelte';
-export { default as ColumnPicker } from './ColumnPicker.svelte';
-export { transformDbRecord, transformDbRecords, formatConfigDate, type CellHistoryDbRecord, type CellHistoryApiResponse } from './history-api-helper';
-export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS, type CellGeneratorConfig, type GeneratorPreset } from '../../shared/demo';
-export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent, CellTableColumn, ColumnGroups, CellHistoryData, GroupOption } from './types';
-export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, createHistoryChangeFormatter, historyDateFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter, type ColumnMeta } from './column-config';

package/dist/core/CellTable/index.js

@@ -1,20 +0,0 @@
-/**
- * CellTable Component - Exports
- *
- * A Bootstrap-themed Tabulator wrapper for displaying cell data
- */
-// Components
-export { default as CellTable } from './CellTable.svelte';
-export { default as CellTableToolbar } from './CellTableToolbar.svelte';
-export { default as CellTablePanel } from './CellTablePanel.svelte';
-export { default as CellTableDemo } from './CellTableDemo.svelte';
-export { default as CellHistoryDemo } from './CellHistoryDemo.svelte';
-export { default as ColumnPicker } from './ColumnPicker.svelte';
-// History API helpers (for backend transformation)
-export { transformDbRecord, transformDbRecords, formatConfigDate } from './history-api-helper';
-// Re-export shared demo data utilities for convenience
-// Note: Cell type is NOT re-exported here to avoid conflicts with map-v2
-// Import Cell from '$lib/shared/demo' or '@smartnet360/svelte-components' directly
-export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS } from '../../shared/demo';
-// Configuration utilities
-export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, createHistoryChangeFormatter, historyDateFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';