feat: ✨ setting page added for basic settings

Author: codeperfectplus

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template
+from flask import Flask, render_template, request, flash
 from flask_sqlalchemy import SQLAlchemy
 import os
 import psutil
@@ -10,15 +10,11 @@
 # Configure the SQLite database
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///speedtest_results.db'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+app.config['SECRET_KEY'] = 'secret'
 
 # 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)
@@ -30,14 +26,22 @@ class SpeedTestResult(db.Model):
     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)
+class DashoardSettings(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    speedtest_cooldown = db.Column(db.Integer, default=1)
+    number_of_speedtests = db.Column(db.Integer, default=1)
+    timezone = db.Column(db.String(50), default='Asia/Kolkata')
+
+    def __repr__(self):
+        return f'<DashboardSettings {self.speedtest_cooldown}, {self.timezone}, {self.number_of_speedtests}>'
 
-#     def __repr__(self):
-#         return f'<DashboardSettings {self.speedtest_cooldown}, {self.timezone}, {self.number_of_speedtests}>'
+# initialize the database
+with app.app_context():
+    db.create_all()
+    settings = DashoardSettings.query.first()
+    if not settings:
+        db.session.add(DashoardSettings())
+        db.session.commit()
 
 def change_up_time_format(uptime):
     uptime_seconds = uptime.total_seconds()
@@ -73,8 +77,14 @@ def run_speedtest():
         error = {"status": "Error", "message": str(e)}
         return error
 
+def datetimeformat(value, format='%Y-%m-%d %H:%M:%S'):
+    return value.strftime(format)
+
 @app.route('/speedtest')
 def speedtest():
+    settings = DashoardSettings.query.first()
+    SPEEDTEST_COOLDOWN_IN_HOURS = settings.speedtest_cooldown
+    NUMBER_OF_SPEEDTESTS = settings.number_of_speedtests
     n_hour_ago = datetime.datetime.now() - datetime.timedelta(hours=SPEEDTEST_COOLDOWN_IN_HOURS)
     recent_results = SpeedTestResult.query.filter(SpeedTestResult.timestamp > n_hour_ago).all()
 
@@ -94,11 +104,13 @@ def speedtest():
             return render_template('speedtest_result.html', speedtest_result=speedtest_result, source="Actual Test")
     else:
         latest_result = recent_results[-1]
-        next_test_time = latest_result.timestamp + datetime.timedelta(hours=1)
+        next_test_time = latest_result.timestamp + datetime.timedelta(hours=SPEEDTEST_COOLDOWN_IN_HOURS)
+        remaining_time_for_next_test = round((next_test_time - datetime.datetime.now()).total_seconds() / 60)
         return render_template('speedtest_result.html', 
                                speedtest_result=latest_result, 
                                source="Database", 
-                               next_test_time=next_test_time)
+                               next_test_time=next_test_time,
+                               remaining_time_for_next_test=remaining_time_for_next_test)
 
 def get_system_info():
     print("Getting system information...")
@@ -138,12 +150,13 @@ def get_established_connections():
 
 @app.route('/')
 def dashboard():
+    settings = DashoardSettings.query.first()
+    SPEEDTEST_COOLDOWN_IN_HOURS = settings.speedtest_cooldown
     system_info = get_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()
-
+    last_timestamp = datetimeformat(recent_results[-1].timestamp) if recent_results else None
     if recent_results:
         # Display the most recent result from the database
         latest_result = recent_results[-1]
@@ -153,7 +166,7 @@ def dashboard():
             'ping': latest_result.ping
         }
         source = "Database"
-        next_test_time = latest_result.timestamp + datetime.timedelta(hours=1)
+        next_test_time = latest_result.timestamp + datetime.timedelta(hours=SPEEDTEST_COOLDOWN_IN_HOURS)
         show_prompt = False
         remaining_time_for_next_test = round((next_test_time - datetime.datetime.now()).total_seconds() / 60)
     else:
