@smartnet360/svelte-components 0.0.103 → 0.0.105

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

@@ -0,0 +1,465 @@
+/**
+ * CellTable - Column Configuration
+ *
+ * Defines column definitions, presets, and formatters for the cell table
+ */
+/**
+ * Default technology colors (Bootstrap-aligned)
+ */
+export const DEFAULT_TECH_COLORS = {
+    '2G': '#6c757d', // secondary gray
+    '3G': '#0d6efd', // primary blue
+    '4G': '#198754', // success green
+    '5G': '#6f42c1', // purple
+    'LTE': '#198754', // success green
+    'NR': '#6f42c1', // purple
+};
+/**
+ * Default status colors (Bootstrap-aligned)
+ */
+export const DEFAULT_STATUS_COLORS = {
+    'On_Air': '#198754', // success green
+    'On_Air_UNDER_CONSTRUCTION': '#ffc107', // warning yellow
+    'On_Air_Locked': '#0dcaf0', // info cyan
+    'RF_Plan_Ready': '#0d6efd', // primary blue
+    'Re-Planned_RF_Plan_Ready': '#6f42c1', // purple
+    'Tavlati_RF_Plan_Ready': '#fd7e14', // orange
+};
+/**
+ * Frequency band colors
+ */
+export const FBAND_COLORS = {
+    'GSM900': '#6c757d',
+    'GSM1800': '#495057',
+    'LTE700': '#dc3545',
+    'LTE800': '#e35d6a',
+    'LTE900': '#fd7e14',
+    'LTE1800': '#198754',
+    'LTE2100': '#20c997',
+    'LTE2600': '#0dcaf0',
+    '5G-700': '#6f42c1',
+    '5G-3500': '#d63384',
+    'NR3500': '#d63384',
+};
+/**
+ * Column groups for different presets
+ */
+export const COLUMN_GROUPS = {
+    core: ['id', 'cellName', 'siteId', 'tech', 'fband', 'status'],
+    physical: ['antenna', 'azimuth', 'height', 'electricalTilt', 'beamwidth'],
+    network: ['dlEarfn', 'bcch', 'pci1', 'cellId3', 'nwtP1', 'nwtP2', 'nwtRS', 'nwtBW'],
+    planning: ['planner', 'comment', 'onAirDate', 'type'],
+    atoll: ['atollETP', 'atollPW', 'atollRS', 'atollBW'],
+    position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
+};
+/**
+ * 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`;
+}
+/**
+ * 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
+        {
+            title: 'ID',
+            field: 'id',
+            width: 120,
+            frozen: true,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell Name',
+            field: 'cellName',
+            width: 150,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Site ID',
+            field: 'siteId',
+            width: 120,
+            ...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: 'Type',
+            field: 'type',
+            width: 100,
+            ...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: 'E-Tilt',
+            field: 'electricalTilt',
+            width: 80,
+            hozAlign: 'right',
+            ...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: 'pci1',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID 3',
+            field: 'cellId3',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID',
+            field: 'cellID',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Cell ID 2G',
+            field: 'cellID2G',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'TX ID',
+            field: 'txId',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Ctrl ID',
+            field: 'ctrlid',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT P1',
+            field: 'nwtP1',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT P2',
+            field: 'nwtP2',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT RS',
+            field: 'nwtRS',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        {
+            title: 'NWT BW',
+            field: 'nwtBW',
+            width: 80,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        // Atoll columns
+        {
+            title: 'Atoll ETP',
+            field: 'atollETP',
+            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,
+        },
+        // 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 = ['cellName', 'siteId', '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 'default':
+        default:
+            visibleFields = [
+                'id', 'cellName', 'siteId', '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>`;
+    };
+}

package/dist/core/CellTable/demo-data.d.ts

@@ -0,0 +1,5 @@
+import type { CellData } from './types';
+/**
+ * Demo cell data for testing the CellTable component
+ */
+export declare const demoCells: CellData[];