@sjvair/monitor-map 3.0.7 → 3.1.0

package/src/lib/monitors/components/MonitorSubscriptionManager.svelte

@@ -45,7 +45,7 @@
 		const id = monitorId;
 		loading = true;
 		try {
-			const subscriptions = await getSubscriptions("");
+			const subscriptions = await getSubscriptions(getApiToken());
 			if (id !== monitorId) return;
 			const match = subscriptions.find((s) => s.monitor === id);
 			subscribedLevel = match?.level ?? null;
@@ -54,17 +54,18 @@
 		}
 	}
 
-	async function handleLevelClick(levelName: string | null) {
-		if (saving || !levelName) return;
+	async function handleLevelClick(level: string | null) {
+		if (saving || !level) return;
 		saving = true;
 		const previous = subscribedLevel;
+		const apiToken = getApiToken();
 		try {
-			if (levelName === subscribedLevel) {
-				await unsubscribe({ monitorId, apiToken: "", level: levelName });
+			if (level === subscribedLevel) {
+				await unsubscribe({ monitorId, apiToken, level });
 				subscribedLevel = null;
 			} else {
-				await subscribe({ monitorId, apiToken: "", level: levelName });
-				subscribedLevel = levelName;
+				await subscribe({ monitorId, apiToken, level });
+				subscribedLevel = level;
 			}
 		} catch {
 			subscribedLevel = previous;
@@ -74,6 +75,12 @@
 		}
 		open = false;
 	}
+
+	function getApiToken(): string {
+		return (
+			(globalThis as unknown as Record<string, Record<string, string>>)["USER"]?.api_token ?? ""
+		);
+	}
 </script>
 
 <div class="relative select-none">
@@ -99,7 +106,7 @@
 		<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
 			{#if subscribedLevel}
 				<button
-					class="cursor-pointer px-4 py-2 text-sm rounded-t w-full flex items-center justify-between border border-black/30 hover:bg-[#F5F5F3]"
+					class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
 					onclick={() => handleLevelClick(subscribedLevel)}
 				>
 					Unsubscribe
@@ -111,7 +118,7 @@
 				<button
 					class={[
 						"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
-						!isSubscribed ? "first:rounded-t hover:brightness-90 cursor-pointer" : ""
+						!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
 					]}
 					style="background-color: {level.color}"
 					disabled={saving}

package/src/lib/monitors/components/MonitorsDisplayOptions.svelte

@@ -23,10 +23,7 @@
 	];
 
 	const monitorDisplayOptions = $derived.by(() => {
-		if (monitorsManager.pollutant && monitorsManager.pollutant === "pm25")
-			return Object.entries(monitorsMapIntegration.displayOptions);
-
-		const validOptions = Object.entries(monitorsMapIntegration.displayOptions).filter(
+		return Object.entries(monitorsMapIntegration.displayOptions).filter(
 			([key, opt]) =>
 				key === "inactive" ||
 				monitorsManager.meta?.asIter.monitors.some(
@@ -36,8 +33,6 @@
 						monitorsManager.pollutant in m.entries
 				)
 		);
-
-		return validOptions;
 	});
 
 	$effect(() => {
@@ -68,7 +63,7 @@
 
 	{#each monitorDisplayOptions as [id, option] (option.label)}
 		{@const inputId = `${id}-monitor-display-option`}
-		<label for={inputId} class="flex gap-1 cursor-pointer whitespace-nowrap select-none">
+		<label for={inputId} class="flex cursor-pointer gap-1 whitespace-nowrap select-none">
 			<input type="checkbox" id={inputId} name={option.label} bind:checked={option.value} />
 			{#if option.icon}
 				<img class="w-3" src={option.icon.image.src} alt={option.icon.image.alt} />

package/src/lib/monitors/monitor-utils.ts

@@ -27,6 +27,9 @@ export function getOrder(monitor: MonitorData): number {
 		case "purpleair":
 			return monitor.is_sjvair ? 4 : 1;
 
+		case "vozbox":
+			return 7;
+
 		default:
 			throw new Error(`Map ordering for ${monitor.device} has not been set`);
 	}
@@ -45,6 +48,9 @@ export function getTypeShape(type: string): string {
 		case "purpleair":
 			return "square";
 
+		case "vozbox":
+			return "circle";
+
 		default:
 			return "circle";
 	}

package/src/lib/monitors/monitors-icon-manager.svelte.ts

@@ -24,6 +24,9 @@ export function getIconId<T extends MonitorData>(monitor: T, level: SJVAirEntryL
 		case "purpleair":
 			return `${id}-${monitor.is_sjvair ? "circle" : "square"}`;
 
+		case "vozbox":
+			return `${id}-circle`;
+
 		default:
 			throw new Error(`Map icon for ${monitor.device} has not been set`);
 	}

package/src/lib/monitors/monitors-map-integration.svelte.ts

@@ -44,6 +44,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 		aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
 		bam1022: new MapDisplayOption("SJVAir FEM", true, this.icons.get("outside-display-triangle")),
 		airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
+		vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
 		inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
 		inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
 	}));
@@ -117,6 +118,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 		if (this.displayOptions.aqview.value) monitorFilters.push(filters.monitor("aqview"));
 		if (this.displayOptions.bam1022.value) monitorFilters.push(filters.monitor("bam1022"));
 		if (this.displayOptions.airnow.value) monitorFilters.push(filters.monitor("airnow"));
+		if (this.displayOptions.vozbox.value) monitorFilters.push(filters.monitor("vozbox"));
 		if (this.displayOptions.sjvair.value)
 			monitorFilters.push(filters.sjvPurpleair(), filters.monitor("airgradient"));
 		if (this.displayOptions.inside.value)
@@ -144,7 +146,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 				airgradient: opts.sjvair.value,
 				aqview: opts.aqview.value,
 				bam1022: opts.bam1022.value,
-				airnow: opts.airnow.value
+				airnow: opts.airnow.value,
+				vozbox: opts.vozbox.value
 			};
 			if (!(typeVisible[p.type] ?? true)) continue;
 

package/src/lib/search/Search.svelte

@@ -111,34 +111,34 @@
 
 <div
 	class={[
-		"flex flex-col bg-white shadow-md overflow-hidden transition-all duration-300 select-none",
-		collapsed ? "w-12 h-12 rounded-full" : "w-90 rounded-3xl",
+		"flex flex-col overflow-hidden bg-white shadow-md transition-all duration-300 select-none",
+		collapsed ? "h-12 w-12 rounded-full" : "w-90 rounded-3xl",
 		!collapsed && results.length ? "max-h-90" : "max-h-12"
 	]}
 	use:clickOutside
 >
-	<div class="flex items-center w-full h-12 shrink-0">
+	<div class="flex h-12 w-full shrink-0 items-center">
 		<button
-			class="w-12 h-12 shrink-0 flex items-center justify-center rounded-full bg-brand border-4 border-white"
+			class="bg-brand flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-4 border-white"
 			onclick={openSearch}
 			aria-label="Open search"
 		>
 			<SearchIcon size="24" color="#FFFFFF" />
 		</button>
-		<div class="overflow-hidden w-full h-full flex items-center">
+		<div class="flex h-full w-full items-center overflow-hidden">
 			<input
 				bind:this={inputEl}
 				bind:value={searchText}
 				oninput={debouncedSearch}
 				type="text"
 				placeholder="Search monitors or locations..."
-				class="h-full px-2 text-sm bg-transparent border-none outline-none w-full"
+				class="h-full w-full border-none bg-transparent px-2 text-sm outline-none"
 				tabindex={collapsed ? -1 : 0}
 			/>
 			{#if searchText && !collapsed}
 				<button
 					onclick={clearSearch}
-					class="px-2 text-gray-400 hover:text-gray-600 text-xl leading-none cursor-pointer"
+					class="cursor-pointer px-2 text-xl leading-none text-gray-400 hover:text-gray-600"
 					aria-label="Clear search">×</button
 				>
 			{/if}
@@ -146,7 +146,7 @@
 	</div>
 	<div
 		class={[
-			"overflow-y-auto transition-all duration-300 divide-y divide-gray-100",
+			"divide-y divide-gray-100 overflow-y-auto transition-all duration-300",
 			!collapsed ? "max-h-80" : "max-h-0"
 		]}
 	>
@@ -154,30 +154,30 @@
 			{#if result.type === "monitor"}
 				<button
 					onclick={() => selectMonitor(result)}
-					class="flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left"
+					class="flex h-12 w-full items-center bg-white px-4 text-left hover:brightness-95"
 				>
 					{#if result.logo.url}
 						<img
 							src={result.logo.url}
 							alt={result.logo.alt}
-							class="w-10 h-10 object-contain mr-3 shrink-0"
+							class="mr-3 h-10 w-10 shrink-0 object-contain"
 						/>
 					{/if}
-					<span class="text-sm truncate">{result.monitor.name}</span>
+					<span class="truncate text-sm">{result.monitor.name}</span>
 				</button>
 			{:else}
 				{@const comma = result.feature.place_name.indexOf(",")}
 				<button
 					onclick={() => selectGeocode(result)}
-					class="flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left"
+					class="flex h-12 w-full items-center bg-white px-4 text-left hover:brightness-95"
 				>
-					<span class="svg-icon location-on bg-brand w-6 h-6 shrink-0 mr-3"></span>
+					<span class="svg-icon location-on bg-brand mr-3 h-6 w-6 shrink-0"></span>
 					<div class="min-w-0">
-						<p class="text-sm font-medium truncate">
+						<p class="truncate text-sm font-medium">
 							{result.feature.place_name.substring(0, comma < 0 ? undefined : comma)}
 						</p>
 						{#if comma >= 0}
-							<p class="text-xs text-muted-foreground truncate">
+							<p class="text-muted-foreground truncate text-xs">
 								{result.feature.place_name.substring(comma + 1).trim()}
 							</p>
 						{/if}