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

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

@ -27,7 +27,9 @@ function CreateCommandModal(props) {
const isTitleValid = createMemo(() => title().length >= MIN_TITLE_LENGTH); const isTitleValid = createMemo(() => title().length >= MIN_TITLE_LENGTH);
createEffect(() => { createEffect(() => {
let commandString = commandType() ? Command.CommandTypes[commandType()] : ""; let commandString = commandType()
? Command.CommandTypes[commandType()]
: "";
let protocolString = protocol() ? Command.Protocols[protocol()] : ""; let protocolString = protocol() ? Command.Protocols[protocol()] : "";
setTitle(commandString + " " + protocolString); setTitle(commandString + " " + protocolString);
}); });
@ -87,31 +89,15 @@ function CreateCommandModal(props) {
Protocol Protocol
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="btn-group"> <select
<button class="form-select"
type="button" onChange={(e) => setProtocol(e.target.value)}
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;"
> >
<option value="" selected>Please select</option>
{Object.keys(Command.Protocols).map((protocol) => ( {Object.keys(Command.Protocols).map((protocol) => (
<li> <option value={protocol}>{Command.Protocols[protocol]}</option>
<a
class="dropdown-item pe-auto"
onClick={() => setProtocol(protocol)}
>
{Command.Protocols[protocol]}
</a>
</li>
))} ))}
</ul> </select>
</div>
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
@ -148,33 +134,17 @@ function CreateCommandModal(props) {
Command Type Command Type
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="btn-group"> <select
<button class="form-select"
type="button" onChange={(e) => setCommandType(e.target.value)}
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;"
> >
<option value="" selected>Please select</option>
{Object.keys(Command.CommandTypes).map((commandType) => ( {Object.keys(Command.CommandTypes).map((commandType) => (
<li> <option value={commandType}>
<a
class="dropdown-item pe-auto"
onClick={() => setCommandType(commandType)}
>
{Command.CommandTypes[commandType]} {Command.CommandTypes[commandType]}
</a> </option>
</li>
))} ))}
</ul> </select>
</div>
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">