From 46f5c3648dc38ff8de70130c0fa0769384988fd4 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Tue, 17 Feb 2026 00:01:21 +0100
Subject: [PATCH] Refactor seasonal rule HTML generation for improved
 maintainability

---
 .../Configuration/configPage.html             | 156 ++++++++----------
 1 file changed, 66 insertions(+), 90 deletions(-)

diff --git a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
index b574b10..3d25170 100644
--- a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
+++ b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
@@ -685,108 +685,84 @@
                     var endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1;
                     var theme = data ? (data.Theme || data.theme || 'none') : 'none';
 
-                    // Helper to generate options
-                    function getOptions(items, selected) {
-                        var html = '';
-                        items.forEach(function(item) {
-                            var val = item.val || item;
-                            var txt = item.name || item;
-                            var isSelected = val == selected ? 'selected' : '';
-                            html += '<option value="' + val + '" ' + isSelected + '>' + txt + '</option>';
-                        });
-                        return html;
-                    }
-
                     var days = [];
                     for (var i = 1; i <= 31; i++) days.push(i);
 
                     var months = [
-                        { val: 1, name: 'Jan' },
-                        { val: 2, name: 'Feb' },
-                        { val: 3, name: 'Mar' },
-                        { val: 4, name: 'Apr' },
-                        { val: 5, name: 'May' },
-                        { val: 6, name: 'Jun' },
-                        { val: 7, name: 'Jul' },
-                        { val: 8, name: 'Aug' },
-                        { val: 9, name: 'Sep' },
-                        { val: 10, name: 'Oct' },
-                        { val: 11, name: 'Nov' },
-                        { val: 12, name: 'Dec' }
+                        { v: 1, n: 'Jan' }, { v: 2, n: 'Feb' }, { v: 3, n: 'Mar' }, { v: 4, n: 'Apr' },
+                        { v: 5, n: 'May' }, { v: 6, n: 'Jun' }, { v: 7, n: 'Jul' }, { v: 8, n: 'Aug' },
+                        { v: 9, n: 'Sep' }, { v: 10, n: 'Oct' }, { v: 11, n: 'Nov' }, { v: 12, n: 'Dec' }
                     ];
 
