SirBlob/sim-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simulation Upload Update

Browse Source
This commit is contained in:
SirBlobby
2026-02-21 22:21:05 -05:00
parent 4c24b141fe
commit 913f45b51b
20 changed files with 1479 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/lib/SimulationSidebar.svelte Normal file
View File

@@ -0,0 +1,148 @@
<script lang="ts">
import type { SimulationState } from "./simulationState.svelte";
let { state }: { state: SimulationState } = $props();
</script>
<aside class="sidebar">
<details open class="filter-group">
<summary>Search & Sort</summary>
<div class="filter-content">
<input
type="text"
placeholder="Search ID..."
bind:value={state.searchQuery}
class="input-field full-width"
/>
<select bind:value={state.sortOrder} class="input-field full-width">
<option value="newest">Newest First</option>
<option value="oldest">Oldest First</option>
<option value="fastest">Fastest</option>
<option value="slowest">Slowest</option>
</select>
</div>
</details>
<details class="filter-group">
<summary>Algorithm Pattern</summary>
<div class="filter-content">
<select
bind:value={state.filterPattern}
class="input-field full-width"
>
<option value="any">Any</option>
<option value="spiral">Spiral</option>
<option value="lawnmower">Lawnmower</option>
<option value="levy">Levy</option>
</select>
</div>
</details>
<details class="filter-group">
<summary>Date Range</summary>
<div class="filter-content col">
<label
>From <input
type="date"
bind:value={state.filterDateFrom}
class="input-field"
/></label
>
<label
>To <input
type="date"
bind:value={state.filterDateTo}
class="input-field"
/></label
>
</div>
</details>
<details class="filter-group">
<summary>Flight Altitude</summary>
<div class="filter-content col">
<label
>Min (ft) <input
type="number"
step="0.1"
bind:value={state.filterAltMin}
class="input-field small-num"
/></label
>
<label
>Max (ft) <input
type="number"
step="0.1"
bind:value={state.filterAltMax}
class="input-field small-num"
/></label
>
</div>
</details>
<details class="filter-group">
<summary>UAV Speed</summary>
<div class="filter-content col">
<label
>Min (mph) <input
type="number"
step="0.1"
bind:value={state.filterUavMin}
class="input-field small-num"
/></label
>
<label
>Max (mph) <input
type="number"
step="0.1"
bind:value={state.filterUavMax}
class="input-field small-num"
/></label
>
</div>
</details>
<details class="filter-group">
<summary>UGV Speed</summary>
<div class="filter-content col">
<label
>Min (mph) <input
type="number"
step="0.1"
bind:value={state.filterUgvMin}
class="input-field small-num"
/></label
>
<label
>Max (mph) <input
type="number"
step="0.1"
bind:value={state.filterUgvMax}
class="input-field small-num"
/></label
>
</div>
</details>
<button class="reset-btn" onclick={() => state.resetFilters()}>
Reset Filters
</button>
</aside>
<style>
.reset-btn {
width: 100%;
margin-top: 20px;
padding: 10px;
background-color: #e0e0e0;
border: 1px solid #000;
font-weight: bold;
font-size: 14px;
font-family: inherit;
cursor: pointer;
text-transform: uppercase;
}
.reset-btn:hover {
background-color: #d0d0d0;
}
</style>