camzalewski/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Added search example.

Browse source
This commit is contained in:
mikestefanello 2021-12-27 12:54:27 -05:00
parent 0239f46247
commit 6d62a19493
8 changed files with 95 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

3
routes/router.go
View file

@ -68,6 +68,9 @@ func navRoutes(c *services.Container, g *echo.Group, ctr controller.Controller)
home := Home{Controller: ctr} home := Home{Controller: ctr}
g.GET("/", home.Get).Name = "home" g.GET("/", home.Get).Name = "home"
search := Search{Controller: ctr}
g.GET("/search", search.Get).Name = "search"
about := About{Controller: ctr} about := About{Controller: ctr}
g.GET("/about", about.Get).Name = "about" g.GET("/about", about.Get).Name = "about"

44
routes/search.go Normal file
View file

@ -0,0 +1,44 @@
package routes
import (
"fmt"
"math/rand"
"goweb/controller"
"github.com/labstack/echo/v4"
)
type (
Search struct {
controller.Controller
}
SearchResult struct {
Title string
URL string
}
)
func (c *Search) Get(ctx echo.Context) error {
page := controller.NewPage(ctx)
page.Layout = "main"
page.Name = "search"
// Fake search results
var results []SearchResult
if search := ctx.QueryParam("query"); search != "" {
for i := 0; i < 5; i++ {
title := "Lorem ipsum example ddolor sit amet"
index := rand.Intn(len(title))
title = title[:index] + search + title[index:]
results = append(results, SearchResult{
Title: title,
URL: fmt.Sprintf("https://www.%s.com", search),
})
}
}
page.Data = results
return c.RenderPage(ctx, page)
}

39
templates/layouts/main.gohtml
View file

@ -7,12 +7,13 @@
</head> </head>
<body class="has-background-light" style="min-height:100%;"> <body class="has-background-light" style="min-height:100%;">
<nav class="navbar is-dark"> <nav class="navbar is-dark">
<div class="container" hx-boost="true"> <div class="container">
<div class="navbar-brand"> <div class="navbar-brand" hx-boost="true">
<a href="{{call .ToURL "home"}}" class="navbar-item">{{.AppName}}</a> <a href="{{call .ToURL "home"}}" class="navbar-item">{{.AppName}}</a>
</div> </div>
<div id="navbarMenu" class="navbar-menu"> <div id="navbarMenu" class="navbar-menu">
<div class="navbar-end"> <div class="navbar-end">
{{template "search"}}
</div> </div>
</div> </div>
</div> </div>
@ -43,13 +44,12 @@
</div> </div>
<div class="column is-10"> <div class="column is-10">
{{template "messages" .}}
<div class="box"> <div class="box">
{{- if .Title}} {{- if .Title}}
<h1 class="title">{{.Title}}</h1> <h1 class="title">{{.Title}}</h1>
{{- end}} {{- end}}
{{template "messages" .}}
{{template "content" .}} {{template "content" .}}
</div> </div>
</div> </div>
@ -58,4 +58,33 @@
{{template "footer" .}} {{template "footer" .}}
</body> </body>
</html> </html>
{{define "search"}}
<div class="search mr-2 mt-1" x-data="{modal:false}">
<input class="input" type="search" placeholder="Search..." @click="modal = true; $nextTick(() => $refs.input.focus());"/>
<div class="modal" :class="modal ? 'is-active' : ''" x-show="modal == true">
<div class="modal-background"></div>
<div class="modal-content" @click.away="modal = false;">
<div class="box">
<h2 class="subtitle">Search</h2>
<p class="control">
<input
hx-get="/search"
hx-trigger="keyup changed delay:500ms"
hx-target="#results"
name="query"
class="input"
type="search"
placeholder="Search..."
x-ref="input"
/>
</p>
<div class="block"></div>
<div id="results"></div>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
{{end}}

2
templates/pages/home.gohtml
View file

@ -17,7 +17,7 @@
<h1 class="title"> <h1 class="title">
Hello{{if .IsAuth}}, {{.AuthUser.Name}}{{end}} Hello{{if .IsAuth}}, {{.AuthUser.Name}}{{end}}
</h1> </h1>
<h2 class="subtitle">Welcome back!</h2> <h2 class="subtitle">{{if .IsAuth}}Welcome back!{{else}}Please login in to your account.{{end}}</h2>
</div> </div>
</div> </div>
</section> </section>

4
templates/pages/login.gohtml
View file

@ -4,14 +4,14 @@
<div class="field"> <div class="field">
<label for="email" class="label">Email address</label> <label for="email" class="label">Email address</label>
<div class="control"> <div class="control">
<input id="email" type="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}" required> <input id="email" type="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "Email")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "Email")}}
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="password" class="label">Password</label> <label for="password" class="label">Password</label>
<div class="control"> <div class="control">
<input id="password" type="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}" required> <input id="password" type="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}}
</div> </div>
</div> </div>

8
templates/pages/register.gohtml
View file

@ -3,28 +3,28 @@
<div class="field"> <div class="field">
<label for="name" class="label">Name</label> <label for="name" class="label">Name</label>
<div class="control"> <div class="control">
<input type="text" id="name" name="name" class="input {{.Form.Submission.GetFieldStatusClass "Name"}}" value="{{.Form.Name}}" required> <input type="text" id="name" name="name" class="input {{.Form.Submission.GetFieldStatusClass "Name"}}" value="{{.Form.Name}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "Name")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "Name")}}
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="email" class="label">Email address</label> <label for="email" class="label">Email address</label>
<div class="control"> <div class="control">
<input type="email" id="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}" required> <input type="email" id="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "Email")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "Email")}}
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="password" class="label">Password</label> <label for="password" class="label">Password</label>
<div class="control"> <div class="control">
<input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}" required> <input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}}
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="password-confirm" class="label">Confirm password</label> <label for="password-confirm" class="label">Confirm password</label>
<div class="control"> <div class="control">
<input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}" required> <input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "ConfirmPassword")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "ConfirmPassword")}}
</div> </div>
</div> </div>

4
templates/pages/reset-password.gohtml
View file

@ -3,14 +3,14 @@
<div class="field"> <div class="field">
<label for="password" class="label">Password</label> <label for="password" class="label">Password</label>
<div class="control"> <div class="control">
<input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}" required> <input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}}
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="password-confirm" class="label">Confirm password</label> <label for="password-confirm" class="label">Confirm password</label>
<div class="control"> <div class="control">
<input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}" required> <input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}">
{{template "field-errors" (.Form.Submission.GetFieldErrors "ConfirmPassword")}} {{template "field-errors" (.Form.Submission.GetFieldErrors "ConfirmPassword")}}
</div> </div>
</div> </div>

5
templates/pages/search.gohtml Normal file
View file

@ -0,0 +1,5 @@
{{define "content"}}
{{- range .Data}}
<a class="panel-block" href="{{.URL}}">{{.Title}}</a>
{{- end}}
{{end}}