@smartnet360/svelte-components 0.0.125 → 0.0.126

package/dist/core/Auth/auth.svelte.js

@@ -1,5 +1,32 @@
 // Auth state management using Svelte 5 runes
 import { browser } from '$app/environment';
+// Demo mode - enabled via PUBLIC_DEMO_MODE env var (GitHub Pages)
+const DEMO_MODE = import.meta.env.PUBLIC_DEMO_MODE === 'true';
+const DEMO_USERNAME = 'demo';
+const DEMO_PASSWORD = 'demo123';
+// Demo user session (client-side only, no server needed)
+const DEMO_SESSION = {
+    user: {
+        id: 'demo-user',
+        username: 'demo',
+        displayName: 'Demo User',
+        email: 'demo@example.com',
+        groups: ['demo'],
+        loginTime: Date.now()
+    },
+    permissions: [
+        { featureId: 'map-view', canView: true, canEdit: false, canAdmin: false },
+        { featureId: 'coverage-view', canView: true, canEdit: false, canAdmin: false },
+        { featureId: 'charts-view', canView: true, canEdit: false, canAdmin: false },
+        { featureId: 'desktop-view', canView: true, canEdit: false, canAdmin: false },
+        { featureId: 'table-view', canView: true, canEdit: false, canAdmin: false },
+        { featureId: 'antenna-view', canView: true, canEdit: false, canAdmin: false },
+        { featureId: 'site-check', canView: true, canEdit: false, canAdmin: false },
+        { featureId: 'settings-view', canView: true, canEdit: false, canAdmin: false }
+    ],
+    token: 'demo-token',
+    expiresAt: Date.now() + (24 * 60 * 60 * 1000) // 24 hours for demo
+};
 // Default configuration
 const defaultConfig = {
     apiEndpoint: '/api/auth',
@@ -80,6 +107,24 @@ export function createAuthState(config = {}) {
         isLoading = true;
         error = null;
         try {
+            // Demo mode: handle authentication client-side (no server needed)
+            if (DEMO_MODE) {
+                if (username === DEMO_USERNAME && password === DEMO_PASSWORD) {
+                    // Create fresh demo session with updated timestamp
+                    const demoSession = {
+                        ...DEMO_SESSION,
+                        user: { ...DEMO_SESSION.user, loginTime: Date.now() },
+                        expiresAt: Date.now() + (24 * 60 * 60 * 1000)
+                    };
+                    saveSession(demoSession);
+                    return true;
+                }
+                else {
+                    error = 'Demo mode: Use username "demo" and password "demo123"';
+                    return false;
+                }
+            }
+            // Normal mode: call server API
             const response = await fetch(`${cfg.apiEndpoint}/login`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -121,8 +166,8 @@ export function createAuthState(config = {}) {
     async function logout() {
         isLoading = true;
         try {
-            // Call logout endpoint if we have a token
-            if (session?.token) {
+            // Skip server call in demo mode (no server available)
+            if (!DEMO_MODE && session?.token) {
                 await fetch(`${cfg.apiEndpoint}/logout`, {
                     method: 'POST',
                     headers: {

package/dist/map-v3/demo/DemoMap.svelte

@@ -20,6 +20,12 @@
 	import SiteFilterControl from '../features/sites/components/SiteFilterControl.svelte';
 	import { createSiteRegistry } from '../features/sites/stores/site.registry.svelte';
 	import FeatureSelectionControl from '../features/selection/components/FeatureSelectionControl.svelte';
+	// Custom Cells Feature
+	import { 
+		CustomCellsLayer, 
+		CustomCellSetManager, 
+		createCustomCellSetsStore 
+	} from '../features/cells/custom';
 	import { demoCells } from './demo-cells';
 	import { demoRepeaters } from './demo-repeaters';
 
@@ -42,6 +48,9 @@
 	const repeaterRegistry = createRepeaterRegistry('demo-map');
 	const repeaterDisplay = new RepeaterDisplayStore();
 
+	// Custom Cells Store
+	const customCellSets = createCustomCellSetsStore(cellData, 'demo-map');
+
 	onMount(() => {
 		// Load dummy data
 		// Need to cast or map if types slightly differ, but they should match
@@ -81,6 +90,12 @@
 			displayStore={repeaterDisplay}
 		/>
 
+		<!-- Custom Cells Manager (includes filter controls for each set) -->
+		<CustomCellSetManager 
+			position="top-left" 
+			setsStore={customCellSets}
+		/>
+
 		<FeatureSettingsControl 
 			position="top-right" 
 			cellDisplayStore={cellDisplay} 
@@ -99,6 +114,9 @@
 		<RepeatersLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
 		<RepeaterLabelsLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
 
+		<!-- Custom Cells Layer (renders on top of regular cells) -->
+		<CustomCellsLayer setsStore={customCellSets} />
+
 		<FeatureSelectionControl
 			position="bottom-left"
 			cellDataStore={cellData}

package/dist/map-v3/demo/demo-custom-cells.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Demo Custom Cells Data
+ *
+ * Sample CSV content for testing custom cells feature.
+ * Uses txIds from the demo cells data.
+ *
+ * txId format: SSSS S BB where:
+ * - SSSS = site number (1000+)
+ * - S = sector (1, 2, or 3)
+ * - BB = band index (41-51)
+ *   41=GSM900, 42=GSM1800, 43=LTE700, 44=LTE800, 45=LTE900
+ *   46=LTE1800, 47=LTE2100, 48=LTE2600, 49=5G700, 50=5G2100, 51=5G3500
+ */
+/**
+ * Sample CSV content with various groups and size factors
+ */
+export declare const demoCustomCellsCsv = "txId,customGroup,sizeFactor,congestion,trafficGB\n1000141,High Traffic,3,critical,250\n1000241,High Traffic,2.5,high,180\n1000341,High Traffic,2,medium,120\n1001145,High Traffic,3.5,critical,300\n1001245,High Traffic,2,medium,100\n1002147,Medium Traffic,1.5,low,60\n1002247,Medium Traffic,1.2,low,45\n1002347,Medium Traffic,1,minimal,30\n1003142,Medium Traffic,1.5,low,55\n1003242,Medium Traffic,1.3,low,40\n1004151,Low Traffic,0.8,minimal,15\n1004251,Low Traffic,0.7,minimal,10\n1004351,Low Traffic,0.6,minimal,8\n1005149,Problem Cells,2,error,0\n1005249,Problem Cells,2,error,0\n1006144,Problem Cells,1.8,warning,5\n";
+/**
+ * Another sample CSV with different groupings
+ */
+export declare const demoCustomCellsCsv2 = "txId,customGroup,sizeFactor,priority\n1010141,Expansion Zone A,2,high\n1010241,Expansion Zone A,2,high\n1010341,Expansion Zone A,2,high\n1011145,Expansion Zone A,1.5,medium\n1012147,Expansion Zone B,1.8,high\n1012247,Expansion Zone B,1.8,high\n1013142,Existing Coverage,1,low\n1013242,Existing Coverage,1,low\n1013342,Existing Coverage,1,low\n";

package/dist/map-v3/demo/demo-custom-cells.js

@@ -0,0 +1,48 @@
+/**
+ * Demo Custom Cells Data
+ *
+ * Sample CSV content for testing custom cells feature.
+ * Uses txIds from the demo cells data.
+ *
+ * txId format: SSSS S BB where:
+ * - SSSS = site number (1000+)
+ * - S = sector (1, 2, or 3)
+ * - BB = band index (41-51)
+ *   41=GSM900, 42=GSM1800, 43=LTE700, 44=LTE800, 45=LTE900
+ *   46=LTE1800, 47=LTE2100, 48=LTE2600, 49=5G700, 50=5G2100, 51=5G3500
+ */
+/**
+ * Sample CSV content with various groups and size factors
+ */
+export const demoCustomCellsCsv = `txId,customGroup,sizeFactor,congestion,trafficGB
+1000141,High Traffic,3,critical,250
+1000241,High Traffic,2.5,high,180
+1000341,High Traffic,2,medium,120
+1001145,High Traffic,3.5,critical,300
+1001245,High Traffic,2,medium,100
+1002147,Medium Traffic,1.5,low,60
+1002247,Medium Traffic,1.2,low,45
+1002347,Medium Traffic,1,minimal,30
+1003142,Medium Traffic,1.5,low,55
+1003242,Medium Traffic,1.3,low,40
+1004151,Low Traffic,0.8,minimal,15
+1004251,Low Traffic,0.7,minimal,10
+1004351,Low Traffic,0.6,minimal,8
+1005149,Problem Cells,2,error,0
+1005249,Problem Cells,2,error,0
+1006144,Problem Cells,1.8,warning,5
+`;
+/**
+ * Another sample CSV with different groupings
+ */
+export const demoCustomCellsCsv2 = `txId,customGroup,sizeFactor,priority
+1010141,Expansion Zone A,2,high
+1010241,Expansion Zone A,2,high
+1010341,Expansion Zone A,2,high
+1011145,Expansion Zone A,1.5,medium
+1012147,Expansion Zone B,1.8,high
+1012247,Expansion Zone B,1.8,high
+1013142,Existing Coverage,1,low
+1013242,Existing Coverage,1,low
+1013342,Existing Coverage,1,low
+`;

package/dist/map-v3/features/cells/custom/components/CustomCellFilterControl.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	/**
+	 * Custom Cell Filter Control
+	 * 
+	 * TreeView with color pickers for a single custom cell set.
+	 * Shows groups with their cell counts and allows color customization.
+	 */
+	import { untrack, onDestroy } from 'svelte';
+	import { MapControl } from '../../../../shared';
+	import { createTreeStore, TreeView } from '../../../../../core/TreeView';
+	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+	import type { CustomCellSet } from '../types';
+	import { buildCustomCellTree } from '../logic/tree-adapter';
+
+	interface Props {
+		/** The custom cell sets store */
+		setsStore: CustomCellSetsStore;
+		/** The specific set to display */
+		set: CustomCellSet;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Callback when set is removed */
+		onremove?: (setId: string) => void;
+	}
+
+	let { 
+		setsStore, 
+		set, 
+		position = 'top-left',
+		onremove
+	}: Props = $props();
+
+	// Reference to MapControl for explicit cleanup
+	let mapControlRef: MapControl | undefined;
+
+	// Track if this component should be destroyed (used for delayed removal)
+	let isDestroying = $state(false);
+
+	onDestroy(() => {
+		console.log(`[CustomCellFilterControl] onDestroy called for set: ${set.id}`);
+	});
+
+	// Build tree from set
+	let treeStore = $derived.by(() => {
+		const _version = setsStore.version;
+		const _set = set;
+		
+		return untrack(() => {
+			const nodes = buildCustomCellTree(_set);
+			return createTreeStore({
+				nodes,
+				namespace: `custom-cells:${_set.id}`,
+				persistState: true,
+				defaultExpandAll: true
+			});
+		});
+	});
+
+	// Sync tree selection -> store visibility
+	$effect(() => {
+		const val = treeStore;
+		let changes = 0;
+
+		val.state.nodes.forEach((nodeState) => {
+			// Skip root node
+			if (nodeState.node.id === `root-${set.id}`) return;
+			// Skip folder nodes
+			if (nodeState.node.children && nodeState.node.children.length > 0) return;
+
+			const groupId = nodeState.node.metadata?.groupId;
+			if (!groupId) return;
+
+			const isVisible = val.state.checkedPaths.has(nodeState.path);
+			const currentlyVisible = set.visibleGroups.has(groupId);
+
+			if (isVisible !== currentlyVisible) {
+				setsStore.toggleGroupVisibility(set.id, groupId);
+				changes++;
+			}
+		});
+
+		if (changes > 0) {
+			console.log(`[CustomCellFilterControl] Synced ${changes} visibility changes`);
+		}
+	});
+
+	function handleColorChange(groupId: string, event: Event) {
+		const input = event.target as HTMLInputElement;
+		setsStore.setGroupColor(set.id, groupId, input.value);
+	}
+
+	function handleRemove() {
+		if (onremove) {
+			onremove(set.id);
+		}
+	}
+
+	function handleToggleVisibility() {
+		setsStore.toggleSetVisibility(set.id);
+	}
+</script>
+
+<MapControl {position} title={set.name} icon="layers" controlWidth="280px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-secondary border-0 p-1 px-2"
+			title={set.visible ? 'Hide Layer' : 'Show Layer'}
+			onclick={handleToggleVisibility}
+		>
+			<i class="bi bi-eye{set.visible ? '-fill' : '-slash'}"></i>
+		</button>
+		<button
+			class="btn btn-sm btn-outline-danger border-0 p-1 px-2"
+			title="Remove Set"
+			onclick={handleRemove}
+		>
+			<i class="bi bi-trash"></i>
+		</button>
+	{/snippet}
+
+	<div class="custom-cell-filter-control">
+		<!-- Set Info -->
+		<div class="set-info mb-2 px-1">
+			<small class="text-muted">
+				{set.cells.length} cells in {set.groups.length} groups
+				{#if set.unmatchedTxIds.length > 0}
+					<span class="text-warning ms-1" title="Some cells not found">
+						({set.unmatchedTxIds.length} unmatched)
+					</span>
+				{/if}
+			</small>
+		</div>
+
+		<!-- Size Slider -->
+		<div class="size-control mb-2 px-1">
+			<label for="baseSize-{set.id}" class="form-label small mb-1">
+				Base Size: {set.baseSize}px
+			</label>
+			<input
+				type="range"
+				class="form-range"
+				id="baseSize-{set.id}"
+				min="10"
+				max="150"
+				step="5"
+				value={set.baseSize}
+				oninput={(e) => setsStore.updateSetSettings(set.id, { 
+					baseSize: parseInt((e.target as HTMLInputElement).value) 
+				})}
+			/>
+		</div>
+
+		<!-- Opacity Slider -->
+		<div class="opacity-control mb-2 px-1">
+			<label for="opacity-{set.id}" class="form-label small mb-1">
+				Opacity: {Math.round(set.opacity * 100)}%
+			</label>
+			<input
+				type="range"
+				class="form-range"
+				id="opacity-{set.id}"
+				min="0.1"
+				max="1"
+				step="0.1"
+				value={set.opacity}
+				oninput={(e) => setsStore.updateSetSettings(set.id, { 
+					opacity: parseFloat((e.target as HTMLInputElement).value) 
+				})}
+			/>
+		</div>
+
+		<!-- Tree View -->
+		<div class="custom-cell-tree">
+			{#if set.cells.length === 0}
+				<div class="text-muted p-3 text-center small">
+					No cells in this set.
+				</div>
+			{:else}
+				<TreeView showControls={false} store={treeStore} height="200px">
+					{#snippet children({ node, state })}
+						<!-- Color Picker (Only for group leaves) -->
+						{#if (!node.children || node.children.length === 0) && node.metadata?.groupId !== '__root__'}
+							<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.metadata?.groupId || '', e)}
+									title="Change color"
+								/>
+							</div>
+						{/if}
+					{/snippet}
+				</TreeView>
+			{/if}
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	.custom-cell-filter-control {
+		font-size: 0.875rem;
+	}
+
+	.set-info {
+		border-bottom: 1px solid var(--bs-border-color, #dee2e6);
+		padding-bottom: 0.5rem;
+	}
+
+	.custom-cell-tree {
+		max-height: 250px;
+		overflow-y: auto;
+	}
+</style>

package/dist/map-v3/features/cells/custom/components/CustomCellFilterControl.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+import type { CustomCellSet } from '../types';
+interface Props {
+    /** The custom cell sets store */
+    setsStore: CustomCellSetsStore;
+    /** The specific set to display */
+    set: CustomCellSet;
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Callback when set is removed */
+    onremove?: (setId: string) => void;
+}
+declare const CustomCellFilterControl: import("svelte").Component<Props, {}, "">;
+type CustomCellFilterControl = ReturnType<typeof CustomCellFilterControl>;
+export default CustomCellFilterControl;