143 lines
5.7 KiB
PHP
143 lines
5.7 KiB
PHP
<?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>
|