Initial
This commit is contained in:
Eden Kirin
229
app/templates/interactive.templ
Normal file
229
app/templates/interactive.templ
Normal file
@ -0,0 +1,229 @@
|
||||
package templates
|
||||
|
||||
import (
|
||||
"fiber-sessions/app/types"
|
||||
"fiber-sessions/app/data"
|
||||
"slices"
|
||||
"sort"
|
||||
)
|
||||
|
||||
templ interactiveButtonsSection() {
|
||||
<h3 class="mb-3">
|
||||
Interactive buttons
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-info mb-3"
|
||||
hx-get="/interactive/swap-content?content=1"
|
||||
hx-target="#swap-content-target"
|
||||
>
|
||||
Swap to content 1
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-warning mb-3"
|
||||
hx-get="/interactive/swap-content?content=2"
|
||||
hx-target="#swap-content-target"
|
||||
>
|
||||
Swap to content 2
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-danger mb-3"
|
||||
hx-get="/interactive/swap-content?content=3"
|
||||
hx-target="#swap-content-target"
|
||||
>
|
||||
Swap to content 3
|
||||
</button>
|
||||
<p id="swap-content-target">
|
||||
Bacon ipsum dolor amet cow capicola pancetta picanha biltong brisket filet mignon turducken beef ribs burgdoggen landjaeger meatball venison shank. Capicola ham pork chop, biltong kielbasa pancetta short loin jowl cupim pig jerky drumstick turducken burgdoggen beef. Spare ribs flank ribeye cow doner, shank chuck bacon ham hock porchetta kielbasa tri-tip. Ham t-bone chislic, capicola andouille ham hock frankfurter tri-tip sausage kevin landjaeger shank ribeye. Swine tri-tip spare ribs, rump flank bresaola kevin tail. Meatball tail picanha cow, frankfurter ribeye sirloin pork belly short loin pig. Filet mignon spare ribs pastrami, tri-tip ball tip tongue fatback pork chop.
|
||||
</p>
|
||||
}
|
||||
|
||||
func getCatCountriesOptions() []string {
|
||||
var res []string = []string{}
|
||||
|
||||
for _, cb := range data.CatBreeds {
|
||||
if len(cb.Country) > 0 && !slices.Contains(res, cb.Country) {
|
||||
res = append(res, cb.Country)
|
||||
}
|
||||
}
|
||||
|
||||
sort.Strings(res)
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
templ catBreedsSection(catBreeds []types.CatBreed) {
|
||||
<h3 class="mt-5 mb-3">
|
||||
Cat breeds
|
||||
</h3>
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<form
|
||||
class="row g-3 align-items-center"
|
||||
>
|
||||
<div class="col-auto">
|
||||
<label class="form-label">Breed:</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
name="breed"
|
||||
class="form-control"
|
||||
hx-get="/interactive/filter-cat-breeds"
|
||||
hx-target="#cat-breeds-table"
|
||||
hx-trigger="keyup"
|
||||
hx-include="select[name='country']"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="form-label">Country:</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<select
|
||||
name="country"
|
||||
class="form-select"
|
||||
hx-get="/interactive/filter-cat-breeds"
|
||||
hx-target="#cat-breeds-table"
|
||||
hx-trigger="change"
|
||||
hx-include="input[name='breed']"
|
||||
>
|
||||
<option value="">
|
||||
- All -
|
||||
</option>
|
||||
for _, opt := range getCatCountriesOptions() {
|
||||
<option value={ opt }>
|
||||
{ opt }
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@catBreedsTable(catBreeds)
|
||||
}
|
||||
|
||||
templ catBreedsTable(catBreeds []types.CatBreed) {
|
||||
<table class="table" id="cat-breeds-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Breed</th>
|
||||
<th>Country</th>
|
||||
<th>Origin</th>
|
||||
<th>Coat</th>
|
||||
<th>Pattern</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
for _, breed := range catBreeds {
|
||||
<tr>
|
||||
<td>{ breed.Breed }</td>
|
||||
<td>{ breed.Country }</td>
|
||||
<td>{ breed.Origin }</td>
|
||||
<td>{ breed.Coat }</td>
|
||||
<td>{ breed.Pattern }</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
templ InteractiveSwapContent(pc PageContext, contentIndex int) {
|
||||
switch contentIndex {
|
||||
case 1:
|
||||
<p class="alert alert-info">
|
||||
Bacon ipsum dolor amet t-bone meatball corned beef hamburger cupim rump drumstick tri-tip doner pastrami kielbasa salami pig. Pork loin doner leberkas, jerky fatback chuck corned beef cow rump strip steak shoulder pork belly. Flank hamburger porchetta shank sirloin bresaola chislic pork chop. Chicken jerky strip steak tongue jowl brisket cupim. Shankle t-bone short ribs fatback burgdoggen buffalo cupim prosciutto meatball pig doner boudin.
|
||||
</p>
|
||||
case 2:
|
||||
<p class="alert alert-warning">
|
||||
Rump venison tenderloin, picanha ribeye cupim pork belly sirloin landjaeger jerky prosciutto filet mignon alcatra. Short ribs pork chop rump kevin t-bone ground round hamburger, chislic tenderloin bacon sirloin filet mignon turducken beef pork loin. Buffalo picanha ground round pork chop. Venison cupim pork belly, andouille pastrami tail shankle pancetta. Picanha leberkas cupim turkey buffalo filet mignon pork belly pork chop rump sausage pork loin. Short ribs burgdoggen porchetta hamburger, cupim ribeye capicola shoulder. Pork drumstick kevin, turkey hamburger ground round burgdoggen chuck jerky bacon sausage chislic leberkas.
|
||||
</p>
|
||||
case 3:
|
||||
<p class="alert alert-danger">
|
||||
Biltong ham hock tongue, beef pork andouille fatback flank pork loin ribeye. Rump short loin porchetta, ground round buffalo hamburger salami pig venison beef ribs. Chislic beef ribs sausage fatback pork belly. Ribeye porchetta leberkas, tail hamburger biltong landjaeger short loin filet mignon chicken salami flank.
|
||||
</p>
|
||||
default:
|
||||
<p>
|
||||
Some new content with unknown index...
|
||||
</p>
|
||||
}
|
||||
}
|
||||
|
||||
templ RenderCatBreedsTable(catBreeds []types.CatBreed) {
|
||||
@catBreedsTable(catBreeds)
|
||||
}
|
||||
|
||||
templ RenderInteractiveForm(content ValidateFormContent) {
|
||||
<div class="row" id="validation-form-content">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="validation-form-number" class="form-label">Enter number 0..100</label>
|
||||
<input
|
||||
type="text"
|
||||
class={ "form-control",
|
||||
templ.KV("is-invalid", content.HasNumValueError),
|
||||
templ.KV("is-valid", content.Validated && !content.HasNumValueError) }
|
||||
name="number-value"
|
||||
id="validation-form-number"
|
||||
value={ content.NumValue }
|
||||
/>
|
||||
if content.HasNumValueError {
|
||||
<div class="invalid-feedback">{ content.NumValueError }</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="validation-form-string" class="form-label">Enter string, length 5..10</label>
|
||||
<input
|
||||
type="text"
|
||||
class={ "form-control",
|
||||
templ.KV("is-invalid", content.HasStrValueError),
|
||||
templ.KV("is-valid", content.Validated && !content.HasStrValueError) }
|
||||
name="string-value"
|
||||
id="validation-form-string"
|
||||
value={ content.StrValue }
|
||||
/>
|
||||
if content.HasStrValueError {
|
||||
<div class="invalid-feedback">{ content.StrValueError }</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ interactiveFormSection() {
|
||||
<h3 class="mb-3">
|
||||
Form validation
|
||||
</h3>
|
||||
<form
|
||||
hx-post="/interactive/validate-form"
|
||||
hx-target="#validation-form-content"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
<div class="card p-4">
|
||||
@RenderInteractiveForm(ValidateFormContent{})
|
||||
<div class="d-flex">
|
||||
<button type="submit" class="btn btn-success ms-auto">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
templ Interactive(pc PageContext, catBreeds []types.CatBreed) {
|
||||
@baseLayout(pc) {
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@interactiveButtonsSection()
|
||||
</div>
|
||||
<div class="col">
|
||||
@interactiveFormSection()
|
||||
</div>
|
||||
</div>
|
||||
@catBreedsSection(catBreeds)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user