projects/c0de.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sadsdf
All checks were successful
Deploy / deploy (push) Successful in 18s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-05-17 00:54:41 +02:00
parent f5bb37f96e
commit 70e82cae7b
2 changed files with 284 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
public/assets/app.js
View File

@@ -213,29 +213,37 @@ function renderRack() {
ui.rackGrid.style.setProperty("--rack-total-u", String(rack.totalU));
applyRackColorTheme(ui.rackGrid, state.rackColor);
const slots = [];
for (let u = rack.totalU; u >= 1; u -= 1) {
slots.push(`
<div class="rack-slot" data-slot-u="${u}">
<span class="rack-slot__label">${u}U</span>
<span class="rack-slot__label rack-slot__label--right">${u}</span>
</div>
`);
}
ui.rackGrid.innerHTML = `
<div class="rack-grid__header-badge rack-grid__header-badge--left">${rack.rackStandard === "19_inch" ? '19" Rack' : '10" Rack'}</div>
<div class="rack-grid__header-badge rack-grid__header-badge--right">${rack.totalU} HE</div>
<div class="rack-grid__bay">
<div class="rack-grid__guides">${slots.join("")}</div>
<div class="rack-insertion-layer" id="rack-insertion-layer"></div>
<div class="rack-items-layer" id="rack-items-layer"></div>
<div class="rack-shell">
<div class="rack-shell__frame rack-shell__frame--top"></div>
<div class="rack-shell__frame rack-shell__frame--bottom"></div>
<div class="rack-shell__frame rack-shell__frame--left"></div>
<div class="rack-shell__frame rack-shell__frame--right"></div>
<div class="rack-shell__screw rack-shell__screw--tl"></div>
<div class="rack-shell__screw rack-shell__screw--tr"></div>
<div class="rack-shell__screw rack-shell__screw--bl"></div>
<div class="rack-shell__screw rack-shell__screw--br"></div>
<div class="rack-core">
<div class="rack-rail rack-rail--left">${renderRailScale(rack, "left")}</div>
<div class="rack-bay" id="rack-bay">
<div class="rack-bay__ceiling"></div>
<div class="rack-bay__wall rack-bay__wall--left"></div>
<div class="rack-bay__wall rack-bay__wall--right"></div>
<div class="rack-bay__back"></div>
<div class="rack-bay__floor"></div>
<div class="rack-insertion-layer" id="rack-insertion-layer"></div>
<div class="rack-items-layer" id="rack-items-layer"></div>
</div>
<div class="rack-rail rack-rail--right">${renderRailScale(rack, "right")}</div>
</div>
</div>
`;
const layer = document.getElementById("rack-items-layer");
layer.style.height = "100%";
const bay = ui.rackGrid.querySelector(".rack-grid__bay");
const bay = document.getElementById("rack-bay");
bay.addEventListener("dragover", handleRackDragOver);
bay.addEventListener("drop", handleRackDrop);
bay.addEventListener("dragleave", handleRackDragLeave);
@@ -287,6 +295,22 @@ function renderRack() {
});
}
function renderRailScale(rack, side) {
const rows = [];
for (let u = rack.totalU; u >= 1; u -= 1) {
rows.push(`
<div class="rack-rail__unit">
<span class="rack-rail__label rack-rail__label--${side}">${u}</span>
<span class="rack-rail__tick rack-rail__tick--${side}"></span>
<span class="rack-rail__holes rack-rail__holes--${side}">
<span></span><span></span><span></span>
</span>
</div>
`);
}
return rows.join("");
}
function insertSelectedComponentAt(y) {
const componentId = state.libraryDragComponentId || state.selectedComponentId;
if (!componentId) {
@@ -899,10 +923,6 @@ function getPlacementCenterY(item, component) {
return item.y + getComponentHeightPx(component) / 2;
}
function formatRackPosition(y) {
return `${(y / getUnitHeightPx() + 1).toFixed(1)}U`;
}
function formatRackPosition(y, component) {
const rack = getCurrentRackTemplate();
if (!rack) {