@smartnet360/svelte-components 0.0.21 → 0.0.23

package/dist/cellular/HierarchicalTree.svelte

@@ -0,0 +1,469 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { CellularSite } from './cellular.model.js';
+	import { getBandColor, getBandLabel } from './mock-cellular-data.js';
+
+	interface Props {
+		sites: CellularSite[];
+		visibility: Map<string, boolean>; // Single flat map with keys like "site:a", "site:a:sec-1", "site:a:sec-1:700"
+		onVisibilityChange: (updates: Map<string, boolean>) => void;
+	}
+
+	let { sites, visibility, onVisibilityChange }: Props = $props();
+
+	// Track expanded/collapsed state for UI only
+	let expandedSites = $state<Set<string>>(new Set(sites.map(s => s.siteId)));
+	let expandedSectors = $state<Set<string>>(new Set());
+
+	function toggleSiteExpand(siteId: string) {
+		if (expandedSites.has(siteId)) {
+			expandedSites.delete(siteId);
+		} else {
+			expandedSites.add(siteId);
+		}
+		expandedSites = new Set(expandedSites);
+	}
+
+	function toggleSectorExpand(siteId: string, sectorId: string) {
+		const key = `${siteId}:${sectorId}`;
+		if (expandedSectors.has(key)) {
+			expandedSectors.delete(key);
+		} else {
+			expandedSectors.add(key);
+		}
+		expandedSectors = new Set(expandedSectors);
+	}
+
+	// Get keys for hierarchy
+	function getSiteKey(siteId: string): string {
+		return siteId;
+	}
+
+	function getSectorKey(siteId: string, sectorId: string): string {
+		return `${siteId}:${sectorId}`;
+	}
+
+	function getCellKey(siteId: string, sectorId: string, band: number): string {
+		return `${siteId}:${sectorId}:${band}`;
+	}
+
+	// Toggle handlers with cascading
+	function handleToggleSite(siteId: string) {
+		const site = sites.find(s => s.siteId === siteId);
+		if (!site) return;
+
+		const siteKey = getSiteKey(siteId);
+		const currentValue = visibility.get(siteKey) ?? true;
+		const newValue = !currentValue;
+
+		const updates = new Map<string, boolean>();
+		updates.set(siteKey, newValue);
+
+		// Cascade to all sectors and cells
+		site.sectors.forEach(sector => {
+			const sectorKey = getSectorKey(siteId, sector.sectorId);
+			updates.set(sectorKey, newValue);
+
+			sector.cells.forEach(cell => {
+				const cellKey = getCellKey(siteId, sector.sectorId, cell.band);
+				updates.set(cellKey, newValue);
+			});
+		});
+
+		onVisibilityChange(updates);
+	}
+
+	function handleToggleSector(siteId: string, sectorId: string) {
+		const site = sites.find(s => s.siteId === siteId);
+		const sector = site?.sectors.find(s => s.sectorId === sectorId);
+		if (!sector) return;
+
+		const sectorKey = getSectorKey(siteId, sectorId);
+		const currentValue = visibility.get(sectorKey) ?? true;
+		const newValue = !currentValue;
+
+		const updates = new Map<string, boolean>();
+		updates.set(sectorKey, newValue);
+
+		// Cascade to all cells
+		sector.cells.forEach(cell => {
+			const cellKey = getCellKey(siteId, sectorId, cell.band);
+			updates.set(cellKey, newValue);
+		});
+
+		// Update parent site visibility (if all sectors are off, turn off site)
+		if (!newValue && site) {
+			const allSectorsOff = site.sectors.every(s => {
+				const key = getSectorKey(siteId, s.sectorId);
+				return s.sectorId === sectorId ? false : !(visibility.get(key) ?? true);
+			});
+			if (allSectorsOff) {
+				updates.set(getSiteKey(siteId), false);
+			}
+		}
+
+		// If turning on, ensure parent site is on
+		if (newValue) {
+			updates.set(getSiteKey(siteId), true);
+		}
+
+		onVisibilityChange(updates);
+	}
+
+	function handleToggleCell(siteId: string, sectorId: string, band: number) {
+		const site = sites.find(s => s.siteId === siteId);
+		const sector = site?.sectors.find(s => s.sectorId === sectorId);
+		if (!sector) return;
+
+		const cellKey = getCellKey(siteId, sectorId, band);
+		const currentValue = visibility.get(cellKey) ?? true;
+		const newValue = !currentValue;
+
+		const updates = new Map<string, boolean>();
+		updates.set(cellKey, newValue);
+
+		// Update parent sector visibility (if all cells are off, turn off sector)
+		if (!newValue) {
+			const allCellsOff = sector.cells.every(c => {
+				const key = getCellKey(siteId, sectorId, c.band);
+				return c.band === band ? false : !(visibility.get(key) ?? true);
+			});
+			if (allCellsOff) {
+				updates.set(getSectorKey(siteId, sectorId), false);
+				
+				// Check if all sectors are off
+				if (site) {
+					const allSectorsOff = site.sectors.every(s => {
+						if (s.sectorId === sectorId) return false;
+						const key = getSectorKey(siteId, s.sectorId);
+						return !(visibility.get(key) ?? true);
+					});
+					if (allSectorsOff) {
+						updates.set(getSiteKey(siteId), false);
+					}
+				}
+			}
+		}
+
+		// If turning on, ensure parents are on
+		if (newValue) {
+			updates.set(getSectorKey(siteId, sectorId), true);
+			updates.set(getSiteKey(siteId), true);
+		}
+
+		onVisibilityChange(updates);
+	}
+
+	// Determine checkbox state (checked, indeterminate)
+	function getSiteCheckState(site: CellularSite): { checked: boolean; indeterminate: boolean } {
+		const siteKey = getSiteKey(site.siteId);
+		const siteVisible = visibility.get(siteKey) ?? true;
+
+		if (!siteVisible) {
+			return { checked: false, indeterminate: false };
+		}
+
+		let visibleCount = 0;
+		let totalCount = 0;
+
+		site.sectors.forEach(sector => {
+			sector.cells.forEach(cell => {
+				totalCount++;
+				const cellKey = getCellKey(site.siteId, sector.sectorId, cell.band);
+				if (visibility.get(cellKey) ?? true) {
+					visibleCount++;
+				}
+			});
+		});
+
+		if (visibleCount === 0) {
+			return { checked: false, indeterminate: false };
+		} else if (visibleCount === totalCount) {
+			return { checked: true, indeterminate: false };
+		} else {
+			return { checked: true, indeterminate: true };
+		}
+	}
+
+	function getSectorCheckState(site: CellularSite, sector: any): { checked: boolean; indeterminate: boolean } {
+		const sectorKey = getSectorKey(site.siteId, sector.sectorId);
+		const sectorVisible = visibility.get(sectorKey) ?? true;
+
+		if (!sectorVisible) {
+			return { checked: false, indeterminate: false };
+		}
+
+		let visibleCount = 0;
+		const totalCount = sector.cells.length;
+
+		sector.cells.forEach((cell: any) => {
+			const cellKey = getCellKey(site.siteId, sector.sectorId, cell.band);
+			if (visibility.get(cellKey) ?? true) {
+				visibleCount++;
+			}
+		});
+
+		if (visibleCount === 0) {
+			return { checked: false, indeterminate: false };
+		} else if (visibleCount === totalCount) {
+			return { checked: true, indeterminate: false };
+		} else {
+			return { checked: true, indeterminate: true };
+		}
+	}
+</script>
+
+<div class="site-tree">
+	<div class="tree-header">
+		<h6 class="mb-0">Site Selection</h6>
+		<small class="text-muted">Click checkboxes to show/hide</small>
+	</div>
+
+	<div class="tree-content">
+		{#each sites as site}
+			{@const isSiteExpanded = expandedSites.has(site.siteId)}
+			{@const siteCheckState = getSiteCheckState(site)}
+			
+			<div class="tree-site">
+				<!-- Site Level -->
+				<div class="tree-item site-item">
+					<button
+						class="expand-btn"
+						onclick={() => toggleSiteExpand(site.siteId)}
+						aria-label={isSiteExpanded ? 'Collapse' : 'Expand'}
+					>
+						<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+							{#if isSiteExpanded}
+								<path d="M2 4l4 4 4-4z" />
+							{:else}
+								<path d="M4 2l4 4-4 4z" />
+							{/if}
+						</svg>
+					</button>
+
+					<input
+						type="checkbox"
+						class="form-check-input"
+						class:indeterminate={siteCheckState.indeterminate}
+						id="site-{site.siteId}"
+						checked={siteCheckState.checked}
+						indeterminate={siteCheckState.indeterminate}
+						onchange={() => handleToggleSite(site.siteId)}
+					/>
+
+					<label class="tree-label" for="site-{site.siteId}">
+						<strong>{site.siteName}</strong>
+					</label>
+				</div>
+
+				<!-- Sectors -->
+				{#if isSiteExpanded}
+					<div class="tree-children">
+						{#each site.sectors as sector}
+							{@const sectorKey = getSectorKey(site.siteId, sector.sectorId)}
+							{@const isSectorExpanded = expandedSectors.has(sectorKey)}
+							{@const sectorCheckState = getSectorCheckState(site, sector)}
+
+							<div class="tree-sector">
+								<!-- Sector Level -->
+								<div class="tree-item sector-item">
+									<button
+										class="expand-btn"
+										onclick={() => toggleSectorExpand(site.siteId, sector.sectorId)}
+										aria-label={isSectorExpanded ? 'Collapse' : 'Expand'}
+									>
+										<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+											{#if isSectorExpanded}
+												<path d="M2 4l4 4 4-4z" />
+											{:else}
+												<path d="M4 2l4 4-4 4z" />
+											{/if}
+										</svg>
+									</button>
+
+									<input
+										type="checkbox"
+										class="form-check-input"
+										class:indeterminate={sectorCheckState.indeterminate}
+										id="sector-{sectorKey}"
+										checked={sectorCheckState.checked}
+										indeterminate={sectorCheckState.indeterminate}
+										onchange={() => handleToggleSector(site.siteId, sector.sectorId)}
+									/>
+
+									<label class="tree-label" for="sector-{sectorKey}">
+										{sector.sectorName}
+									</label>
+								</div>
+
+								<!-- Cells (Frequency Bands) -->
+								{#if isSectorExpanded}
+									<div class="tree-children">
+										{#each sector.cells as cell}
+											{@const cellKey = getCellKey(site.siteId, sector.sectorId, cell.band)}
+											{@const isCellVisible = visibility.get(cellKey) ?? true}
+
+											<div class="tree-item cell-item">
+												<span class="expand-spacer"></span>
+
+												<input
+													type="checkbox"
+													class="form-check-input"
+													id="cell-{cellKey}"
+													checked={isCellVisible}
+													onchange={() => handleToggleCell(site.siteId, sector.sectorId, cell.band)}
+												/>
+
+												<label class="tree-label" for="cell-{cellKey}">
+													<span
+														class="band-indicator"
+														style:background-color={getBandColor(cell.band)}
+													></span>
+													{getBandLabel(cell.band)}
+												</label>
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.site-tree {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: #f8f9fa;
+		border-right: 1px solid #dee2e6;
+	}
+
+	.tree-header {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid #dee2e6;
+		background-color: #fff;
+	}
+
+	.tree-header small {
+		display: block;
+		margin-top: 0.25rem;
+		font-size: 0.75rem;
+	}
+
+	.tree-content {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.5rem;
+	}
+
+	.tree-site {
+		margin-bottom: 0.5rem;
+	}
+
+	.tree-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: background-color 0.15s ease;
+	}
+
+	.tree-item:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+
+	.site-item {
+		font-size: 0.95rem;
+	}
+
+	.sector-item {
+		font-size: 0.9rem;
+		margin-left: 1rem;
+	}
+
+	.cell-item {
+		font-size: 0.85rem;
+		margin-left: 2rem;
+	}
+
+	.expand-btn {
+		background: none;
+		border: none;
+		padding: 0;
+		width: 1rem;
+		height: 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		color: #6c757d;
+		flex-shrink: 0;
+	}
+
+	.expand-btn:hover {
+		color: #495057;
+	}
+
+	.expand-spacer {
+		width: 1rem;
+		flex-shrink: 0;
+	}
+
+	.form-check-input {
+		cursor: pointer;
+		flex-shrink: 0;
+		margin: 0;
+	}
+
+	.form-check-input.indeterminate {
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+	}
+
+	.tree-label {
+		cursor: pointer;
+		margin: 0;
+		user-select: none;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.tree-children {
+		margin-top: 0.25rem;
+	}
+
+	.band-indicator {
+		display: inline-block;
+		width: 0.75rem;
+		height: 0.75rem;
+		border-radius: 50%;
+		flex-shrink: 0;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	/* Scrollbar styling */
+	.tree-content::-webkit-scrollbar {
+		width: 0.5rem;
+	}
+
+	.tree-content::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	.tree-content::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 0.25rem;
+	}
+
+	.tree-content::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+</style>

package/dist/cellular/HierarchicalTree.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CellularSite } from './cellular.model.js';
+interface Props {
+    sites: CellularSite[];
+    visibility: Map<string, boolean>;
+    onVisibilityChange: (updates: Map<string, boolean>) => void;
+}
+declare const HierarchicalTree: import("svelte").Component<Props, {}, "">;
+type HierarchicalTree = ReturnType<typeof HierarchicalTree>;
+export default HierarchicalTree;