Mirror/rayhunter
1
0
Fork 0
mirror of https://github.com/EFForg/rayhunter.git synced 2026-04-28 00:20:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add battery level to web UI

Browse Source
This commit is contained in:
Simon Fondrie-Teitler
2025-08-25 17:19:51 -04:00
committed by Cooper Quintin
parent f49d11f034
commit 663d0abb57
9 changed files with 273 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
daemon/web/src/lib/components/SystemStatsTable.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { type SystemStats } from '$lib/systemStats';
import { BatteryLevel, type SystemStats } from '$lib/systemStats';
let {
stats,
}: {
@@ -7,6 +7,65 @@
} = $props();
const table_cell_classes = 'border p-1 lg:p-2';
let battery_level = $derived.by(() => {
if (stats.battery_status === undefined) {
return 0;
}
switch (stats.battery_status.level) {
case BatteryLevel.Full:
return 100;
case BatteryLevel.High:
return 75;
case BatteryLevel.Medium:
return 50;
case BatteryLevel.Low:
return 25;
default:
return 10;
}
});
let bar_color = $derived.by(() => {
if (stats.battery_status === undefined) {
return '';
}
switch (stats.battery_status.level) {
case BatteryLevel.Low:
return 'fill-yellow-300';
case BatteryLevel.VeryLow:
return 'fill-red-500';
default:
return 'fill-green-500';
}
});
let title_text = $derived.by(() => {
if (stats.battery_status === undefined) {
return 'Rayhunter does not yet support displaying the battery level for this device.';
}
let text = '';
switch (stats.battery_status.level) {
case BatteryLevel.Full:
text = 'Full';
break;
case BatteryLevel.High:
text = 'High';
break;
case BatteryLevel.Medium:
text = 'Medium';
break;
case BatteryLevel.Low:
text = 'Low';
break;
case BatteryLevel.VeryLow:
text = 'Very low';
break;
}
if (stats.battery_status.is_plugged_in) {
text += ', plugged in';
}
return text;
});
</script>
<div
@@ -32,6 +91,64 @@
Free: {stats.memory_stats.free}, Used: {stats.memory_stats.used}
</td>
</tr>
<tr class="border-b">
<th class={table_cell_classes}> Battery </th>
<td class={table_cell_classes}>
<svg
width="80"
height="30"
viewBox="0 0 80 30"
role="img"
xmlns="http://www.w3.org/2000/svg"
class="battery-icon"
>
<title>{title_text}</title>
<!-- Battery body -->
<rect
class="fill-none stroke-neutral-800 stroke-2"
width="70"
height="30"
rx="3"
ry="3"
/>
<!-- Battery terminal -->
<rect
class="fill-neutral-800"
x="70"
y="7"
width="8"
height="16"
rx="2"
ry="2"
/>
<!-- Battery charge bar -->
<rect
class={bar_color}
x="2"
y="2"
height="26"
rx="2"
ry="2"
style="width: {battery_level * 0.66}px;"
/>
{#if stats.battery_status && stats.battery_status.is_plugged_in}
<!-- Lightning bolt icon -->
<path
class="fill-yellow-300 stroke-neutral-800 stroke-1"
d="M38 3 L28 17 L34 17 L30 27 L40 13 L34 13 Z"
/>
{/if}
{#if !stats.battery_status}
<!-- Question mark icon -->
<text
class="fill-neutral-500 text-[20px] font-bold [text-anchor:middle] [dominant-baseline:central]"
x="35"
y="15">?</text
>
{/if}
</svg>
</td>
</tr>
</tbody>
</table>
</div>

14
daemon/web/src/lib/systemStats.ts
View File

@@ -2,6 +2,7 @@ export interface SystemStats {
disk_stats: DiskStats;
memory_stats: MemoryStats;
runtime_metadata: RuntimeMetadata;
battery_status?: BatteryStatus;
}
export interface RuntimeMetadata {
@@ -24,3 +25,16 @@ export interface MemoryStats {
used: string;
free: string;
}
export interface BatteryStatus {
level: BatteryLevel;
is_plugged_in: boolean;
}
export enum BatteryLevel {
VeryLow = 'VeryLow',
Low = 'Low',
Medium = 'Medium',
High = 'High',
Full = 'Full',
}