Skip to content

Commit 557815c

Browse files
codeperfectpluscodeperfectplus
committed
chore: 🎨 some css enchancement
1 parent 868b6ce commit 557815c

10 files changed

Lines changed: 139 additions & 42 deletions

File tree

‎src/routes/ping.py‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,15 @@ def time_ago(ping_time, current_time):
2626
# Calculate the difference in seconds
2727
time_diff = (current_time - ping_time).total_seconds()
2828

29-
if time_diff <= 120: # Less than or equal to 2 minutes
30-
if time_diff <= 60:
31-
return f"{int(time_diff)} seconds ago"
29+
if time_diff <= 60:
30+
return f"{int(time_diff)} seconds ago"
31+
if time_diff <= 3600:
3232
return f"{int(time_diff // 60)} min ago"
33-
34-
# Fallback to formatted datetime if over 2 minutes
35-
return ping_time.strftime('%Y-%m-%d %H:%M:%S')
33+
if time_diff <= 86400:
34+
return f"{int(time_diff // 3600)} hours ago"
35+
else:
36+
# Fallback to formatted datetime if over a day
37+
return ping_time.strftime('%Y-%m-%d %H:%M:%S')
3638

3739
# Route to view and add websites
3840
@app.route('/monitor_websites')

‎src/static/css/edit_server.css‎

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,64 @@
1-
/* edit_server.css */
1+
/* Basic reset and font settings */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #f8f9fa;
5+
}
6+
7+
/* Container styling */
28
.container {
3-
margin-top: 50px;
9+
max-width: 800px;
10+
margin: 0 auto;
411
}
512

6-
.form-group {
7-
margin-bottom: 1rem;
13+
/* Form container styling */
14+
.bg-white {
15+
background-color: #ffffff;
816
}
917

18+
.p-4 {
19+
padding: 1.5rem;
20+
}
21+
22+
.rounded {
23+
border-radius: 0.25rem;
24+
}
25+
26+
.shadow-sm {
27+
box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);
28+
}
29+
30+
/* Form element styling */
1031
.form-label {
11-
font-weight: bold;
32+
font-weight: 600;
33+
color: #333;
34+
}
35+
36+
.form-control {
37+
border-radius: 0.25rem;
38+
box-shadow: none;
39+
}
40+
41+
.form-check-input {
42+
margin-top: 0.3rem;
43+
}
44+
45+
.btn {
46+
border-radius: 0.25rem;
47+
padding: 0.75rem 1.25rem;
48+
font-size: 1rem;
49+
}
50+
51+
.btn-primary {
52+
background-color: #007bff;
53+
border-color: #007bff;
54+
}
55+
56+
.btn-secondary {
57+
background-color: #6c757d;
58+
border-color: #6c757d;
1259
}
1360

14-
.btn-success {
15-
margin-top: 20px;
61+
.btn-secondary:hover {
62+
background-color: #5a6268;
63+
border-color: #545b62;
1664
}

src/static/js/refreshData.js renamed to src/static/js/refreshCardData.js

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
let refreshInterval = 0; // Initialize with a default value
22
let refreshTimer; // Variable to hold the setInterval timer
3+
let refreshTimeout; // Variable to hold the setTimeout timer
34

45
function fetchRefreshInterval() {
56
fetch('/refresh-interval')
@@ -16,6 +17,38 @@ function fetchRefreshInterval() {
1617
.catch(error => console.error('Error:', error));
1718
}
1819

20+
// Event listener for select input change
21+
document.getElementById('refresh-interval').addEventListener('change', function () {
22+
// Clear the existing timeout
23+
clearTimeout(refreshTimeout);
24+
25+
// Update the interval based on the selected value
26+
refreshInterval = parseInt(this.value) * 1000; // Convert to milliseconds
27+
28+
// refresh the page once
29+
refreshTimeout = setTimeout(() => {
30+
window.location.reload();
31+
}, refreshInterval);
32+
33+
// Send the updated refresh interval to the server
34+
fetch('/refresh-interval', {
35+
method: 'POST',
36+
headers: {
37+
'Content-Type': 'application/json'
38+
},
39+
body: JSON.stringify({ refresh_interval: parseInt(this.value) }) // Send in seconds, not milliseconds
40+
})
41+
.then(response => response.json())
42+
.then(data => {
43+
if (data.success) {
44+
console.log('Refresh interval updated successfully:', data.refresh_interval);
45+
} else {
46+
console.error('Failed to update refresh interval:', data.error);
47+
}
48+
})
49+
.catch(error => console.error('Error:', error));
50+
});
51+
1952
// Function to fetch system data from the API once
2053
function fetchSystemData(apiEndpoint) {
2154
if (!apiEndpoint) {
@@ -53,6 +86,11 @@ function updateCard(cardSelector, dataKey, data, unit = '') {
5386
cardElement.querySelector('.card-text').textContent = 'Data not available';
5487
return;
5588
}
89+
else if (dataValue === null) {
90+
console.warn(`Data key ${dataKey} is null in the response.`);
91+
cardElement.querySelector('.card-text').textContent = 'Data not available';
92+
return;
93+
}
5694

5795
cardElement.querySelector('.card-text').textContent = `${dataValue}${unit}`;
5896
}
@@ -68,7 +106,7 @@ function refreshData() {
68106
updateCard('.bg-dashboard-memory', 'dashboard_memory_usage', data); // Memory Usage
69107
updateCard('.bg-memory', 'memory_percent', data, '%'); // Memory Usage
70108
updateCard('.cpu-frequency', 'cpu_frequency', data, " MHz"); // CPU Frequency
71-
updateCard('.cpu-usage', 'cpu_percent', data, '%'); // CPU Usage
109+
updateCard('.cpu-card-usage', 'cpu_percent', data, '%'); // CPU Usage
72110
updateCard('.network-received', 'network_received', data, "MB"); // Network Received
73111
updateCard('.network-sent', 'network_sent', data, "MB"); // Network Sent
74112
});

‎src/templates/base/base.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@
1818
<div class="container">{% block content %}{% endblock %} </div>
1919
<!-- jQuery -->
2020
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
21-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
22-
<script src="{{ url_for('static', filename='js/refreshData.js')}}"></script>
21+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
2322
{% block extra_scripts %}{% endblock %}
2423
{% include 'ext/footer.html' %}
2524
</body>
26-
</html>
25+
</html>

‎src/templates/dashboard/developer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@
2020
{% endblock %}
2121
{% block extra_scripts %}
2222
<script src="{{ url_for('static', filename='js/battery_card.js')}}"></script>
23-
<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
23+
<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
2424
{% endblock %}

‎src/templates/info_pages/cpu_info.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@ <h2 class="my-4">CPU
1515
</div>
1616
{% endblock %}
1717
{% block extra_scripts %}
18-
<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
19-
{% endblock %}
18+
<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
19+
{% endblock %}

‎src/templates/info_pages/disk_info.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
'card_comp/disk/used.html' %} {% include 'card_comp/disk/free.html' %} </div>
1010
{% endblock %}
1111
{% block extra_scripts %}
12-
<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
12+
<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
1313
{% endblock %}

‎src/templates/info_pages/memory_info.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ <h2 class="my-4">Memory
1212
'card_comp/memory/swap_free.html' %} </div>
1313
{% endblock %}
1414
{% block extra_scripts %}
15-
<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
15+
<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
1616
{% endblock %}

