MapPage.tsx
| 1 | import { For, Show } from "solid-js"; |
| 2 | import { FLAG_CHARGING } from "./api"; |
| 3 | import { ago, staleness } from "./live"; |
| 4 | import MapView from "./Map"; |
| 5 | import { useSession } from "./session"; |
| 6 | |
| 7 | export default function MapPage() { |
| 8 | const s = useSession(); |
| 9 | |
| 10 | return ( |
| 11 | <main class="split"> |
| 12 | <aside> |
| 13 | <For each={s.order()} fallback={<p class="muted">nobody is sharing with you yet</p>}> |
| 14 | {(id) => { |
| 15 | const person = () => s.people[id]; |
| 16 | return ( |
| 17 | <button class="person" classList={{ active: s.selected() === id }} onClick={() => s.select(id)} disabled={!person()?.position}> |
| 18 | <span class="name">{person()?.display_name}</span> |
| 19 | <Show when={person()?.position} fallback={<span class="muted">no fix yet</span>}> |
| 20 | {(pos) => ( |
| 21 | <span class="meta"> |
| 22 | <span class={`dot ${staleness(pos().ts, s.serverTime())}`} /> |
| 23 | {ago(pos().ts, s.serverTime())} ago |
| 24 | <Show when={pos().acc_dm !== null}>{" · ±" + Math.round(pos().acc_dm! / 10) + " m"}</Show> |
| 25 | <Show when={pos().bat_pct !== null}>{" · " + pos().bat_pct + "%" + (pos().flags & FLAG_CHARGING ? " ⚡" : "")}</Show> |
| 26 | </span> |
| 27 | )} |
| 28 | </Show> |
| 29 | </button> |
| 30 | ); |
| 31 | }} |
| 32 | </For> |
| 33 | </aside> |
| 34 | <MapView people={s.people} order={s.order} selected={s.selected} onSelect={s.select} trail={s.trail} /> |
| 35 | </main> |
| 36 | ); |
| 37 | } |
| 38 |