Change system information table

This commit is contained in:
Caleb
2025-05-16 18:36:39 -04:00
committed by Cooper Quintin
parent 4982463b57
commit 51327917b0
7 changed files with 34 additions and 20 deletions

View File

@@ -9,7 +9,7 @@
}
</script>
<div class="flex flex-row justify-between gap-2">
<div class="flex flex-row justify-end gap-2">
<DeleteButton
text="Delete ALL Recordings"
prompt={`Are you sure you want to delete ALL recordings?`}

View File

@@ -10,8 +10,9 @@
}
</script>
<button class="flex flex-row {full_button ? 'bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md' : 'text-blue-600 underline'}" onclick={download}>
{text} <svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<button class="flex flex-row {full_button ? 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md' : 'text-blue-600 underline'}" onclick={download}>
{text}
<svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
</svg>
</button>

View File

@@ -4,10 +4,9 @@
import Card from "./ManifestCard.svelte"
interface Props {
entries: ManifestEntry[];
current_entry: ManifestEntry | undefined;
server_is_recording: boolean;
}
let { entries, current_entry, server_is_recording }: Props = $props();
let { entries, server_is_recording }: Props = $props();
</script>
<!--For larger screens we use a table-->

View File

@@ -8,7 +8,6 @@
entry: ManifestEntry;
current: boolean;
i: number;
server_is_recording: boolean;
} = $props();
// passing `undefined` as the locale uses the browser default

View File

@@ -17,8 +17,7 @@
client_set_recording = false;
}
const stop_recording_classes = "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md";
const start_recording_classes = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md";
const recording_button_classes = "text-white font-bold py-2 px-4 rounded-md flex flex-row gap-1";
</script>
<div>
@@ -27,9 +26,19 @@
{server_is_recording ? "Stopping..." : "Starting..."}
</button>
{:else if server_is_recording}
<button class={stop_recording_classes} onclick={stop_recording}>Stop Recording</button>
<button class="{recording_button_classes} bg-red-500 hover:bg-red-700" onclick={stop_recording}>
<span>Stop</span>
<svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7Z"/>
</svg>
</button>
{:else}
<button class={start_recording_classes} onclick={start_recording}>Start Recording</button>
<button class="{recording_button_classes} bg-blue-500 hover:bg-blue-700" onclick={start_recording}>
<span>Start</span>
<svg class="w-6 h-6 text-white" 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="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z" clip-rule="evenodd"/>
</svg>
</button>
{/if}
</div>

View File

@@ -4,6 +4,7 @@
stats: SystemStats;
} = $props();
const table_cell_classes = "border p-1 lg:p-2";
</script>
<div class="flex-1 drop-shadow p-4 flex flex-col gap-2 border rounded-md bg-gray-100 border-gray-100">
@@ -11,24 +12,24 @@
<table class="table-auto border">
<tbody>
<tr class="border">
<th class="border">
<th class={table_cell_classes}>
Rayhunter Version
</th>
<td class="border">{stats.runtime_metadata.rayhunter_version}</td>
<td class={table_cell_classes}>{stats.runtime_metadata.rayhunter_version}</td>
</tr>
<tr class="border">
<th class="border">
<th class={table_cell_classes}>
Storage
</th>
<td class="border">
<td class={table_cell_classes}>
{stats.disk_stats.used_percent} used ({stats.disk_stats.used_size} / {stats.disk_stats.available_size})
</td>
</tr>
<tr class="border-b">
<th class="border">
<th class={table_cell_classes}>
Memory (RAM)
</th>
<td class="border">
<td class={table_cell_classes}>
Free: {stats.memory_stats.free}, Used: {stats.memory_stats.used}
</td>
</tr>

View File

@@ -56,16 +56,21 @@
{#if recording}
<Card entry={current_entry} current={true} i={0} server_is_recording={recording}/>
{:else}
<div class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1">
<span class="text-2xl font-bold mb-2">WARNING: Not Recording</span>
<div class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between">
<span class="text-2xl font-bold mb-2 flex flex-row items-center gap-2">
<svg class="w-8 h-8 text-red-600" 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="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0V8Zm-1 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12Z" clip-rule="evenodd"/>
</svg>
WARNING: Not Recording
</span>
<span>Rayhunter is not currently running!</span>
<div class="flex flex-row justify-between mt-2">
<div class="flex flex-row justify-end mt-2">
<RecordingControls {recording} />
</div>
</div>
{/if}
</div>
<ManifestTable entries={entries} current_entry={current_entry} server_is_recording={recording} />
<ManifestTable entries={entries} server_is_recording={recording} />
<DeleteAllButton/>
{:else}
<p>Loading...</p>