troy-grunt/netwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css aufgeräumt

Browse Source
This commit is contained in:
fixclean
2026-02-12 08:35:53 +01:00
parent fb4ee93b17
commit b469a7ab33
5 changed files with 507 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
app/modules/device_types/edit.php
View File

@@ -120,10 +120,11 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
</div>
<?php if ($isEdit && $deviceType['image_path']): ?>
<div class="form-group">
<div class="form-group form-file-preview">
<label>Aktuelles Bild:</label>
<img src="<?php echo htmlspecialchars($deviceType['image_path']); ?>"
alt="Gerätetyp-Bild" style="max-width: 300px; border: 1px solid #ddd; padding: 10px;">
<img class="device-type-current-image"
src="<?php echo htmlspecialchars($deviceType['image_path']); ?>"
alt="Gerätetyp-Bild">
</div>
<?php endif; ?>
</fieldset>
@@ -131,6 +132,29 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
<fieldset>
<legend>Gerätedesign (SVG-Editor)</legend>
<div class="shape-meta-controls">
<div class="shape-meta-column">
<label for="shape-meta-form-factor">Formfaktor</label>
<select id="shape-meta-form-factor">
<option value="other">Andere/Breiter</option>
<option value="10">10 Zoll Front</option>
<option value="19">19 Zoll Front</option>
</select>
</div>
<div class="shape-meta-column">
<label for="shape-meta-rack-height">Höhe (HE)</label>
<input type="number" id="shape-meta-rack-height" min="1" step="1" value="1">
</div>
<div class="shape-meta-column">
<label for="shape-meta-canvas-width">Zeichenfläche Breite (px)</label>
<input type="number" id="shape-meta-canvas-width" min="200" step="10" value="800">
</div>
<div class="shape-meta-column">
<label for="shape-meta-canvas-height">Zeichenfläche Höhe (px)</label>
<input type="number" id="shape-meta-canvas-height" min="120" step="10" value="360">
</div>
</div>
<input type="hidden" name="shape_definition" id="shape-definition" value="<?php echo htmlspecialchars($shapeDefinition); ?>">
<div class="shape-editor" id="device-type-shape-editor">
@@ -276,7 +300,7 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
</tbody>
</table>
<div style="margin-top: 15px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<div class="port-actions">
<button type="button" class="button" id="add-port-row">+ Port hinzufügen</button>
<small>Ports können nach dem ersten Speichern jederzeit einzeln bearbeitet und gelöscht werden.</small>
</div>
@@ -297,263 +321,6 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
</form>
</div>
<style>
.device-type-edit {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.edit-form {
background: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.edit-form fieldset {
margin: 20px 0;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.edit-form legend {
padding: 0 10px;
font-weight: bold;
font-size: 1.1em;
}
.form-group {
margin: 15px 0;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
}
.form-group textarea {
resize: vertical;
}
.form-group small {
display: block;
margin-top: 5px;
color: #666;
}
.required {
color: red;
}
.port-definition-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.port-definition-table th,
.port-definition-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
vertical-align: middle;
}
.port-definition-table th {
background: #f5f5f5;
}
.port-definition-table input[type="text"],
.port-definition-table select {
width: 100%;
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
}
.form-actions {
display: flex;
gap: 10px;
margin-top: 30px;
}
.shape-editor {
display: grid;
grid-template-columns: 180px 1fr 320px;
gap: 16px;
margin-top: 16px;
}
.shape-editor-canvas {
border: 1px solid #ddd;
border-radius: 6px;
background: white;
padding: 12px;
}
.shape-editor-canvas svg {
width: 100%;
min-height: 320px;
display: block;
font-family: inherit;
cursor: crosshair;
}
.shape-toolbox,
.shape-overlay {
border: 1px solid #ddd;
border-radius: 6px;
padding: 12px;
background: #fff;
}
.shape-toolbox h4,
.shape-overlay h4 {
margin: 0 0 8px;
}
.shape-tool-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.shape-tool {
text-align: left;
border: 1px solid #bbb;
background: #f7f7f7;
color: #222;
padding: 10px;
border-radius: 4px;
cursor: grab;
}
.shape-tool:active {
cursor: grabbing;
}
.shape-tool.is-active {
background: #007bff;
color: #fff;
border-color: #0056b3;
}
.shape-editor-canvas.drag-over {
outline: 2px dashed #007bff;
outline-offset: 2px;
}
.shape-object {
cursor: move;
}
#shape-canvas.shape-tool-active {
cursor: crosshair;
}
.shape-object.is-selected {
filter: drop-shadow(0 0 5px rgba(0, 123, 255, 0.7));
}
.shape-object.is-port {
stroke-dasharray: 4 2;
}
.shape-overlay-form .shape-control-grid {
display: grid;
grid-template-columns: repeat(2, minmax(120px, 1fr));
gap: 8px;
}
.shape-overlay-form label {
font-size: 0.82rem;
display: flex;
flex-direction: column;
gap: 4px;
}
.shape-overlay-form input[type="number"],
.shape-overlay-form input[type="text"],
.shape-overlay-form input[type="color"] {
width: 100%;
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
}
.shape-port-settings {
margin-top: 10px;
}
.inline-checkbox {
flex-direction: row !important;
align-items: center;
gap: 6px !important;
}
.shape-overlay-actions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
.shape-overlay-empty {
margin: 6px 0 0;
color: #666;
font-size: 0.9rem;
}
.hint {
font-size: 0.8rem;
color: #666;
margin: 8px 0 0;
}
@media (max-width: 1100px) {
.shape-editor {
grid-template-columns: 1fr;
}
}
.button {
padding: 10px 15px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 0.95em;
}
.button-primary {
background: #28a745;
}
.button-danger {
background: #dc3545;
}
.button:hover {
opacity: 0.8;
}
</style>
<script>
function addPortRow() {