This commit is contained in:
20
api/index.php
Normal file
20
api/index.php
Normal file
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
|
||||
require_once dirname(__DIR__) . '/config/fileload.php';
|
||||
|
||||
$action = $_GET['action'] ?? 'bootstrap';
|
||||
|
||||
if ($action === 'bootstrap') {
|
||||
echo json_encode(app_bootstrap_payload(), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
|
||||
exit;
|
||||
}
|
||||
|
||||
http_response_code(404);
|
||||
echo json_encode([
|
||||
'error' => 'Unknown action',
|
||||
'action' => $action,
|
||||
], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
|
||||
|
||||
13
config/config.php
Normal file
13
config/config.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
require_once __DIR__ . '/domaindata.php';
|
||||
|
||||
$host = $_SERVER['HTTP_HOST'] ?? '';
|
||||
$isCli = PHP_SAPI === 'cli';
|
||||
$isStagingHost = is_string($host) && str_starts_with($host, 'staging.');
|
||||
|
||||
$envDir = $isStagingHost ? __DIR__ . '/staging' : __DIR__ . '/prod';
|
||||
|
||||
require_once $envDir . '/config.php';
|
||||
|
||||
19
config/db.php
Normal file
19
config/db.php
Normal file
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
$pdo = null;
|
||||
|
||||
if (!defined('APP_ENV')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$dbLoader = __DIR__ . '/' . APP_ENV . '/db.php';
|
||||
|
||||
// The prototype should run without a database. Explicit opt-in keeps the
|
||||
// current concept environment usable while the data layer is still evolving.
|
||||
$enableDb = getenv('APP_ENABLE_DB') === '1';
|
||||
|
||||
if ($enableDb && is_file($dbLoader)) {
|
||||
require_once $dbLoader;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ ini_set('display_errors', 1);
|
||||
ini_set('display_startup_errors', 1);
|
||||
error_reporting(E_ALL);
|
||||
|
||||
require_once __DIR__ . "/domaindata.php";
|
||||
require_once dirname(__DIR__) . "/domaindata.php";
|
||||
|
||||
// Umgebung (optional, aber hilfreich für Debugging / Logik)
|
||||
define('APP_ENV', 'prod'); // oder 'prod', 'local', ...
|
||||
@@ -31,4 +31,3 @@ define('MATOMO_SITE_ID', 7);
|
||||
$env = 'prod';
|
||||
$baseUrl = 'https://'.APP_DOMAIN_NAME;
|
||||
$apiBaseUrl = 'https://api.'.APP_DOMAIN_NAME;
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ ini_set('display_errors', 1);
|
||||
ini_set('display_startup_errors', 1);
|
||||
error_reporting(E_ALL);
|
||||
|
||||
require_once __DIR__ . "/domaindata.php";
|
||||
require_once dirname(__DIR__) . "/domaindata.php";
|
||||
|
||||
// Umgebung (optional, aber hilfreich für Debugging / Logik)
|
||||
define('APP_ENV', 'staging'); // oder 'prod', 'local', ...
|
||||
@@ -33,4 +33,3 @@ define('MATOMO_ENABLED', false);
|
||||
define('MATOMO_SITE_ID', 8);
|
||||
$baseUrl = 'https://'.APP_DOMAIN_PRIMARY;
|
||||
$apiBaseUrl = 'https://api.'.APP_DOMAIN_PRIMARY;
|
||||
|
||||
|
||||
6
index.php
Normal file
6
index.php
Normal file
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
$GLOBALS['app_public_base'] = '/public';
|
||||
require __DIR__ . '/public/index.php';
|
||||
|
||||
5
public/api/index.php
Normal file
5
public/api/index.php
Normal file
@@ -0,0 +1,5 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
require dirname(__DIR__, 2) . '/api/index.php';
|
||||
|
||||
470
public/assets/app.css
Normal file
470
public/assets/app.css
Normal file
@@ -0,0 +1,470 @@
|
||||
:root {
|
||||
--bg: #f4f0e8;
|
||||
--bg-alt: #e8dfd2;
|
||||
--panel: rgba(255, 250, 242, 0.82);
|
||||
--panel-border: rgba(71, 52, 28, 0.15);
|
||||
--text: #1d1a16;
|
||||
--muted: #65584a;
|
||||
--accent: #b55d2d;
|
||||
--accent-strong: #8b3c13;
|
||||
--accent-soft: #f2d7c5;
|
||||
--success: #256245;
|
||||
--warning: #a24f2a;
|
||||
--shadow: 0 22px 45px rgba(57, 40, 19, 0.12);
|
||||
--radius-lg: 26px;
|
||||
--radius-md: 18px;
|
||||
--radius-sm: 12px;
|
||||
--rack-unit-height: 38px;
|
||||
--font-display: "Avenir Next", "Segoe UI", sans-serif;
|
||||
--font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 26%),
|
||||
linear-gradient(160deg, var(--bg) 0%, #eadfce 52%, #efe7dc 100%);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
button, input, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero__copy,
|
||||
.hero__meta,
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--panel-border);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.hero__copy {
|
||||
padding: 36px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.hero__copy h1 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.5rem, 6vw, 4.8rem);
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 0.82rem;
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.hero__lead {
|
||||
max-width: 60ch;
|
||||
color: var(--muted);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.hero__meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.meta-card {
|
||||
padding: 18px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.meta-card__label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 0.84rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 420px) minmax(420px, 1fr) minmax(320px, 390px);
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.panel__heading h2,
|
||||
.subpanel__header h3 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.panel__heading p {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.panel--controls,
|
||||
.panel--sidebar {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.field span {
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select,
|
||||
.subpanel__header button {
|
||||
border: 1px solid rgba(83, 58, 31, 0.14);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.field input:focus,
|
||||
.field select:focus {
|
||||
outline: 2px solid rgba(181, 93, 45, 0.24);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.library-toolbar {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.library {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
max-height: 780px;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.component-card,
|
||||
.rack-item,
|
||||
.subpanel,
|
||||
.notice {
|
||||
border: 1px solid rgba(75, 57, 37, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.component-card {
|
||||
padding: 14px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.component-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.component-card__header strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.component-card__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.component-card button,
|
||||
.subpanel__header button,
|
||||
.rack-item button {
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.component-card button:hover,
|
||||
.subpanel__header button:hover,
|
||||
.rack-item button:hover {
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.rack-stage {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.rack-summary,
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rack-summary {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.stat-card {
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
border: 1px solid rgba(75, 57, 37, 0.12);
|
||||
}
|
||||
|
||||
.summary-card strong,
|
||||
.stat-card strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rack-grid {
|
||||
position: relative;
|
||||
border-radius: 28px;
|
||||
border: 2px solid rgba(77, 50, 21, 0.4);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(98, 71, 45, 0.18), rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0) 86%, rgba(98, 71, 45, 0.18)),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(218, 197, 174, 0.36));
|
||||
padding: 24px 38px 24px 74px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rack-grid::before,
|
||||
.rack-grid::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
bottom: 18px;
|
||||
width: 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(92, 65, 37, 0.42);
|
||||
}
|
||||
|
||||
.rack-grid::before {
|
||||
left: 26px;
|
||||
}
|
||||
|
||||
.rack-grid::after {
|
||||
right: 26px;
|
||||
}
|
||||
|
||||
.rack-slot {
|
||||
position: relative;
|
||||
height: var(--rack-unit-height);
|
||||
border-top: 1px dashed rgba(89, 60, 31, 0.25);
|
||||
}
|
||||
|
||||
.rack-slot:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.rack-slot.is-drop-target {
|
||||
background: rgba(181, 93, 45, 0.11);
|
||||
}
|
||||
|
||||
.rack-slot__label {
|
||||
position: absolute;
|
||||
left: -52px;
|
||||
top: 8px;
|
||||
font-size: 0.76rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.rack-items-layer {
|
||||
position: absolute;
|
||||
inset: 24px 38px 24px 74px;
|
||||
}
|
||||
|
||||
.rack-item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12px 12px 12px 14px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
border-left: 8px solid var(--accent);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.rack-item[data-standard="10_inch"] {
|
||||
right: 16%;
|
||||
}
|
||||
|
||||
.rack-item.is-dragging {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.rack-item__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.rack-item__meta,
|
||||
.list-output,
|
||||
.notes {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rack-item__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rack-item__actions button {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.subpanel {
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.subpanel__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.list-output {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bom-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.64);
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.notes {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.notes li.ok {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.notes li.warn {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
border: 1px dashed rgba(75, 57, 37, 0.2);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.app-shell {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.rack-summary,
|
||||
.stat-grid,
|
||||
.field-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rack-grid {
|
||||
padding-left: 62px;
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.rack-items-layer {
|
||||
inset: 24px 26px 24px 62px;
|
||||
}
|
||||
}
|
||||
652
public/assets/app.js
Normal file
652
public/assets/app.js
Normal file
@@ -0,0 +1,652 @@
|
||||
const state = {
|
||||
bootstrap: null,
|
||||
rackTemplateId: null,
|
||||
projectName: "Neues Rack-Projekt",
|
||||
components: [],
|
||||
placedItems: [],
|
||||
nextPlacementId: 1,
|
||||
dragPlacementId: null,
|
||||
};
|
||||
|
||||
const ui = {};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
cacheDom();
|
||||
bindEvents();
|
||||
await loadBootstrap();
|
||||
});
|
||||
|
||||
function cacheDom() {
|
||||
ui.templateSelect = document.getElementById("rack-template-select");
|
||||
ui.projectName = document.getElementById("project-name");
|
||||
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");
|
||||
ui.cableFrom = document.getElementById("cable-from");
|
||||
ui.cableTo = document.getElementById("cable-to");
|
||||
ui.cableSlack = document.getElementById("cable-slack");
|
||||
ui.cableOutput = document.getElementById("cable-output");
|
||||
ui.validationOutput = document.getElementById("validation-output");
|
||||
ui.exportBom = document.getElementById("export-bom");
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
ui.templateSelect.addEventListener("change", () => {
|
||||
state.rackTemplateId = ui.templateSelect.value;
|
||||
state.placedItems = [];
|
||||
renderAll();
|
||||
});
|
||||
|
||||
ui.projectName.addEventListener("input", () => {
|
||||
state.projectName = ui.projectName.value.trim() || "Neues Rack-Projekt";
|
||||
renderSummary();
|
||||
});
|
||||
|
||||
ui.componentFilter.addEventListener("input", renderLibrary);
|
||||
ui.cableSlack.addEventListener("input", renderCableEstimate);
|
||||
ui.cableFrom.addEventListener("change", renderCableEstimate);
|
||||
ui.cableTo.addEventListener("change", renderCableEstimate);
|
||||
ui.pluginInput.addEventListener("change", importPluginPack);
|
||||
ui.exportBom.addEventListener("click", copyBomCsv);
|
||||
}
|
||||
|
||||
async function loadBootstrap() {
|
||||
const response = await fetch(window.APP_CONFIG.apiBootstrapUrl, {
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Bootstrap request failed: ${response.status}`);
|
||||
}
|
||||
|
||||
state.bootstrap = await response.json();
|
||||
state.components = [...state.bootstrap.components];
|
||||
state.rackTemplateId = state.bootstrap.rackTemplates[0]?.id ?? null;
|
||||
|
||||
renderTemplateOptions();
|
||||
renderAll();
|
||||
}
|
||||
|
||||
function renderAll() {
|
||||
renderSummary();
|
||||
renderLibrary();
|
||||
renderRack();
|
||||
renderStats();
|
||||
renderBom();
|
||||
renderCableSelectors();
|
||||
renderCableEstimate();
|
||||
renderValidation();
|
||||
}
|
||||
|
||||
function renderTemplateOptions() {
|
||||
const options = state.bootstrap.rackTemplates
|
||||
.map((template) => {
|
||||
const selected = template.id === state.rackTemplateId ? " selected" : "";
|
||||
return `<option value="${escapeHtml(template.id)}"${selected}>${escapeHtml(template.name)}</option>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
ui.templateSelect.innerHTML = options;
|
||||
}
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderLibrary() {
|
||||
const rack = getCurrentRackTemplate();
|
||||
if (!rack) {
|
||||
return;
|
||||
}
|
||||
|
||||
const needle = ui.componentFilter.value.trim().toLowerCase();
|
||||
const filtered = state.components.filter((component) => {
|
||||
const compatible = component.rackStandard === rack.rackStandard;
|
||||
const haystack = `${component.name} ${component.category} ${component.partNumber}`.toLowerCase();
|
||||
return compatible && (!needle || haystack.includes(needle));
|
||||
});
|
||||
|
||||
if (filtered.length === 0) {
|
||||
ui.componentLibrary.innerHTML = `<div class="empty-state">Keine passenden Komponenten gefunden.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
ui.componentLibrary.innerHTML = filtered
|
||||
.map(
|
||||
(component) => `
|
||||
<article class="component-card">
|
||||
<div class="component-card__header">
|
||||
<div>
|
||||
<strong>${escapeHtml(component.name)}</strong>
|
||||
<div>${escapeHtml(component.partNumber)}</div>
|
||||
</div>
|
||||
<span class="chip">${component.heightU}U</span>
|
||||
</div>
|
||||
<div class="component-card__meta">
|
||||
<span>${escapeHtml(component.category)}</span>
|
||||
<span>${component.depthMm} mm tief</span>
|
||||
<span>${formatCurrency(component.priceNet, component.currency)}</span>
|
||||
</div>
|
||||
<button type="button" data-action="add-component" data-component-id="${escapeHtml(component.id)}">
|
||||
In Rack einfuegen
|
||||
</button>
|
||||
</article>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
ui.componentLibrary.querySelectorAll("[data-action='add-component']").forEach((button) => {
|
||||
button.addEventListener("click", () => addComponentToRack(button.dataset.componentId));
|
||||
});
|
||||
}
|
||||
|
||||
function addComponentToRack(componentId) {
|
||||
const component = state.components.find((entry) => entry.id === componentId);
|
||||
const rack = getCurrentRackTemplate();
|
||||
if (!component || !rack) {
|
||||
return;
|
||||
}
|
||||
|
||||
const position = findFirstFreePosition(component.heightU);
|
||||
if (position === null) {
|
||||
alert("Keine freie Position fuer diese Komponente im aktuellen Rack.");
|
||||
return;
|
||||
}
|
||||
|
||||
state.placedItems.push({
|
||||
placementId: `p${state.nextPlacementId++}`,
|
||||
componentId: component.id,
|
||||
startU: position,
|
||||
});
|
||||
|
||||
renderAll();
|
||||
}
|
||||
|
||||
function renderRack() {
|
||||
const rack = getCurrentRackTemplate();
|
||||
if (!rack) {
|
||||
return;
|
||||
}
|
||||
|
||||
ui.rackGrid.style.setProperty("--rack-unit-height", "38px");
|
||||
|
||||
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>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
ui.rackGrid.innerHTML = `${slots.join("")}<div class="rack-items-layer" id="rack-items-layer"></div>`;
|
||||
|
||||
ui.rackGrid.querySelectorAll(".rack-slot").forEach((slot) => {
|
||||
slot.addEventListener("dragover", (event) => {
|
||||
event.preventDefault();
|
||||
slot.classList.add("is-drop-target");
|
||||
});
|
||||
slot.addEventListener("dragleave", () => slot.classList.remove("is-drop-target"));
|
||||
slot.addEventListener("drop", (event) => {
|
||||
event.preventDefault();
|
||||
slot.classList.remove("is-drop-target");
|
||||
if (!state.dragPlacementId) {
|
||||
return;
|
||||
}
|
||||
movePlacedItem(state.dragPlacementId, Number(slot.dataset.slotU));
|
||||
});
|
||||
});
|
||||
|
||||
const layer = document.getElementById("rack-items-layer");
|
||||
const rackHeight = rack.totalU * 38;
|
||||
layer.style.height = `${rackHeight}px`;
|
||||
|
||||
state.placedItems.forEach((item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
if (!component) {
|
||||
return;
|
||||
}
|
||||
|
||||
const top = (rack.totalU - (item.startU + component.heightU) + 1) * 38;
|
||||
const height = component.heightU * 38 - 2;
|
||||
const element = document.createElement("article");
|
||||
element.className = "rack-item";
|
||||
element.dataset.standard = component.rackStandard;
|
||||
element.draggable = true;
|
||||
element.style.top = `${top}px`;
|
||||
element.style.height = `${height}px`;
|
||||
element.innerHTML = `
|
||||
<div class="rack-item__header">
|
||||
<div>
|
||||
<strong>${escapeHtml(component.name)}</strong>
|
||||
<div class="rack-item__meta">${component.heightU}U · ${component.depthMm} mm · ${formatCurrency(component.priceNet, component.currency)}</div>
|
||||
</div>
|
||||
<span class="chip">${item.startU}U</span>
|
||||
</div>
|
||||
<div class="rack-item__actions">
|
||||
<button type="button" data-action="move-up">+1U</button>
|
||||
<button type="button" data-action="move-down">-1U</button>
|
||||
<button type="button" data-action="remove">Entfernen</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
element.addEventListener("dragstart", () => {
|
||||
state.dragPlacementId = item.placementId;
|
||||
element.classList.add("is-dragging");
|
||||
});
|
||||
element.addEventListener("dragend", () => {
|
||||
state.dragPlacementId = null;
|
||||
element.classList.remove("is-dragging");
|
||||
});
|
||||
element.querySelector("[data-action='move-up']").addEventListener("click", () => movePlacedItem(item.placementId, item.startU + 1));
|
||||
element.querySelector("[data-action='move-down']").addEventListener("click", () => movePlacedItem(item.placementId, item.startU - 1));
|
||||
element.querySelector("[data-action='remove']").addEventListener("click", () => {
|
||||
state.placedItems = state.placedItems.filter((entry) => entry.placementId !== item.placementId);
|
||||
renderAll();
|
||||
});
|
||||
|
||||
layer.appendChild(element);
|
||||
});
|
||||
}
|
||||
|
||||
function movePlacedItem(placementId, requestedStartU) {
|
||||
const rack = getCurrentRackTemplate();
|
||||
const item = state.placedItems.find((entry) => entry.placementId === placementId);
|
||||
const component = item ? getComponent(item.componentId) : null;
|
||||
if (!rack || !item || !component) {
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedStart = Math.max(1, Math.min(requestedStartU, rack.totalU - component.heightU + 1));
|
||||
const occupied = state.placedItems.some((entry) => {
|
||||
if (entry.placementId === placementId) {
|
||||
return false;
|
||||
}
|
||||
const other = getComponent(entry.componentId);
|
||||
if (!other) {
|
||||
return false;
|
||||
}
|
||||
return rangesOverlap(normalizedStart, component.heightU, entry.startU, other.heightU);
|
||||
});
|
||||
|
||||
if (occupied) {
|
||||
return;
|
||||
}
|
||||
|
||||
item.startU = normalizedStart;
|
||||
renderAll();
|
||||
}
|
||||
|
||||
function renderStats() {
|
||||
const rack = getCurrentRackTemplate();
|
||||
if (!rack) {
|
||||
return;
|
||||
}
|
||||
|
||||
const usedU = state.placedItems.reduce((sum, item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
return sum + (component?.heightU ?? 0);
|
||||
}, 0);
|
||||
|
||||
const usedWeight = state.placedItems.reduce((sum, item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
return sum + (component?.weightKg ?? 0);
|
||||
}, 0);
|
||||
|
||||
const usedPower = state.placedItems.reduce((sum, item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
return sum + (component?.powerW ?? 0);
|
||||
}, 0);
|
||||
|
||||
ui.projectStats.innerHTML = `
|
||||
<div class="stat-card">
|
||||
<span>Belegte U</span>
|
||||
<strong>${usedU} / ${rack.totalU}</strong>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span>Freie U</span>
|
||||
<strong>${rack.totalU - usedU}</strong>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span>Gewicht</span>
|
||||
<strong>${usedWeight.toFixed(1)} / ${rack.maxWeightKg} kg</strong>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span>Leistung</span>
|
||||
<strong>${usedPower} W</strong>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderBom() {
|
||||
const aggregated = new Map();
|
||||
|
||||
state.placedItems.forEach((item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
if (!component) {
|
||||
return;
|
||||
}
|
||||
|
||||
const key = component.partNumber;
|
||||
if (!aggregated.has(key)) {
|
||||
aggregated.set(key, {
|
||||
quantity: 0,
|
||||
name: component.name,
|
||||
manufacturer: component.manufacturer,
|
||||
partNumber: component.partNumber,
|
||||
currency: component.currency,
|
||||
priceNet: component.priceNet,
|
||||
});
|
||||
}
|
||||
|
||||
aggregated.get(key).quantity += 1;
|
||||
});
|
||||
|
||||
const lines = Array.from(aggregated.values());
|
||||
if (lines.length === 0) {
|
||||
ui.bomOutput.innerHTML = `<div class="empty-state">Noch keine Komponenten platziert.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
ui.bomOutput.innerHTML = lines
|
||||
.map((line) => {
|
||||
const total = line.quantity * line.priceNet;
|
||||
return `
|
||||
<div class="bom-line">
|
||||
<div>
|
||||
<strong>${escapeHtml(line.name)}</strong>
|
||||
<div>${escapeHtml(line.partNumber)} · ${escapeHtml(line.manufacturer)}</div>
|
||||
</div>
|
||||
<div>${line.quantity} × ${formatCurrency(total, line.currency)}</div>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderCableSelectors() {
|
||||
const options = ['<option value="">Bitte waehlen</option>']
|
||||
.concat(
|
||||
state.placedItems.map((item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
if (!component) {
|
||||
return "";
|
||||
}
|
||||
return `<option value="${escapeHtml(item.placementId)}">${escapeHtml(component.name)} @ ${item.startU}U</option>`;
|
||||
})
|
||||
)
|
||||
.join("");
|
||||
|
||||
ui.cableFrom.innerHTML = options;
|
||||
ui.cableTo.innerHTML = options;
|
||||
}
|
||||
|
||||
function renderCableEstimate() {
|
||||
const fromId = ui.cableFrom.value;
|
||||
const toId = ui.cableTo.value;
|
||||
const slackPercent = Number(ui.cableSlack.value || 0);
|
||||
|
||||
if (!fromId || !toId || fromId === toId) {
|
||||
ui.cableOutput.textContent = "Fuer eine Schaetzung zwei verschiedene Komponenten auswaehlen.";
|
||||
return;
|
||||
}
|
||||
|
||||
const from = state.placedItems.find((item) => item.placementId === fromId);
|
||||
const to = state.placedItems.find((item) => item.placementId === toId);
|
||||
const rack = getCurrentRackTemplate();
|
||||
const fromComponent = from ? getComponent(from.componentId) : null;
|
||||
const toComponent = to ? getComponent(to.componentId) : null;
|
||||
|
||||
if (!from || !to || !rack || !fromComponent || !toComponent) {
|
||||
ui.cableOutput.textContent = "Kabelschaetzung momentan nicht verfuegbar.";
|
||||
return;
|
||||
}
|
||||
|
||||
const verticalMm = Math.abs(from.startU - to.startU) * 44.45;
|
||||
const depthAllowance = Math.min(rack.usableDepthMm * 0.35, 280);
|
||||
const sideAllowance = estimateSideAllowance(fromComponent, toComponent);
|
||||
const rawLength = verticalMm + depthAllowance + sideAllowance;
|
||||
const withSlack = rawLength * (1 + slackPercent / 100);
|
||||
const recommended = recommendCableLength(withSlack);
|
||||
|
||||
ui.cableOutput.innerHTML = `
|
||||
Geschaetzt: <strong>${Math.round(rawLength)} mm</strong><br>
|
||||
Mit Reserve: <strong>${Math.round(withSlack)} mm</strong><br>
|
||||
Bestelllaenge: <strong>${recommended.toFixed(2)} m</strong>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderValidation() {
|
||||
const rack = getCurrentRackTemplate();
|
||||
if (!rack) {
|
||||
return;
|
||||
}
|
||||
|
||||
const notes = [];
|
||||
const usedU = state.placedItems.reduce((sum, item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
return sum + (component?.heightU ?? 0);
|
||||
}, 0);
|
||||
const usedWeight = state.placedItems.reduce((sum, item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
return sum + (component?.weightKg ?? 0);
|
||||
}, 0);
|
||||
|
||||
if (usedU <= rack.totalU) {
|
||||
notes.push({ className: "ok", text: `U-Belegung ist gueltig. ${rack.totalU - usedU}U frei.` });
|
||||
} else {
|
||||
notes.push({ className: "warn", text: "Rack ist ueberbelegt." });
|
||||
}
|
||||
|
||||
if (usedWeight <= rack.maxWeightKg) {
|
||||
notes.push({ className: "ok", text: `Gewicht innerhalb der Rack-Grenze (${usedWeight.toFixed(1)} kg).` });
|
||||
} else {
|
||||
notes.push({ className: "warn", text: `Gewicht ueberschreitet die Rack-Grenze von ${rack.maxWeightKg} kg.` });
|
||||
}
|
||||
|
||||
const tooDeep = state.placedItems
|
||||
.map((item) => ({ item, component: getComponent(item.componentId) }))
|
||||
.filter(({ component }) => component && component.depthMm > rack.usableDepthMm);
|
||||
|
||||
if (tooDeep.length === 0) {
|
||||
notes.push({ className: "ok", text: "Keine Tiefenkonflikte erkannt." });
|
||||
} else {
|
||||
tooDeep.forEach(({ component }) => {
|
||||
notes.push({ className: "warn", text: `${component.name} ist tiefer als das Rack erlaubt.` });
|
||||
});
|
||||
}
|
||||
|
||||
ui.validationOutput.innerHTML = notes.map((note) => `<li class="${note.className}">${escapeHtml(note.text)}</li>`).join("");
|
||||
}
|
||||
|
||||
function importPluginPack(event) {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
try {
|
||||
const payload = JSON.parse(String(reader.result || "{}"));
|
||||
validatePluginPack(payload);
|
||||
const imported = payload.components.map((component, index) => ({
|
||||
...component,
|
||||
id: component.id || `plugin-${Date.now()}-${index}`,
|
||||
}));
|
||||
state.components = deduplicateComponents([...state.components, ...imported]);
|
||||
renderAll();
|
||||
ui.pluginInput.value = "";
|
||||
alert(`Plugin-Pack "${payload.name}" importiert.`);
|
||||
} catch (error) {
|
||||
alert(`Plugin-Import fehlgeschlagen: ${error.message}`);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function validatePluginPack(payload) {
|
||||
if (!payload || typeof payload !== "object") {
|
||||
throw new Error("Ungueltiges JSON.");
|
||||
}
|
||||
["manifestVersion", "name", "version", "components"].forEach((key) => {
|
||||
if (!(key in payload)) {
|
||||
throw new Error(`Pflichtfeld fehlt: ${key}`);
|
||||
}
|
||||
});
|
||||
if (!Array.isArray(payload.components) || payload.components.length === 0) {
|
||||
throw new Error("Plugin enthaelt keine Komponenten.");
|
||||
}
|
||||
payload.components.forEach((component) => {
|
||||
["name", "partNumber", "rackStandard", "heightU", "depthMm", "priceNet", "currency"].forEach((key) => {
|
||||
if (!(key in component)) {
|
||||
throw new Error(`Komponente unvollstaendig: ${component.name || "unbekannt"} (${key} fehlt)`);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function copyBomCsv() {
|
||||
const rows = [["quantity", "manufacturer", "partNumber", "name", "unitPrice", "currency", "totalPrice"]];
|
||||
const aggregated = new Map();
|
||||
|
||||
state.placedItems.forEach((item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
if (!component) {
|
||||
return;
|
||||
}
|
||||
const key = component.partNumber;
|
||||
if (!aggregated.has(key)) {
|
||||
aggregated.set(key, { quantity: 0, component });
|
||||
}
|
||||
aggregated.get(key).quantity += 1;
|
||||
});
|
||||
|
||||
aggregated.forEach(({ quantity, component }) => {
|
||||
rows.push([
|
||||
String(quantity),
|
||||
component.manufacturer,
|
||||
component.partNumber,
|
||||
component.name,
|
||||
String(component.priceNet),
|
||||
component.currency,
|
||||
String(quantity * component.priceNet),
|
||||
]);
|
||||
});
|
||||
|
||||
const csv = rows.map((row) => row.map(csvEscape).join(",")).join("\n");
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(csv);
|
||||
ui.exportBom.textContent = "CSV kopiert";
|
||||
window.setTimeout(() => {
|
||||
ui.exportBom.textContent = "CSV kopieren";
|
||||
}, 1600);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("CSV konnte nicht in die Zwischenablage kopiert werden.");
|
||||
}
|
||||
}
|
||||
|
||||
function findFirstFreePosition(heightU) {
|
||||
const rack = getCurrentRackTemplate();
|
||||
if (!rack) {
|
||||
return null;
|
||||
}
|
||||
|
||||
for (let start = 1; start <= rack.totalU - heightU + 1; start += 1) {
|
||||
const blocked = state.placedItems.some((item) => {
|
||||
const component = getComponent(item.componentId);
|
||||
return component && rangesOverlap(start, heightU, item.startU, component.heightU);
|
||||
});
|
||||
if (!blocked) {
|
||||
return start;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function rangesOverlap(startA, heightA, startB, heightB) {
|
||||
const endA = startA + heightA - 1;
|
||||
const endB = startB + heightB - 1;
|
||||
return startA <= endB && startB <= endA;
|
||||
}
|
||||
|
||||
function getCurrentRackTemplate() {
|
||||
return state.bootstrap?.rackTemplates.find((template) => template.id === state.rackTemplateId) ?? null;
|
||||
}
|
||||
|
||||
function getComponent(componentId) {
|
||||
return state.components.find((component) => component.id === componentId) ?? null;
|
||||
}
|
||||
|
||||
function deduplicateComponents(components) {
|
||||
const byId = new Map();
|
||||
components.forEach((component) => {
|
||||
byId.set(component.id, component);
|
||||
});
|
||||
return Array.from(byId.values());
|
||||
}
|
||||
|
||||
function estimateSideAllowance(fromComponent, toComponent) {
|
||||
const fromSide = fromComponent.ports?.[0]?.side ?? "front";
|
||||
const toSide = toComponent.ports?.[0]?.side ?? "front";
|
||||
return fromSide === toSide ? 160 : 420;
|
||||
}
|
||||
|
||||
function recommendCableLength(lengthMm) {
|
||||
const options = [0.25, 0.5, 1, 1.5, 2, 3, 5, 7.5, 10];
|
||||
const meters = lengthMm / 1000;
|
||||
return options.find((option) => option >= meters) ?? Math.ceil(meters);
|
||||
}
|
||||
|
||||
function formatCurrency(value, currency) {
|
||||
return new Intl.NumberFormat("de-DE", {
|
||||
style: "currency",
|
||||
currency: currency || "EUR",
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function csvEscape(value) {
|
||||
const stringValue = String(value ?? "");
|
||||
if (stringValue.includes(",") || stringValue.includes('"') || stringValue.includes("\n")) {
|
||||
return `"${stringValue.replaceAll('"', '""')}"`;
|
||||
}
|
||||
return stringValue;
|
||||
}
|
||||
142
public/index.php
Normal file
142
public/index.php
Normal file
@@ -0,0 +1,142 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
require_once dirname(__DIR__) . '/config/fileload.php';
|
||||
|
||||
$pageTitle = 'code.it Rack Planner';
|
||||
$assetVersion = defined('ASSET_VERSION') ? (string) ASSET_VERSION : 'dev';
|
||||
$publicBase = rtrim((string)($GLOBALS['app_public_base'] ?? ''), '/');
|
||||
$assetBase = $publicBase === '' ? '' : $publicBase;
|
||||
$apiBase = $publicBase === '' ? '' : $publicBase;
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><?= htmlspecialchars($pageTitle, ENT_QUOTES) ?></title>
|
||||
<meta name="description" content="Visual rack planning prototype for 10-inch and 19-inch installations.">
|
||||
<link rel="stylesheet" href="<?= htmlspecialchars($assetBase . '/assets/app.css?v=' . rawurlencode($assetVersion), ENT_QUOTES) ?>">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="hero">
|
||||
<div class="hero__copy">
|
||||
<p class="eyebrow">code.it concept workspace</p>
|
||||
<h1>Rack Planner</h1>
|
||||
<p class="hero__lead">
|
||||
Browserbasierter Arbeitsstand fuer die Planung von <strong>10"</strong> und <strong>19"</strong> Racks.
|
||||
Die aktuelle Domain ist nur Konzeptionsumgebung, nicht die spaetere Produkt-Domain.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero__meta">
|
||||
<div class="meta-card">
|
||||
<span class="meta-card__label">Stand</span>
|
||||
<strong>MVP Prototype</strong>
|
||||
</div>
|
||||
<div class="meta-card">
|
||||
<span class="meta-card__label">Fokus</span>
|
||||
<strong>Editor, BOM, Kabel</strong>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="workspace">
|
||||
<section class="panel panel--controls">
|
||||
<div class="panel__heading">
|
||||
<h2>Projekt</h2>
|
||||
<p>Rack-Vorlage, Bibliothek und Plugin-Import.</p>
|
||||
</div>
|
||||
|
||||
<label class="field">
|
||||
<span>Rack-Vorlage</span>
|
||||
<select id="rack-template-select"></select>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Projektname</span>
|
||||
<input id="project-name" type="text" value="Neues Rack-Projekt">
|
||||
</label>
|
||||
|
||||
<div class="library-toolbar">
|
||||
<label class="field">
|
||||
<span>Komponenten filtern</span>
|
||||
<input id="component-filter" type="search" placeholder="z. B. Switch, UPS, Patch Panel">
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Plugin-Pack laden</span>
|
||||
<input id="plugin-input" type="file" accept=".json,application/json">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="library" id="component-library"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel panel--editor">
|
||||
<div class="panel__heading">
|
||||
<h2>Rack-Editor</h2>
|
||||
<p>Komponenten koennen per Drag-and-Drop verschoben werden. Jede Position referenziert eine U-Einheit.</p>
|
||||
</div>
|
||||
|
||||
<div class="rack-stage">
|
||||
<div class="rack-summary" id="rack-summary"></div>
|
||||
<div class="rack-grid" id="rack-grid" aria-live="polite"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="panel panel--sidebar">
|
||||
<div class="panel__heading">
|
||||
<h2>Auswertung</h2>
|
||||
<p>Stueckliste, Platzreserve und Kabelschaetzung.</p>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid" id="project-stats"></div>
|
||||
|
||||
<section class="subpanel">
|
||||
<div class="subpanel__header">
|
||||
<h3>Stueckliste</h3>
|
||||
<button id="export-bom" type="button">CSV kopieren</button>
|
||||
</div>
|
||||
<div id="bom-output" class="list-output"></div>
|
||||
</section>
|
||||
|
||||
<section class="subpanel">
|
||||
<div class="subpanel__header">
|
||||
<h3>Kabel</h3>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="field">
|
||||
<span>Von</span>
|
||||
<select id="cable-from"></select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Zu</span>
|
||||
<select id="cable-to"></select>
|
||||
</label>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>Reserve in %</span>
|
||||
<input id="cable-slack" type="number" min="0" max="100" step="5" value="20">
|
||||
</label>
|
||||
<div id="cable-output" class="notice"></div>
|
||||
</section>
|
||||
|
||||
<section class="subpanel">
|
||||
<div class="subpanel__header">
|
||||
<h3>Hinweise</h3>
|
||||
</div>
|
||||
<ul class="notes" id="validation-output"></ul>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.APP_CONFIG = {
|
||||
apiBootstrapUrl: <?= json_encode($apiBase . '/api/index.php?action=bootstrap', JSON_UNESCAPED_SLASHES) ?>,
|
||||
assetVersion: <?= json_encode($assetVersion, JSON_UNESCAPED_SLASHES) ?>
|
||||
};
|
||||
</script>
|
||||
<script src="<?= htmlspecialchars($assetBase . '/assets/app.js?v=' . rawurlencode($assetVersion), ENT_QUOTES) ?>" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
151
src/data/components.json
Normal file
151
src/data/components.json
Normal file
@@ -0,0 +1,151 @@
|
||||
[
|
||||
{
|
||||
"id": "patchpanel-24-cat6a",
|
||||
"name": "Patch Panel 24 Port Cat6A",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "PP-24-C6A-1U",
|
||||
"category": "patch_panel",
|
||||
"rackStandard": "19_inch",
|
||||
"heightU": 1,
|
||||
"depthMm": 95,
|
||||
"weightKg": 1.2,
|
||||
"priceNet": 79,
|
||||
"currency": "EUR",
|
||||
"powerW": 0,
|
||||
"ports": [
|
||||
{ "name": "Front Ports", "side": "front", "offsetYmm": 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "switch-24-gbe",
|
||||
"name": "24 Port Gigabit Switch",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "SW-24-GBE-1U",
|
||||
"category": "switch",
|
||||
"rackStandard": "19_inch",
|
||||
"heightU": 1,
|
||||
"depthMm": 220,
|
||||
"weightKg": 2.4,
|
||||
"priceNet": 320,
|
||||
"currency": "EUR",
|
||||
"powerW": 35,
|
||||
"ports": [
|
||||
{ "name": "Uplink", "side": "front", "offsetYmm": 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "pdu-8-way",
|
||||
"name": "PDU 8-way 1U",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "PDU-8-1U",
|
||||
"category": "pdu",
|
||||
"rackStandard": "19_inch",
|
||||
"heightU": 1,
|
||||
"depthMm": 60,
|
||||
"weightKg": 1.6,
|
||||
"priceNet": 119,
|
||||
"currency": "EUR",
|
||||
"powerW": 0,
|
||||
"ports": [
|
||||
{ "name": "Power Out", "side": "rear", "offsetYmm": 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "ups-lineinteractive-2u",
|
||||
"name": "UPS Line-Interactive 2U",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "UPS-LI-2U",
|
||||
"category": "ups",
|
||||
"rackStandard": "19_inch",
|
||||
"heightU": 2,
|
||||
"depthMm": 420,
|
||||
"weightKg": 18,
|
||||
"priceNet": 499,
|
||||
"currency": "EUR",
|
||||
"powerW": 900,
|
||||
"ports": [
|
||||
{ "name": "Power In", "side": "rear", "offsetYmm": 45 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "shelf-1u",
|
||||
"name": "Rack Shelf 1U",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "SHELF-1U",
|
||||
"category": "shelf",
|
||||
"rackStandard": "19_inch",
|
||||
"heightU": 1,
|
||||
"depthMm": 350,
|
||||
"weightKg": 3.5,
|
||||
"priceNet": 49,
|
||||
"currency": "EUR",
|
||||
"powerW": 0,
|
||||
"ports": []
|
||||
},
|
||||
{
|
||||
"id": "blank-panel-1u",
|
||||
"name": "Blank Panel 1U",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "BLANK-1U",
|
||||
"category": "blank_panel",
|
||||
"rackStandard": "10_inch",
|
||||
"heightU": 1,
|
||||
"depthMm": 20,
|
||||
"weightKg": 0.2,
|
||||
"priceNet": 9,
|
||||
"currency": "EUR",
|
||||
"powerW": 0,
|
||||
"ports": []
|
||||
},
|
||||
{
|
||||
"id": "switch-8-10inch",
|
||||
"name": "8 Port Switch 10\"",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "SW-8-10-1U",
|
||||
"category": "switch",
|
||||
"rackStandard": "10_inch",
|
||||
"heightU": 1,
|
||||
"depthMm": 140,
|
||||
"weightKg": 1.1,
|
||||
"priceNet": 139,
|
||||
"currency": "EUR",
|
||||
"powerW": 18,
|
||||
"ports": [
|
||||
{ "name": "Front Ports", "side": "front", "offsetYmm": 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "patchpanel-12-10inch",
|
||||
"name": "Patch Panel 12 Port 10\"",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "PP-12-10-1U",
|
||||
"category": "patch_panel",
|
||||
"rackStandard": "10_inch",
|
||||
"heightU": 1,
|
||||
"depthMm": 85,
|
||||
"weightKg": 0.9,
|
||||
"priceNet": 55,
|
||||
"currency": "EUR",
|
||||
"powerW": 0,
|
||||
"ports": [
|
||||
{ "name": "Front Ports", "side": "front", "offsetYmm": 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "mini-ups-10inch",
|
||||
"name": "Mini UPS 10\" 2U",
|
||||
"manufacturer": "Generic",
|
||||
"partNumber": "UPS-10-2U",
|
||||
"category": "ups",
|
||||
"rackStandard": "10_inch",
|
||||
"heightU": 2,
|
||||
"depthMm": 240,
|
||||
"weightKg": 9.8,
|
||||
"priceNet": 269,
|
||||
"currency": "EUR",
|
||||
"powerW": 400,
|
||||
"ports": [
|
||||
{ "name": "Power In", "side": "rear", "offsetYmm": 45 }
|
||||
]
|
||||
}
|
||||
]
|
||||
34
src/data/rack-templates.json
Normal file
34
src/data/rack-templates.json
Normal file
@@ -0,0 +1,34 @@
|
||||
[
|
||||
{
|
||||
"id": "rack-10-wall-9u",
|
||||
"name": "10\" Wall Rack 9U",
|
||||
"rackStandard": "10_inch",
|
||||
"totalU": 9,
|
||||
"usableDepthMm": 260,
|
||||
"maxWeightKg": 35
|
||||
},
|
||||
{
|
||||
"id": "rack-10-wall-12u",
|
||||
"name": "10\" Wall Rack 12U",
|
||||
"rackStandard": "10_inch",
|
||||
"totalU": 12,
|
||||
"usableDepthMm": 300,
|
||||
"maxWeightKg": 45
|
||||
},
|
||||
{
|
||||
"id": "rack-19-floor-24u",
|
||||
"name": "19\" Floor Rack 24U",
|
||||
"rackStandard": "19_inch",
|
||||
"totalU": 24,
|
||||
"usableDepthMm": 800,
|
||||
"maxWeightKg": 600
|
||||
},
|
||||
{
|
||||
"id": "rack-19-floor-42u",
|
||||
"name": "19\" Floor Rack 42U",
|
||||
"rackStandard": "19_inch",
|
||||
"totalU": 42,
|
||||
"usableDepthMm": 1000,
|
||||
"maxWeightKg": 1000
|
||||
}
|
||||
]
|
||||
63
src/functions.php
Normal file
63
src/functions.php
Normal file
@@ -0,0 +1,63 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
function app_base_path(string $path = ''): string
|
||||
{
|
||||
$base = dirname(__DIR__);
|
||||
if ($path === '') {
|
||||
return $base;
|
||||
}
|
||||
|
||||
return $base . '/' . ltrim($path, '/');
|
||||
}
|
||||
|
||||
function app_data_path(string $path = ''): string
|
||||
{
|
||||
return app_base_path('src/data' . ($path !== '' ? '/' . ltrim($path, '/') : ''));
|
||||
}
|
||||
|
||||
function app_load_json_file(string $path): array
|
||||
{
|
||||
if (!is_file($path)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$content = file_get_contents($path);
|
||||
if ($content === false) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$decoded = json_decode($content, true);
|
||||
return is_array($decoded) ? $decoded : [];
|
||||
}
|
||||
|
||||
function app_get_catalog_components(): array
|
||||
{
|
||||
return app_load_json_file(app_data_path('components.json'));
|
||||
}
|
||||
|
||||
function app_get_rack_templates(): array
|
||||
{
|
||||
return app_load_json_file(app_data_path('rack-templates.json'));
|
||||
}
|
||||
|
||||
function app_bootstrap_payload(): array
|
||||
{
|
||||
return [
|
||||
'app' => [
|
||||
'name' => 'code.it Rack Planner',
|
||||
'environment' => defined('APP_ENV') ? APP_ENV : 'prod',
|
||||
'baseUrl' => $GLOBALS['app_base_url'] ?? '',
|
||||
'apiBaseUrl' => $GLOBALS['app_api_base'] ?? '',
|
||||
'projectDomainNote' => 'Current domain is a concept workspace only, not the final product domain.',
|
||||
],
|
||||
'rackTemplates' => app_get_rack_templates(),
|
||||
'components' => app_get_catalog_components(),
|
||||
'pluginFormat' => [
|
||||
'version' => 1,
|
||||
'acceptedExtensions' => ['json'],
|
||||
'requiredKeys' => ['manifestVersion', 'name', 'version', 'components'],
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user