updated editors + new parameter in service file

This commit is contained in:
2026-10-05 16:48:29 +02:00
parent 2e311119b0
commit 1a28a27b5e
8 changed files with 496 additions and 87 deletions
+65 -34
View File
@@ -1,44 +1,75 @@
{% extends "base.html" %}
{% block title %}Bearbeite {{ filename }}{% endblock %}
{% block title %}Lok-Editor – {{ filename }}{% endblock %}
{% block content %}
<div class="container my-5">
<h1>Bearbeite Konfiguration</h1>
<h4 class="text-muted mb-4">{{ filename }}</h4>
{% if error %}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ error }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="editor-shell" data-editor="locomotive">
<div class="editor-hero">
<div>
<span class="editor-kicker">MK Hub Konfiguration</span>
<h1>Lok zusammenstellen</h1>
<p>{{ filename }} · Bauteile auf die gewünschten Kanäle ziehen und anschließend konfigurieren.</p>
</div>
{% endif %}
<form method="POST">
<div class="mb-3">
<label for="config_content" class="form-label">JSON-Inhalt (achte auf gültiges Format):</label>
<textarea class="form-control font-monospace" id="config_content" name="config_content" rows="20">{{ content }}</textarea>
<div class="d-flex gap-2 flex-wrap">
<button type="button" class="btn btn-outline-dark" id="show-raw-json">JSON anzeigen</button>
<button type="submit" form="config-form" class="btn btn-danger px-4">Konfiguration speichern</button>
</div>
<div class="d-flex gap-3">
<button type="submit" class="btn btn-primary btn-lg px-5">Speichern</button>
<a href="{{ url_for('admin.admin') }}" class="btn btn-outline-secondary btn-lg px-5">Abbrechen</a>
</div>
{% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
<form id="config-form" method="POST">
<textarea class="d-none" id="config_content" name="config_content">{{ content }}</textarea>
<section class="editor-panel mb-4">
<div class="editor-section-title"><span>01</span><div><h2>Lok & Hub</h2><p>Grunddaten der Steuerung</p></div></div>
<div class="row g-3">
<div class="col-md-5"><label class="form-label">Name der Lok</label><input id="cfg-name" class="form-control form-control-lg"></div>
<div class="col-md-2"><label class="form-label">Hub-ID</label><input id="cfg-hub-id" type="number" min="0" max="2" class="form-control form-control-lg"></div>
<div class="col-md-2"><label class="form-label">Hub-Typ</label><select id="cfg-hub-type" class="form-select form-select-lg"><option value="4channel">4 Kanäle</option><option value="6channel">6 Kanäle</option></select></div>
<div class="col-md-3"><label class="form-label">Bilddatei</label><input id="cfg-image" class="form-control form-control-lg" placeholder="lok.jpg"></div>
</div>
</section>
<div class="row g-4">
<div class="col-xl-3">
<section class="editor-panel h-100">
<div class="editor-section-title compact"><span>02</span><div><h2>Bauteile</h2><p>Auf einen Kanal ziehen</p></div></div>
<div id="channel-palette" class="component-palette">
<div class="component-chip motor" draggable="true" data-component="motor"><strong>Motor</strong><small>Richtung & Tempo</small></div>
<div class="component-chip light" draggable="true" data-component="light"><strong>Licht</strong><small>Ein- und ausschaltbar</small></div>
<div class="component-chip fogger" draggable="true" data-component="fogger"><strong>Dampf</strong><small>Nebler / Raucherzeuger</small></div>
<div class="component-chip switch" draggable="true" data-component="switch"><strong>Schalter</strong><small>Universeller Ausgang</small></div>
</div>
<p class="small text-muted mt-3 mb-0">Ein belegter Kanal kann ersetzt oder über „Entfernen“ geleert werden.</p>
</section>
</div>
<div class="col-xl-9">
<section class="editor-panel">
<div class="editor-section-title compact"><span>03</span><div><h2>Hub-Belegung</h2><p id="channel-count-label">Kanäle A–D</p></div></div>
<div id="channel-grid" class="channel-grid"></div>
</section>
</div>
</div>
<section class="editor-panel mt-4">
<div class="editor-section-title"><span>04</span><div><h2>Lok-Sounds</h2><p>Optionale Tasten für Pfeifen, Motorgeräusche und Signale</p></div><button type="button" id="add-loco-sound" class="btn btn-outline-danger ms-auto">+ Sound</button></div>
<div id="loco-sound-list" class="sound-entry-list"></div>
</section>
<div class="d-flex justify-content-between align-items-center mt-4">
<a href="{{ url_for('admin.admin') }}" class="btn btn-outline-secondary">Abbrechen</a>
<button type="submit" class="btn btn-danger btn-lg px-5">Speichern</button>
</div>
</form>
<div class="mt-5">
<h5>Hilfe – Beispielstruktur</h5>
<pre class="bg-light p-3 rounded">
{
"name": "BR 01 Dampflok",
"image": "br01.jpg",
"hub_id": 0,
"hub_type": "6channel",
"channels": [
{"port": "A", "type": "motor", "name": "Fahrtrichtung", "invert": false},
{"port": "C", "type": "light", "name": "Spitzenlicht", "on_value": 1.0}
]
}
</pre>
</div>
<div class="modal fade" id="rawJsonModal" tabindex="-1"><div class="modal-dialog modal-xl"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Erweiterte JSON-Ansicht</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p class="text-muted">Änderungen hier werden beim Übernehmen wieder in den visuellen Editor geladen.</p><textarea id="raw-json-editor" class="form-control font-monospace" rows="24"></textarea><div id="raw-json-error" class="text-danger mt-2"></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button><button type="button" id="apply-raw-json" class="btn btn-dark">JSON übernehmen</button></div></div></div></div>
</div>
{% endblock %}
<script type="application/json" id="editor-data">{{ config_data|tojson }}</script>
<script type="application/json" id="sound-files-data">{{ sound_files|tojson }}</script>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/admin-config-editors.js') }}"></script>
{% endblock %}