chore: code refactored

Author: codeperfectplus

app.py

@@ -14,17 +14,31 @@
 # Initialize the database
 db = SQLAlchemy(app)
 
+# config
+SPEEDTEST_COOLDOWN_IN_HOURS = 1 # in hours
+TIMEZONE = 'Asia/Kolkata'
+NUMBER_OF_SPEEDTESTS = 3
+
 # Define the model for storing speed test results
 class SpeedTestResult(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     download_speed = db.Column(db.String(50))
     upload_speed = db.Column(db.String(50))
     ping = db.Column(db.String(50))
-    timestamp = db.Column(db.DateTime, default=datetime.datetime.now(datetime.UTC))
+    timestamp = db.Column(db.DateTime, default=datetime.datetime.now())
 
     def __repr__(self):
         return f'<SpeedTestResult {self.download_speed}, {self.upload_speed}, {self.ping}>'
 
+# class DashoardSettings(db.Model):
+#     id = db.Column(db.Integer, primary_key=True)
+#     speedtest_cooldown = db.Column(db.Integer)
+#     timezone = db.Column(db.String(50))
+#     number_of_speedtests = db.Column(db.Integer)
+
+#     def __repr__(self):
+#         return f'<DashboardSettings {self.speedtest_cooldown}, {self.timezone}, {self.number_of_speedtests}>'
+
 def change_up_time_format(uptime):
     uptime_seconds = uptime.total_seconds()
     days = int(uptime_seconds // (24 * 3600))
@@ -48,23 +62,27 @@ def run_speedtest():
             elif "Ping:" in line:
                 ping = line.split("Ping: ")[1]
 
-        return {"download_speed": download_speed, "upload_speed": upload_speed, "ping": ping}
+        return {"download_speed": download_speed, "upload_speed": upload_speed, "ping": ping, 
+                "status": "Success"}
 
     except subprocess.CalledProcessError as e:
-        print(f"Speedtest failed with error: {e.stderr}")
-        return None
+        error = {"status": "Error", "message": e.stderr}
+        return error
 
     except Exception as e:
-        print(f"Error occurred while running speed test: {e}")
-        return None
+        error = {"status": "Error", "message": str(e)}
+        return error
 
 @app.route('/speedtest')
 def speedtest():
-    one_hour_ago = datetime.datetime.now(datetime.UTC) - datetime.timedelta(hours=1)
-    recent_results = SpeedTestResult.query.filter(SpeedTestResult.timestamp > one_hour_ago).all()
+    n_hour_ago = datetime.datetime.now() - datetime.timedelta(hours=SPEEDTEST_COOLDOWN_IN_HOURS)
+    recent_results = SpeedTestResult.query.filter(SpeedTestResult.timestamp > n_hour_ago).all()
 
-    if len(recent_results) < 3:
+    if len(recent_results) < NUMBER_OF_SPEEDTESTS:
         speedtest_result = run_speedtest()
+        if speedtest_result['status'] == "Error":
+            return render_template('error/speedtest_error.html', error=speedtest_result['message'])
+
         if speedtest_result:
             new_result = SpeedTestResult(
                 download_speed=speedtest_result['download_speed'],
@@ -121,7 +139,35 @@ def get_established_connections():
 @app.route('/')
 def dashboard():
     system_info = get_system_info()
-    return render_template('dashboard.html', system_info=system_info)
+
+    # Fetch the last speedtest result
+    n_hour_ago = datetime.datetime.now() - datetime.timedelta(hours=SPEEDTEST_COOLDOWN_IN_HOURS)
+    recent_results = SpeedTestResult.query.filter(SpeedTestResult.timestamp > n_hour_ago).all()
+
+    if recent_results:
+        # Display the most recent result from the database
+        latest_result = recent_results[-1]
+        speedtest_result = {
+            'download_speed': latest_result.download_speed,
+            'upload_speed': latest_result.upload_speed,
+            'ping': latest_result.ping
+        }
+        source = "Database"
+        next_test_time = latest_result.timestamp + datetime.timedelta(hours=1)
+        show_prompt = False
+        remaining_time_for_next_test = round((next_test_time - datetime.datetime.now()).total_seconds() / 60)
+    else:
+        # No recent results, prompt to perform a test
+        speedtest_result = None
+        source = None
+        show_prompt = True
+        remaining_time_for_next_test = None
+
+    return render_template('dashboard.html', system_info=system_info, 
+                           speedtest_result=speedtest_result, 
+                           source=source, 
+                           next_test_time=remaining_time_for_next_test, 
+                           show_prompt=show_prompt)
 
 @app.route('/cpu_usage')
 def cpu_usage():

dashboard.sh

@@ -54,6 +54,9 @@ export FLASK_ENV=development  # or production
 
 # Check if Flask app is running
 if ! pgrep -f "flask run --host=0.0.0.0 --port=$FLASK_PORT" > /dev/null; then
+    # check for the latest version of the code and do a git pull
+    git stash
+    git pull
     echo "Flask app is not running. Starting..." >> "$LOG_FILE"
     flask run --host=0.0.0.0 --port="$FLASK_PORT" &
 else

static/css/speedtest_error.css

@@ -0,0 +1,33 @@
+
+.error-container {
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.error-title {
+    font-size: 2rem;
+    margin-bottom: 10px;
+    font-weight: bold;
+}
+
+.error-message {
+    font-size: 1.25rem;
+    margin-bottom: 20px;
+}
+
+.retry-button {
+    background-color: #dc3545;
+    color: white;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.retry-button:hover {
+    background-color: #c82333;
+}

static/css/style.css

@@ -1,3 +1,40 @@
+/* Primary Colors */
+:root {
+    --color-primary: #007bff; /* Bright blue for primary elements */
+    --color-secondary: #6c757d; /* Gray for secondary elements */
+    --color-success: #28a745; /* Green for success */
+    --color-danger: #dc3545; /* Red for danger */
+    --color-warning: #ffc107; /* Yellow for warning */
+    --color-info: #17a2b8; /* Cyan for info */
+    --color-light: #f8f9fa; /* Light gray for backgrounds */
+    --color-dark: #343a40; /* Dark gray for text */
+    --color-white: #ffffff; /* White for text */
+    --color-black: #000000; /* Black for text */
+    
+    /* card colors */
+    --color-username: #007bff; /* Bright blue for username */
+    --color-boot: #28a745; /* Green for boot time */
+    --color-cpu: #af13e3; /* Red for CPU */
+    --color-ip: #03e77c; /* Bright blue for IP address */
+    --color-cpu-usage: #ffc107; /* Yellow for CPU usage */
+    --color-memory: #6f42c1; /* Purple for memory */
+    --color-disk: #6c757d; /* Gray for disk */
+    --color-uptime: #17a2b8; /* Cyan for uptime */
+    --color-network: #11eeee; /* Bright blue for network */
+    --color-speedtest: #c9ef4b; /* Bright blue for speedtest */
+    --color-battery: #007bff; /* Bright blue for battery */
+
+    /* shadow colors */
+    --color-shadow: #f80000; /* Red shadow for username */
+    
+    /* Battery colors */
+    --color-battery-100: linear-gradient(135deg, #76c7c0, #4caf50); /* Green gradient for 100% battery */
+    --color-battery-75: linear-gradient(135deg, #76c7c0, #ffeb3b); /* Yellow gradient for 75% battery */
+    --color-battery-50: linear-gradient(135deg, #38322a, #3a3732); /* Orange gradient for 50% battery */
+    --color-battery-25: linear-gradient(135deg, #58382f, #483b3a); /* Red gradient for 25% battery */
+    --color-battery-0: linear-gradient(135deg, #f44336, #d32f2f); /* Dark red gradient for 0% battery */
+}
+
 /* General Styles */
 body {
     font-family: 'Arial', sans-serif;
@@ -89,50 +126,54 @@ body {
     border-radius: 10px; /* Rounded corners */
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
     transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
+    position: relative; /* Allows positioning for the pseudo-element */
 }
 
 /* Specific Background Colors */
+.card.bg-basic {
+    background-color: var(--color-primary); /* Bright blue for basic info */
+}
+
 .card.bg-username {
-    background-color: #007bff; /* Bright blue for user-related info */
+    background-color: var(--color-username); /* Bright blue for username */
 }
 
 .card.bg-ipv4 {
-    background-color: #ff5722; /* Warm orange for network info */
+    background-color: var(--color-ip); /* Bright blue for IP address */
 }
 
 .card.bg-cpu {
-    background-color: #f44336; /* Red for CPU-related info */
+    background-color: var(--color-cpu); /* Red for CPU */
 }
 
 .card.bg-boot {
-    background-color: #9c27b0; /* Purple for boot time */
+    background-color: var(--color-boot); /* Green for boot time */
 }
 
 .card.bg-cpu-usage {
-    background-color: #ff9800; /* Orange for CPU usage */
+    background-color: var(--color-cpu-usage); /* Yellow for CPU usage */
 }
 
 .card.bg-memory {
-    background-color: #3f51b5; /* Deep blue for memory usage */
+    background-color: var(--color-memory); /* Purple for memory usage */
 }
 
 .card.bg-disk {
-    background-color: #607d8b; /* Blue-gray for disk usage */
+    background-color: var(--color-disk); /* Gray for disk usage */
 }
 
 .card.bg-uptime {
-    background-color: #8bc34a; /* Light green for uptime */
+    background-color: var(--color-uptime); /* Cyan for uptime */
 }
 
 .card.bg-network {
-    background-color: #00bcd4; /* Teal for network statistics */
+    background-color: var(--color-network); /* Bright blue for network */
 }
 
 .card.bg-speedtest {
-    background-color: #ff9800; /* Orange for CPU usage */
+    background-color: var(--color-speedtest); /* Bright blue for speedtest */
 }
 
-
 .card-body {
     display: flex;
     flex-direction: column;
@@ -197,3 +238,123 @@ body {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     color: #fff;
 }
+
+/* Card containing CPU core visualization */
+.card.bg-cpu {
+    position: relative;
+}
+
+.cpu-core-visualization {
+    display: flex;
+    gap: 0.5rem; /* Space between bars */
+    margin-top: 1rem;
+    justify-content: center; /* Center-align bars */
+}
+
+/* Individual bar representing a CPU core */
+.cpu-core-bar {
+    width: 10px; /* Width of each bar */
+    height: 10px; /* Height of each bar */
+    background-color: #ffffff; /* Bar color */
+    border-radius: 5px; /* Rounded corners */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for depth */
+    transition: background-color 0.3s ease; /* Smooth transition on hover */
+}
+
+/* General Card Hover Effect */
+.card:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Specific Background Colors with Hover Effects */
+
+/* User-related info */
+.card.bg-username:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Network info */
+.card.bg-ipv4:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* CPU-related info */
+.card.bg-cpu:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Boot time */
+.card.bg-boot:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* CPU usage */
+.card.bg-cpu-usage:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Memory usage */
+.card.bg-memory:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Disk usage */
+.card.bg-disk:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Uptime */
+.card.bg-uptime:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Network statistics */
+.card.bg-network:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Speedtest */
+.card.bg-speedtest:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Battery Card Styles */
+.battery-card:hover {
+    transform: translateY(-8px); /* Slight lift effect */
+    box-shadow: 0 10px 20px var(--color-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+/* Card Red Bottom Effect */
+.card::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 10px; /* Height of the red effect */
+    border-radius: 0 0 10px 10px; /* Match the card's border radius */
+    z-index: 1; /* Ensure it's on top of the card content */
+}

templates/base.html

@@ -8,6 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    
     {% block extra_head %}{% endblock %}
 </head>
 

templates/dasbhboard_comp/battery_percentage.html

@@ -0,0 +1,8 @@
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card battery-card" data-battery="{{ system_info['battery_percent'] }}">
+        <div class="card-body">
+            <h5 class="card-title">Battery Percentage <i class="fas fa-battery-three-quarters"></i></h5>
+            <p class="card-text fs-4">{{ system_info['battery_percent'] }}%</p>
+        </div>
+    </div>
+</div>