@smartnet360/svelte-components 0.0.70 → 0.0.72

package/dist/map-v2/shared/controls/panels/RepeaterSettingsPanel.svelte

@@ -1,19 +1,294 @@
 <script lang="ts">
 	/**
 	 * RepeaterSettingsPanel - Repeater visualization settings
-	 * Placeholder component for future repeater functionality
+	 * 
+	 * Provides controls for:
+	 * - Base radius (arc size)
+	 * - Fill opacity
+	 * - Line width
+	 * - Show labels checkbox
+	 * - Label field selection
+	 * - Label size, color, and offset
 	 */
+	import type { RepeaterStoreContext } from '../../../features/repeaters/stores/repeaterStoreContext.svelte';
+	import type { Repeater } from '../../../features/repeaters/types';
+	
+	interface Props {
+		/** Repeater store context */
+		store: RepeaterStoreContext;
+	}
+	
+	let { store }: Props = $props();
+	
+	// Available label fields for repeaters
+	const labelFieldOptions: Array<keyof Repeater> = [
+		'repeaterId',
+		'donorCellId',
+		'donorCellName',
+		'tech',
+		'fband',
+		'azimuth',
+		'height',
+		'factory_nbr',
+		'provider',
+		'featureGroup'
+	];
+	
+	// Human-readable labels for fields
+	function getFieldLabel(field: keyof Repeater | 'none'): string {
+		const labels: Record<string, string> = {
+			repeaterId: 'Repeater ID',
+			donorCellId: 'Donor Cell ID',
+			donorCellName: 'Donor Cell Name',
+			tech: 'Technology',
+			fband: 'Frequency Band',
+			azimuth: 'Azimuth',
+			height: 'Height',
+			factory_nbr: 'Factory Number',
+			provider: 'Provider',
+			featureGroup: 'Feature Group',
+			none: 'None'
+		};
+		return labels[field] || String(field);
+	}
 </script>
 
 <div class="settings-panel">
