refactor: replace type-dispatch if/elif chains with registry patterns and handler maps

Backend: add registry dicts (_CONDITION_MAP, _VALUE_SOURCE_MAP, _PICTURE_SOURCE_MAP) and per-subclass from_dict() methods to eliminate ~300 lines of if/elif in factory functions. Convert automation engine dispatch (condition eval, match_mode, match_type, deactivation_mode) to dict-based lookup. Frontend: extract CSS_CARD_RENDERERS, CSS_SECTION_MAP, CSS_TYPE_SETUP, CONDITION_PILL_RENDERERS, and PICTURE_SOURCE_CARD_RENDERERS handler maps to replace scattered type-check chains in color-strips.ts, automations.ts, and streams.ts.
2026-03-24 14:51:27 +03:00
parent b63944bb34
commit 73947eb6cb
9 changed files with 714 additions and 634 deletions
--- a/server/src/wled_controller/static/js/features/streams.ts
+++ b/server/src/wled_controller/static/js/features/streams.ts
@@ -276,6 +276,54 @@ const _streamSectionMap = {
    sync: [csSyncClocks],
 };

+type StreamCardRenderer = (stream: any) => string;
+
+const PICTURE_SOURCE_CARD_RENDERERS: Record<string, StreamCardRenderer> = {
+    raw: (stream) => {
+        let capTmplName = '';
+        if (stream.capture_template_id) {
+            const capTmpl = _cachedCaptureTemplates.find(t => t.id === stream.capture_template_id);
+            if (capTmpl) capTmplName = escapeHtml(capTmpl.name);
+        }
+        return `<div class="stream-card-props">
+            <span class="stream-card-prop" title="${t('streams.display')}">${ICON_MONITOR} ${stream.display_index ?? 0}</span>
+            <span class="stream-card-prop" title="${t('streams.target_fps')}">${ICON_FPS} ${stream.target_fps ?? 30}</span>
+            ${capTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.capture_template')}" onclick="event.stopPropagation(); navigateToCard('streams','raw_templates','raw-templates','data-template-id','${stream.capture_template_id}')">${ICON_TEMPLATE} ${capTmplName}</span>` : ''}
+        </div>`;
+    },
+    processed: (stream) => {
+        const sourceStream = _cachedStreams.find(s => s.id === stream.source_stream_id);
+        const sourceName = sourceStream ? escapeHtml(sourceStream.name) : (stream.source_stream_id || '-');
+        const sourceSubTab = sourceStream ? (sourceStream.stream_type === 'static_image' ? 'static_image' : 'raw') : 'raw';
+        const sourceSection = sourceStream ? (sourceStream.stream_type === 'static_image' ? 'static-streams' : 'raw-streams') : 'raw-streams';
+        let ppTmplName = '';
+        if (stream.postprocessing_template_id) {
+            const ppTmpl = _cachedPPTemplates.find(p => p.id === stream.postprocessing_template_id);
+            if (ppTmpl) ppTmplName = escapeHtml(ppTmpl.name);
+        }
+        return `<div class="stream-card-props">
+            <span class="stream-card-prop stream-card-link" title="${t('streams.source')}" onclick="event.stopPropagation(); navigateToCard('streams','${sourceSubTab}','${sourceSection}','data-stream-id','${stream.source_stream_id}')">${ICON_LINK_SOURCE} ${sourceName}</span>
+            ${ppTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.pp_template')}" onclick="event.stopPropagation(); navigateToCard('streams','proc_templates','proc-templates','data-pp-template-id','${stream.postprocessing_template_id}')">${ICON_TEMPLATE} ${ppTmplName}</span>` : ''}
+        </div>`;
+    },
+    static_image: (stream) => {
+        const src = stream.image_source || '';
+        return `<div class="stream-card-props">
+            <span class="stream-card-prop stream-card-prop-full" title="${escapeHtml(src)}">${ICON_WEB} ${escapeHtml(src)}</span>
+        </div>`;
+    },
+    video: (stream) => {
+        const url = stream.url || '';
+        const shortUrl = url.length > 40 ? url.slice(0, 37) + '...' : url;
+        return `<div class="stream-card-props">
+            <span class="stream-card-prop stream-card-prop-full" title="${escapeHtml(url)}">${ICON_WEB} ${escapeHtml(shortUrl)}</span>
+            <span class="stream-card-prop" title="${t('streams.target_fps')}">${ICON_FPS} ${stream.target_fps ?? 30}</span>
+            ${stream.loop !== false ? `<span class="stream-card-prop">↻</span>` : ''}
+            ${stream.playback_speed && stream.playback_speed !== 1.0 ? `<span class="stream-card-prop">${stream.playback_speed}×</span>` : ''}
+        </div>`;
+    },
+};
+
 function renderPictureSourcesList(streams: any) {
    const container = document.getElementById('streams-list')!;
    const activeTab = localStorage.getItem('activeStreamTab') || 'raw';
@@ -283,47 +331,8 @@ function renderPictureSourcesList(streams: any) {
    const renderStreamCard = (stream: any) => {
        const typeIcon = getPictureSourceIcon(stream.stream_type);

-        let detailsHtml = '';
-        if (stream.stream_type === 'raw') {
-            let capTmplName = '';
-            if (stream.capture_template_id) {
-                const capTmpl = _cachedCaptureTemplates.find(t => t.id === stream.capture_template_id);
-                if (capTmpl) capTmplName = escapeHtml(capTmpl.name);
-            }
-            detailsHtml = `<div class="stream-card-props">
-                <span class="stream-card-prop" title="${t('streams.display')}">${ICON_MONITOR} ${stream.display_index ?? 0}</span>
-                <span class="stream-card-prop" title="${t('streams.target_fps')}">${ICON_FPS} ${stream.target_fps ?? 30}</span>
-                ${capTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.capture_template')}" onclick="event.stopPropagation(); navigateToCard('streams','raw_templates','raw-templates','data-template-id','${stream.capture_template_id}')">${ICON_TEMPLATE} ${capTmplName}</span>` : ''}
-            </div>`;
-        } else if (stream.stream_type === 'processed') {
-            const sourceStream = _cachedStreams.find(s => s.id === stream.source_stream_id);
-            const sourceName = sourceStream ? escapeHtml(sourceStream.name) : (stream.source_stream_id || '-');
-            const sourceSubTab = sourceStream ? (sourceStream.stream_type === 'static_image' ? 'static_image' : 'raw') : 'raw';
-            const sourceSection = sourceStream ? (sourceStream.stream_type === 'static_image' ? 'static-streams' : 'raw-streams') : 'raw-streams';
-            let ppTmplName = '';
-            if (stream.postprocessing_template_id) {
-                const ppTmpl = _cachedPPTemplates.find(p => p.id === stream.postprocessing_template_id);
-                if (ppTmpl) ppTmplName = escapeHtml(ppTmpl.name);
-            }
-            detailsHtml = `<div class="stream-card-props">
-                <span class="stream-card-prop stream-card-link" title="${t('streams.source')}" onclick="event.stopPropagation(); navigateToCard('streams','${sourceSubTab}','${sourceSection}','data-stream-id','${stream.source_stream_id}')">${ICON_LINK_SOURCE} ${sourceName}</span>
-                ${ppTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.pp_template')}" onclick="event.stopPropagation(); navigateToCard('streams','proc_templates','proc-templates','data-pp-template-id','${stream.postprocessing_template_id}')">${ICON_TEMPLATE} ${ppTmplName}</span>` : ''}
-            </div>`;
-        } else if (stream.stream_type === 'static_image') {
-            const src = stream.image_source || '';
-            detailsHtml = `<div class="stream-card-props">
-                <span class="stream-card-prop stream-card-prop-full" title="${escapeHtml(src)}">${ICON_WEB} ${escapeHtml(src)}</span>
-            </div>`;
-        } else if (stream.stream_type === 'video') {
-            const url = stream.url || '';
-            const shortUrl = url.length > 40 ? url.slice(0, 37) + '...' : url;
-            detailsHtml = `<div class="stream-card-props">
-                <span class="stream-card-prop stream-card-prop-full" title="${escapeHtml(url)}">${ICON_WEB} ${escapeHtml(shortUrl)}</span>
-                <span class="stream-card-prop" title="${t('streams.target_fps')}">${ICON_FPS} ${stream.target_fps ?? 30}</span>
-                ${stream.loop !== false ? `<span class="stream-card-prop">↻</span>` : ''}
-                ${stream.playback_speed && stream.playback_speed !== 1.0 ? `<span class="stream-card-prop">${stream.playback_speed}×</span>` : ''}
-            </div>`;
-        }
+        const renderer = PICTURE_SOURCE_CARD_RENDERERS[stream.stream_type];
+        const detailsHtml = renderer ? renderer(stream) : '';

        return wrapCard({
            type: 'template-card',