@smartnet360/svelte-components 0.0.84 → 0.0.86

package/dist/map-v3/features/cells/stores/cell.display.svelte.js

@@ -0,0 +1,67 @@
+import { browser } from '$app/environment';
+export class CellDisplayStore {
+    key = 'map-v3-cell-display';
+    // State
+    targetPixelSize = $state(50);
+    fillOpacity = $state(0.6);
+    lineWidth = $state(1);
+    showLabels = $state(false);
+    // Grouping
+    level1 = $state('tech');
+    level2 = $state('fband');
+    // Label Settings
+    labelPixelDistance = $state(60);
+    labelFontSize = $state(12);
+    labelAzimuthTolerance = $state(10);
+    labelColor = $state('#333333');
+    labelHaloColor = $state('#ffffff');
+    labelHaloWidth = $state(1);
+    // Tech-specific label config
+    labels2G = $state({ primary: 'cellID', secondary: 'none' });
+    labels4G = $state({ primary: 'cellID', secondary: 'dlEarfn' });
+    constructor() {
+        if (browser) {
+            const saved = localStorage.getItem(this.key);
+            if (saved) {
+                try {
+                    const parsed = JSON.parse(saved);
+                    this.targetPixelSize = parsed.targetPixelSize ?? 50;
+                    this.fillOpacity = parsed.fillOpacity ?? 0.6;
+                    this.lineWidth = parsed.lineWidth ?? 1;
+                    this.showLabels = parsed.showLabels ?? false;
+                    this.level1 = parsed.level1 ?? 'tech';
+                    this.level2 = parsed.level2 ?? 'fband';
+                    this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
+                    this.labelFontSize = parsed.labelFontSize ?? 12;
+                    this.labelAzimuthTolerance = parsed.labelAzimuthTolerance ?? 10;
+                    this.labelColor = parsed.labelColor ?? '#333333';
+                    this.labelHaloColor = parsed.labelHaloColor ?? '#ffffff';
+                    this.labelHaloWidth = parsed.labelHaloWidth ?? 1;
+                    this.labels2G = parsed.labels2G ?? { primary: 'cellID', secondary: 'none' };
+                    this.labels4G = parsed.labels4G ?? { primary: 'cellID', secondary: 'dlEarfn' };
+                }
+                catch (e) {
+                    console.error('Failed to load cell display settings', e);
+                }
+            }
+            $effect(() => {
+                localStorage.setItem(this.key, JSON.stringify({
+                    targetPixelSize: this.targetPixelSize,
+                    fillOpacity: this.fillOpacity,
+                    lineWidth: this.lineWidth,
+                    showLabels: this.showLabels,
+                    level1: this.level1,
+                    level2: this.level2,
+                    labelPixelDistance: this.labelPixelDistance,
+                    labelFontSize: this.labelFontSize,
+                    labelAzimuthTolerance: this.labelAzimuthTolerance,
+                    labelColor: this.labelColor,
+                    labelHaloColor: this.labelHaloColor,
+                    labelHaloWidth: this.labelHaloWidth,
+                    labels2G: this.labels2G,
+                    labels4G: this.labels4G
+                }));
+            });
+        }
+    }
+}

package/dist/map-v3/features/cells/stores/cell.registry.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Persistent store for cell styling (colors, visibility)
+ * Key: Stable Group ID (e.g. "4G__LTE700")
+ * Value: { color: string, visible: boolean }
+ */
+export declare class CellRegistry {
+    state: Record<string, {
+        color: string;
+        visible: boolean;
+    }>;
+    version: number;
+    namespace: string;
+    constructor(namespace?: string);
+    load(): void;
+    save(): void;
+    getStyle(id: string, defaultColor: string): {
+        color: string;
+        visible: boolean;
+    };
+    toggleVisibility(id: string): void;
+    setColor(id: string, color: string): void;
+}
+export declare function createCellRegistry(namespace: string): CellRegistry;

package/dist/map-v3/features/cells/stores/cell.registry.svelte.js

