Skip to content

Commit 37b3572

Browse files
codeperfectpluscodeperfectplus
committed
batter icon and spinning icon for speedtest
added in this commit
1 parent c04a936 commit 37b3572

5 files changed

Lines changed: 73 additions & 23 deletions

File tree

‎requirements.txt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,7 @@ flask-migrate==4.0.7 # Database migrations for Flask
2020
watchdog==5.0.2
2121

2222
# python requests library for making HTTP requests
23-
requests==2.32.3
23+
requests==2.32.3
24+
25+
# Speedtest CLI for testing internet speed
26+
speedtest-cli==2.1.3

‎src/models/user_dashboard_settings.py‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ class UserDashboardSettings(db.Model):
1616

1717
id = db.Column(db.Integer, primary_key=True)
1818
user_id = db.Column(db.Integer, db.ForeignKey('users.id'))
19-
speedtest_cooldown = db.Column(db.Integer, default=60)
20-
number_of_speedtests = db.Column(db.Integer, default=1)
21-
refresh_interval = db.Column(db.Integer, default=0)
19+
speedtest_cooldown = db.Column(db.Integer, default=30)
20+
number_of_speedtests = db.Column(db.Integer, default=3)
21+
refresh_interval = db.Column(db.Integer, default=5)
2222
bytes_to_megabytes = db.Column(db.Integer, default=1000)
2323

‎src/static/js/refreshCardData.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,26 @@ async function refreshCardText(cardSelector, dataKey, data) {
152152
}
153153
}
154154

