mirror of
https://github.com/EFForg/rayhunter.git
synced 2026-05-30 02:09:26 -07:00
compact UI a bit
This commit is contained in:
Markus Unterwaditzer
committed by
Will Greenberg
Will Greenberg
parent
9823fd3205
commit
0259b101b5
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { ManifestEntry } from '$lib/manifest.svelte';
|
||||
import { gpsModeLabel } from '$lib/utils.svelte';
|
||||
import { AnalysisManager } from '$lib/analysisManager.svelte';
|
||||
import DownloadLink from '$lib/components/DownloadLink.svelte';
|
||||
import DeleteButton from '$lib/components/DeleteButton.svelte';
|
||||
@@ -87,11 +86,6 @@
|
||||
{entry.stop_reason}
|
||||
</div>
|
||||
{/if}
|
||||
{#if entry.gps_mode !== undefined}
|
||||
<div class="text-sm text-gray-500">
|
||||
GPS: {gpsModeLabel(entry.gps_mode)}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-row justify-between lg:justify-end gap-1 mt-2 overflow-x-auto">
|
||||
<DownloadLink url={entry.get_pcap_url()} text="pcap" full_button />
|
||||
<DownloadLink url={entry.get_qmdl_url()} text="qmdl" full_button />
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { type SystemStats } from '$lib/systemStats';
|
||||
import { gpsModeLabel, GpsMode, type GpsData } from '$lib/utils.svelte';
|
||||
let {
|
||||
stats,
|
||||
gps_data = null,
|
||||
gps_mode = GpsMode.Disabled,
|
||||
}: {
|
||||
stats: SystemStats;
|
||||
gps_data?: GpsData | null;
|
||||
gps_mode?: GpsMode;
|
||||
} = $props();
|
||||
|
||||
const table_cell_classes = 'border border-gray-200 p-1 lg:p-2';
|
||||
|
||||
let battery_level = $derived(stats.battery_status ? stats.battery_status.level : 0);
|
||||
let bar_color = $derived.by(() => {
|
||||
if (stats.battery_status === undefined) {
|
||||
@@ -33,34 +36,39 @@
|
||||
}
|
||||
return text;
|
||||
});
|
||||
|
||||
const gps_date_formatter = new Intl.DateTimeFormat(undefined, {
|
||||
timeStyle: 'long',
|
||||
dateStyle: 'short',
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex-1 drop-shadow-sm p-4 flex flex-col gap-2 border rounded-md bg-gray-100 border-gray-100"
|
||||
>
|
||||
<p class="text-xl mb-2">System Information</p>
|
||||
<table class="table-auto border border-gray-200">
|
||||
<table class="text-sm w-full">
|
||||
<tbody>
|
||||
<tr class="border border-gray-200">
|
||||
<th class={table_cell_classes}> Rayhunter Version </th>
|
||||
<td class={table_cell_classes}>{stats.runtime_metadata.rayhunter_version}</td>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Rayhunter Version</td>
|
||||
<td class="py-1">{stats.runtime_metadata.rayhunter_version}</td>
|
||||
</tr>
|
||||
<tr class="border border-gray-200">
|
||||
<th class={table_cell_classes}> Storage </th>
|
||||
<td class={table_cell_classes}>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Storage</td>
|
||||
<td class="py-1">
|
||||
{stats.disk_stats.used_percent} used ({stats.disk_stats.used_size} used / {stats
|
||||
.disk_stats.available_size} available)
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200">
|
||||
<th class={table_cell_classes}> Memory (RAM) </th>
|
||||
<td class={table_cell_classes}>
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Memory (RAM)</td>
|
||||
<td class="py-1">
|
||||
Free: {stats.memory_stats.free}, Used: {stats.memory_stats.used}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200">
|
||||
<th class={table_cell_classes}> Battery </th>
|
||||
<td class={table_cell_classes}>
|
||||
<tr class={gps_mode !== GpsMode.Disabled ? 'border-b border-gray-200' : ''}>
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Battery</td>
|
||||
<td class="py-1">
|
||||
<svg
|
||||
width="80"
|
||||
height="30"
|
||||
@@ -70,7 +78,6 @@
|
||||
class="battery-icon"
|
||||
>
|
||||
<title>{title_text}</title>
|
||||
<!-- Battery body -->
|
||||
<rect
|
||||
class="fill-none stroke-neutral-800 stroke-2"
|
||||
width="70"
|
||||
@@ -78,7 +85,6 @@
|
||||
rx="3"
|
||||
ry="3"
|
||||
/>
|
||||
<!-- Battery terminal -->
|
||||
<rect
|
||||
class="fill-neutral-800"
|
||||
x="70"
|
||||
@@ -88,7 +94,6 @@
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
<!-- Battery charge bar -->
|
||||
<rect
|
||||
class={bar_color}
|
||||
x="2"
|
||||
@@ -99,14 +104,12 @@
|
||||
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"
|
||||
@@ -116,6 +119,35 @@
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
{#if gps_mode !== GpsMode.Disabled}
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">GPS Mode</td>
|
||||
<td class="py-1">{gpsModeLabel(gps_mode)}</td>
|
||||
</tr>
|
||||
{#if gps_data}
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Latitude</td>
|
||||
<td class="py-1 font-mono">{gps_data.latitude.toFixed(6)}</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Longitude</td>
|
||||
<td class="py-1 font-mono">{gps_data.longitude.toFixed(6)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">GPS Timestamp</td>
|
||||
<td class="py-1 font-mono">
|
||||
{gps_data.timestamp > 0
|
||||
? gps_date_formatter.format(new Date(gps_data.timestamp * 1000))
|
||||
: 'Fixed'}
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">GPS Data</td>
|
||||
<td class="py-1 text-gray-400">Awaiting GPS data...</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -293,62 +293,8 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<SystemStatsTable stats={system_stats!} />
|
||||
<SystemStatsTable stats={system_stats!} {gps_data} {gps_mode} />
|
||||
</div>
|
||||
{#if gps_mode !== GpsMode.Disabled}
|
||||
<div
|
||||
class="bg-white border border-gray-200 drop-shadow rounded-md p-4 flex flex-col gap-2"
|
||||
>
|
||||
<span class="text-lg font-semibold flex flex-row items-center gap-2">
|
||||
<svg
|
||||
class="w-5 h-5 text-rayhunter-blue"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
GPS Status
|
||||
</span>
|
||||
{#if gps_data}
|
||||
{@const gps_date_formatter = new Intl.DateTimeFormat(undefined, {
|
||||
timeStyle: 'long',
|
||||
dateStyle: 'short',
|
||||
})}
|
||||
<table class="w-full text-sm">
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-100">
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Latitude</td>
|
||||
<td class="py-1 font-mono">{gps_data.latitude.toFixed(6)}</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-100">
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">Longitude</td>
|
||||
<td class="py-1 font-mono">{gps_data.longitude.toFixed(6)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1 pr-4 text-gray-500 font-medium">GPS Timestamp</td>
|
||||
<td class="py-1 font-mono">
|
||||
{gps_data.timestamp > 0
|
||||
? gps_date_formatter.format(
|
||||
new Date(gps_data.timestamp * 1000)
|
||||
)
|
||||
: 'Fixed'}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<span class="text-gray-400 text-sm">Awaiting GPS data...</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="text-xl flex-1">History</div>
|
||||
|
||||
Reference in New Issue
Block a user