Add better local schema handling

Author: ty-porter

index.html

@@ -29,15 +29,6 @@ <h1 class="mb-1">MLB LED Scoreboard Config Editor</h1>
         <option value="config-gen-schemas">config-gen-schemas (Testing)</option>
       </select>
     </div>
-    <div class="d-flex align-items-center gap-3 mb-3">
-      <span>Or load local schema:</span>
-      <input type="file" id="local-schema-input" accept=".json" class="d-none">
-      <button class="btn btn-outline-secondary btn-sm" id="local-schema-btn">
-        <i class="bi bi-folder2-open"></i> Choose file...
-      </button>
-      <span id="local-schema-name" class="text-secondary small"></span>
-    </div>
-
     <ul class="nav nav-tabs mb-4" role="tablist">
       <li class="nav-item">
         <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-config" type="button">config.json</button>
@@ -51,6 +42,9 @@ <h1 class="mb-1">MLB LED Scoreboard Config Editor</h1>
       <li class="nav-item">
         <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-wxhy" type="button">coordinates/wXhY.json</button>
       </li>
+      <li class="nav-item">
+        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-local" type="button">Local Schema</button>
+      </li>
     </ul>
 
     <div class="tab-content">
@@ -113,11 +107,11 @@ <h1 class="mb-1">MLB LED Scoreboard Config Editor</h1>
         <div class="d-flex align-items-center gap-3 mb-4">
           <label for="size-select" class="text-secondary mb-0">Matrix dimensions:</label>
           <select id="size-select" class="form-select form-select-sm w-auto">
-            <option value="w32h32">w32h32</option>
+            <option value="w32h32" selected>w32h32</option>
             <option value="w64h32">w64h32</option>
             <option value="w64h64">w64h64</option>
             <option value="w128h32">w128h32</option>
-            <option value="w128h64" selected>w128h64</option>
+            <option value="w128h64">w128h64</option>
             <option value="w192h64">w192h64</option>
           </select>
         </div>
@@ -138,6 +132,31 @@ <h1 class="mb-1">MLB LED Scoreboard Config Editor</h1>
         </div>
       </div>
 
+      <div class="tab-pane fade" id="tab-local">
+        <div class="d-flex align-items-center gap-3 mb-4">
+          <input type="file" id="local-schema-input" accept=".json" class="d-none">
+          <button class="btn btn-outline-secondary btn-sm" id="local-schema-btn">
+            <i class="bi bi-folder2-open"></i> Choose file...
+          </button>
+          <span id="local-schema-name" class="text-secondary small"></span>
+        </div>
+        <div class="row">
+          <div class="col-lg-7">
+            <div id="jedison-local"></div>
+          </div>
+          <div class="col-lg-5">
+            <div class="sticky-top pt-2">
+              <div class="d-flex gap-2 mt-2">
+                <button class="btn btn-primary btn-sm download-btn" data-target="output-local" data-filename="">Download</button>
+                <button class="btn btn-secondary btn-sm copy-btn" data-target="output-local">Copy</button>
+              </div>
+              <p class="text-secondary small mb-1" id="local-output-label"></p>
+              <textarea id="output-local" class="json-output form-control font-monospace" wrap="off" readonly></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 

src/main.js

@@ -105,6 +105,7 @@ function createEditor(schema, data, containerId, outputId) {
 
 function initEditor({ schemaUrl, exampleUrl, containerId, outputId }) {
   const container = document.querySelector(`#${containerId}`);
+  container.innerHTML = '<div class="loader"></div>';
 
   loadEditorData(schemaUrl, exampleUrl)
     .then(({ schema, data }) => createEditor(schema, data, containerId, outputId))
@@ -125,7 +126,13 @@ function initCoordinatesEditor(repoBase, size) {
   });
 }
 
