Skip to content

Commit 9f5fb2d

Browse files
Admin9705Admin9705
committed
update
1 parent 80f5d52 commit 9f5fb2d

File tree

2 files changed

+38
-17
lines changed

2 files changed

+38
-17
lines changed

‎frontend/static/js/api-progress.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,36 @@ function updateApiProgress(appName, used, total) {
1111
if (progressFill && usedSpan && totalSpan) {
1212
const percentage = (used / total) * 100;
1313
progressFill.style.width = `${percentage}%`;
14+
15+
// Create a dynamic gradient that transitions colors based on the current percentage
16+
let gradient;
17+
if (percentage <= 35) {
18+
// Pure green zone
19+
gradient = '#22c55e';
20+
} else if (percentage <= 50) {
21+
// Green to yellow transition zone
22+
gradient = `linear-gradient(90deg,
23+
#22c55e 0%,
24+
#22c55e ${35 * 100 / percentage}%,
25+
#f59e0b 100%)`;
26+
} else if (percentage <= 70) {
27+
// Green through yellow to orange zone
28+
gradient = `linear-gradient(90deg,
29+
#22c55e 0%,
30+
#22c55e ${35 * 100 / percentage}%,
31+
#f59e0b ${50 * 100 / percentage}%,
32+
#ea580c 100%)`;
33+
} else {
34+
// Full gradient from green to red
35+
gradient = `linear-gradient(90deg,
36+
#22c55e 0%,
37+
#22c55e ${35 * 100 / percentage}%,
38+
#f59e0b ${50 * 100 / percentage}%,
39+
#ea580c ${70 * 100 / percentage}%,
40+
#ef4444 100%)`;
41+
}
42+
43+
progressFill.style.background = gradient;
1444
usedSpan.textContent = used;
1545
totalSpan.textContent = total;
1646
}

‎frontend/templates/components/home_section.html‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@ <h3><i class="fas fa-crosshairs"></i> Live Hunts Executed</h3>
360360
<div class="api-progress-fill" id="sonarr-api-progress" style="width: 0%;"></div>
361361
</div>
362362
<div class="api-progress-text">
363-
<span id="sonarr-api-used">0</span>/<span id="sonarr-api-total">20</span> requests used
363+
API: <span id="sonarr-api-used">0</span> / <span id="sonarr-api-total">20</span>
364364
</div>
365365
</div>
366366
</div>
@@ -400,7 +400,7 @@ <h4>Sonarr</h4>
400400
<div class="api-progress-fill" id="radarr-api-progress" style="width: 0%;"></div>
401401
</div>
402402
<div class="api-progress-text">
403-
<span id="radarr-api-used">0</span>/<span id="radarr-api-total">20</span> requests used
403+
API: <span id="radarr-api-used">0</span> / <span id="radarr-api-total">20</span>
404404
</div>
405405
</div>
406406
</div>
@@ -440,7 +440,7 @@ <h4>Radarr</h4>
440440
<div class="api-progress-fill" id="lidarr-api-progress" style="width: 0%;"></div>
441441
</div>
442442
<div class="api-progress-text">
443-
<span id="lidarr-api-used">0</span>/<span id="lidarr-api-total">20</span> requests used
443+
API: <span id="lidarr-api-used">0</span> / <span id="lidarr-api-total">20</span>
444444
</div>
445445
</div>
446446
</div>
@@ -480,7 +480,7 @@ <h4>Lidarr</h4>
480480
<div class="api-progress-fill" id="readarr-api-progress" style="width: 0%;"></div>
481481
</div>
482482
<div class="api-progress-text">
483-
<span id="readarr-api-used">0</span>/<span id="readarr-api-total">20</span> requests used
483+
API: <span id="readarr-api-used">0</span> / <span id="readarr-api-total">20</span>
484484
</div>
485485
</div>
486486
</div>
@@ -520,7 +520,7 @@ <h4>Readarr</h4>
520520
<div class="api-progress-fill" id="whisparr-api-progress" style="width: 0%;"></div>
521521
</div>
522522
<div class="api-progress-text">
523-
<span id="whisparr-api-used">0</span>/<span id="whisparr-api-total">20</span> requests used
523+
API: <span id="whisparr-api-used">0</span> / <span id="whisparr-api-total">20</span>
524524
</div>
525525
</div>
526526
</div>
@@ -560,7 +560,7 @@ <h4>Whisparr V2</h4>
560560
<div class="api-progress-fill" id="eros-api-progress" style="width: 0%;"></div>
561561
</div>
562562
<div class="api-progress-text">
563-
<span id="eros-api-used">0</span>/<span id="eros-api-total">20</span> requests used
563+
API: <span id="eros-api-used">0</span> / <span id="eros-api-total">20</span>
564564
</div>
565565
</div>
566566
</div>
@@ -2345,18 +2345,9 @@ <h5><i class="fas fa-chart-bar"></i> Statistics</h5>
23452345

23462346
.api-progress-fill {
23472347
height: 100%;
2348-
background: linear-gradient(90deg,
2349-
#22c55e 0%, /* Green start */
2350-
#22c55e 35%, /* Green until 35% */
2351-
#84cc16 42%, /* Green-yellow transition */
2352-
#f59e0b 50%, /* Yellow at 50% */
2353-
#f97316 58%, /* Yellow-orange transition */
2354-
#ea580c 70%, /* Orange at 70% */
2355-
#dc2626 85%, /* Orange-red transition */
2356-
#ef4444 100% /* Full red at 100% */
2357-
);
2348+
background: #22c55e; /* Default green, will be overridden by JavaScript */
23582349
border-radius: 3px;
2359-
transition: width 0.3s ease;
2350+
transition: width 0.3s ease, background-color 0.3s ease;
23602351
position: relative;
23612352
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
23622353
}

0 commit comments

Comments
 (0)