adasd

public/assets/app.js

@@ -30,7 +30,6 @@ function cacheDom() {
   ui.componentFilter = document.getElementById("component-filter");
   ui.pluginInput = document.getElementById("plugin-input");
   ui.componentLibrary = document.getElementById("component-library");
-  ui.rackSummary = document.getElementById("rack-summary");
   ui.rackGrid = document.getElementById("rack-grid");
   ui.projectStats = document.getElementById("project-stats");
   ui.bomOutput = document.getElementById("bom-output");
@@ -51,7 +50,7 @@ function bindEvents() {
 
   ui.projectName.addEventListener("input", () => {
     state.projectName = ui.projectName.value.trim() || "Neues Rack-Projekt";
-    renderSummary();
+    renderStats();
   });
   ui.rackColor.addEventListener("input", () => {
     state.rackColor = ui.rackColor.value;
@@ -89,7 +88,6 @@ async function loadBootstrap() {
 }
 
 function renderAll() {
-  renderSummary();
   renderLibrary();
   renderSelectionInfo();
   renderRack();
@@ -112,26 +110,7 @@ function renderTemplateOptions() {
 }
 
 function renderSummary() {
-  const rack = getCurrentRackTemplate();
-  if (!rack) {
-    ui.rackSummary.innerHTML = "";
-    return;
-  }
-
-  ui.rackSummary.innerHTML = `
-    <div class="summary-card">
-      <span>Projekt</span>
-      <strong>${escapeHtml(state.projectName)}</strong>
-    </div>
-    <div class="summary-card">
-      <span>Rack-Standard</span>
-      <strong>${rack.rackStandard === "19_inch" ? "19 inch" : "10 inch"}</strong>
-    </div>
-    <div class="summary-card">
-      <span>Kapazitaet</span>
-      <strong>${rack.totalU}U / ${rack.usableDepthMm} mm</strong>
-    </div>
-  `;
+  renderStats();
 }
 
 function renderLibrary() {
@@ -384,6 +363,18 @@ function renderStats() {
   }, 0);
 
   ui.projectStats.innerHTML = `
+    <div class="stat-card">
+      <span>Projekt</span>
+      <strong>${escapeHtml(state.projectName)}</strong>
+    </div>
+    <div class="stat-card">
+      <span>Rack</span>
+      <strong>${rack.rackStandard === "19_inch" ? '19"' : '10"'} · ${rack.totalU}U</strong>
+    </div>
+    <div class="stat-card">
+      <span>Tiefe</span>
+      <strong>${rack.usableDepthMm} mm</strong>
+    </div>
     <div class="stat-card">
       <span>Belegte U</span>
       <strong>${usedU} / ${rack.totalU}</strong>