Improve device cards, stream/template UI, and add PP template testing

- Move WLED UI button into URL badge as clickable link on device cards
- Remove version label from device cards
- Show PP template name on processed stream cards
- Display filter chain as pills on processing template cards
- Add processing template test with source stream selector
- Pre-load PP templates when viewing streams to fix race condition
- Add ESC key handling for all modals
- Add filter chain CSS styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-11 15:28:58 +03:00
parent c8ebb60f99
commit 4f9c30ef06
7 changed files with 390 additions and 19 deletions

View File

@@ -490,6 +490,34 @@
</div>
</div>
<!-- Test PP Template Modal -->
<div id="test-pp-template-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 data-i18n="postprocessing.test.title">Test Processing Template</h2>
<button class="modal-close-btn" onclick="closeTestPPTemplateModal()" title="Close">&#x2715;</button>
</div>
<div class="modal-body">
<div class="form-group">
<label data-i18n="postprocessing.test.source_stream">Source Stream:</label>
<select id="test-pp-source-stream"></select>
</div>
<div class="form-group">
<label for="test-pp-duration">
<span data-i18n="streams.test.duration">Capture Duration (s):</span>
<span id="test-pp-duration-value">5</span>
</label>
<input type="range" id="test-pp-duration" min="1" max="10" step="1" value="5" oninput="updatePPTestDuration(this.value)" />
</div>
<button type="button" class="btn btn-primary" onclick="runPPTemplateTest()" style="margin-top: 16px;">
<span data-i18n="streams.test.run">🧪 Run Test</span>
</button>
</div>
</div>
</div>
<!-- Picture Stream Modal -->
<div id="stream-modal" class="modal">
<div class="modal-content">