@@ -0,0 +1,68 @@
+import { writable } from 'svelte/store';
+/**
+ * Persistent store for cell styling (colors, visibility)
+ * Key: Stable Group ID (e.g. "4G__LTE700")
+ * Value: { color: string, visible: boolean }
+ */
+export class CellRegistry {
+    state = $state({});
+    version = $state(0); // Signal for reactivity
+    namespace;
+    constructor(namespace = 'default') {
+        this.namespace = namespace;
+        this.load();
+        $effect(() => {
+            this.save();
+        });
+    }
+    load() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const stored = localStorage.getItem(`${this.namespace}:cell-registry`);
+            if (stored) {
+                this.state = JSON.parse(stored);
+                this.version++;
+            }
+        }
+        catch (e) {
+            console.warn('Failed to load cell registry', e);
+        }
+    }
+    save() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            localStorage.setItem(`${this.namespace}:cell-registry`, JSON.stringify(this.state));
+        }
+        catch (e) {
+            console.warn('Failed to save cell registry', e);
+        }
+    }
+    getStyle(id, defaultColor) {
+        if (!this.state[id]) {
+            // Initialize if missing
+            this.state[id] = { color: defaultColor, visible: true };
+            // No version bump here to avoid loops during render
+        }
+        return this.state[id];
+    }
+    toggleVisibility(id) {
+        if (this.state[id]) {
+            this.state[id].visible = !this.state[id].visible;
+            this.version++;
+        }
+        else {
+            console.warn(`[CellRegistry] Tried to toggle missing ID: ${id}`);
+        }
+    }
+    setColor(id, color) {
+        if (this.state[id]) {
+            this.state[id].color = color;
+            this.version++;
+        }
+    }
+}
+export function createCellRegistry(namespace) {
+    return new CellRegistry(namespace);
+}

package/dist/map-v3/features/cells/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Cell Feature - Type Definitions
+ *
+ * Core interfaces and types for cellular network visualization
+ */
+/**
+ * Cell data model - represents a radio cell/sector
+ */
+export interface Cell {
+    id: string;
+    txId: string;
+    cellID: string;
+    cellID2G: string;
+    cellName: string;
+    siteId: string;
+    tech: string;
+    fband: string;
+    frq: string;
+    type: string;
+    status: string;
+    onAirDate: string;
+    bcch: number;
+    ctrlid: string;
+    dlEarfn: number;
+    antenna: string;
+    azimuth: number;
+    height: number;
+    electricalTilt: string;
+    beamwidth: number;
+    latitude: number;
+    longitude: number;
+    dx: number;
+    dy: number;
+    siteLatitude: number;
+    siteLongitude: number;
+    comment: string;
+    planner: string;
+    atollETP: number;
+    atollPW: number;
+    atollRS: number;
+    atollBW: number;
+    cellId3: string;
+    nwtP1: number;
+    nwtP2: number;
+    pci1: number;
+    nwtRS: number;
+    nwtBW: number;
+    other?: Record<string, any>;
+    customSubgroup: string;
+}
+/**
+ * Supported cell sector status values
+ */
+export type CellStatus = 'On_Air' | 'On_Air_UNDER_CONSTRUCTION' | 'On_Air_Locked' | 'RF_Plan_Ready' | 'Re-Planned_RF_Plan_Ready' | 'Tavlati_RF_Plan_Ready';
+/**
+ * Technology-Band combination key
+ */
+export type TechnologyBandKey = string;
+/**
+ * Grouping fields for Tree View
+ */
+export type CellGroupingField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' | 'none';

package/dist/map-v3/features/cells/types.js

@@ -0,0 +1,6 @@
+/**
+ * Cell Feature - Type Definitions
+ *
+ * Core interfaces and types for cellular network visualization
+ */
+export {};