-                    div.innerHTML = `
-                         <div class="seasonal-rule-header">
-                             <div style="font-weight: bold; font-size: 1.1em;" class="rule-title"></div>
-                             <div class="rule-actions">
-                                 <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>
-                                 <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>
-                                 <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove"><i class="material-icons">delete</i></button>
-                             </div>
-                         </div>
-                         <div class="seasonal-rule-content">
-                            <div class="inputContainer" style="margin:0;">
-                                <label class="inputLabel">Name</label>
-                                <input is="emby-input" class="rule-name" onchange="SeasonalsConfigPage.updateRuleTitles();" />
-                            </div>
-                            <div class="date-range-group">
-                                <div class="selectContainer" style="margin:0; flex: 1;">
-                                    <label class="selectLabel">Start Day</label>
-                                    <select class="emby-select emby-select-withcolor rule-start-day" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
-                                        ${getOptions(days, startDay)}
-                                    </select>
-                                </div>
-                                <div class="selectContainer" style="margin:0; flex: 1;">
-                                    <label class="selectLabel">Month</label>
-                                    <select class="emby-select emby-select-withcolor rule-start-month" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
-                                        ${getOptions(months, startMonth)}
-                                    </select>
-                                </div>
-                            </div>
-                            
-                            <div class="date-range-group">
-                                <div class="selectContainer" style="margin:0; flex: 1;">
-                                    <label class="selectLabel">End Day</label>
-                                    <select class="emby-select emby-select-withcolor rule-end-day" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
-                                        ${getOptions(days, endDay)}
-                                    </select>
-                                </div>
-                                <div class="selectContainer" style="margin:0; flex: 1;">
-                                    <label class="selectLabel">Month</label>
-                                    <select class="emby-select emby-select-withcolor rule-end-month" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
-                                        ${getOptions(months, endMonth)}
-                                    </select>
-                                </div>
-                            </div>
+                    // Build select HTML via string concatenation to avoid Jellyfin's ${} localization processing
+                    function mkSelect(val, opts, cls) {
+                        var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">';
+                        opts.forEach(function(o) {
+                            var v = o.v || o;
+                            var n = o.n || o;
+                            h += '<option value="' + v + '" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
+                        });
+                        h += '</select>';
+                        return h;
+                    }
 
-                            <div class="selectContainer" style="margin:0;">
-                                <label class="selectLabel">Theme</label>
-                                <select is="emby-select" class="rule-theme" style="width: 100%;">
-                                    <option value="none">None</option>
-                                    <option value="snowflakes">Snowflakes</option>
-                                    <option value="snowfall">Snowfall</option>
-                                    <option value="snowstorm">Snowstorm</option>
-                                    <option value="fireworks">Fireworks</option>
-                                    <option value="halloween">Halloween</option>
-                                    <option value="hearts">Hearts</option>
-                                    <option value="christmas">Christmas</option>
-                                    <option value="santa">Santa</option>
-                                    <option value="autumn">Autumn</option>
-                                    <option value="easter">Easter</option>
-                                    <option value="resurrection">Resurrection</option>
-                                </select>
-                            </div>
-                         </div>
-                    `;
+                    div.innerHTML =
+                        '<div class="seasonal-rule-header">' +
+                        '    <div style="font-weight: bold; font-size: 1.1em;" class="rule-title"></div>' +
+                        '    <div class="rule-actions">' +
+                        '        <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>' +
+                        '        <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>' +
+                        '        <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove"><i class="material-icons">delete</i></button>' +
+                        '    </div>' +
+                        '</div>' +
+                        '<div class="seasonal-rule-content">' +
+                        '    <div class="inputContainer" style="margin:0;">' +
+                        '        <label class="inputLabel">Name</label>' +
+                        '        <input is="emby-input" class="rule-name" onchange="SeasonalsConfigPage.updateRuleTitles();" />' +
+                        '    </div>' +
+                        '    <div class="date-range-group">' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">Start Day</label>' +
+                                     mkSelect(startDay, days, 'rule-start-day') +
+                        '        </div>' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">Month</label>' +
+                                     mkSelect(startMonth, months, 'rule-start-month') +
+                        '        </div>' +
+                        '    </div>' +
+                        '    <div class="date-range-group">' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">End Day</label>' +
+                                     mkSelect(endDay, days, 'rule-end-day') +
+                        '        </div>' +
+                        '        <div class="selectContainer" style="margin:0; flex: 1;">' +
+                        '            <label class="selectLabel">Month</label>' +
+                                     mkSelect(endMonth, months, 'rule-end-month') +
+                        '        </div>' +
+                        '    </div>' +
+                        '    <div class="selectContainer" style="margin:0;">' +
+                        '        <label class="selectLabel">Theme</label>' +
+                        '        <select class="emby-select emby-select-withcolor rule-theme" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">' +
+                        '            <option value="none">None</option>' +
+                        '            <option value="snowflakes">Snowflakes</option>' +
+                        '            <option value="snowfall">Snowfall</option>' +
+                        '            <option value="snowstorm">Snowstorm</option>' +
+                        '            <option value="fireworks">Fireworks</option>' +
+                        '            <option value="halloween">Halloween</option>' +
+                        '            <option value="hearts">Hearts</option>' +
+                        '            <option value="christmas">Christmas</option>' +
+                        '            <option value="santa">Santa</option>' +
+                        '            <option value="autumn">Autumn</option>' +
+                        '            <option value="easter">Easter</option>' +
+                        '            <option value="resurrection">Resurrection</option>' +
+                        '        </select>' +
+                        '    </div>' +
+                        '</div>';
 
                     container.appendChild(div);
 
                     // Set values programmatically
                     div.querySelector('.rule-name').value = name;
-                    div.querySelector('.rule-start-day').value = startDay;
-                    div.querySelector('.rule-start-month').value = startMonth;
-                    div.querySelector('.rule-end-day').value = endDay;
-                    div.querySelector('.rule-end-month').value = endMonth;
                     div.querySelector('.rule-theme').value = theme;
 
                     // Bind events