@sjvair/monitor-map 3.0.3 → 3.0.5

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { BellCheckIcon, BellOffIcon, ChevronDownIcon } from "@lucide/svelte";
+	import { getSubscriptions, subscribe, unsubscribe } from "@sjvair/sdk/account";
+	import { monitorsManager } from "../..";
+
+	interface MonitorSubscriptionManagerProps {
+		monitorId: string;
+	}
+
+	const ALERT_LEVEL_NAMES = [
+		"unhealthy_sensitive",
+		"unhealthy",
+		"very_unhealthy",
+		"hazardous"
+	] as const;
+
+	const { monitorId }: MonitorSubscriptionManagerProps = $props();
+
+	let open = $state(false);
+	let loading = $state(false);
+	let saving = $state(false);
+	let subscribedLevel: string | null = $state(null);
+
+	const alertLevels = $derived.by(() => {
+		if (!monitorsManager.meta) return [];
+		try {
+			return monitorsManager.meta
+				.entryType("pm25")
+				.asIter.levels!.filter((level) =>
+					ALERT_LEVEL_NAMES.includes(level.name as (typeof ALERT_LEVEL_NAMES)[number])
+				);
+		} catch {
+			return [];
+		}
+	});
+
+	$effect(() => {
+		void monitorId;
+		open = false;
+		subscribedLevel = null;
+		loadSubscription();
+	});
+
+	async function loadSubscription() {
+		const id = monitorId;
+		loading = true;
+		try {
+			const subscriptions = await getSubscriptions("");
+			if (id !== monitorId) return;
+			const match = subscriptions.find((s) => s.monitor === id);
+			subscribedLevel = match?.level ?? null;
+		} finally {
+			if (id === monitorId) loading = false;
+		}
+	}
+
+	async function handleLevelClick(levelName: string | null) {
+		if (saving || !levelName) return;
+		saving = true;
+		const previous = subscribedLevel;
+		try {
+			if (levelName === subscribedLevel) {
+				await unsubscribe({ monitorId, apiToken: "", level: levelName });
+				subscribedLevel = null;
+			} else {
+				await subscribe({ monitorId, apiToken: "", level: levelName });
+				subscribedLevel = levelName;
+			}
+		} catch {
+			subscribedLevel = previous;
+			return;
+		} finally {
+			saving = false;
+		}
+		open = false;
+	}
+</script>
+
+<div class="relative select-none">
+	<button
+		class={[
+			"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
+			subscribedLevel
+				? "border-green-700 bg-green-600 hover:bg-green-700"
+				: "border-blue-600 bg-blue-500 hover:bg-blue-600"
+		]}
+		disabled={loading}
+		onclick={() => (open = !open)}
+	>
+		{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
+		<ChevronDownIcon
+			size={16}
+			class={["transition-transform duration-300", open ? "rotate-180" : ""]}
+		/>
+	</button>
+
+	{#if open}
+		<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
+		<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]"
+					onclick={() => handleLevelClick(subscribedLevel)}
+				>
+					Unsubscribe
+					<BellOffIcon size={14} />
+				</button>
+			{/if}
+			{#each alertLevels as level (level.name)}
+				{@const isSubscribed = level.name === subscribedLevel}
+				<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" : ""
+					]}
+					style="background-color: {level.color}"
+					disabled={saving}
+					onclick={!isSubscribed ? () => handleLevelClick(level.name) : null}
+				>
+					<span>{level.label}</span>
+					{#if isSubscribed}
+						<BellCheckIcon size={14} />
+					{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/lib/monitors/components/MonitorSubscriptionManager.svelte.d.ts

@@ -0,0 +1,6 @@
+interface MonitorSubscriptionManagerProps {
+    monitorId: string;
+}
+declare const MonitorSubscriptionManager: import("svelte").Component<MonitorSubscriptionManagerProps, {}, "">;
+type MonitorSubscriptionManager = ReturnType<typeof MonitorSubscriptionManager>;
+export default MonitorSubscriptionManager;

package/dist/lib/monitors/components/MonitorTooltip.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { SJVAirEntryLevel } from "@sjvair/sdk";
+	import { format, formatDistanceToNow } from "date-fns";
+	import DataBox from "../../components/DataBox.svelte";
+	import { monitorsManager } from "../monitors.svelte";
+	import { getCurrentLevel } from "../monitor-utils";
+	import type { MonitorMapFeature } from "../types";
+
+	interface MonitorTooltipProps {
+		feature: MonitorMapFeature;
+	}
+
+	const { feature }: MonitorTooltipProps = $props();
+
+	const data = $derived.by(() => {
+		const monitor = monitorsManager.latest?.get(feature.properties.id);
+
+		if (!monitor || !monitorsManager.meta) return;
+
+		const entryType = monitorsManager.meta.entryType(monitor.latest.entry_type);
+		const level: SJVAirEntryLevel | undefined = getCurrentLevel(
+			monitor.latest.value,
+			entryType.asIter.levels!
+		);
+
+		const updateDuration = monitorsManager.meta.monitorType(monitor.type).expected_interval;
+
+		return {
+			color: level?.color ?? "",
+			header: entryType.label,
+			date: {
+				formatted: format(monitor.latest.timestamp, "h:mm:aaa EEEE MMM dd, yyyy"),
+				diference: formatDistanceToNow(monitor.latest.timestamp, {
+					addSuffix: true,
+					includeSeconds: true
+				})
+			},
+			subheading: `(${updateDuration} avg)`,
+			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
+		};
+	});
+</script>
+
+{#if data}
+	<div class="flex gap-2">
+		<DataBox
+			color={data.color}
+			header={data.header}
+			subheading={data.subheading}
+			value={data.value}
+		/>
+		<div class="flex flex-col">
+			<p>{data.date.formatted}</p>
+			<h1 class="text-lg font-bold underline">{feature.properties.name}</h1>
+			<div class="mt-auto">
+				<p class="text-base leading-none">Last updated</p>
+				<p class="text-base leading-none">{data.date.diference}</p>
+			</div>
+		</div>
+	</div>
+{/if}

package/dist/lib/monitors/components/MonitorTooltip.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MonitorMapFeature } from "../types";
+interface MonitorTooltipProps {
+    feature: MonitorMapFeature;
+}
+declare const MonitorTooltip: import("svelte").Component<MonitorTooltipProps, {}, "">;
+type MonitorTooltip = ReturnType<typeof MonitorTooltip>;
+export default MonitorTooltip;

package/dist/lib/monitors/components/MonitorWidgetModal.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { portal } from "../../actions";
+	import { SquareX } from "@lucide/svelte";
+	import { origin } from "@sjvair/sdk/http";
+
+	interface MonitorWidgetModalProps {
+		monitorId: string;
+	}
+
+	const widgetStyles = {
+		overflow: "hidden",
+		width: "290px",
+		height: "390px"
+	};
+
+	const { monitorId }: MonitorWidgetModalProps = $props();
+
+	let modalOpen = $state(false);
+	let copied = $state(false);
+
+	const iframeSrc = $derived.by(() => {
+		return `${origin}/widget/#/${monitorId}`;
+	});
+
+	const iframeCode = $derived.by(() => {
+		return `<iframe src="${iframeSrc}" frameborder="0" allowtransparency="true" style="overflow: ${widgetStyles.overflow}; width: ${widgetStyles.width}; height: ${widgetStyles.height};"></iframe>`;
+	});
+
+	function copyToClipboard() {
+		navigator.clipboard.writeText(iframeCode);
+		copied = true;
+		setTimeout(() => {
+			copied = false;
+		}, 1000 * 2);
+	}
+
+	function openModal() {
+		modalOpen = true;
+		document.body.style.overflow = "hidden";
+	}
+
+	function closeModal() {
+		modalOpen = false;
+		document.body.style.overflow = "auto";
+	}
+</script>
+
+<div class="select-none">
+	<button
+		class="cursor-pointer rounded border border-blue-400 bg-blue-500 px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-600"
+		onclick={openModal}>Get the widget!</button
+	>
+
+	<div
+		use:portal
+		class={[
+			"fixed inset-0 z-9999 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-200",
+			modalOpen ? "visible" : "invisible"
+		]}
+	>
+		<div
+			class="m-4 flex max-w-[min(450px,calc(100vw-2rem))] flex-col items-center justify-center rounded bg-white p-4 shadow-lg"
+		>
+			<button translate="no" class="cursor-pointer self-end" onclick={closeModal}>
+				<SquareX />
+			</button>
+
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<div translate="no">{@html iframeCode}</div>
+
+			<p class="mb-4 text-center">Copy the following code and paste it in your website</p>
+
+			<div
+				class="group relative flex w-full items-center overflow-hidden bg-neutral-800 hover:bg-neutral-600"
+			>
+				<code class="cursor-text overflow-x-scroll bg-inherit text-gray-300 select-text">
+					{iframeCode}
+				</code>
+				<div
+					class="invisible absolute top-1/2 left-[calc(100%-3rem)] flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-black/80 p-2 group-hover:visible"
+				>
+					<button
+						aria-label="Copy"
+						translate="no"
+						class="svg-icon content-copy cursor-pointer bg-gray-300"
+						onclick={copyToClipboard}
+					></button>
+				</div>
+				<div
+					class={[
+						"absolute flex h-full w-full items-center justify-center bg-[#1fb9ef] text-white transition-all duration-200 [text-shadow:1px_2px_4px_#333]",
+						copied ? "left-0" : "left-[120%]"
+					]}
+				>
+					Copied to clipboard!
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/dist/lib/monitors/components/MonitorWidgetModal.svelte.d.ts

@@ -0,0 +1,6 @@
+interface MonitorWidgetModalProps {
+    monitorId: string;
+}
+declare const MonitorWidgetModal: import("svelte").Component<MonitorWidgetModalProps, {}, "">;
+type MonitorWidgetModal = ReturnType<typeof MonitorWidgetModal>;
+export default MonitorWidgetModal;

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { MonitorsMeta, SJVAirMonitorDeviceMeta } from "@sjvair/sdk";
+	import DisplayOption from "../../components/DisplayOption.svelte";
+	import SegmentedControl from "../../components/SegmentedControl.svelte";
+	import ToggleSwitch from "../../components/ToggleSwitch.svelte";
+	import { monitorsManager } from "../monitors.svelte";
+	import { monitorsMapIntegration } from "../monitors-map-integration.svelte";
+
+	interface PollutantDisplayOptions {
+		label: string;
+		value: MonitorsMeta["default_pollutant"];
+	}
+
+	const pollutants: Array<PollutantDisplayOptions> = [
+		{
+			label: "PM 2.5",
+			value: "pm25"
+		},
+		{
+			label: "Ozone",
+			value: "o3"
+		}
+	];
+
+	const monitorDisplayOptions = $derived.by(() => {
+		if (monitorsManager.pollutant && monitorsManager.pollutant === "pm25")
+			return Object.entries(monitorsMapIntegration.displayOptions);
+
+		const validOptions = Object.entries(monitorsMapIntegration.displayOptions).filter(
+			([key, opt]) =>
+				key === "inactive" ||
+				monitorsManager.meta?.asIter.monitors.some(
+					(m: SJVAirMonitorDeviceMeta) =>
+						m.label === opt.label &&
+						monitorsManager.pollutant &&
+						monitorsManager.pollutant in m.entries
+				)
+		);
+
+		return validOptions;
+	});
+
+	$effect(() => {
+		monitorsManager.list = [];
+		monitorsManager.latest = null;
+		monitorsManager.update();
+	});
+</script>
+
+<DisplayOption>
+	<p class="text-lg font-bold underline">Air Monitors</p>
+	<div class="mb-2 w-full text-xs">
+		<div class="w-fit">
+			<ToggleSwitch
+				id="monitor-clusters"
+				label="Marker Clusters"
+				bind:value={monitorsMapIntegration.clustered}
+			></ToggleSwitch>
+		</div>
+		{#if monitorsManager.pollutant}
+			<SegmentedControl
+				segmentLabel="Pollutant:"
+				options={pollutants}
+				bind:group={monitorsManager.pollutant}
+			/>
+		{/if}
+	</div>
+
+	{#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">
+			<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} />
+			{/if}
+			{option.label}
+		</label>
+	{/each}
+</DisplayOption>

package/dist/lib/monitors/components/MonitorsDisplayOptions.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MonitorsDisplayOptions: import("svelte").Component<Record<string, never>, {}, "">;
+type MonitorsDisplayOptions = ReturnType<typeof MonitorsDisplayOptions>;
+export default MonitorsDisplayOptions;

package/dist/lib/monitors/monitor-utils.d.ts

@@ -0,0 +1,4 @@
+import type { MonitorData, SJVAirEntryLevel } from "@sjvair/sdk";
+export declare function getCurrentLevel(value: string | number, levels: Array<SJVAirEntryLevel>): SJVAirEntryLevel | undefined;
+export declare function getOrder(monitor: MonitorData): number;
+export declare function getTypeShape(type: string): string;

package/dist/lib/monitors/monitor-utils.js

@@ -1,26 +1,36 @@
-//#region src/lib/monitors/monitor-utils.ts
-function e(e, t) {
-	return e = typeof e == "string" ? parseInt(e, 10) : e, t.find((t) => e >= t.range[0] && e <= t.range[1]);
+export function getCurrentLevel(value, levels) {
+    value = typeof value === "string" ? parseInt(value, 10) : value;
+    return levels.find((lvl) => {
+        return value >= lvl.range[0] && value <= lvl.range[1];
+    });
 }
-function t(e) {
-	switch (e.type) {
-		case "airgradient": return 5;
-		case "airnow": return 2;
-		case "aqview": return 3;
-		case "bam1022": return 6;
-		case "purpleair": return e.is_sjvair ? 4 : 1;
-		default: throw Error(`Map ordering for ${e.device} has not been set`);
-	}
+export function getOrder(monitor) {
+    switch (monitor.type) {
+        case "airgradient":
+            return 5;
+        case "airnow":
+            return 2;
+        case "aqview":
+            return 3;
+        case "bam1022":
+            return 6;
+        case "purpleair":
+            return monitor.is_sjvair ? 4 : 1;
+        default:
+            throw new Error(`Map ordering for ${monitor.device} has not been set`);
+    }
 }
-function n(e) {
-	switch (e) {
-		case "airgradient": return "circle";
-		case "airnow":
-		case "aqview":
-		case "bam1022": return "triangle";
-		case "purpleair": return "square";
-		default: return "circle";
-	}
+export function getTypeShape(type) {
+    switch (type) {
+        case "airgradient":
+            return "circle";
+        case "airnow":
+        case "aqview":
+        case "bam1022":
+            return "triangle";
+        case "purpleair":
+            return "square";
+        default:
+            return "circle";
+    }
 }
-//#endregion
-export { e as getCurrentLevel, t as getOrder, n as getTypeShape };

package/dist/lib/monitors/monitors-cluster-renderer.d.ts

@@ -0,0 +1,33 @@
+import type { FilterSpecification, MapLayerEventType, Popup } from "@maptiler/sdk";
+import type { SJVAirEntryLevel } from "@sjvair/sdk";
+import { type ClickHandler } from "../map/integrations/click-manager.ts";
+import { TooltipManager } from "../map/integrations/tooltip.svelte.ts";
+import type { MonitorMapFeature } from "./types.ts";
+export declare function monitorTooltip(evt: MapLayerEventType["mousemove"] & object): Popup | void;
+export interface MonitorsClusterContext {
+    referenceId: string;
+    featuresByType: Record<string, MonitorMapFeature[]>;
+    filters: FilterSpecification;
+    clusterIconThresholds: SJVAirEntryLevel[];
+    beforeLayer?: string;
+    tooltipManager: TooltipManager;
+}
+export declare class MonitorsClusterRenderer {
+    private ctx;
+    private _clusterTypes;
+    constructor(ctx: MonitorsClusterContext);
+    apply(monitorClickHandler: ClickHandler): void;
+    remove(): void;
+    get unclusteredLayerIds(): string[];
+    syncFeatures(): void;
+    syncFilter(): void;
+    syncThresholds(): void;
+    private makeClusterClickHandler;
+    private clusterLayerIds;
+    private get clusterTextColorThreshold();
+    private clusterTextColorExpr;
+    private buildClusterIconExpression;
+    private monitorTypeIconsLayer;
+    private clusterCountLayer;
+    private unclusteredLayer;
+}