Skip to content

Commit 1c8a2fe

Browse files
Admin9705Admin9705
committed
Refactor Swaparr settings display in settings forms
- Updated the Swaparr settings section to improve UI consistency by removing conditional opacity and pointer events for disabled states. - Enhanced user feedback by simplifying help text related to Swaparr integration, ensuring clarity regardless of global settings status. - Maintained dynamic rendering of Swaparr options based on global settings, ensuring a seamless user experience across instances.
1 parent 57506d6 commit 1c8a2fe

File tree

1 file changed

+25
-15
lines changed

1 file changed

+25
-15
lines changed

‎frontend/static/js/settings_forms.js‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -653,14 +653,16 @@ const SettingsForms = {
653653
</div>
654654
</div>
655655
656+
${this.isSwaparrGloballyEnabled() ? `
656657
<div class="setting-item">
657658
<label for="radarr-swaparr-${index}"><a href="https://plexguide.github.io/Huntarr.io/apps/swaparr.html" class="info-icon" title="Enable Swaparr stalled download monitoring for this instance" target="_blank" rel="noopener"><i class="fas fa-info-circle"></i></a>Swaparr:</label>
658-
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative; ${this.isSwaparrGloballyEnabled() ? '' : 'opacity: 0.5; pointer-events: none;'}">
659-
<input type="checkbox" id="radarr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''} ${this.isSwaparrGloballyEnabled() ? '' : 'disabled'}>
659+
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative;">
660+
<input type="checkbox" id="radarr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''}>
660661
<span class="toggle-slider" style="position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#3d4353; border-radius:20px; transition:0.4s;"></span>
661662
</label>
662-
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Radarr instance${this.isSwaparrGloballyEnabled() ? '' : ' (Swaparr is globally disabled)'}</p>
663+
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Radarr instance</p>
663664
</div>
665+
` : ''}
664666
</div>
665667
</div>
666668
`;
@@ -980,14 +982,16 @@ const SettingsForms = {
980982
</div>
981983
</div>
982984
985+
${this.isSwaparrGloballyEnabled() ? `
983986
<div class="setting-item">
984987
<label for="lidarr-swaparr-${index}"><a href="https://plexguide.github.io/Huntarr.io/apps/swaparr.html" class="info-icon" title="Enable Swaparr stalled download monitoring for this instance" target="_blank" rel="noopener"><i class="fas fa-info-circle"></i></a>Swaparr:</label>
985-
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative; ${this.isSwaparrGloballyEnabled() ? '' : 'opacity: 0.5; pointer-events: none;'}">
986-
<input type="checkbox" id="lidarr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''} ${this.isSwaparrGloballyEnabled() ? '' : 'disabled'}>
988+
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative;">
989+
<input type="checkbox" id="lidarr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''}>
987990
<span class="toggle-slider" style="position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#3d4353; border-radius:20px; transition:0.4s;"></span>
988991
</label>
989-
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Lidarr instance${this.isSwaparrGloballyEnabled() ? '' : ' (Swaparr is globally disabled)'}</p>
992+
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Lidarr instance</p>
990993
</div>
994+
` : ''}
991995
</div>
992996
</div>
993997
`;
@@ -1224,14 +1228,16 @@ const SettingsForms = {
12241228
</div>
12251229
</div>
12261230
1231+
${this.isSwaparrGloballyEnabled() ? `
12271232
<div class="setting-item">
12281233
<label for="readarr-swaparr-${index}"><a href="https://plexguide.github.io/Huntarr.io/apps/swaparr.html" class="info-icon" title="Enable Swaparr stalled download monitoring for this instance" target="_blank" rel="noopener"><i class="fas fa-info-circle"></i></a>Swaparr:</label>
1229-
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative; ${this.isSwaparrGloballyEnabled() ? '' : 'opacity: 0.5; pointer-events: none;'}">
1230-
<input type="checkbox" id="readarr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''} ${this.isSwaparrGloballyEnabled() ? '' : 'disabled'}>
1234+
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative;">
1235+
<input type="checkbox" id="readarr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''}>
12311236
<span class="toggle-slider" style="position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#3d4353; border-radius:20px; transition:0.4s;"></span>
12321237
</label>
1233-
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Readarr instance${this.isSwaparrGloballyEnabled() ? '' : ' (Swaparr is globally disabled)'}</p>
1238+
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Readarr instance</p>
12341239
</div>
1240+
` : ''}
12351241
</div>
12361242
</div>
12371243
`;
@@ -1461,14 +1467,16 @@ const SettingsForms = {
14611467
</div>
14621468
</div>
14631469
1470+
${this.isSwaparrGloballyEnabled() ? `
14641471
<div class="setting-item">
14651472
<label for="whisparr-swaparr-${index}"><a href="https://plexguide.github.io/Huntarr.io/apps/swaparr.html" class="info-icon" title="Enable Swaparr stalled download monitoring for this instance" target="_blank" rel="noopener"><i class="fas fa-info-circle"></i></a>Swaparr:</label>
1466-
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative; ${this.isSwaparrGloballyEnabled() ? '' : 'opacity: 0.5; pointer-events: none;'}">
1467-
<input type="checkbox" id="whisparr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''} ${this.isSwaparrGloballyEnabled() ? '' : 'disabled'}>
1473+
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative;">
1474+
<input type="checkbox" id="whisparr-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''}>
14681475
<span class="toggle-slider" style="position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#3d4353; border-radius:20px; transition:0.4s;"></span>
14691476
</label>
1470-
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Whisparr V2 instance${this.isSwaparrGloballyEnabled() ? '' : ' (Swaparr is globally disabled)'}</p>
1477+
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Whisparr V2 instance</p>
14711478
</div>
1479+
` : ''}
14721480
</div>
14731481
</div>
14741482
`;
@@ -1759,14 +1767,16 @@ const SettingsForms = {
17591767
</div>
17601768
</div>
17611769
1770+
${this.isSwaparrGloballyEnabled() ? `
17621771
<div class="setting-item">
17631772
<label for="eros-swaparr-${index}"><a href="https://plexguide.github.io/Huntarr.io/apps/swaparr.html" class="info-icon" title="Enable Swaparr stalled download monitoring for this instance" target="_blank" rel="noopener"><i class="fas fa-info-circle"></i></a>Swaparr:</label>
1764-
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative; ${this.isSwaparrGloballyEnabled() ? '' : 'opacity: 0.5; pointer-events: none;'}">
1765-
<input type="checkbox" id="eros-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''} ${this.isSwaparrGloballyEnabled() ? '' : 'disabled'}>
1773+
<label class="toggle-switch" style="width:40px; height:20px; display:inline-block; position:relative;">
1774+
<input type="checkbox" id="eros-swaparr-${index}" name="swaparr_enabled" ${instance.swaparr_enabled === true ? 'checked' : ''}>
17661775
<span class="toggle-slider" style="position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#3d4353; border-radius:20px; transition:0.4s;"></span>
17671776
</label>
1768-
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Whisparr V3 instance${this.isSwaparrGloballyEnabled() ? '' : ' (Swaparr is globally disabled)'}</p>
1777+
<p class="setting-help">Enable Swaparr to monitor and remove stalled downloads for this Whisparr V3 instance</p>
17691778
</div>
1779+
` : ''}
17701780
</div>
17711781
</div>
17721782
`;

0 commit comments

Comments
 (0)