added onload trigger to manager

- now shows a loading graphic before loading clusterinfo on initial load
This commit is contained in:
Matthew Stobbs 2024-03-23 11:39:25 -06:00
parent ed9acb7e10
commit dca1385e27
2 changed files with 27 additions and 9 deletions

View File

@ -17,12 +17,8 @@ templ Manager(title string, subtitle string) {
<main class={ "px-4" , "h-full" }> <main class={ "px-4" , "h-full" }>
<div class={ "flex", "flex-row", "h-full", "mt-2" }> <div class={ "flex", "flex-row", "h-full", "mt-2" }>
@components.HostNav() @components.HostNav()
<div id="sysContent" class={ "w-3/4" , "px-2" }> <div id="sysContent" class={ "w-3/4" , "px-2" } >
<p>This is where you can see a system overview of all available hosts</p> <img class={ "inline-block"} hx-trigger="load delay:1s" hx-target="#sysContent" hx-get="/htmx/cluster" src="/static/images/bars.svg"/>
<p>
For now, there is just this simple box to choose a host to connect to
and push the button to load the system information via HTMX
</p>
</div> </div>
</div> </div>
</main> </main>

View File

@ -195,16 +195,16 @@ func Manager(title string, subtitle string) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><p>This is where you can see a system overview of all available hosts</p><p>For now, there is just this simple box to choose a host to connect to and push the button to load the system information via HTMX</p></div></div></main>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var16 = []any{"px-4", "bottom-0", "w-full", "justify-self-end"} var templ_7745c5c3_Var16 = []any{"inline-block"}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var16...) templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var16...)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<footer class=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<img class=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -217,6 +217,28 @@ func Manager(title string, subtitle string) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"load delay:1s\" hx-target=\"#sysContent\" hx-get=\"/htmx/cluster\" src=\"/static/images/bars.svg\"></div></div></main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var18 = []any{"px-4", "bottom-0", "w-full", "justify-self-end"}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var18...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<footer class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var19 string
templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var18).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layouts/manager.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err