58 lines
1.7 KiB
Svelte
58 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
parseConfig,
|
|
formatDate,
|
|
type SimulationState,
|
|
} from "./simulationState.svelte";
|
|
import { formatTime } from "$lib/ts/utils";
|
|
|
|
let { state }: { state: SimulationState } = $props();
|
|
</script>
|
|
|
|
<main class="table-content">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Sim Name</th>
|
|
<th>Search Pattern</th>
|
|
<th>Search Time</th>
|
|
<th>Total Time</th>
|
|
<th>Date Run</th>
|
|
<th>Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each state.paginatedSimulations as sim}
|
|
<tr>
|
|
<td>{sim.id}</td>
|
|
<td>{sim.name}</td>
|
|
<td style="text-transform: capitalize;"
|
|
>{parseConfig(sim.config).pattern || "Unknown"}</td
|
|
>
|
|
<td>{formatTime(sim.search_time || NaN)}</td>
|
|
<td>{formatTime(sim.total_time || NaN)}</td>
|
|
<td>{formatDate(sim.created_at)}</td>
|
|
<td><a href={`/simulation/${sim.id}`}>View Details</a></td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="pagination">
|
|
<button
|
|
onclick={() => state.goToPage(state.currentPage - 1)}
|
|
disabled={state.currentPage === 1}
|
|
>
|
|
Previous
|
|
</button>
|
|
<span>Page {state.currentPage} of {state.totalPages}</span>
|
|
<button
|
|
onclick={() => state.goToPage(state.currentPage + 1)}
|
|
disabled={state.currentPage === state.totalPages}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</main>
|