feat(ui): replace id form with clickable model library cards

1 files changed, 59 insertions, 9 deletions

diff --git a/src/SomhairlesDream.Frontend/App.fs b/src/SomhairlesDream.Frontend/App.fs
index 0e6bcd4..dbb267c 100644
--- a/src/SomhairlesDream.Frontend/App.fs
+++ b/src/SomhairlesDream.Frontend/App.fs
@@ -687,12 +687,38 @@ let connectToServer (selection: RunSelection) =
 let inputValue id =
     (element id :?> HtmlInput).value
 
-let selectedRun () =
-    { ProjectId = inputValue "project-id-input"
-      RunId = inputValue "run-id-input"
-      BaseId = inputValue "base-id-input"
-      TargetId = inputValue "target-id-input"
-      Render = (element "run-render-input" :?> HtmlInput).``checked`` }
+let probeSelection : RunSelection =
+    { ProjectId = "probe-001"
+      RunId = "run-probe-real-2"
+      BaseId = "probe-base-000"
+      TargetId = "probe-target-007"
+      Render = false }
+
+let shipSelection : RunSelection =
+    { ProjectId = "ship-001"
+      RunId = "run-ship-001"
+      BaseId = "ship-base-000"
+      TargetId = "ship-target-007"
+      Render = false }
+
+let mutable activeModel : RunSelection = probeSelection
+
+let selectedRun () = activeModel
+
+let highlightActiveCard (selection: RunSelection) =
+    let library: HTMLElement = unbox (element "model-library")
+
+    for index in 0 .. (library.children.length - 1) do
+        let card: HTMLElement = unbox (library.children.item index)
+
+        if card.classList.contains "model-card" then
+            let project = card.getAttribute "data-project"
+            let run = card.getAttribute "data-run"
+
+            if project = selection.ProjectId && run = selection.RunId then
+                card.classList.add "is-active"
+            else
+                card.classList.remove "is-active"
 
 // The boot run id names a pre-published historical replay that already has an
 // on-disk manifest; re-running it can only fail ("run directory already
@@ -801,6 +827,24 @@ let startRun (selection: RunSelection) =
 let loadBootHistory () =
     loadHistoryFor (selectedRun ())
 
+let selectModel (card: HTMLElement) =
+    let project = card.getAttribute "data-project"
+    let run = card.getAttribute "data-run"
+    let baseId = card.getAttribute "data-base"
+    let targetId = card.getAttribute "data-target"
+
+    let selection : RunSelection =
+        { ProjectId = project
+          RunId = run
+          BaseId = baseId
+          TargetId = targetId
+          Render = false }
+
+    activeModel <- selection
+    highlightActiveCard selection
+    setText "run-message" "载入模型历史"
+    loadHistoryFor selection
+
 let boot () =
     showFrameMetadata frames[0]
 
@@ -812,10 +856,16 @@ let boot () =
     (element "replay-button").addEventListener("click", fun _ -> toggleReplay ())
     (element "follow-button").addEventListener("click", fun _ -> followLatestStep ())
     (element "viewport-note").addEventListener("click", fun _ -> retryFailedLoad ())
-    (element "run-controls").addEventListener("submit", fun event ->
-        event.preventDefault()
-        startRun (selectionForLiveStart (selectedRun ())))
 
+    let library: HTMLElement = unbox (element "model-library")
+
+    for index in 0 .. (library.children.length - 1) do
+        let card: HTMLElement = unbox (library.children.item index)
+
+        if card.classList.contains "model-card" then
+            card.addEventListener("click", fun _ -> selectModel card)
+
+    highlightActiveCard activeModel
     loadBootHistory ()
 
     renderTimeline ()