fritz/playback-device-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change dropdown to select in create command

Browse Source
This commit is contained in:
Fritz Heiden 2025-04-08 20:54:16 +02:00
parent 820caf137f
commit 3ba3f5efd5
1 changed files with 23 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
www/src/modals/create-command-modal.jsx
View File

@ -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">