32 lines
1010 B
Svelte
32 lines
1010 B
Svelte
<script lang="ts">
|
|
import { useFeatureFlags } from '$lib/stores';
|
|
import type { Battery } from '$lib/types/models';
|
|
import { BatteryCharging, Battery100, Battery75, Battery50, Battery25, Battery0 } from '../icons';
|
|
|
|
const features = useFeatureFlags();
|
|
|
|
interface Props {
|
|
battery: Battery;
|
|
}
|
|
|
|
let { battery }: Props = $props();
|
|
|
|
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}
|
|
{@const SvelteComponent = getBatteryIcon()}
|
|
<div class="tooltip tooltip-left z-10" data-tip="{battery.voltage}V {Math.floor(battery.current*10)/10} mA">
|
|
<SvelteComponent
|
|
class="h-7 w-7 -rotate-90 {battery.voltage === 0 || battery.voltage <= 7.6 ? 'animate-pulse' : ''} {battery.voltage <= 7.6 ? 'text-error' : ''}"
|
|
/>
|
|
</div>
|
|
{/if}
|