+let editorsController = null;
+
 function initEditors(version) {
+  if (editorsController) editorsController.abort();
+  editorsController = new AbortController();
+  const { signal } = editorsController;
+
   const REPO_BASE = `https://raw.githubusercontent.com/MLB-LED-Scoreboard/mlb-led-scoreboard/${version}`;
 
   const lazyEditors = {
@@ -169,7 +176,7 @@ function initEditors(version) {
   if (activeTab) maybeInit(activeTab.dataset.bsTarget?.slice(1));
 
   document.querySelectorAll('[data-bs-toggle="tab"]').forEach(btn => {
-    btn.addEventListener('shown.bs.tab', () => maybeInit(btn.dataset.bsTarget.slice(1)));
+    btn.addEventListener('shown.bs.tab', () => maybeInit(btn.dataset.bsTarget.slice(1)), { signal });
   });
 
   const sizeSelect = document.querySelector('#size-select');
@@ -180,7 +187,7 @@ function initEditors(version) {
     sizeLabel.textContent = sizeSelect.value;
     wxhyDownload.dataset.filename = `${sizeSelect.value}.json`;
     initCoordinatesEditor(REPO_BASE, sizeSelect.value);
-  });
+  }, { signal });
 }
 
 // --- Bootstrap version selector ---
@@ -203,27 +210,24 @@ async function init() {
   versionSelect.value = version;
 
   versionSelect.addEventListener('change', () => {
-    params.set('version', versionSelect.value);
-    window.location.search = params.toString();
+    const p = new URLSearchParams(window.location.search);
+    p.set('version', versionSelect.value);
+    history.replaceState(null, '', '?' + p.toString());
+    initEditors(versionSelect.value);
   });
 
   initEditors(version);
 }
 
 init();
 
-// --- Local schema file picker ---
-
-const TAB_EDITOR_MAP = {
-  'tab-config':     { containerId: 'jedison-config',     outputId: 'output-config' },
-  'tab-teams':      { containerId: 'jedison-teams',      outputId: 'output-teams' },
-  'tab-scoreboard': { containerId: 'jedison-scoreboard', outputId: 'output-scoreboard' },
-  'tab-wxhy':       { containerId: 'jedison-wxhy',       outputId: 'output-wxhy' }
-};
+// --- Local schema tab ---
 
 const localSchemaInput = document.querySelector('#local-schema-input');
 const localSchemaBtn   = document.querySelector('#local-schema-btn');
 const localSchemaName  = document.querySelector('#local-schema-name');
+const localOutputLabel = document.querySelector('#local-output-label');
+const localDownloadBtn = document.querySelector('.download-btn[data-target="output-local"]');
 
 localSchemaBtn.addEventListener('click', () => localSchemaInput.click());
 
@@ -232,14 +236,10 @@ localSchemaInput.addEventListener('change', async () => {
   if (!file) return;
 
   localSchemaName.textContent = file.name;
+  localOutputLabel.textContent = file.name.replace(/\.schema\.json$/, '.json');
+  localDownloadBtn.dataset.filename = file.name.replace(/\.schema\.json$/, '.json');
 
-  const activeTabBtn = document.querySelector('.nav-link.active[data-bs-target]');
-  const tabId = activeTabBtn?.dataset.bsTarget?.slice(1);
-  const editorConfig = TAB_EDITOR_MAP[tabId];
-  if (!editorConfig) return;
-
-  const { containerId, outputId } = editorConfig;
-  const container = document.querySelector(`#${containerId}`);
+  const container = document.querySelector('#jedison-local');
   container.innerHTML = '<div class="loader"></div>';
 
   try {
@@ -250,7 +250,7 @@ localSchemaInput.addEventListener('change', async () => {
     await refParser.dereference(schema);
     refParser.expandRecursive(schema);
 
-    createEditor(schema, null, containerId, outputId);
+    createEditor(schema, null, 'jedison-local', 'output-local');
   } catch (err) {
     container.textContent = `Failed to load local schema: ${err.message}`;
   }