@sjvair/monitor-map 3.6.3 → 4.0.1

package/src/lib/components/ToggleSwitch.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-	interface ToggleSwitchProps {
-		id: string;
-		label: string;
-		reverse?: boolean;
-		value: boolean;
-	}
-
-	let { id, label, reverse, value = $bindable() }: ToggleSwitchProps = $props();
-</script>
-
-<label
-	for={id}
-	class={[
-		"flex cursor-pointer items-center justify-center gap-x-[0.25em] whitespace-nowrap select-none",
-		{ "flex-row-reverse": reverse }
-	]}
->
-	{label}
-	<div class="switch">
-		<input class="switch-input" type="checkbox" {id} name={id} bind:checked={value} />
-		<span class="slider round"></span>
-	</div>
-</label>
-
-<style>
-	.switch {
-		--animation-duration: 100ms;
-		--switch-diameter: 1.625em;
-		--switch-offset: 0.25em;
-		--track-width: 3.75em;
-		--track-height: 2.125em;
-
-		font-size: 0.5em;
-		position: relative;
-		display: inline-block;
-		width: var(--track-width);
-		height: var(--track-height);
-		transform: scale(0.8);
-
-		.switch-input {
-			opacity: 0;
-			width: 0;
-			height: 0;
-
-			&:checked + .slider {
-				background-color: #2196f3;
-			}
-
-			&:focus + .slider {
-				box-shadow: 0 0 1px #2196f3;
-			}
-
-			&:checked + .slider:before {
-				-webkit-transform: translateX(var(--switch-diameter));
-				-ms-transform: translateX(var(--switch-diameter));
-				transform: translateX(var(--switch-diameter));
-			}
-		}
-
-		.slider {
-			position: absolute;
-			cursor: pointer;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background-color: #ccc;
-			-webkit-transition: var(--animation-duration);
-			transition: var(--animation-duration);
-
-			&:before {
-				position: absolute;
-				content: "";
-				height: var(--switch-diameter);
-				width: var(--switch-diameter);
-				left: var(--switch-offset);
-				bottom: var(--switch-offset);
-				background-color: white;
-				-webkit-transition: var(--animation-duration);
-				transition: var(--animation-duration);
-			}
-			/* Rounded sliders */
-			&.round {
-				border-radius: var(--track-height);
-			}
-
-			&.round:before {
-				border-radius: 50%;
-			}
-		}
-	}
-</style>

package/src/lib/ev-stations/components/EvStationsDisplayOptions.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import DisplayOption from "$lib/components/DisplayOption.svelte";
-	import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
-	import { evStationsMapIntegration } from "../ev-stations-map-integration.svelte";
-
-	const { displayOptions } = evStationsMapIntegration;
-</script>
-
-<DisplayOption>
-	<p class="text-lg font-bold whitespace-nowrap underline">EV Stations</p>
-	<div class="mb-2 w-full text-xs">
-		<div class="w-fit">
-			<ToggleSwitch
-				id="ev-clusters"
-				label="Marker Clusters"
-				bind:value={evStationsMapIntegration.clustered}
-			/>
-		</div>
-	</div>
-	<label for="ev-lvl2" class="flex cursor-pointer gap-1 whitespace-nowrap select-none">
-		<input
-			type="checkbox"
-			id="ev-lvl2"
-			bind:checked={evStationsMapIntegration.displayOptions.lvl2.value}
-		/>
-		<img
-			class="w-5"
-			src={displayOptions.lvl2.icon!.image.src}
-			alt={displayOptions.lvl2.icon!.image.alt}
-		/>
-		Level 2
-	</label>
-	<label for="ev-lvl3" class="flex cursor-pointer gap-1 whitespace-nowrap select-none">
-		<input
-			type="checkbox"
-			id="ev-lvl3"
-			bind:checked={evStationsMapIntegration.displayOptions.lvl3.value}
-		/>
-		<img
-			class="w-5"
-			src={displayOptions.lvl3.icon!.image.src}
-			alt={displayOptions.lvl3.icon!.image.alt}
-		/>
-		Level 3
-	</label>
-</DisplayOption>