package/dist/map-v3/features/repeaters/components/RepeaterFilterControl.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import { MapControl } from '../../../shared';
+	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import type { RepeaterDataStore } from '../stores/repeater.data.svelte';
+	import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
+	import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+	import type { RepeaterGroupingField } from '../types';
+	import { buildRepeaterTree } from '../logic/tree-adapter';
+
+	interface Props {
+		dataStore: RepeaterDataStore;
+		registry: RepeaterRegistry;
+		displayStore: RepeaterDisplayStore;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	}
+
+	let { dataStore, registry, displayStore, position = 'top-left' }: Props = $props();
+
+	const level1Options: RepeaterGroupingField[] = ['tech', 'provider', 'featureGroup'];
+	const level2Options: RepeaterGroupingField[] = ['fband', 'provider', 'featureGroup', 'none'];
+
+	let treeStore = $derived.by(() => {
+		const _repeaters = dataStore.filteredRepeaters;
+		const _l1 = displayStore.level1;
+		const _l2 = displayStore.level2;
+
+		return untrack(() => {
+			const nodes = buildRepeaterTree(_repeaters, registry, _l1, _l2);
+			return createTreeStore({
+				nodes,
+				namespace: `${registry.namespace}:repeater-tree:${_l1}:${_l2}`,
+				persistState: true,
+				defaultExpandAll: true
+			});
+		});
+	});
+
+	$effect(() => {
+		const unsubscribe = treeStore.subscribe((val) => {
+			let changes = 0;
+			val.state.nodes.forEach((nodeState) => {
+				if (nodeState.node.children && nodeState.node.children.length > 0) return;
+
+				const groupId = nodeState.node.id;
+				const isVisible = val.state.checkedPaths.has(nodeState.path);
+				
+				const currentStyle = registry.getStyle(groupId, '#000');
+				if (currentStyle.visible !== isVisible) {
+					registry.toggleVisibility(groupId);
+					changes++;
+				}
+			});
+		});
+
+		return () => {
+			unsubscribe();
+		};
+	});
+
+	function handleColorChange(groupId: string, event: Event) {
+		const input = event.target as HTMLInputElement;
+		registry.setColor(groupId, input.value);
+	}
+
+	function getFieldLabel(field: string): string {
+		const labels: Record<string, string> = {
+			tech: 'Technology',
+			fband: 'Tech + Band',
+			provider: 'Provider',
+			featureGroup: 'Feature Group',
+			none: 'None'
+		};
+		return labels[field] || field;
+	}
+</script>
+
+<MapControl {position} title="Repeaters" icon="router" controlWidth="320px">
+	<div class="card shadow-sm border-0">
+		<!-- <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
+			<h6 class="mb-0 fw-bold text-primary">
+				<i class="bi bi-broadcast me-2"></i>Repeaters
+			</h6>
+			<span class="badge bg-light text-dark border">
+				{dataStore.filteredRepeaters.length}
+			</span>
+		</div> -->
+		
+		<div class="card-body p-2 bg-light border-bottom">
+			<div class="row g-2">
+				<div class="col-6">
+					<label class="form-label x-small text-muted text-uppercase mb-1">Group By</label>
+					<select class="form-select form-select-sm" bind:value={displayStore.level1}>
+						{#each level1Options as opt}
+							<option value={opt}>{getFieldLabel(opt)}</option>
+						{/each}
+					</select>
+				</div>
+				<div class="col-6">
+					<label class="form-label x-small text-muted text-uppercase mb-1">Then By</label>
+					<select class="form-select form-select-sm" bind:value={displayStore.level2}>
+						{#each level2Options as opt}
+							<option value={opt}>{getFieldLabel(opt)}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div class="card-body p-0 overflow-auto" style="max-height: 400px;">
+			<div class="p-2">
+				<TreeView showControls={false} store={$treeStore}>
+					{#snippet children({ node })}
+						<div class="d-flex align-items-center justify-content-between w-100">
+
+							
+							{#if !node.children || node.children.length === 0}
+								<div 
+									class="d-flex align-items-center" 
+									role="group" 
+									onclick={(e) => e.stopPropagation()} 
+									onkeydown={(e) => e.stopPropagation()}
+								>
+									<input 
+										type="color" 
+										class="form-control form-control-color form-control-sm border-0 p-0" 
+										style="width: 16px; height: 16px; min-height: 0;"
+										value={node.metadata?.color}
+										oninput={(e) => handleColorChange(node.id, e)}
+										title="Change color"
+									/>
+								</div>
+							{/if}
+						</div>
+					{/snippet}
+				</TreeView>
+			</div>
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	.x-small {
+		font-size: 0.7rem;
+		letter-spacing: 0.5px;
+	}
+</style>

package/dist/map-v3/features/repeaters/components/RepeaterFilterControl.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { RepeaterDataStore } from '../stores/repeater.data.svelte';
+import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
+import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+interface Props {
+    dataStore: RepeaterDataStore;
+    registry: RepeaterRegistry;
+    displayStore: RepeaterDisplayStore;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const RepeaterFilterControl: import("svelte").Component<Props, {}, "">;
+type RepeaterFilterControl = ReturnType<typeof RepeaterFilterControl>;
+export default RepeaterFilterControl;

package/dist/map-v3/features/repeaters/components/RepeaterSettingsPanel.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+
+	interface Props {
+		displayStore: RepeaterDisplayStore;
+	}
+
+	let { displayStore }: Props = $props();
+</script>
+
+<div class="card border-0 shadow-sm rounded-2">
+	<div class="card-body bg-light p-3">
+		<!-- Target Pixel Size (Radius) -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Pixel Size</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.targetPixelSize}px</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="repeater-radius-slider"
+					type="range"
+					class="form-range w-100"
+					min="10"
+					max="200"
+					step="5"
+					bind:value={displayStore.targetPixelSize}
+				/>
+			</div>
+		</div>
+
+		<!-- Line Width -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Line Width</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.lineWidth}px</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="repeater-line-width-slider"
+					type="range"
+					class="form-range w-100"
+					min="0.5"
+					max="5"
+					step="0.5"
+					bind:value={displayStore.lineWidth}
+				/>
+			</div>
+		</div>
+
+		<!-- Fill Opacity -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Fill Opacity</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{Math.round(displayStore.fillOpacity * 100)}%</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="repeater-opacity-slider"
+					type="range"
+					class="form-range w-100"
+					min="0"
+					max="1"
+					step="0.1"
+					bind:value={displayStore.fillOpacity}
+				/>
+			</div>
+		</div>
+
+		<div class="border-top my-3"></div>
+
+		<!-- Show Labels -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Show Labels</div>
+			<div class="col-3"></div>
+			<div class="col-5">
+				<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
+					<input
+						id="repeater-labels-toggle"
+						type="checkbox"
+						class="form-check-input"
+						role="switch"
+						bind:checked={displayStore.showLabels}
+					/>
+				</div>
+			</div>
+		</div>
+
+		{#if displayStore.showLabels}
+			<div class="ps-3 border-start border-2 mb-3">
+				<!-- Labels Config -->
+				<div class="mb-2">
+					<div class="text-secondary fw-semibold small text-uppercase mb-1">Label Fields</div>
+					<div class="row g-1">
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels.primary}>
+								<option value="repeaterId">ID</option>
+								<option value="tech">Tech</option>
+								<option value="fband">Band</option>
+								<option value="provider">Provider</option>
+							</select>
+						</div>
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels.secondary}>
+								<option value="none">None</option>
+								<option value="repeaterId">ID</option>
+								<option value="tech">Tech</option>
+								<option value="fband">Band</option>
+								<option value="provider">Provider</option>
+							</select>
+						</div>
+					</div>
+				</div>
+
+				<!-- Label Settings -->
+				<div class="mt-3">
+					<!-- Label Distance -->
+					<div class="row align-items-center g-2 mb-2">
+						<div class="col-4 text-secondary small">Distance</div>
+						<div class="col-3 text-end">
+							<span class="badge bg-white text-muted border">{displayStore.labelPixelDistance}px</span>
+						</div>
+						<div class="col-5">
+							<input
+								type="range"
+								class="form-range w-100"
+								min="20"
+								max="150"
+								step="5"
+								bind:value={displayStore.labelPixelDistance}
+							/>
+						</div>
+					</div>
+
+					<!-- Font Size -->
+					<div class="row align-items-center g-2 mb-3">
+						<div class="col-4 text-secondary small">Font Size</div>
+						<div class="col-3 text-end">
+							<span class="badge bg-white text-muted border">{displayStore.labelFontSize}px</span>
+						</div>
+						<div class="col-5">
+							<input
+								type="range"
+								class="form-range w-100"
+								min="8"
+								max="24"
+								step="1"
+								bind:value={displayStore.labelFontSize}
+							/>
+						</div>
+					</div>
+
+					<!-- Label Colors -->
+					<div class="row align-items-center g-2 mb-2">
+						<div class="col-4 text-secondary small">Color</div>
+						<div class="col-8">
+							<div class="input-group input-group-sm">
+								<input
+									type="color"
+									class="form-control form-control-color"
+									bind:value={displayStore.labelColor}
+									title="Label Color"
+								/>
+								<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+									{displayStore.labelColor}
+								</span>
+							</div>
+						</div>
+					</div>
+
+					<!-- Halo Settings -->
+					<div class="row align-items-center g-2 mb-2">
+						<div class="col-4 text-secondary small">Halo</div>
+						<div class="col-8">
+							<div class="input-group input-group-sm">
+								<input
+									type="color"
+									class="form-control form-control-color"
+									bind:value={displayStore.labelHaloColor}
+									title="Halo Color"
+								/>
+								<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+									{displayStore.labelHaloColor}
+								</span>
+							</div>
+						</div>
+					</div>
+
+					<div class="row align-items-center g-2 mb-3">
+						<div class="col-4 text-secondary small">Halo Width</div>
+						<div class="col-3 text-end">
+							<span class="badge bg-white text-muted border">{displayStore.labelHaloWidth}px</span>
+						</div>
+						<div class="col-5">
+							<input
+								type="range"
+								class="form-range w-100"
+								min="0"
+								max="5"
+								step="0.5"
+								bind:value={displayStore.labelHaloWidth}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/map-v3/features/repeaters/components/RepeaterSettingsPanel.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+interface Props {
+    displayStore: RepeaterDisplayStore;
+}
+declare const RepeaterSettingsPanel: import("svelte").Component<Props, {}, "">;
+type RepeaterSettingsPanel = ReturnType<typeof RepeaterSettingsPanel>;
+export default RepeaterSettingsPanel;