📦 Moves statusbar to own component

2024-08-19 20:08:10 +02:00
parent 904a1c5852
commit 9978918bf9
16 changed files with 296 additions and 273 deletions
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { useFeatureFlags } from '$lib/stores';
+	import type { Battery } from '$lib/types/models';
+	import Battery0 from '~icons/tabler/battery';
+	import Battery25 from '~icons/tabler/battery-1';
+	import Battery50 from '~icons/tabler/battery-2';
+	import Battery75 from '~icons/tabler/battery-3';
+	import Battery100 from '~icons/tabler/battery-4';
+	import BatteryCharging from '~icons/tabler/battery-charging-2';
+
+	const features = useFeatureFlags();
+
+	export let battery:Battery;
+
+	const getBatteryIcon = () => {
+		if (battery.voltage === 0) return BatteryCharging;
+		if (battery.voltage > 8.2) return Battery100;
+		if (battery.voltage > 8) return Battery75;
+		if (battery.voltage > 7.8) return Battery50;
+		if (battery.voltage > 7.6) return Battery25;
+		return Battery0;
+	};
+</script>
+
+{#if $features.battery}
+	<div class="tooltip tooltip-left z-10" data-tip="{battery.voltage}V {Math.floor(battery.current*10)/10} mA">
+		<svelte:component 
+			this={getBatteryIcon()} 
+			class="h-7 w-7 -rotate-90 {battery.voltage === 0 || battery.voltage <= 7.6 ? 'animate-pulse' : ''} {battery.voltage <= 7.6 ? 'text-error' : ''}" 
+		/>
+	</div>
+{/if}