From a44e61e9c742f0a059279e6eac1d2adac7877342 Mon Sep 17 00:00:00 2001
From: lelo <leonid.firus@outlook.com>
Date: Wed, 2 Apr 2025 09:54:53 +0000
Subject: [PATCH] convert selection to dropdown

---
 templates/dashboard.html | 118 ++++++++++++++++++++++++++++-----------
 1 file changed, 86 insertions(+), 32 deletions(-)

diff --git a/templates/dashboard.html b/templates/dashboard.html
index 0475675..3c6f665 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -29,41 +29,95 @@
       <a href="{{ url_for('connections') }}" class="btn btn-primary mt-1">Verbindungen</a>
       <a href="{{ url_for('dashboard') }}" class="btn btn-primary mt-1">Auswertung</a>
     </div>
+    <!-- Timeframe Dropdown -->
     <div class="mb-3">
-      <a href="{{ url_for('dashboard', timeframe='last24hours') }}" 
-          class="btn btn-sm mt-1 {% if session['timeframe'] == 'last24hours' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Last 24 Hours
-      </a>
-      <a href="{{ url_for('dashboard', timeframe='7days') }}" 
-          class="btn btn-sm mt-1 {% if session['timeframe'] == '7days' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Last 7 Days
-      </a>
-      <a href="{{ url_for('dashboard', timeframe='30days') }}" 
-          class="btn btn-sm mt-1 {% if session['timeframe'] == '30days' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Last 30 Days
-      </a>
-      <a href="{{ url_for('dashboard', timeframe='365days') }}" 
-          class="btn btn-sm mt-1 {% if session['timeframe'] == '365days' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Last 365 Days
-      </a>
+      <div class="dropdown">
+        <button class="btn btn-sm mt-1 dropdown-toggle {% if session['timeframe'] in ['last24hours', '7days', '30days', '365days'] %}btn-warning{% else %}btn-secondary{% endif %}" 
+                type="button" id="timeframeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+          {% if session['timeframe'] == 'last24hours' %}
+            Last 24 Hours
+          {% elif session['timeframe'] == '7days' %}
+            Last 7 Days
+          {% elif session['timeframe'] == '30days' %}
+            Last 30 Days
+          {% elif session['timeframe'] == '365days' %}
+            Last 365 Days
+          {% else %}
+            Select Timeframe
+          {% endif %}
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="timeframeDropdown">
+          <li>
+            <a class="dropdown-item {% if session['timeframe'] == 'last24hours' %}active{% endif %}" 
+              href="{{ url_for('dashboard', timeframe='last24hours') }}">
+              Last 24 Hours
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item {% if session['timeframe'] == '7days' %}active{% endif %}" 
+              href="{{ url_for('dashboard', timeframe='7days') }}">
+              Last 7 Days
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item {% if session['timeframe'] == '30days' %}active{% endif %}" 
+              href="{{ url_for('dashboard', timeframe='30days') }}">
+              Last 30 Days
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item {% if session['timeframe'] == '365days' %}active{% endif %}" 
+              href="{{ url_for('dashboard', timeframe='365days') }}">
+              Last 365 Days
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
+    <!-- Filetype Dropdown -->
     <div class="mb-3">
-      <a href="{{ url_for('dashboard', filetype='audio') }}" 
-          class="btn btn-sm mt-1 {% if session['filetype'] == 'audio' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Audio
-      </a>
-      <a href="{{ url_for('dashboard', filetype='video') }}" 
-          class="btn btn-sm mt-1 {% if session['filetype'] == 'video' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Video
-      </a>
-      <a href="{{ url_for('dashboard', filetype='photo') }}" 
-          class="btn btn-sm mt-1 {% if session['filetype'] == 'photo' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Photo
-      </a>
-      <a href="{{ url_for('dashboard', filetype='other') }}" 
-          class="btn btn-sm mt-1 {% if session['filetype'] == 'other' %}btn-warning{% else %}btn-secondary{% endif %}">
-        Other
-      </a>   
+      <div class="dropdown">
+        <button class="btn btn-sm mt-1 dropdown-toggle {% if session['filetype'] in ['audio', 'video', 'photo', 'other'] %}btn-warning{% else %}btn-secondary{% endif %}" 
+                type="button" id="filetypeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+          {% if session['filetype'] == 'audio' %}
+            Audio
+          {% elif session['filetype'] == 'video' %}
+            Video
+          {% elif session['filetype'] == 'photo' %}
+            Photo
+          {% elif session['filetype'] == 'other' %}
+            Other
+          {% else %}
+            Select File Type
+          {% endif %}
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="filetypeDropdown">
+          <li>
+            <a class="dropdown-item {% if session['filetype'] == 'audio' %}active{% endif %}" 
+              href="{{ url_for('dashboard', filetype='audio') }}">
+              Audio
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item {% if session['filetype'] == 'video' %}active{% endif %}" 
+              href="{{ url_for('dashboard', filetype='video') }}">
+              Video
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item {% if session['filetype'] == 'photo' %}active{% endif %}" 
+              href="{{ url_for('dashboard', filetype='photo') }}">
+              Photo
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item {% if session['filetype'] == 'other' %}active{% endif %}" 
+              href="{{ url_for('dashboard', filetype='other') }}">
+              Other
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
     <!-- Summary Cards -->
     <div class="row mb-4">