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