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

1 files changed, 41 insertions, 6 deletions

diff --git a/public/App.js b/public/App.js
index 4716bb3..f63ae7e 100644
--- a/public/App.js
+++ b/public/App.js
@@ -6,7 +6,7 @@ import { sortBy, map, equalsWith, tryFind, iterateIndexed, item } from "./fable_
 import { join, isNullOrWhiteSpace, printf, toText } from "./fable_modules/fable-library-js.4.24.0/String.js";
 import { MeshData_triangleIndices, MeshData_positionData } from "./SomhairlesDream.Shared/Domain.js";
 import { min, max } from "./fable_modules/fable-library-js.4.24.0/Double.js";
-import { defaultArg } from "./fable_modules/fable-library-js.4.24.0/Option.js";
+import { some, defaultArg } from "./fable_modules/fable-library-js.4.24.0/Option.js";
 import { awaitPromise, startImmediate } from "./fable_modules/fable-library-js.4.24.0/Async.js";
 import { singleton } from "./fable_modules/fable-library-js.4.24.0/AsyncBuilder.js";
 
@@ -867,8 +867,29 @@ export function inputValue(id) {
     return element(id).value;
 }
 
+export const probeSelection = new RunSelection("probe-001", "run-probe-real-2", "probe-base-000", "probe-target-007", false);
+
+export const shipSelection = new RunSelection("ship-001", "run-ship-001", "ship-base-000", "ship-target-007", false);
+
+export let activeModel = createAtom(probeSelection);
+
 export function selectedRun() {
-    return new RunSelection(inputValue("project-id-input"), inputValue("run-id-input"), inputValue("base-id-input"), inputValue("target-id-input"), element("run-render-input").checked);
+    return activeModel();
+}
+
+export function highlightActiveCard(selection) {
+    const library = element("model-library");
+    for (let index = 0; index <= (library.children.length - 1); index++) {
+        const card = library.children.item(some(index));
+        if (card.classList.contains("model-card")) {
+            if ((card.getAttribute("data-project") === selection.ProjectId) && (card.getAttribute("data-run") === selection.RunId)) {
+                card.classList.add("is-active");
+            }
+            else {
+                card.classList.remove("is-active");
+            }
+        }
+    }
 }
 
 export function freshLiveRunId(base_) {
@@ -993,6 +1014,14 @@ export function loadBootHistory() {
     loadHistoryFor(selectedRun());
 }
 
+export function selectModel(card) {
+    const selection = new RunSelection(card.getAttribute("data-project"), card.getAttribute("data-run"), card.getAttribute("data-base"), card.getAttribute("data-target"), false);
+    activeModel(selection);
+    highlightActiveCard(selection);
+    setText("run-message", "载入模型历史");
+    loadHistoryFor(selection);
+}
+
 export function boot() {
     showFrameMetadata(item(0, frames));
     try {
@@ -1010,10 +1039,16 @@ export function boot() {
     element("viewport-note").addEventListener("click", (_arg_2) => {
         retryFailedLoad();
     });
-    element("run-controls").addEventListener("submit", (event) => {
-        event.preventDefault();
-        startRun(selectionForLiveStart(selectedRun()));
-    });
+    const library = element("model-library");
+    for (let index = 0; index <= (library.children.length - 1); index++) {
+        const card = library.children.item(some(index));
+        if (card.classList.contains("model-card")) {
+            card.addEventListener("click", (_arg_3) => {
+                selectModel(card);
+            });
+        }
+    }
+    highlightActiveCard(activeModel());
     loadBootHistory();
     renderTimeline();
 }