@smartnet360/svelte-components 0.0.133 → 0.0.135

package/dist/core/CellTableV2/column-config.js

@@ -0,0 +1,671 @@
+/**
+ * CellTable - Column Configuration
+ *
+ * Defines column definitions, presets, and formatters for the cell table
+ */
+/**
+ * Default technology colors (Bootstrap-aligned)
+ * 2G: Yellow, 4G: Purple, 5G: Green
+ */
+export const DEFAULT_TECH_COLORS = {
+    '2G': '#ffc107', // Yellow
+    '3G': '#0d6efd', // primary blue
+    '4G': '#9333ea', // Purple
+    '5G': '#22c55e', // Green
+    'LTE': '#9333ea', // Purple (same as 4G)
+    'NR': '#22c55e', // Green (same as 5G)
+};
+/**
+ * Default status colors (Bootstrap-aligned)
+ */
+export const DEFAULT_STATUS_COLORS = {
+    'On_Air': '#198754', // success green
+    'On_Air_UNDER_CONSTRUCTION': '#4ce207ff', // warning yellow
+    'On_Air_Locked': '#e04001ff', // info cyan
+    'RF_Plan_Ready': '#e69603ff', // primary blue
+    'Re-Planned_RF_Plan_Ready': '#c1a342ff', // purple
+    'Tavlati_RF_Plan_Ready': '#25ddfdff', // orange
+};
+/**
+ * Frequency band colors
+ * GSM: Yellow shades (darker = higher freq)
+ * LTE: Purple shades (darker = higher freq)
+ * 5G: Green shades (stronger = higher freq)
+ */
+export const FBAND_COLORS = {
+    // GSM - Yellow shades (900 lighter, 1800 darker)
+    'GSM900': '#ffc107', // Light yellow
+    'GSM1800': '#cc9a06', // Darker yellow/gold
+    // LTE - Purple shades (700 lightest → 2600 darkest)
+    'LTE700': '#d8b4fe', // Light purple
+    'LTE800': '#c084fc', // 
+    'LTE900': '#a855f7', // 
+    'LTE1800': '#9333ea', // 
+    'LTE2100': '#7e22ce', // 
+    'LTE2600': '#6b21a8', // Dark purple
+    // 5G - Green shades (700 lighter → 3500 stronger)
+    '5G-700': '#86efac', // Light green
+    '5G-2100': '#22c55e', // Medium green
+    '5G-3500': '#15803d', // Strong/dark green
+    'NR3500': '#15803d', // Same as 5G-3500
+};
+/**
+ * Column groups for different presets
+ */
+export const COLUMN_GROUPS = {
+    core: ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'],
+    physical: ['antenna', 'azimuth', 'height', 'beamwidth'],
+    network: ['nwET', 'nwPW', 'nwRS', 'nwBW', 'dlEarfn', 'bcch', 'pci', 'rru', 'cellID', 'cellId2G', 'ctrlid'],
+    planning: ['planner', 'comment', 'onAirDate'],
+    atoll: ['atollET', 'atollMT', 'atollPW', 'atollRS', 'atollBW'],
+    position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
+    compare: ['compareET', 'comparePW', 'compareRS', 'compareBW'],
+};
+/**
+ * Create a technology badge formatter
+ */
+export function createTechFormatter(colors = DEFAULT_TECH_COLORS) {
+    return (cell) => {
+        const value = cell.getValue();
+        const color = colors[value] || '#6c757d';
+        return `<span class="badge" style="background-color: ${color}; color: white;">${value}</span>`;
+    };
+}
+/**
+ * Create a status badge formatter
+ */
+export function createStatusFormatter(colors = DEFAULT_STATUS_COLORS) {
+    return (cell) => {
+        const value = cell.getValue();
+        const color = colors[value] || '#6c757d';
+        const displayValue = value.replace(/_/g, ' ');
+        return `<span class="badge" style="background-color: ${color}; color: white; font-size: 0.7rem;">${displayValue}</span>`;
+    };
+}
+/**
+ * Create an fband badge formatter
+ */
+export function createFbandFormatter() {
+    return (cell) => {
+        const value = cell.getValue();
+        const color = FBAND_COLORS[value] || '#6c757d';
+        return `<span class="badge" style="background-color: ${color}; color: white;">${value}</span>`;
+    };
+}
+/**
+ * Number formatter with fixed decimals
+ */
+export function numberFormatter(decimals = 2) {
+    return (cell) => {
+        const value = cell.getValue();
+        if (value === null || value === undefined || value === '')
+            return '';
+        const num = Number(value);
+        return isNaN(num) ? String(value) : num.toFixed(decimals);
+    };
+}
+/**
+ * Coordinate formatter (lat/lng)
+ */
+export function coordinateFormatter(cell) {
+    const value = cell.getValue();
+    if (value === null || value === undefined || value === '')
+        return '';
+    const num = Number(value);
+    return isNaN(num) ? String(value) : num.toFixed(6);
+}
+/**
+ * Azimuth formatter with degree symbol
+ */
+export function azimuthFormatter(cell) {
+    const value = cell.getValue();
+    if (value === null || value === undefined || value === '')
+        return '';
+    return `${value}°`;
+}
+/**
+ * Height formatter with meter unit
+ */
+export function heightFormatter(cell) {
+    const value = cell.getValue();
+    if (value === null || value === undefined || value === '')
+        return '';
+    return `${value}m`;
+}
+/**
+ * Comparison formatter for Atoll vs Network values
+ * Shows both values side by side with color coding:
+ * - Green: values match exactly
+ * - Red: values don't match
+ * - Gray: one or both values missing
+ */
+export function createCompareFormatter(atollField, nwtField) {
+    return (cell) => {
+        const row = cell.getRow().getData();
+        const atollVal = row[atollField];
+        const nwtVal = row[nwtField];
+        const atollStr = atollVal !== null && atollVal !== undefined ? String(atollVal) : '-';
+        const nwtStr = nwtVal !== null && nwtVal !== undefined ? String(nwtVal) : '-';
+        // Determine match status
+        const atollMissing = atollVal === null || atollVal === undefined;
+        const nwtMissing = nwtVal === null || nwtVal === undefined;
+        let bgColor;
+        let textColor = 'white';
+        if (atollMissing || nwtMissing) {
+            // One or both missing - gray
+            bgColor = '#6c757d';
+        }
+        else if (atollVal === nwtVal) {
+            // Exact match - green
+            bgColor = '#198754';
+        }
+        else {
+            // Mismatch - red
+            bgColor = '#dc3545';
+        }
+        return `<span class="badge" style="background-color: ${bgColor}; color: ${textColor}; font-size: 0.75rem; font-weight: normal;">${atollStr} | ${nwtStr}</span>`;
+    };
+}
+/**
+ * Custom sorter for fband - extracts numeric portion and sorts numerically
+ * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
+ */
+export function fbandSorter(a, b) {
+    const numA = parseInt(a.replace(/\D/g, ''), 10) || 0;
+    const numB = parseInt(b.replace(/\D/g, ''), 10) || 0;
+    return numA - numB;
+}
+/**
+ * Custom sorter for cellName - sorts by the 5th character (sector digit)
+ * Example: 10001 → '1', 10002 → '2', 10003 → '3'
+ */
+export function cellNameSectorSorter(a, b) {
+    const charA = a.charAt(4) || '0';
+    const charB = b.charAt(4) || '0';
+    return charA.localeCompare(charB);
+}
+/**
+ * Combined multi-level sorter for cell data
+ * Sort order: tech (asc) → fband by numeric value (asc) → cellName by 5th digit (asc)
+ */
+export function cellDataSorter(a, b) {
+    // 1. Sort by tech (string comparison)
+    const techA = String(a.tech || '');
+    const techB = String(b.tech || '');
+    const techCompare = techA.localeCompare(techB);
+    if (techCompare !== 0)
+        return techCompare;
+    // 2. Sort by fband (numeric extraction)
+    const fbandA = String(a.fband || '');
+    const fbandB = String(b.fband || '');
+    const fbandCompare = fbandSorter(fbandA, fbandB);
+    if (fbandCompare !== 0)
+        return fbandCompare;
+    // 3. Sort by cellName 5th character (sector)
+    const cellNameA = String(a.cellName || '');
+    const cellNameB = String(b.cellName || '');
+    return cellNameSectorSorter(cellNameA, cellNameB);
+}
+/**
+ * Get all column definitions
+ */
+export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = DEFAULT_STATUS_COLORS, headerFilters = true) {
+    const headerFilterParams = headerFilters ? { headerFilter: 'input' } : {};
+    const selectHeaderFilter = headerFilters ? { headerFilter: 'list', headerFilterParams: { valuesLookup: true } } : {};
+    return [
+        // Core columns - siteId, txId, cellName first (frozen)
+        {
+            title: 'Site ID',
+            field: 'siteId',
+            width: 120,
+            frozen: true,
+            ...headerFilterParams,
+        },
+        {
+            title: 'TX ID',
+            field: 'txId',
+            width: 100,
+            frozen: true,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell Name',
+            field: 'cellName',
+            width: 150,
+            frozen: true,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Tech',
+            field: 'tech',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createTechFormatter(techColors),
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'Band',
+            field: 'fband',
+            width: 100,
+            hozAlign: 'center',
+            formatter: createFbandFormatter(),
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'Freq',
+            field: 'frq',
+            width: 80,
+            hozAlign: 'center',
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'Status',
+            field: 'status',
+            width: 180,
+            formatter: createStatusFormatter(statusColors),
+            ...selectHeaderFilter,
+        },
+        {
+            title: 'On Air Date',
+            field: 'onAirDate',
+            width: 120,
+            ...headerFilterParams,
+        },
+        // Physical columns
+        {
+            title: 'Antenna',
+            field: 'antenna',
+            width: 150,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Azimuth',
+            field: 'azimuth',
+            width: 90,
+            hozAlign: 'right',
+            formatter: azimuthFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Height',
+            field: 'height',
+            width: 80,
+            hozAlign: 'right',
+            formatter: heightFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Beamwidth',
+            field: 'beamwidth',
+            width: 100,
+            hozAlign: 'right',
+            formatter: azimuthFormatter,
+            ...headerFilterParams,
+        },
+        // Network columns
+        {
+            title: 'DL EARFCN',
+            field: 'dlEarfn',
+            width: 100,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'BCCH',
+            field: 'bcch',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'PCI',
+            field: 'pci',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID',
+            field: 'cellID',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID 2G',
+            field: 'cellID2G',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Ctrl ID',
+            field: 'ctrlid',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'RRU',
+            field: 'rru',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'NW ET',
+            field: 'nwET',
+            width: 80,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'NW PW',
+            field: 'nwPW',
+            width: 80,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'NW RS',
+            field: 'nwRS',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'NW BW',
+            field: 'nwBW',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        // Atoll columns
+        {
+            title: 'Atoll ET',
+            field: 'atollET',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'Atoll MT',
+            field: 'atollMT',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'Atoll PW',
+            field: 'atollPW',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'Atoll RS',
+            field: 'atollRS',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        {
+            title: 'Atoll BW',
+            field: 'atollBW',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
+        // Compare columns (Atoll vs Network)
+        {
+            title: 'Δ ET',
+            field: 'compareET',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollET', 'nwET'),
+            headerTooltip: 'Atoll ET | Network ET',
+        },
+        {
+            title: 'Δ PW',
+            field: 'comparePW',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollPW', 'nwPW'),
+            headerTooltip: 'Atoll PW | Network PW',
+        },
+        {
+            title: 'Δ RS',
+            field: 'compareRS',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollRS', 'nwRS'),
+            headerTooltip: 'Atoll RS | Network RS',
+        },
+        {
+            title: 'Δ BW',
+            field: 'compareBW',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollBW', 'nwBW'),
+            headerTooltip: 'Atoll BW | Network BW',
+        },
+        // Position columns
+        {
+            title: 'Latitude',
+            field: 'latitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Longitude',
+            field: 'longitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Site Lat',
+            field: 'siteLatitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Site Lng',
+            field: 'siteLongitude',
+            width: 120,
+            hozAlign: 'right',
+            formatter: coordinateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'DX',
+            field: 'dx',
+            width: 80,
+            hozAlign: 'right',
+            formatter: numberFormatter(2),
+            ...headerFilterParams,
+        },
+        {
+            title: 'DY',
+            field: 'dy',
+            width: 80,
+            hozAlign: 'right',
+            formatter: numberFormatter(2),
+            ...headerFilterParams,
+        },
+        // Planning columns
+        {
+            title: 'Planner',
+            field: 'planner',
+            width: 120,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Comment',
+            field: 'comment',
+            width: 200,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Subgroup',
+            field: 'customSubgroup',
+            width: 120,
+            ...headerFilterParams,
+        },
+    ];
+}
+/**
+ * Get columns for a specific preset
+ */
+export function getColumnsForPreset(preset, techColors = DEFAULT_TECH_COLORS, statusColors = DEFAULT_STATUS_COLORS, headerFilters = true) {
+    const allColumns = getAllColumns(techColors, statusColors, headerFilters);
+    let visibleFields;
+    switch (preset) {
+        case 'compact':
+            visibleFields = ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'];
+            break;
+        case 'full':
+            return allColumns;
+        case 'physical':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.physical];
+            break;
+        case 'network':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.network];
+            break;
+        case 'planning':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
+            break;
+        case 'compare':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
+            break;
+        case 'default':
+        default:
+            visibleFields = [
+                'siteId', 'txId', 'cellName', 'tech', 'fband', 'frq', 'status',
+                'azimuth', 'height', 'antenna'
+            ];
+    }
+    return allColumns.filter(col => visibleFields.includes(col.field));
+}
+/**
+ * Get group header formatter for a specific field
+ */
+export function getGroupHeaderFormatter(groupField) {
+    return (value, count) => {
+        const displayValue = String(value).replace(/_/g, ' ');
+        let color = '#6c757d';
+        if (groupField === 'tech') {
+            color = DEFAULT_TECH_COLORS[String(value)] || color;
+        }
+        else if (groupField === 'fband') {
+            color = FBAND_COLORS[String(value)] || color;
+        }
+        else if (groupField === 'status') {
+            color = DEFAULT_STATUS_COLORS[String(value)] || color;
+        }
+        return `<span class="badge me-2" style="background-color: ${color}; color: white;">${displayValue}</span>
+			<span class="text-muted">(${count} cell${count !== 1 ? 's' : ''})</span>`;
+    };
+}
+/**
+ * Get column metadata for the column picker UI
+ * @param options Filter options for including/excluding column groups
+ */
+export function getColumnMetadata(options) {
+    const allColumns = [
+        // Core
+        { field: 'siteId', title: 'Site ID', group: 'Core' },
+        { field: 'txId', title: 'TX ID', group: 'Core' },
+        { field: 'cellName', title: 'Cell Name', group: 'Core' },
+        { field: 'tech', title: 'Technology', group: 'Core' },
+        { field: 'fband', title: 'Band', group: 'Core' },
+        { field: 'frq', title: 'Frequency', group: 'Core' },
+        { field: 'status', title: 'Status', group: 'Core' },
+        { field: 'onAirDate', title: 'On Air Date', group: 'Core' },
+        // Antenna Physical
+        { field: 'antenna', title: 'Antenna', group: 'Antenna Physical' },
+        { field: 'azimuth', title: 'Azimuth', group: 'Antenna Physical' },
+        { field: 'height', title: 'Height', group: 'Antenna Physical' },
+        { field: 'beamwidth', title: 'Beamwidth', group: 'Antenna Physical' },
+        { field: 'atollMT', title: 'Atoll MT', group: 'Atoll' },
+        // Atoll antenna settings
+        { field: 'atollET', title: 'Atoll ET', group: 'Atoll' },
+        { field: 'atollPW', title: 'Atoll PW', group: 'Atoll' },
+        { field: 'atollRS', title: 'Atoll RS', group: 'Atoll' },
+        { field: 'atollBW', title: 'Atoll BW', group: 'Atoll' },
+        // Network antena settings
+        { field: 'nwET', title: 'NW ET', group: 'Network' },
+        { field: 'nwPW', title: 'NW PW', group: 'Network' },
+        { field: 'nwRS', title: 'NW RS', group: 'Network' },
+        { field: 'nwBW', title: 'NW BW', group: 'Network' },
+        // Compare (Atoll vs Network)
+        { field: 'compareET', title: 'Δ ET', group: 'Compare' },
+        { field: 'comparePW', title: 'Δ PW', group: 'Compare' },
+        { field: 'compareRS', title: 'Δ RS', group: 'Compare' },
+        { field: 'compareBW', title: 'Δ BW', group: 'Compare' },
+        // Network settings
+        { field: 'dlEarfn', title: 'DL EARFCN', group: 'Network' },
+        { field: 'bcch', title: 'BCCH', group: 'Network' },
+        { field: 'pci', title: 'PCI', group: 'Network' },
+        { field: 'rru', title: 'RRU', group: 'Network' },
+        { field: 'cellID', title: 'Cell ID', group: 'Network' },
+        { field: 'cellId2G', title: 'Cell ID 2G', group: 'Network' },
+        { field: 'ctrlid', title: 'Ctrl ID', group: 'Network' },
+        // Position
+        // { field: 'latitude', title: 'Latitude', group: 'Position' },
+        // { field: 'longitude', title: 'Longitude', group: 'Position' },
+        // { field: 'siteLatitude', title: 'Site Latitude', group: 'Position' },
+        // { field: 'siteLongitude', title: 'Site Longitude', group: 'Position' },
+        // { field: 'dx', title: 'DX', group: 'Position' },
+        // { field: 'dy', title: 'DY', group: 'Position' },
+        // Planning
+        { field: 'planner', title: 'Planner', group: 'Planning' },
+        { field: 'comment', title: 'Comment', group: 'Planning' },
+        // { field: 'customSubgroup', title: 'Subgroup', group: 'Planning' },
+    ];
+    // Apply filtering if options provided
+    const { include, exclude } = options ?? {};
+    return allColumns.filter(col => {
+        // If include is specified, only include those groups
+        if (include && include.length > 0) {
+            if (!include.includes(col.group)) {
+                return false;
+            }
+        }
+        // Apply exclude filter
+        if (exclude && exclude.includes(col.group)) {
+            return false;
+        }
+        return true;
+    });
+}
+/**
+ * Get default visible columns for a preset
+ */
+export function getPresetVisibleFields(preset) {
+    switch (preset) {
+        case 'compact':
+            return ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'];
+        case 'full':
+            return getColumnMetadata().map(c => c.field);
+        case 'physical':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.physical];
+        case 'network':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.network];
+        case 'planning':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
+        case 'compare':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
+        case 'default':
+        default:
+            return ['siteId', 'txId', 'cellName', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];
+    }
+}

package/dist/core/CellTableV2/composables/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CellTableV2 Composables
+ *
+ * Reusable logic hooks for cell table functionality.
+ * These composables use Svelte 5 runes and can be shared across different panel types.
+ */
+export { usePersistence } from './usePersistence.svelte';
+export type { UsePersistenceOptions, UsePersistenceReturn } from './usePersistence.svelte';
+export { useColumnVisibility } from './useColumnVisibility.svelte';
+export type { UseColumnVisibilityOptions, UseColumnVisibilityReturn } from './useColumnVisibility.svelte';
+export { useScrollSpy } from './useScrollSpy.svelte';
+export type { UseScrollSpyOptions, UseScrollSpyReturn, ScrollSpyGroup, CellTableRef } from './useScrollSpy.svelte';

package/dist/core/CellTableV2/composables/index.js

@@ -0,0 +1,9 @@
+/**
+ * CellTableV2 Composables
+ *
+ * Reusable logic hooks for cell table functionality.
+ * These composables use Svelte 5 runes and can be shared across different panel types.
+ */
+export { usePersistence } from './usePersistence.svelte';
+export { useColumnVisibility } from './useColumnVisibility.svelte';
+export { useScrollSpy } from './useScrollSpy.svelte';