155+
async function updateBatteryIcon(iconSelector, batteryStatusKey, batteryPercentKey, data) {
156+
let iconElement = document.querySelector(iconSelector);
157+
let batteryStatus = data[batteryStatusKey];
158+
let batteryPercent = data[batteryPercentKey];
159+
160+
if (!iconElement) return;
161+
iconElement.className = '';
162+
// based on battery status(Charging/Discharging) and percentage, update the icon, to full, half or empty and color
163+
if (batteryPercent > 50) {
164+
iconElement.classList.add('battery-icon', 'fas', 'fa-battery-full', batteryStatus === 'Charging' ? 'text-success' : 'text-danger');
165+
}
166+
else if (batteryPercent > 25) {
167+
iconElement.classList.add('battery-icon', 'fas', 'fa-battery-half', batteryStatus === 'Charging' ? 'text-success' : 'text-danger');
168+
}
169+
else {
170+
iconElement.classList.add('battery-icon', 'fas', 'fa-battery-empty', batteryStatus === 'Charging' ? 'text-success' : 'text-danger');
171+
}
172+
173+
}
174+
155175
// Refresh all card data
156176
async function refreshData() {
157177
const data = await queueRequest('/api/system-info');
@@ -167,6 +187,7 @@ async function refreshData() {
167187
updateCard('.battery-card', 'battery_percent', data, '%', '.battery-bar');
168188

169189
refreshCardText('.battery-status', 'battery_status', data); // battery charging status
190+
updateBatteryIcon('.battery-icon', 'battery_status', 'battery_percent', data); // battery charging status
170191
updateColorBars(); // Update color bars based on the fetched data
171192
}
172193

‎src/templates/card_comp/battery/percentage.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,21 @@
22
<div class="col-md-6 col-lg-4 mb-4">
33
<div class="card battery-card shadow-sm" data-battery="{{ system_info['battery_percent'] }}">
44
<div class="card-body text-center">
5-
<h5 class="card-title">Battery Percentage <i class="fas fa-battery-three-quarters"></i></h5>
6-
<p class="card-text fs-4">{{ system_info['battery_percent']}}%</p>
5+
<h5 class="card-title">
6+
Battery Percentage
7+
{% if system_info['battery_percent'] > 50 %}
8+
<i class="battery-icon fas fa-battery-full {{ 'text-success' if system_info['battery_status'] == 'Charging' else 'text-danger' }}"></i>
9+
{% elif system_info['battery_percent'] > 25 %}
10+
<i class="battery-icon fas fa-battery-half {{ 'text-success' if system_info['battery_status'] == 'Charging' else 'text-danger' }}"></i>
11+
{% else %}
12+
<i class="battery-icon fas fa-battery-empty {{ 'text-success' if system_info['battery_status'] == 'Charging' else 'text-danger' }}"></i>
13+
{% endif %}
14+
</h5>
15+
<p class="card-text fs-4">{{ system_info['battery_percent'] }}%</p>
716
<div class="battery-indicator mt-2">
8-
<div class="battery-bar" style="width: {{ system_info['battery_percent']}}%;"></div>
17+
<div class="battery-bar" style="width: {{ system_info['battery_percent'] }}%;"></div>
918
</div>
10-
<p class="battery-status fs-6 mt-2">Battery Status: {{ system_info['battery_status']}}</p>
19+
<p class="battery-status fs-6 mt-2">Battery Status: {{ system_info['battery_status'] }}</p>
1120
</div>
1221
</div>
1322
</div>

‎src/templates/card_comp/other/speedtest.html‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,42 @@
44
<div class="card-body text-center">
55
<h5 class="card-title mb-3">Perform Speed Test <i class="fas fa-tachometer-alt"></i></h5>
66

7-
{% if not speedtest_result["show_prompt"] %}
8-
<p class="card-text fs-4 mb-2">
9-
<span class="fw-bold">Download Speed:</span> {{ speedtest_result["download_speed"] }}
10-
</p>
11-
<p class="card-text fs-4 mb-2">
12-
<span class="fw-bold">Upload Speed:</span> {{ speedtest_result["upload_speed"] }}
13-
</p>
14-
<p class="card-text fs-5 mb-2">
15-
<span class="fw-bold">Test Last Performed:</span> {{ last_timestamp }}
16-
</p>
17-
<p class="card-text fs-5 mb-3">
18-
<span class="fw-bold">Try again in:</span> {{ speedtest_result["remaining_time_for_next_test"] }} mins
19-
</p>
20-
{% endif %}
7+
<!-- Loading Spinner -->
8+
<div id="loading-spinner" class="spinner-border text-primary mb-4" role="status" style="display: none;">
9+
<span class="visually-hidden">Loading...</span>
10+
</div>
11+
12+
<!-- Speed Test Results -->
13+
<div id="speedtest-results">
14+
{% if not speedtest_result["show_prompt"] %}
15+
<p class="card-text fs-4 mb-2">
16+
<span class="fw-bold">Download Speed:</span> {{ speedtest_result["download_speed"] }}
17+
</p>
18+
<p class="card-text fs-4 mb-2">
19+
<span class="fw-bold">Upload Speed:</span> {{ speedtest_result["upload_speed"] }}
20+
</p>
21+
<p class="card-text fs-5 mb-2">
22+
<span class="fw-bold">Test Last Performed:</span> {{ last_timestamp }}
23+
</p>
24+
<p class="card-text fs-5 mb-3">
25+
<span class="fw-bold">Try again in:</span> {{ speedtest_result["remaining_time_for_next_test"] }} mins
26+
</p>
27+
{% endif %}
28+
</div>
2129

30+
<!-- Speed Test Button -->
2231
{% if speedtest_result["show_prompt"] %}
23-
<a href="{{ url_for('speedtest') }}" class="btn btn-primary btn-lg">Run Speed Test</a>
32+
<a href="{{ url_for('speedtest') }}" id="speedtest-btn" class="btn btn-primary btn-lg" onclick="showLoading()">Run Speed Test</a>
2433
{% endif %}
2534
</div>
2635
</div>
2736
</div>
2837
{% endif %}
38+
39+
<script>
40+
function showLoading() {
41+
// Show loading spinner and hide the results
42+
document.getElementById('loading-spinner').style.display = 'block';
43+
document.getElementById('speedtest-results').style.display = 'none';
44+
}
45+
</script>

0 commit comments

Comments
 (0)