chore: 🎨 some css enchancement

Author: codeperfectplus

src/routes/ping.py

@@ -26,13 +26,15 @@ def time_ago(ping_time, current_time):
     # Calculate the difference in seconds
     time_diff = (current_time - ping_time).total_seconds()
 
-    if time_diff <= 120:  # Less than or equal to 2 minutes
-        if time_diff <= 60:
-            return f"{int(time_diff)} seconds ago"
+    if time_diff <= 60:
+        return f"{int(time_diff)} seconds ago"
+    if time_diff <= 3600:
         return f"{int(time_diff // 60)} min ago"
-    
-    # Fallback to formatted datetime if over 2 minutes
-    return ping_time.strftime('%Y-%m-%d %H:%M:%S')
+    if time_diff <= 86400:
+        return f"{int(time_diff // 3600)} hours ago"
+    else:
+        # Fallback to formatted datetime if over a day
+        return ping_time.strftime('%Y-%m-%d %H:%M:%S')
 
 # Route to view and add websites
 @app.route('/monitor_websites')

src/static/css/edit_server.css

@@ -1,16 +1,64 @@
-/* edit_server.css */
+/* Basic reset and font settings */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa;
+}
+
+/* Container styling */
 .container {
-    margin-top: 50px;
+    max-width: 800px;
+    margin: 0 auto;
 }
 
-.form-group {
-    margin-bottom: 1rem;
+/* Form container styling */
+.bg-white {
+    background-color: #ffffff;
 }
 
+.p-4 {
+    padding: 1.5rem;
+}
+
+.rounded {
+    border-radius: 0.25rem;
+}
+
+.shadow-sm {
+    box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);
+}
+
+/* Form element styling */
 .form-label {
-    font-weight: bold;
+    font-weight: 600;
+    color: #333;
+}
+
+.form-control {
+    border-radius: 0.25rem;
+    box-shadow: none;
+}
+
+.form-check-input {
+    margin-top: 0.3rem;
+}
+
+.btn {
+    border-radius: 0.25rem;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+}
+
+.btn-primary {
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.btn-secondary {
+    background-color: #6c757d;
+    border-color: #6c757d;
 }
 
-.btn-success {
-    margin-top: 20px;
+.btn-secondary:hover {
+    background-color: #5a6268;
+    border-color: #545b62;
 }

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

@@ -1,5 +1,6 @@
 let refreshInterval = 0; // Initialize with a default value
 let refreshTimer; // Variable to hold the setInterval timer
+let refreshTimeout; // Variable to hold the setTimeout timer
 
 function fetchRefreshInterval() {
     fetch('/refresh-interval')
@@ -16,6 +17,38 @@ function fetchRefreshInterval() {
         .catch(error => console.error('Error:', error));
 }
 
+// Event listener for select input change
+document.getElementById('refresh-interval').addEventListener('change', function () {
+    // Clear the existing timeout
+    clearTimeout(refreshTimeout);
+
+    // Update the interval based on the selected value
+    refreshInterval = parseInt(this.value) * 1000;  // Convert to milliseconds
+
+    // refresh the page once
+    refreshTimeout = setTimeout(() => {
+        window.location.reload();
+    }, refreshInterval);
+
+    // Send the updated refresh interval to the server
+    fetch('/refresh-interval', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ refresh_interval: parseInt(this.value) })  // Send in seconds, not milliseconds
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                console.log('Refresh interval updated successfully:', data.refresh_interval);
+            } else {
+                console.error('Failed to update refresh interval:', data.error);
+            }
+        })
+        .catch(error => console.error('Error:', error));
+});
+
 // Function to fetch system data from the API once
 function fetchSystemData(apiEndpoint) {
     if (!apiEndpoint) {
@@ -53,6 +86,11 @@ function updateCard(cardSelector, dataKey, data, unit = '') {
         cardElement.querySelector('.card-text').textContent = 'Data not available';
         return;
     }
+    else if (dataValue === null) {
+        console.warn(`Data key ${dataKey} is null in the response.`);
+        cardElement.querySelector('.card-text').textContent = 'Data not available';
+        return;
+    }
 
     cardElement.querySelector('.card-text').textContent = `${dataValue}${unit}`;
 }
@@ -68,7 +106,7 @@ function refreshData() {
         updateCard('.bg-dashboard-memory', 'dashboard_memory_usage', data);  // Memory Usage
         updateCard('.bg-memory', 'memory_percent', data, '%');  // Memory Usage
         updateCard('.cpu-frequency', 'cpu_frequency', data, " MHz");  // CPU Frequency
-        updateCard('.cpu-usage', 'cpu_percent', data, '%');   // CPU Usage
+        updateCard('.cpu-card-usage', 'cpu_percent', data, '%');   // CPU Usage
         updateCard('.network-received', 'network_received', data, "MB");  // Network Received
         updateCard('.network-sent', 'network_sent', data, "MB");  // Network Sent
     });