package/src/lib/hms/components/HMSFireLegend.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { hmsFireMapIntegration } from "../hms-fire-map-integration.svelte";
-
-	const levels = ["<10", "10-49", "50-149", "150-349", "≥350"];
-</script>
-
-{#if hmsFireMapIntegration.enabled && hmsFireMapIntegration.features.length > 0}
-	<div class="flex w-fit flex-col rounded bg-white p-1 shadow">
-		<p class="text-center font-semibold whitespace-nowrap">Fire Points</p>
-		<div class="flex flex-col">
-			{#each hmsFireMapIntegration.icons.iter as [, icon], idx (idx)}
-				<div class="flex items-center gap-1">
-					<div class="flex size-9 items-center justify-center">
-						<img src={icon.image.src} alt={icon.image.alt} />
-					</div>
-					<span>{levels[idx]} MW</span>
-				</div>
-			{/each}
-		</div>
-	</div>
-{/if}

package/src/lib/map/MapStyleDisplayOptions.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
-	import { mapManager, DefaultMapStyle } from "./map.svelte";
-	import { MAP_STYLE_OPTIONS } from "./utils";
-	import { integrationsManager } from "./integrations/integrations-manager";
-	import DisplayOption from "$lib/components/DisplayOption.svelte";
-
-	let currentMapStyle: MapStyleVariant = DefaultMapStyle;
-
-	let selectedReferenceStyle: ReferenceMapStyle = $state(DefaultMapStyle.getReferenceStyle());
-	let selectedVariant: MapStyleVariant = $state(DefaultMapStyle);
-
-	const selectedStyleVariants: Array<MapStyleVariant> = $derived(
-		selectedReferenceStyle.getVariants()
-	);
-
-	$effect(() => {
-		const referenceStyleChanged: boolean =
-			selectedReferenceStyle !== currentMapStyle.getReferenceStyle();
-		const variantChanged: boolean = selectedVariant !== currentMapStyle;
-
-		if (mapManager.map !== null) {
-			if (referenceStyleChanged && !variantChanged) {
-				selectedVariant = selectedReferenceStyle.getDefaultVariant();
-			} else if (variantChanged) {
-				mapManager.map.once("style.load", async () => {
-					currentMapStyle = selectedVariant;
-					integrationsManager.refresh();
-				});
-
-				mapManager.map.setStyle(selectedVariant);
-			}
-		}
-	});
-</script>
-
-<DisplayOption>
-	<p class="text-lg font-bold underline">Map Styles</p>
-	<label for="mapStyleType">Style</label>
-	<select
-		id="mapStyleType"
-		name="selectedOption"
-		bind:value={selectedReferenceStyle}
-		class="rounded border p-1"
-	>
-		{#each MAP_STYLE_OPTIONS as mapStyle, idx (idx)}
-			<option value={mapStyle}>{mapStyle.getName()}</option>
-		{/each}
-	</select>
-	<label for="mapStyleVariant">Variant</label>
-	<select
-		id="mapStyleType"
-		name="selectedOption"
-		bind:value={selectedVariant}
-		class="rounded border p-1"
-	>
-		{#each selectedStyleVariants as variant, idx (idx)}
-			<option value={variant}>{variant.getName()}</option>
-		{/each}
-	</select>
-</DisplayOption>

package/src/lib/map/Menu.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import type { Attachment } from "svelte/attachments";
-	import { SlidersHorizontalIcon } from "@lucide/svelte";
-
-	let { children } = $props();
-	let isOpen: boolean = $state(false);
-
-	function open() {
-		if (!isOpen) {
-			isOpen = true;
-		}
-	}
-
-	function close() {
-		if (isOpen) {
-			isOpen = false;
-		}
-	}
-
-	const hasTarget = (target: EventTarget | null): target is HTMLElement => target !== null;
-
-	const displayOptionsToggle: Attachment<HTMLDivElement> = (target: HTMLDivElement) => {
-		function toggle(e: PointerEvent) {
-			if (hasTarget(e.target) && target.contains(e.target)) {
-				return "trigger" in e.target.dataset ? close() : open();
-			} else {
-				close();
-			}
-		}
-		document.body.addEventListener("click", toggle);
-
-		return () => document.body.removeEventListener("click", toggle);
-	};
-</script>
-
-<div
-	{@attach displayOptionsToggle}
-	data-trigger
-	class:rounded-full={!isOpen}
-	class:delay-100={!isOpen}
-	class="relative top-0 left-0 flex items-center justify-center overflow-hidden rounded bg-white p-1 shadow transition-all duration-0 select-none"
->
-	<button
-		class:w-0={isOpen}
-		class:h-0={isOpen}
-		class:opacity-0={isOpen}
-		class="relative flex size-10 items-center justify-center transition-all"
-		aria-label="Display Options"
-	>
-		<SlidersHorizontalIcon size="24" />
-	</button>
-	<div
-		class={[
-			"relative flex max-w-[90vw] items-center justify-center overflow-x-hidden overflow-y-scroll transition-all duration-250",
-			isOpen ? "h-55 w-135" : "h-0 w-0"
-		]}
-	>
-		<div
-			data-trigger
-			class="xs:justify-between absolute top-0 left-0 flex h-fit w-full flex-wrap items-start gap-2 p-2 sm:justify-evenly md:justify-between md:gap-4"
-		>
-			{@render children?.()}
-		</div>
-	</div>
-</div>

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

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { monitorsManager } from "../monitors.svelte";
-
-	const label = $derived(monitorsManager.pollutant === "pm25" ? "PM 2.5" : "Ozone");
-	const values = $derived(
-		monitorsManager.pollutant === "pm25" ? [12, 35, 55, 150, 250] : [55, 71, 86, 106, 201]
-	);
-</script>
-
-<div class="flex min-w-50 flex-col rounded bg-white px-[1.5em] py-[0.5em] shadow">
-	<p class="text-center font-semibold whitespace-nowrap">
-		{label} Concentration
-	</p>
-	<div class="map-legend-bar inline-block h-[1.5em]">&nbsp;</div>
-	<div class="mb-[1.5em] flex">
-		<div class="h-[0.5em] w-1/5 shrink-0 border-l border-black">
-			<span class="relative top-[0.5em] right-[0.3em]">0</span>
-		</div>
-		{#each values as value, idx (idx)}
-			<div class="h-[0.5em] w-1/5 shrink-0 border-l border-black last:relative last:right-px">
-				<span class="relative top-[0.5em] {idx >= 3 ? 'right-[0.8em]' : 'right-[0.5em]'}"
-					>{value}</span
-				>
-			</div>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.map-legend-bar {
-		background: linear-gradient(
-			90deg,
-			#00e400 0%,
-			#ffff00 20%,
-			#ff7e00 40%,
-			#ff0000 60%,
-			#8f3f97 80%,
-			#7e0023 100%
-		);
-	}
-</style>

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

@@ -1,85 +0,0 @@
-<script lang="ts">
-	import type { MonitorsMeta } from "@sjvair/sdk";
-	import DisplayOption from "$lib/components/DisplayOption.svelte";
-	import SegmentedControl from "$lib/components/SegmentedControl.svelte";
-	import ToggleSwitch from "$lib/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"
-		}
-	];
-
-	// "inside" is a location filter (indoor vs outdoor), not tied to a monitor type or
-	// pollutant, so it's always shown, like "inactive".
-	const uiOnlyDisplayOptions = new Set(["inactive", "inside"]);
-
-	// "sjvair" (SJVAir non-FEM) isn't its own backend monitor type — it groups is_sjvair-flagged
-	// purpleair devices with airgradient devices (see monitorsMapIntegration.filters/featuresByType),
-	// so its visibility follows whichever of those two types supports the current pollutant.
-	const sjvairUnderlyingTypes = ["purpleair", "airgradient"];
-
-	function pollutantSupportedByType(type: string): boolean {
-		const deviceMeta = monitorsManager.meta?.monitors[type];
-		return (
-			!!deviceMeta && !!monitorsManager.pollutant && monitorsManager.pollutant in deviceMeta.entries
-		);
-	}
-
-	const monitorDisplayOptions = $derived.by(() => {
-		return Object.entries(monitorsMapIntegration.displayOptions).filter(([key]) => {
-			if (uiOnlyDisplayOptions.has(key)) return true;
-			if (key === "sjvair") return sjvairUnderlyingTypes.some(pollutantSupportedByType);
-			return pollutantSupportedByType(key);
-		});
-	});
-
-	$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 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} />
-			{/if}
-			{option.label}
-		</label>
-	{/each}
-</DisplayOption>