CodeDevMLH/Jellyfin-Seasonals-Plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Enhance configuration page: replace input fields with dropdowns for date selection and add utility functions for generating options

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-16 23:01:46 +01:00
parent 3b3ef77e61
commit 1a3caf5da6
1 changed files with 57 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
Jellyfin.Plugin.Seasonals/Configuration/configPage.html
View File

@@ -99,7 +99,8 @@
<!-- Rules will be injected here via JS -->
</div>
<button is="emby-button" type="button" class="raised button-accent block" onclick="SeasonalsConfigPage.addRule();" style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
<button is="emby-button" type="button" class="raised emby-button" onclick="SeasonalsConfigPage.addRule();"
style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
<i class="material-icons" style="font-size: 24px;">add</i>
<span>Add Rule</span>
</button>
@@ -629,7 +630,8 @@
align-items: flex-end;
justify-content: space-between;
}
.date-range-group > .inputContainer {
.date-range-group > .inputContainer,
.date-range-group > .selectContainer {
flex: 1;
}
@@ -671,6 +673,39 @@
var SeasonalsConfigPage = {
pluginUniqueId: 'ef1e863f-cbb0-4e47-9f23-f0cbb1826ad4',
getDaysOptions: function(selectedDay) {
var options = '';
for (var i = 1; i <= 31; i++) {
var isSelected = i === selectedDay ? 'selected' : '';
options += '<option value="' + i + '" ' + isSelected + '>' + i + '</option>';
}
return options;
},
getMonthsOptions: function(selectedMonth) {
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' }
];
var options = '';
for (var i = 0; i < months.length; i++) {
var m = months[i];
var isSelected = m.val === selectedMonth ? 'selected' : '';
options += '<option value="' + m.val + '" ' + isSelected + '>' + m.name + '</option>';
}
return options;
},
addRule: function(data = null) {
var container = document.querySelector('#seasonalRulesList');
var div = document.createElement('div');
@@ -698,24 +733,32 @@
<input is="emby-input" class="rule-name" onchange="SeasonalsConfigPage.updateRuleTitles();" />
</div>
<div class="date-range-group">
<div class="inputContainer" style="margin:0;">
<label class="inputLabel">Start Day</label>
<input is="emby-input" type="number" class="rule-start-day" min="1" max="31" />
<div class="selectContainer" style="margin:0; flex: 1;">
<label class="selectLabel">Start Day</label>
<select is="emby-select" class="rule-start-day" style="width: 100%;">
${this.getDaysOptions(startDay)}
</select>
</div>
<div class="inputContainer" style="margin:0;">
<label class="inputLabel">Month</label>
<input is="emby-input" type="number" class="rule-start-month" min="1" max="12" />
<div class="selectContainer" style="margin:0; flex: 1;">
<label class="selectLabel">Month</label>
<select is="emby-select" class="rule-start-month" style="width: 100%;">
${this.getMonthsOptions(startMonth)}
</select>
</div>
</div>
<div class="date-range-group">
<div class="inputContainer" style="margin:0;">
<label class="inputLabel">End Day</label>
<input is="emby-input" type="number" class="rule-end-day" min="1" max="31" />
<div class="selectContainer" style="margin:0; flex: 1;">
<label class="selectLabel">End Day</label>
<select is="emby-select" class="rule-end-day" style="width: 100%;">
${this.getDaysOptions(endDay)}
</select>
</div>
<div class="inputContainer" style="margin:0;">
<label class="inputLabel">Month</label>
<input is="emby-input" type="number" class="rule-end-month" min="1" max="12" />
<div class="selectContainer" style="margin:0; flex: 1;">
<label class="selectLabel">Month</label>
<select is="emby-select" class="rule-end-month" style="width: 100%;">
${this.getMonthsOptions(endMonth)}
</select>
</div>
</div>