-	<p class="text-muted text-center mb-0" style="font-size: 0.875rem;">
-		Coming soon...
-	</p>
+
+	<!-- Base radius slider -->
+	<div class="control-row">
+		<label for="repeater-radius-slider" class="control-label">
+			Base Radius: <strong>{store.baseRadius}m</strong>
+		</label>
+		<input
+			id="repeater-radius-slider"
+			type="range"
+			class="form-range"
+			min="100"
+			max="2000"
+			step="50"
+			value={store.baseRadius}
+			oninput={(e) => store.setBaseRadius(Number(e.currentTarget.value))}
+		/>
+	</div>
+
+	<!-- Line width slider -->
+	<div class="control-row">
+		<label for="repeater-line-width-slider" class="control-label">
+			Line Width: <strong>{store.lineWidth}px</strong>
+		</label>
+		<input
+			id="repeater-line-width-slider"
+			type="range"
+			class="form-range"
+			min="1"
+			max="5"
+			step="0.5"
+			value={store.lineWidth}
+			oninput={(e) => store.setLineWidth(Number(e.currentTarget.value))}
+		/>
+	</div>
+
+	<!-- Fill opacity slider -->
+	<div class="control-row">
+		<label for="repeater-opacity-slider" class="control-label">
+			Fill Opacity: <strong>{Math.round(store.fillOpacity * 100)}%</strong>
+		</label>
+		<input
+			id="repeater-opacity-slider"
+			type="range"
+			class="form-range"
+			min="0"
+			max="1"
+			step="0.1"
+			value={store.fillOpacity}
+			oninput={(e) => store.setFillOpacity(Number(e.currentTarget.value))}
+		/>
+	</div>
+	
+	<!-- Repeater Labels Section -->
+	<hr class="section-divider" />
+
+	<!-- Show labels toggle -->
+	<div class="control-row">
+		<label for="repeater-labels-toggle" class="control-label">
+			Show Labels
+		</label>
+		<div class="form-check form-switch">
+			<input
+				id="repeater-labels-toggle"
+				type="checkbox"
+				class="form-check-input"
+				role="switch"
+				checked={store.showLabels}
+				onchange={(e) => store.setShowLabels(e.currentTarget.checked)}
+			/>
+		</div>
+	</div>
+	
+	{#if store.showLabels}
+		<!-- Primary Label Field -->
+		<div class="control-row">
+			<label for="repeater-label-primary" class="control-label">
+				Primary Field
+			</label>
+			<select
+				id="repeater-label-primary"
+				class="form-select form-select-sm"
+				value={store.primaryLabelField}
+				onchange={(e) => store.setPrimaryLabelField(e.currentTarget.value as keyof Repeater)}
+			>
+				{#each labelFieldOptions as field}
+					<option value={field}>{getFieldLabel(field)}</option>
+				{/each}
+			</select>
+		</div>
+		
+		<!-- Secondary Label Field -->
+		<div class="control-row">
+			<label for="repeater-label-secondary" class="control-label">
+				Secondary Field
+			</label>
+			<select
+				id="repeater-label-secondary"
+				class="form-select form-select-sm"
+				value={store.secondaryLabelField}
+				onchange={(e) => store.setSecondaryLabelField(e.currentTarget.value as keyof Repeater | 'none')}
+			>
+				<option value="none">None</option>
+				{#each labelFieldOptions as field}
+					<option value={field}>{getFieldLabel(field)}</option>
+				{/each}
+			</select>
+		</div>
+		
+		<!-- Label Size -->
+		<div class="control-row">
+			<label for="repeater-label-size-slider" class="control-label">
+				Label Size: <strong>{store.labelSize}px</strong>
+			</label>
+			<input
+				id="repeater-label-size-slider"
+				type="range"
+				class="form-range"
+				min="8"
+				max="20"
+				step="1"
+				value={store.labelSize}
+				oninput={(e) => store.setLabelSize(Number(e.currentTarget.value))}
+			/>
+		</div>
+		
+		<!-- Label Color -->
+		<div class="control-row">
+			<label for="repeater-label-color-picker" class="control-label">
+				Label Color
+			</label>
+			<input
+				id="repeater-label-color-picker"
+				type="color"
+				class="form-control form-control-color"
+				value={store.labelColor}
+				oninput={(e) => store.setLabelColor(e.currentTarget.value)}
+			/>
+		</div>
+		
+		<!-- Label Offset -->
+		<div class="control-row">
+			<label for="repeater-label-offset-slider" class="control-label">
+				Label Offset: <strong>{store.labelOffset}%</strong>
+			</label>
+			<input
+				id="repeater-label-offset-slider"
+				type="range"
+				class="form-range"
+				min="0"
+				max="500"
+				step="25"
+				value={store.labelOffset}
+				oninput={(e) => store.setLabelOffset(Number(e.currentTarget.value))}
+			/>
+		</div>
+		
+		<!-- Min Label Zoom -->
+		<div class="control-row">
+			<label for="repeater-min-zoom-slider" class="control-label">
+				Min Zoom: <strong>{store.minLabelZoom}</strong>
+			</label>
+			<input
+				id="repeater-min-zoom-slider"
+				type="range"
+				class="form-range"
+				min="0"
+				max="18"
+				step="1"
+				value={store.minLabelZoom}
+				oninput={(e) => store.setMinLabelZoom(Number(e.currentTarget.value))}
+			/>
+		</div>
+	{/if}
 </div>
 
 <style>
 	.settings-panel {
 		width: 100%;
-		padding: 1rem 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 0.5rem 0;
+	}
+	
+	.control-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	
+	.control-label {
+		flex: 0 0 auto;
+		min-width: 120px;
+		font-size: 0.875rem;
+		margin: 0;
+	}
+	
+	.form-range {
+		flex: 1;
+		min-width: 140px;
+		max-width: 140px;
+	}
+	
+	.form-select {
+		flex: 1;
+		min-width: 140px;
+		max-width: 140px;
+		font-size: 0.875rem;
+	}
+	
+	.form-control-color {
+		flex: 0 0 auto;
+		width: 40px;
+		height: 32px;
+		padding: 2px;
+		border-radius: 4px;
+		cursor: pointer;
+		margin-right: auto;
+	}
+	
+	.form-check {
+		flex: 0 0 auto;
+		margin: 0;
+		margin-right: auto;
+	}
+	
+	.form-check-input {
+		cursor: pointer;
+		width: 40px;
+		height: 20px;
+	}
+	
+	.section-divider {
+		margin: 0.5rem 0;
+		border-color: var(--bs-border-color);
+		opacity: 0.5;
 	}
 </style>

package/dist/map-v2/shared/controls/panels/RepeaterSettingsPanel.svelte.d.ts

@@ -1,18 +1,19 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+/**
+     * RepeaterSettingsPanel - Repeater visualization settings
+     *
+     * Provides controls for:
+     * - Base radius (arc size)
+     * - Fill opacity
+     * - Line width
+     * - Show labels checkbox
+     * - Label field selection
+     * - Label size, color, and offset
+     */
+import type { RepeaterStoreContext } from '../../../features/repeaters/stores/repeaterStoreContext.svelte';
+interface Props {
+    /** Repeater store context */
+    store: RepeaterStoreContext;
 }
-declare const RepeaterSettingsPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RepeaterSettingsPanel = InstanceType<typeof RepeaterSettingsPanel>;
+declare const RepeaterSettingsPanel: import("svelte").Component<Props, {}, "">;
+type RepeaterSettingsPanel = ReturnType<typeof RepeaterSettingsPanel>;
 export default RepeaterSettingsPanel;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.70",
+	"version": "0.0.72",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",