@@ -165,7 +178,8 @@ def dashboard():
 
     return render_template('dashboard.html', system_info=system_info, 
                            speedtest_result=speedtest_result, 
-                           source=source, 
+                           source=source,
+                           last_timestamp=last_timestamp,
                            next_test_time=remaining_time_for_next_test, 
                            show_prompt=show_prompt)
 
@@ -174,6 +188,20 @@ def cpu_usage():
     cpu_usage = psutil.cpu_percent(interval=1, percpu=True)
     return render_template('cpu_usage.html', cpu_usage=cpu_usage)
 
+
+@app.route('/settings', methods=['GET', 'POST'])
+def settings():
+    # Fetch the settings from the database and update them
+    settings = DashoardSettings.query.first()
+    if settings:
+        if request.method == 'POST':
+            settings.speedtest_cooldown = int(request.form['speedtest_cooldown'])
+            settings.number_of_speedtests = int(request.form['number_of_speedtests'])
+            settings.timezone = request.form['timezone']
+            db.session.commit()
+            flash('Settings updated successfully!', 'success')
+        return render_template('settings.html', settings=settings)
+
 @app.route('/memory_usage')
 def memory_usage():
     memory_info = {

dashboard.sh

@@ -54,10 +54,13 @@ 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"
+    # git pull on FLASK_APP_PATH directory
+    current_dir=$(pwd)
+    cd $SCRIPT_DIR
+    git stash && git pull
+    cd $current_dir
+
+    echo "Starting Flask app..." >> "$LOG_FILE"
     flask run --host=0.0.0.0 --port="$FLASK_PORT" &
 else
     echo "Flask app is already running." >> "$LOG_FILE"

static/css/settings.css

@@ -0,0 +1,44 @@
+.container {
+    max-width: 600px;
+    margin: auto;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 10px;
+}
+
+h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+.btn {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}

static/css/style.css

@@ -18,7 +18,7 @@
     --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-disk: #6711e9; /* Gray for disk */
     --color-uptime: #17a2b8; /* Cyan for uptime */
     --color-network: #11eeee; /* Bright blue for network */
     --color-speedtest: #c9ef4b; /* Bright blue for speedtest */
@@ -186,13 +186,18 @@ body {
 }
 
 .card-text {
-    font-size: 1.125rem; /* Adjusts font size for text */
+    font-size: 1.5rem; /* Adjusts font size for text */
 }
 
 .btn-primary {
     margin-top: 1rem; /* Adds space above buttons */
 }
 
+.fas {
+    font-size: 1.5rem; /* Adjusts icon size */
+    margin-right: 0.5rem; /* Adds space between icon and text */
+}
+
 /* Responsive Styles */
 @media (max-width: 767.98px) {
     .navbar-nav .nav-link {
@@ -261,6 +266,14 @@ body {
     transition: background-color 0.3s ease; /* Smooth transition on hover */
 }
 
+.cpu-core-bar:hover {
+    background-color: var(--color-cpu); /* Red color on hover */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Slightly larger shadow */
+    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+    filter: brightness(1.2); /* Brighten the bar */
+
+}
+
 /* General Card Hover Effect */
 .card:hover {
     transform: translateY(-8px); /* Slight lift effect */
@@ -358,3 +371,24 @@ body {
     border-radius: 0 0 10px 10px; /* Match the card's border radius */
     z-index: 1; /* Ensure it's on top of the card content */
 }
+
+footer {
+    background-color: #343a40;
+    color: #adb5bd;
+    padding: 1rem 0;
+    position: relative;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+    position: fixed;
+}
+
+footer a {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+footer a:hover {
+    color: #ced4da;
+    text-decoration: underline;
+}

templates/base.html

@@ -18,6 +18,7 @@
     <div class="container mt-5">
         {% block content %}{% endblock %}
     </div>
+    {% include 'ext/footer.html' %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="{{ url_for('static', filename='js/script.js') }}"></script>

templates/dasbhboard_comp/speedtest.html

@@ -5,8 +5,8 @@ <h5 class="card-title">Perform Speed Test <i class="fas fa-clock"></i></h5>
             {% if speedtest_result %}
                 <p class="card-text fs-4">Download Speed: {{ speedtest_result["download_speed"] }}</p>
                 <p class="card-text fs-4">Upload Speed: {{ speedtest_result["upload_speed"] }}</p>
-                <p class="card-text fs-4">Test Last Performed: {{ next_test_time }} mins ago</p>
-                <p class="card-text fs-4">Try again test in : {{ next_test_time }}</p>
+                <p class="card-text fs-4">Test Last Performed: {{ last_timestamp }}</p>
+                <p class="card-text fs-4">Try again test in : {{ next_test_time }} mins</p>
             {% endif %}
             {% if show_prompt %}
                 <a href="{{ url_for('speedtest') }}" class="btn btn-primary">Run Speed Test</a>

templates/ext/footer.html

@@ -0,0 +1,5 @@
+<footer class="text-center">
+    <p>Powered by <a href="https://www.python.org/" target="_blank">Python</a>, <a
+            href="https://flask.palletsprojects.com/" target="_blank">Flask</a>, <a href="https://getbootstrap.com/"
+            target="_blank">Bootstrap</a>, and <a href="https://fontawesome.com/" target="_blank">FontAwesome</a>.</p>
+</footer>

templates/ext/message.html

@@ -0,0 +1,25 @@
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
+<div id="flash-messages">
+    {% for category, message in messages %}
+    <div class="alert alert-{{ category }}" role="alert">
+        {{ message }}
+    </div>
+    {% endfor %}
+</div>
+{% endif %}
+{% endwith %}
+
+<script>
+    // Automatically remove flash messages after 5 seconds
+    setTimeout(function () {
+        var flashMessages = document.getElementById('flash-messages');
+        if (flashMessages) {
+            flashMessages.style.transition = 'opacity 0.5s ease';
+            flashMessages.style.opacity = '0';
+            setTimeout(function () {
+                flashMessages.remove();
+            }, 500); // Additional time for the fade-out effect
+        }
+    }, 5000); // 5 seconds delay
+</script>

templates/ext/navbar.html

@@ -21,6 +21,9 @@
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'system_health' %}active{% endif %}" href="{{ url_for('system_health') }}">System Health</a>
             </li>
+            <li class="nav-item">
+                <a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}" href="{{ url_for('settings') }}">Settings</a>
+            </li>
         </ul>
     </div>
 </nav>

templates/settings.html

@@ -0,0 +1,36 @@
+{% extends 'base.html' %}
+
+{% block title %}CPU Usage Details{% endblock %}
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}">
+{% endblock %}
+{% block content %}
+<h1>Settings</h1>
+<form method="POST">
+    {% include 'ext/message.html' %}
+
+    <div class="form-group">
+        <label for="speedtest_cooldown">Speedtest Cooldown (minutes):</label>
+        <input type="number" id="speedtest_cooldown" name="speedtest_cooldown" value="{{ settings.speedtest_cooldown }}"
+            min="1" required>
+    </div>
+    <div class="form-group">
+        <label for="number_of_speedtests">Number of Speedtests Allowed per Hour:</label>
+        <input type="number" id="number_of_speedtests" name="number_of_speedtests"
+            value="{{ settings.number_of_speedtests }}" min="1" required>
+    </div>
+    <div class="form-group">
+        <label for="timezone">Timezone:</label>
+        <select id="timezone" name="timezone">
+            <option value="Asia/Kolkata" {% if settings.timezone=="Asia/Kolkata" %}selected{% endif %}>Asia/Kolkata
+            </option>
+            <option value="America/New_York" {% if settings.timezone=="America/New_York" %}selected{% endif %}>
+                America/New_York</option>
+            <option value="Europe/London" {% if settings.timezone=="Europe/London" %}selected{% endif %}>Europe/London
+            </option>
+            <!-- Add more timezones as needed -->
+        </select>
+    </div>
+    <button type="submit" class="btn btn-primary">Save Settings</button>
+</form>
+{% endblock %}