moved view components out of internal and added some more

This commit is contained in:
James Tombleson 2024-07-11 08:08:58 -07:00
parent 435dfbda40
commit 574695bfb0
33 changed files with 261 additions and 93 deletions

View File

@ -1,21 +1,18 @@
package bulma
templ Button(color string, isLight, isDark bool) {
if isLight {
<button type="button" class={ "button", "is-light", color }>
// This creates a button that accepts children under it.
templ Button() {
<button type="button" class={ "button" }>
{ children... }
</button>
}
if isDark {
<button type="button" class={ "button", "is-dark", color }>
{ children... }
</button>
}
if !isLight && !isDark {
}
// Used to create a button and lets you define the color.
// Accepts children.
templ ButtonColor(color string) {
<button type="button" class={ "button", color }>
{ children... }
</button>
}
}
templ ButtonNewTab(url, text string) {
@ -24,7 +21,6 @@ templ ButtonNewTab(url, text string) {
</button>
}
templ ALink(url, title string) {
<a href={ templ.SafeURL(url) }>{ title }</a>
}

View File

@ -0,0 +1,15 @@
package form
templ TextInput(color, id, fieldType, placeholder string) {
if color == "" {
<input class={ "input" } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
} else {
<input class={ "input", color } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
}
}
templ Checkbox(text, id string) {
<label class="checkbox">
<input type="checkbox" id={ id }/> { text }
</label>
}

View File

@ -0,0 +1,13 @@
package form
type NewParam struct {
HxPost string
}
templ New(param NewParam) {
if param.HxPost != "" {
<form hx-post={ param.HxPost }>
{ children... }
</form>
}
}

View File

@ -0,0 +1,33 @@
package form
templ SelectOne(color string, isRound bool) {
if isRound {
<div class="select is-round">
<select>
{ children... }
</select>
</div>
} else {
<div class="select">
<select>
{ children... }
</select>
</div>
}
}
templ SelectOneItem(name string) {
<option>{ name }</option>
}
templ SelectMany(howManySelectable int, color string, isRound bool) {
<div class="select is-multiple">
<select multiple size="{ howManySelectable }">
{ children... }
</select>
</div>
}
templ SelectManyItem(name string) {
<option value={ name }>{ name }</option>
}

View File

@ -0,0 +1,5 @@
package form
templ TextArea(id, placeholder, color string) {
<textarea class={ "textarea", color } id={ id } placeholder={ placeholder }/>
}

View File

@ -0,0 +1,8 @@
package form
const (
InputTypeText = "text"
InputTypePassword = "password"
InputTypeEmail = "email"
InputTypePhoneNumber = "tel"
)

View File

@ -0,0 +1,7 @@
package bulma
templ Notification(message, color string) {
<div class={ "notification", color }>
{ message }
</div>
}

View File

@ -0,0 +1,13 @@
package bulma
templ Tag(message string) {
<span class={ "tag" }>{ message }</span>
}
templ TagColor(message, color string) {
<span class={ "tag", color }>{ message }</span>
}
templ TagColorSize(message, color, size string) {
<span class={ "tag", color, size }>{ message }</span>
}

View File

@ -0,0 +1,49 @@
package bulma
templ Title(message string) {
<h1 class="title">{ message }</h1>
}
templ Subitle(message string) {
<h2 class="subtitle">{ message }</h2>
}
templ H1(message string, isSubtitle bool) {
if isSubtitle {
<h1 class="subtitle is-1">{ message }</h1>
} else {
<h1 class="title is-1">{ message }</h1>
}
}
templ H2(message string, isSubtitle bool) {
if isSubtitle {
<h2 class="subtitle is-2">{ message }</h2>
} else {
<h2 class="title is-2">{ message }</h2>
}
}
templ H3(message string, isSubtitle bool) {
if isSubtitle {
<h3 class="subtitle is-3">{ message }</h3>
} else {
<h3 class="title is-3">{ message }</h3>
}
}
templ H4(message string, isSubtitle bool) {
if isSubtitle {
<h4 class="subtitle is-4">{ message }</h4>
} else {
<h4 class="title is-4">{ message }</h4>
}
}
templ H5(message string, isSubtitle bool) {
if isSubtitle {
<h5 class="subtitle is-5">{ message }</h5>
} else {
<h5 class="title is-5">{ message }</h5>
}
}

View File

@ -7,4 +7,8 @@ const (
ColorWarning = "is-warning"
ColorSuccess = "is-success"
ColorError = "is-error"
SizeNormal = "is-normal"
SizeMedium = "is-medium"
SizeLarge = "is-large"
)

View File

@ -0,0 +1,5 @@
package templhtml
templ Br(){
<br/>
}

View File

@ -0,0 +1,9 @@
package templhtml
templ ALink(url, title string) {
<a href={ templ.SafeURL(url) }>{ title }</a>
}
templ ANewTab(url, text string) {
<a href={ templ.SafeURL(url) } target="_blank" rel="noopener noreferrer">{ text }</a>
}

View File

@ -1,17 +1,16 @@
package articles
import (
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
)
templ List(model models.ListArticlesViewModel) {
@layout.WithTemplate() {
@filterBar()
for _, item := range model.Items {
@bulma.ArticleCardWithThumbnail(item.Article.Title, item.Article.Thumbnail, item.Article.Url, item.Article.PubDate.String(), item.Source.DisplayName )
@bulma.ArticleCardWithThumbnail(item.Article.Title, item.Article.Thumbnail, item.Article.Url, item.Article.PubDate.String(), item.Source.DisplayName)
}
}
}

View File

@ -1,9 +0,0 @@
package form
templ Input(color, id, fieldType string) {
if color == "" {
<input class={ "input" } id={ id } type={ fieldType }/>
} else {
<input class={ "input", color } id={ id } type={ fieldType }/>
}
}

View File

@ -1,7 +0,0 @@
package form
templ New(postUrl string) {
<form hx-post={ postUrl }>
{ children... }
</form>
}

View File

@ -1,6 +0,0 @@
package form
const (
InputTypeText = "text"
InputTypePassword = "password"
)

View File

@ -1,7 +1,7 @@
package home
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
templ Index() {
@layout.WithTemplate() {

View File

@ -1,18 +1,25 @@
package sources
import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
)
var (
p = form.NewParam{
HxPost: "/sources/add",
}
)
templ Add(model models.AddSourcePayloadModel) {
@layout.WithTemplate() {
<h2>New Source</h2>
<p>At this time only direct RSS links are allowed to be provided</p>
@form.New("/sources/add") {
@form.Input("", "url", "text")
@bulma.H2("New Source", false)
<p>At this time only direct RSS links are allowed to be provided.</p>
@form.New(p) {
@form.TextInput("", "name", form.InputTypeText, "Name of the site")
@form.TextInput("", "url", form.InputTypeText, "RSS URL")
@form.Submit("Submit", bulma.ColorPrimary)
}
}

View File

@ -0,0 +1,11 @@
package sources
import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
templ AddAfter(message string, isError bool) {
if isError {
@bulma.Notification(message, bulma.ColorError)
} else {
@bulma.Notification("The requested source was added to the server", bulma.ColorSuccess)
}
}

View File

@ -1,15 +1,21 @@
package sources
import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
)
templ ListAll(model models.ListAllSourcesViewModel) {
@layout.WithTemplate() {
@bulma.Button() {
@templhtml.ALink("/sources/add", "New Source")
}
@templhtml.Br()
@templhtml.Br()
for _, item := range model.Items {
@bulma.Button(bulma.ColorPrimary, false, false) {
@bulma.ButtonColor(bulma.ColorPrimary) {
@bulma.ANewTab(item.Url, item.DisplayName)
}
<br/>

View File

@ -1,17 +1,16 @@
package users
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
)
// This is returned after the user logs into the application.
// It just returns a partial view because it will overlap with the existing template.
templ AfterLogin(vm models.AfterLoginViewModel) {
if vm.Success {
<div class="notification is-success">
{ vm.Message }
</div>
@bulma.Notification(vm.Message, bulma.ColorSuccess)
} else {
<div class="notification is-error">
{ vm.Message }
</div>
@bulma.Notification(vm.Message, bulma.ColorError)
}
}

View File

@ -1,15 +1,13 @@
package users
import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
// This is returned after the user creates an account.
// It just returns a partial view because it will overlap with the existing template.
templ AfterSignUp(message string, success bool) {
if success {
<div class="notification is-success">
{ message }
</div>
@bulma.Notification(message, bulma.ColorSuccess)
} else {
<div class="notification is-error">
{ message }
</div>
@bulma.Notification(message, bulma.ColorError)
}
}

View File

@ -1,23 +1,29 @@
package users
import (
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
)
var (
p = form.NewParam{
HxPost: "/users/login",
}
)
templ LoginNew() {
@layout.WithTemplate() {
@form.New("/users/login") {
@form.New(p) {
@form.Field() {
@form.Label("Username")
@form.Control() {
@form.Input("", "username", "text")
@form.TextInput("", "username", "text", "email address")
}
}
@form.Field(){
@form.Field() {
@form.Label("Password")
@form.Control(){
@form.Input("", "password", form.InputTypePassword)
@form.Control() {
@form.TextInput("", "password", form.InputTypePassword, "")
}
}
@form.Submit("Submit", "is-primary")

View File

@ -1,7 +1,7 @@
package users
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
templ Logout() {
@layout.WithTemplate(){

View File

@ -1,15 +1,19 @@
package users
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
)
templ Profile() {
@layout.WithTemplate() {
@bulma.Hero("Profile", "Here you can update your profile 😀")
<button type="button" class="button">
<a href="/users/forcelogout">Logout Everywhere</a>
Logout Everywhere</button>
<p class="subtitle">This will force all active sessions to stop working and require a new login.</p>
@bulma.H2("Sessions", false)
@bulma.Button() {
@templhtml.ALink("/users/forcelogout", "Terminate all active sessions")
}
@bulma.Subitle("This will force you to login again as the application will give you a new session value.")
}
}

View File

@ -1,23 +1,26 @@
package users
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
)
templ SignUp() {
@layout.WithTemplate() {
<form hx-post="/users/signup">
<div class="field">
<label class="label">Username</label>
<div class="control">
<input class="input" type="text" name="username" id="username"/>
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" name="password" id="exampleInputPassword1"/>
</div>
</div>
<button type="submit" class="button is-primary">Submit</button>
</form>
@form.New(form.NewParam{HxPost: "/users/signup"}) {
@form.Field(){
@form.Label("Username")
@form.Control() {
@form.TextInput("", "username", form.InputTypeText, "username or email address")
}
}
@form.Field() {
@form.Label("Password")
@form.Control() {
@form.TextInput("", "password", form.InputTypePassword, "Nice strong password, like Ox!")
}
}
@form.Submit("Submit", "")
}
}
}