src/templates/base/base.html

@@ -18,9 +18,8 @@
     <div class="container">{% block content %}{% endblock %} </div>
     <!-- jQuery -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
-    <script src="{{ url_for('static', filename='js/refreshData.js')}}"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>    
     {% block extra_scripts %}{% endblock %}
     {% include 'ext/footer.html' %}
 </body>
-</html>
+</html>

src/templates/dashboard/developer.html

@@ -20,5 +20,5 @@
 {% endblock %}
 {% block extra_scripts %}
 <script src="{{ url_for('static', filename='js/battery_card.js')}}"></script>
-<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
+<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
 {% endblock %}

src/templates/info_pages/cpu_info.html

@@ -15,5 +15,5 @@ <h2 class="my-4">CPU
 </div>
 {% endblock %}
 {% block extra_scripts %}
-<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
-{% endblock %}
+<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
+{% endblock %}

src/templates/info_pages/disk_info.html

@@ -9,5 +9,5 @@
     'card_comp/disk/used.html' %} {% include 'card_comp/disk/free.html' %} </div>
 {% endblock %}
 {% block extra_scripts %}
-<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
+<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
 {% endblock %}

src/templates/info_pages/memory_info.html

@@ -12,5 +12,5 @@ <h2 class="my-4">Memory
     'card_comp/memory/swap_free.html' %} </div>
 {% endblock %}
 {% block extra_scripts %}
-<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
+<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
 {% endblock %}

src/templates/info_pages/network_info.html

@@ -11,5 +11,5 @@ <h2 class="my-4">
     'card_comp/network/ipv6_ip.html' %} </div>
 {% endblock %}
 {% block extra_scripts %}
-<script src="{{ url_for('static', filename='js/update_refresh_interval.js')}}"></script>
+<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
 {% endblock %}

src/templates/ping/edit_website.html

@@ -1,26 +1,36 @@
 {% extends 'base/base.html' %}
+
 {% block title %}Edit Website{% endblock %}
+
 {% block extra_head %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/edit_website.css') }}">
 {% endblock %}
-{% block content %}
-<h1>Edit Website</h1>
-<!-- Form to edit the website -->
-<form action="/edit_monitored_website/{{ website.id }}" method="POST">
-    <label for="name">Website URL:</label>
-    <input type="text" name="name" value="{{ website.name }}" required>
-    
-    <label for="ping_interval">Ping Period (seconds):</label>
-    <input type="number" name="ping_interval" value="{{ website.ping_interval }}" required>
 
-    <label for="email">Email Address:</label>
-    <input type="email" name="email_address" value="{{ website.email_address }}">
-
-    <label for="email_alerts_enabled">Email Alerts Enabled:</label>
-    <input type="checkbox" id="email_alerts_enabled" name="email_alerts_enabled" {% if website.email_alerts_enabled %}checked{% endif %}>
-    
-    <button type="submit">Update Website</button>
-</form>
-
-<a href="{{ url_for('monitor_websites') }}">Back to Website List</a>
+{% block content %}
+<div class="container mt-5">
+    <h1 class="mb-4 text-center">Update Website Details</h1>
+    <div class="bg-white p-4 rounded shadow-sm">
+        <!-- Form to edit the website -->
+        <form action="/edit_monitored_website/{{ website.id }}" method="POST">
+            <div class="form-group mb-3">
+                <label for="name" class="form-label">Website URL:</label>
+                <input type="text" id="name" name="name" class="form-control" value="{{ website.name }}" required>
+            </div>
+            <div class="form-group mb-3">
+                <label for="ping_interval" class="form-label">Ping Period (seconds):</label>
+                <input type="number" id="ping_interval" name="ping_interval" class="form-control" value="{{ website.ping_interval }}" required>
+            </div>
+            <div class="form-group mb-3">
+                <label for="email_address" class="form-label">Email Address:</label>
+                <input type="email" id="email_address" name="email_address" class="form-control" value="{{ website.email_address }}">
+            </div>
+            <div class="form-check mb-3">
+                <input type="checkbox" id="email_alerts_enabled" name="email_alerts_enabled" class="form-check-input" {% if website.email_alerts_enabled %}checked{% endif %}>
+                <label for="email_alerts_enabled" class="form-check-label">Email Alerts Enabled</label>
+            </div>
+            <button type="submit" class="btn btn-primary">Update Website</button>
+        </form>
+    </div>
+    <a href="{{ url_for('monitor_websites') }}" class="btn btn-secondary mt-3">Back to Website List</a>
+</div>
 {% endblock %}