allow loading custom configurations

index.html

@@ -12,8 +12,10 @@
     <button data-alt="n" data-button="file:new">New</button>
     <button data-alt="o" data-button="file:load">Open</button>
     <button data-alt="s" data-button="file:save">Save</button>
-    <div data-section="Recent Files" data-alt="r">
+    <div data-section="Configuiration" data-alt="c">
-      <button disabled>-</button>
+      <button data-alt="d" data-button="load-configuration" data-configuration="default">Default</button>
+      <button data-alt="e" data-button="load-configuration" data-configuration="e2ee">E2EE</button>
+      <button data-alt="s" data-button="load-configuration">Select file...</button>
     </div>
   </div>
   <div data-section="Edit" data-alt="e">

scripts/configuration.js

@@ -1,9 +1,16 @@
 import { buildAtlas } from "./atlas.js";
 import { emitEvent } from "./events.js";
 import { setState, STATE } from "./state.js";
+import { registerLoadCallback } from "./main.js";
+import { addEventToButton } from "./dom-utils.js";
+import { showOpenFileDialog } from "./files.js";
 
 export let configuration = {};
 
+registerLoadCallback(() => {
+  addEventToButton("load-configuration", "click", loadConfiguration);
+});
+
 export async function loadConfiguration(event) {
   setState(STATE.initialization);
 
@@ -12,12 +19,16 @@ export async function loadConfiguration(event) {
   if (typeof event === "string") {
     configData = await fetch(`./configurations/${event}.ncpf.json`)
           .then(data => data.json());
-  } else if (event.target.dataset.configuration) {
+  } else if (event.currentTarget?.dataset?.configuration) {
-    const configuration = event.target.dataset.configuration;
+    const configuration = event.currentTarget.dataset.configuration;
     console.log(configuration);
     configData = await fetch(`./configurations/${configuration}.ncpf.json`)
           .then(data => data.json());
-  } else if (event.target.files[0]) {
+  } else if (event.currentTarget?.tagName === "BUTTON") {
+    const { data } = await new Promise(resolve => showOpenFileDialog(resolve));
+    console.log(data);
+    configData = data;
+  } else if (event?.target?.files && event.target.files[0]) {
     const file = event.target.files[0];
     configData = await new Promise(resolve => {
       const reader = new FileReader();

scripts/files.js

@@ -12,12 +12,12 @@ import { getSolverMetadata, resetSolver } from "./solver.js";
 import { registerLoadCallback } from "./main.js";
 
 registerLoadCallback(() => {
-  listenTo("file:load", () => showOpenFileDialog());
+  listenTo("file:load", () => showOpenFileDialog(({ data, filename }) => loadFile(data, filename)));
   listenTo("file:new", () => {});
   listenTo("file:save", () => saveFile());
 });
 
-export function showOpenFileDialog() {
+export function showOpenFileDialog(callback) {
   const input = document.createElement("input");
   input.type = "file";
   input.accept = ".ncpf.json";
@@ -31,7 +31,7 @@ export function showOpenFileDialog() {
       });
       reader.readAsText(input.files[0]);
     });
-    void loadFile(data, filename);
+    callback({ data, filename });
   });
   input.click();
 }

scripts/main.js

@@ -38,6 +38,16 @@ window.addEventListener("load", () => {
     }
   });
 
+  listenTo("state", () => {
+    console.log("State changed", getState());
+    getElements("state", "*").forEach(e => {
+      e.classList.add("hidden");
+      if (e.dataset.state === getState()) {
+        e.classList.remove("hidden");
+      }
+    });
+  });
+
   getElements("button", "*").forEach(elem => {
     elem.addEventListener("click", e => {
       emitEvent(elem.dataset.button, e);
@@ -67,19 +77,6 @@ window.addEventListener("load", () => {
     });
   });
 
-  addEventToInput("configuration", "input", loadConfiguration);
-  addEventToButton("load-configuration", "click", loadConfiguration);
-
-  listenTo("state", () => {
-    console.log("State changed", getState());
-    getElements("state", "*").forEach(e => {
-      e.classList.add("hidden");
-      if (e.dataset.state === getState()) {
-        e.classList.remove("hidden");
-      }
-    });
-  });
-
   listenTo("config:end", () => setState(STATE.planning));
 
   runLoadCallbacks();

scripts/recipe-selector.js

@@ -308,6 +308,11 @@ function* getRecipeTooltip(recipe, metadata) {
     console.log("unknown recipe", recipe, metadata);
   }
 
+  if (!metadata) {
+    console.trace("no metadata for recipe", recipe, metadata);
+    return;
+  }
+
   if (metadata.configurationAddon) {
     yield {
       type: "italics",