updated card and board

Flask-monitoring/app.py

@@ -2,6 +2,7 @@ from flask import Flask, request, jsonify, render_template, redirect, url_for
 from flask_sqlalchemy import SQLAlchemy
 from datetime import datetime, timedelta
 import os
+import threading
 
 app = Flask(__name__)
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///logs.db'
@@ -48,7 +49,7 @@ def get_logs():
 
 @app.route('/cleanup', methods=['DELETE'])
 def cleanup_logs():
-    cutoff_date = datetime.utcnow() - timedelta(days=10)
+    cutoff_date = datetime.utcnow() - timedelta(hours=24)
     Log.query.filter(Log.timestamp < cutoff_date).delete()
     db.session.commit()
     return jsonify({'status': 'success', 'message': 'Old logs deleted'})
@@ -108,5 +109,13 @@ def get_board_logs(hostname):
     logs = Log.query.filter_by(hostname=hostname).order_by(Log.timestamp.desc()).all()
     return jsonify({'logs': [{'timestamp': log.timestamp, 'message': log.message} for log in logs]})
 
+def schedule_cleanup():
+    with app.app_context():
+        cutoff_date = datetime.utcnow() - timedelta(hours=24)
+        Log.query.filter(Log.timestamp < cutoff_date).delete()
+        db.session.commit()
+    threading.Timer(3600, schedule_cleanup).start()
+
 if __name__ == '__main__':
+    schedule_cleanup()  # Start the cleanup scheduler
     app.run(host='0.0.0.0', port=5000)

Flask-monitoring/templates/board.html

@@ -7,24 +7,27 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <style>
         body {
-            background-color: #f8f9fa;
+            background-color: #343a40;
+            color: #6e6c6c;
         }
         .card {
-            border: 1px solid #dee2e6;
+            background-color: #495057;
+            border: 1px solid #6c757d;
             border-radius: 0.25rem;
             box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
         }
         .card-title {
             font-size: 1.25rem;
             font-weight: 500;
+            color:  #f6f6f7;
         }
         .card-text {
             font-size: 1rem;
-            color: #6c757d;
+            color: #f6f6f7;
         }
         .timer {
             font-size: 1rem;
-            color: #6c757d;
+            color: #ced4da;
             text-align: right;
         }
         .status-indicator {
@@ -39,6 +42,22 @@
         .status-off {
             background-color: #dc3545;
         }
+        .btn-danger {
+            background-color: #dc3545;
+            border-color: #dc3545;
+        }
+        .btn-danger:hover {
+            background-color: #c82333;
+            border-color: #bd2130;
+        }
+        .btn-secondary {
+            background-color: #6c757d;
+            border-color: #6c757d;
+        }
+        .btn-secondary:hover {
+            background-color: #5a6268;
+            border-color: #545b62;
+        }
     </style>
     <script>
         function updateLogs() {
@@ -59,7 +78,8 @@
                         const relayIndicator = document.getElementById(`relay-status-${i}`);
                         relayIndicator.className = `status-indicator ${data.relay_status[`relay${i}`] === 'on' ? 'status-on' : 'status-off'}`;
                         const relayMessage = document.getElementById(`relay-message-${i}`);
-                        relayMessage.innerText = data.logs.find(log => log.message.includes(`Relay ${i} turned`)).message;
+                        const relayLog = data.logs.find(log => log.message.includes(`Relay ${i} turned`));
+                        relayMessage.innerText = relayLog ? relayLog.message : '';
                     }
 
                     // Update input status indicators and messages
@@ -67,7 +87,8 @@
                         const inputIndicator = document.getElementById(`input-status-${i}`);
                         inputIndicator.className = `status-indicator ${data.input_status[`input${i}`] === 'on' ? 'status-on' : 'status-off'}`;
                         const inputMessage = document.getElementById(`input-message-${i}`);
-                        inputMessage.innerText = data.logs.find(log => log.message.includes(`Input ${i}`)).message;
+                        const inputLog = data.logs.find(log => log.message.includes(`Input ${i}`));
+                        inputMessage.innerText = inputLog ? inputLog.message : '';
                     }
                 });
         }

Flask-monitoring/templates/index.html

@@ -7,20 +7,23 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <style>
         body {
-            background-color: #f8f9fa;
+            background-color: #343a40;
+            color: #f8f9fa;
         }
         .card {
-            border: 1px solid #dee2e6;
+            background-color: #495057;
+            border: 1px solid #6c757d;
             border-radius: 0.25rem;
             box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
         }
         .card-title {
             font-size: 1.25rem;
             font-weight: 500;
+            color: #f8f9fa;
         }
         .card-text {
             font-size: 1rem;
-            color: #6c757d;
+            color: #ced4da;
         }
         .status-online {
             color: #28a745;
@@ -30,6 +33,14 @@
             color: #dc3545;
             font-weight: bold;
         }
+        .btn-primary {
+            background-color: #007bff;
+            border-color: #007bff;
+        }
+        .btn-primary:hover {
+            background-color: #0056b3;
+            border-color: #004085;
+        }
     </style>
 </head>
 <body>
@@ -37,7 +48,7 @@
         <h1 class="text-center mb-4">ESP Board Status</h1>
         <div class="row">
             {% for board in boards %}
-            <div class="col-md-4">
+            <div class="col-md-4 col-sm-6">
                 <div class="card mb-4">
                     <div class="card-body">
                         <h5 class="card-title">{{ board.hostname }}</h5>