traxys/regalade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

app: Better handle ingredient selection form

Browse source
This commit is contained in:
traxys 2023-06-30 13:21:37 +02:00
parent b42de56755
commit ce29b7b75d
1 changed files with 34 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

62
app/src/recipe_creator.rs
View file

@ -118,35 +118,41 @@ pub(super) fn IngredientSelectBase(props: &IngredientSelectBaseProps) -> HtmlRes
</div> </div>
} }
<script src="/awesomplete.min.js" async=true></script> <script src="/awesomplete.min.js" async=true></script>
<div class="d-flex align-items-center mb-1"> <div class="container">
<label for="igSelect" class="pe-1">{"Name:"}</label> <div class="row">
<input <div class="col-sm-6 d-flex align-items-center mb-1">
class="awesomplete form-control" <label for="igSelect" class="pe-1">{"Name:"}</label>
list="igList" <input
value={input_value} class="awesomplete form-control"
{onchange} list="igList"
id="igSelect" value={input_value}
/> {onchange}
<datalist id="igList"> id="igSelect"
{ for ig.keys().map(|k| html!{<option key={k.clone()}>{k}</option>}) } />
</datalist> <datalist id="igList">
</div> { for ig.keys().map(|k| html!{<option key={k.clone()}>{k}</option>}) }
<div class="d-flex mw-50 align-items-center"> </datalist>
<label for="igAmount" class="px-1">{"Amount: "}</label> </div>
<div class="input-group"> <div class="col-sm-6 d-flex align-items-center">
<input <label for="igAmount" class="px-1">{"Amount: "}</label>
class="form-control" <div class="input-group">
type="number" <input
id="igAmount" class="form-control"
min="0" type="number"
value={props.amount.map(|v| v.to_string())} id="igAmount"
onchange={am_change} min="0"
/> value={props.amount.map(|v| v.to_string())}
if let Some(unit) = &*unit { onchange={am_change}
<span class="input-group-text">{unit}</span> />
} if let Some(unit) = &*unit {
<span class="input-group-text">{unit}</span>
}
</div>
</div>
<div class="col-sm">
{props.children.clone()}
</div>
</div> </div>
{props.children.clone()}
</div> </div>
</div> </div>
}) })