‎src/templates/info_pages/network_info.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ <h2 class="my-4">
1111
'card_comp/network/ipv6_ip.html' %} </div>
1212
{% endblock %}
1313
{% block extra_scripts %}
14-
<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
14+
<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
1515
{% endblock %}

‎src/templates/ping/edit_website.html‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
{% extends 'base/base.html' %}
2+
23
{% block title %}Edit Website{% endblock %}
4+
35
{% block extra_head %}
46
<link rel="stylesheet" href="{{ url_for('static', filename='css/edit_website.css') }}">
57
{% endblock %}
6-
{% block content %}
7-
<h1>Edit Website</h1>
8-
<!-- Form to edit the website -->
9-
<form action="/edit_monitored_website/{{ website.id }}" method="POST">
10-
<label for="name">Website URL:</label>
11-
<input type="text" name="name" value="{{ website.name }}" required>
12-
13-
<label for="ping_interval">Ping Period (seconds):</label>
14-
<input type="number" name="ping_interval" value="{{ website.ping_interval }}" required>
158

16-
<label for="email">Email Address:</label>
17-
<input type="email" name="email_address" value="{{ website.email_address }}">
18-
19-
<label for="email_alerts_enabled">Email Alerts Enabled:</label>
20-
<input type="checkbox" id="email_alerts_enabled" name="email_alerts_enabled" {% if website.email_alerts_enabled %}checked{% endif %}>
21-
22-
<button type="submit">Update Website</button>
23-
</form>
24-
25-
<a href="{{ url_for('monitor_websites') }}">Back to Website List</a>
9+
{% block content %}
10+
<div class="container mt-5">
11+
<h1 class="mb-4 text-center">Update Website Details</h1>
12+
<div class="bg-white p-4 rounded shadow-sm">
13+
<!-- Form to edit the website -->
14+
<form action="/edit_monitored_website/{{ website.id }}" method="POST">
15+
<div class="form-group mb-3">
16+
<label for="name" class="form-label">Website URL:</label>
17+
<input type="text" id="name" name="name" class="form-control" value="{{ website.name }}" required>
18+
</div>
19+
<div class="form-group mb-3">
20+
<label for="ping_interval" class="form-label">Ping Period (seconds):</label>
21+
<input type="number" id="ping_interval" name="ping_interval" class="form-control" value="{{ website.ping_interval }}" required>
22+
</div>
23+
<div class="form-group mb-3">
24+
<label for="email_address" class="form-label">Email Address:</label>
25+
<input type="email" id="email_address" name="email_address" class="form-control" value="{{ website.email_address }}">
26+
</div>
27+
<div class="form-check mb-3">
28+
<input type="checkbox" id="email_alerts_enabled" name="email_alerts_enabled" class="form-check-input" {% if website.email_alerts_enabled %}checked{% endif %}>
29+
<label for="email_alerts_enabled" class="form-check-label">Email Alerts Enabled</label>
30+
</div>
31+
<button type="submit" class="btn btn-primary">Update Website</button>
32+
</form>
33+
</div>
34+
<a href="{{ url_for('monitor_websites') }}" class="btn btn-secondary mt-3">Back to Website List</a>
35+
</div>
2636
{% endblock %}

0 commit comments

Comments
 (0)