update connection page

app.py

@@ -222,6 +222,23 @@ def generate_breadcrumbs(subpath=None):
             breadcrumbs.append({'name': part, 'path': path_accum})
     return breadcrumbs
 
+
+def human_readable_size(num_bytes):
+    """
+    Convert a byte count into a human-readable string (e.g., 1.2 MB).
+    """
+    if num_bytes is None:
+        return "-"
+    try:
+        num = float(num_bytes)
+    except (TypeError, ValueError):
+        return "-"
+    units = ['B', 'KB', 'MB', 'GB', 'TB']
+    for unit in units:
+        if num < 1024 or unit == units[-1]:
+            return f"{num:.1f} {unit}" if num % 1 else f"{int(num)} {unit}"
+        num /= 1024
+
 @app.route('/icon/<string:size>.png')
 def serve_resized_icon(size):
     cached_image_bytes = get_cached_image(size)
@@ -632,6 +649,7 @@ def query_recent_connections():
                     'timestamp': datetime.fromisoformat(row[0]).strftime('%d.%m.%Y %H:%M:%S'),
                     'full_path': row[1],
                     'filesize': row[2],
+                    'filesize_human': human_readable_size(row[2]),
                     'mime_typ': row[3],
                     'location': row[4],
                     'user_agent': row[5],
@@ -673,6 +691,7 @@ def handle_request_initial_data():
             'timestamp': datetime.fromisoformat(row[0]).strftime('%d.%m.%Y %H:%M:%S'),
             'full_path': row[1],
             'filesize' : row[2],
+            'filesize_human': human_readable_size(row[2]),
             'mime_typ' : row[3],
             'location': row[4],
             'user_agent': row[5],

templates/connections.html

@@ -100,10 +100,6 @@
     <div class="section-header">
       <h2 style="margin: 0;">Verbindungen der letzten 10 Minuten</h2>
       <div class="stats">
-        <div class="stat-item">
-          <div class="stat-label">Active Dots</div>
-          <div class="stat-value" id="active-dots">0</div>
-        </div>
         <div class="stat-item">
           <div class="stat-label">Last Connection</div>
           <div class="stat-value" id="last-connection" style="font-size: 14px;">-</div>
@@ -112,6 +108,14 @@
           <div class="stat-label">Total Connections</div>
           <div class="stat-value" id="totalConnections">0</div>
         </div>
+        <div class="stat-item">
+          <div class="stat-label">Total File Size</div>
+          <div class="stat-value" id="totalSize">0 B</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Cached %</div>
+          <div class="stat-value" id="cachedPercent">0%</div>
+        </div>
       </div>
     </div>
 
@@ -228,8 +232,6 @@
     }
 
     function updateMapStats() {
-        document.getElementById('active-dots').textContent = activeDots.size;
-        
         let mostRecent = null;
         activeDots.forEach(dot => {
             if (!mostRecent || dot.lastUpdate > mostRecent) {
@@ -252,6 +254,28 @@
         return `${hours}h ago`;
     }
 
+    function formatBytes(bytes) {
+        if (!bytes && bytes !== 0) return "-";
+        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+        let num = bytes;
+        let unitIndex = 0;
+        while (num >= 1024 && unitIndex < units.length - 1) {
+            num /= 1024;
+            unitIndex++;
+        }
+        const rounded = num % 1 === 0 ? num.toFixed(0) : num.toFixed(1);
+        return `${rounded} ${units[unitIndex]}`;
+    }
+
+    function toBool(val) {
+        if (val === true || val === 1) return true;
+        if (typeof val === 'string') {
+            const lower = val.toLowerCase();
+            return lower === 'true' || lower === '1' || lower === 'yes';
+        }
+        return false;
+    }
+
     function animateDots() {
         const now = Date.now();
         const fadeTime = 10 * 60 * 1000; // 10 minutes
@@ -306,6 +330,14 @@
     // Table functions
     function updateStats(data) {
       document.getElementById("totalConnections").textContent = data.length;
+      const totalBytes = data.reduce((sum, rec) => {
+        const val = parseFloat(rec.filesize);
+        return sum + (isNaN(val) ? 0 : val);
+      }, 0);
+      document.getElementById("totalSize").textContent = formatBytes(totalBytes);
+      const cachedCount = data.reduce((sum, rec) => sum + (toBool(rec.cached) ? 1 : 0), 0);
+      const pct = data.length ? ((cachedCount / data.length) * 100).toFixed(0) : 0;
+      document.getElementById("cachedPercent").textContent = `${pct}%`;
     }
 
     function createRow(record, animate=true) {
@@ -321,7 +353,7 @@
         <td>${record.location}</td>
         <td>${record.user_agent}</td>
         <td>${record.full_path}</td>
-        <td>${record.filesize}</td>
+        <td title="${record.filesize}">${record.filesize_human || record.filesize}</td>
         <td>${record.mime_typ}</td>
         <td>${record.cached}</td>
       `;