83 lines
2.2 KiB
Plaintext
83 lines
2.2 KiB
Plaintext
package site
|
|
|
|
import datastar "github.com/starfederation/datastar/sdk/go"
|
|
|
|
type ValueSelectSignals struct {
|
|
Make string `json:"make"`
|
|
Model string `json:"model"`
|
|
}
|
|
|
|
type ValueSelectMake struct {
|
|
ID string `json:"id"`
|
|
Label string `json:"label"`
|
|
Models []*ValueSelectModel `json:"models"`
|
|
}
|
|
|
|
type ValueSelectModel struct {
|
|
ID string `json:"id"`
|
|
Label string `json:"label"`
|
|
}
|
|
|
|
templ valueSelectView(cars []*ValueSelectMake, signals *ValueSelectSignals, make *ValueSelectMake, model *ValueSelectModel, isValid bool) {
|
|
<div
|
|
id="value_select"
|
|
class="flex flex-col gap-2"
|
|
data-signals={ templ.JSONString(signals) }
|
|
>
|
|
<div class="text-2xl font-bold">Pick a Make / Model</div>
|
|
<select
|
|
class="select select-bordered"
|
|
data-bind-make
|
|
data-on-change={ datastar.GetSSE("/examples/value_select/data") }
|
|
data-testid="make_select"
|
|
>
|
|
<option disabled selected>Select a Make</option>
|
|
for _, make := range cars {
|
|
<option value={ make.ID } data-testid={ "make_option_" + make.Label }>{ make.Label }</option>
|
|
}
|
|
</select>
|
|
if make != nil {
|
|
<select
|
|
class="select select-bordered"
|
|
data-bind-model
|
|
data-on-change={ datastar.GetSSE("/examples/value_select/data") }
|
|
data-testid="model_select"
|
|
>
|
|
<option disabled selected>Select a Model</option>
|
|
for _, model := range make.Models {
|
|
<option value={ model.ID } data-testid={ "model_option_" + model.Label }>{ model.Label }</option>
|
|
}
|
|
</select>
|
|
}
|
|
if isValid {
|
|
<button
|
|
class="btn btn-success"
|
|
data-on-click={ datastar.PostSSE("/examples/value_select/data") }
|
|
data-testid="select_button"
|
|
>
|
|
@icon("material-symbols:car-repair")
|
|
Submit selected { make.Label } / { model.Label } choice
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ valueSelectResults(make *ValueSelectMake, model *ValueSelectModel) {
|
|
<div id="value_select">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="card-title">You selected</div>
|
|
<div>Make "{ make.Label }" db id:{ make.ID }</div>
|
|
<div>Model "{ model.Label }" db id:{ model.ID }</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="btn btn-warning"
|
|
data-on-click={ datastar.GetSSE("/examples/value_select/data") }
|
|
>
|
|
@icon("material-symbols:reset-wrench")
|
|
Resest form
|
|
</button>
|
|
</div>
|
|
}
|