From 3ba3f5efd56edad583d9e4366c9b4329ad3491db Mon Sep 17 00:00:00 2001
From: Fritz Heiden <fritz.heiden@mailbox.org>
Date: Tue, 8 Apr 2025 20:54:16 +0200
Subject: [PATCH] feat: change dropdown to select in create command

---
 www/src/modals/create-command-modal.jsx | 76 ++++++++-----------------
 1 file changed, 23 insertions(+), 53 deletions(-)

diff --git a/www/src/modals/create-command-modal.jsx b/www/src/modals/create-command-modal.jsx
index 548a8f0..288ee49 100644
--- a/www/src/modals/create-command-modal.jsx
+++ b/www/src/modals/create-command-modal.jsx
@@ -27,7 +27,9 @@ function CreateCommandModal(props) {
   const isTitleValid = createMemo(() => title().length >= MIN_TITLE_LENGTH);
 
   createEffect(() => {
-    let commandString = commandType() ? Command.CommandTypes[commandType()] : "";
+    let commandString = commandType()
+      ? Command.CommandTypes[commandType()]
+      : "";
     let protocolString = protocol() ? Command.Protocols[protocol()] : "";
     setTitle(commandString + " " + protocolString);
   });
@@ -87,31 +89,15 @@ function CreateCommandModal(props) {
             Protocol
           </label>
           <div class="col-sm-9">
-            <div class="btn-group">
-              <button
-                type="button"
-                class="btn btn-secondary dropdown-toggle"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                {protocol() ? Command.Protocols[protocol()] : "Please select"}
-              </button>
-              <ul
-                class="dropdown-menu"
-                style="max-height: 10em; overflow-y: auto;"
-              >
-                {Object.keys(Command.Protocols).map((protocol) => (
-                  <li>
-                    <a
-                      class="dropdown-item pe-auto"
-                      onClick={() => setProtocol(protocol)}
-                    >
-                      {Command.Protocols[protocol]}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <select
+              class="form-select"
+              onChange={(e) => setProtocol(e.target.value)}
+            >
+              <option value="" selected>Please select</option>
+              {Object.keys(Command.Protocols).map((protocol) => (
+                <option value={protocol}>{Command.Protocols[protocol]}</option>
+              ))}
+            </select>
           </div>
         </div>
         <div class="mb-3 row">
@@ -148,33 +134,17 @@ function CreateCommandModal(props) {
             Command Type
           </label>
           <div class="col-sm-9">
-            <div class="btn-group">
-              <button
-                type="button"
-                class="btn btn-secondary dropdown-toggle"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                {commandType()
-                  ? Command.CommandTypes[commandType()]
-                  : "Please select"}
-              </button>
-              <ul
-                class="dropdown-menu"
-                style="max-height: 10em; overflow-y: auto;"
-              >
-                {Object.keys(Command.CommandTypes).map((commandType) => (
-                  <li>
-                    <a
-                      class="dropdown-item pe-auto"
-                      onClick={() => setCommandType(commandType)}
-                    >
-                      {Command.CommandTypes[commandType]}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <select
+              class="form-select"
+              onChange={(e) => setCommandType(e.target.value)}
+            >
+              <option value="" selected>Please select</option>
+              {Object.keys(Command.CommandTypes).map((commandType) => (
+                <option value={commandType}>
+                  {Command.CommandTypes[commandType]}
+                </option>
+              ))}
+            </select>
           </div>
         </div>
         <div class="mb-3 row">