jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Convert templates to partials

Browse Source
This commit is contained in:
Jan Bader
2021-12-02 15:00:53 +00:00
parent 67f7022b90
commit 77ae9d2dfd
16 changed files with 261 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
http/accounts.go
View File

@ -39,5 +39,5 @@ func (h *Handler) accounts(c *gin.Context) {
Accounts: accounts, Accounts: accounts,
} }
c.HTML(http.StatusOK, "accounts", d) c.HTML(http.StatusOK, "accounts.html", d)
} }

2
http/budget.go
View File

@ -48,5 +48,5 @@ func (h *Handler) budget(c *gin.Context) {
Transactions: transactions, Transactions: transactions,
} }
c.HTML(http.StatusOK, "budget", d) c.HTML(http.StatusOK, "budget.html", d)
} }

2
http/dashboard.go
View File

@ -25,7 +25,7 @@ func (h *Handler) dashboard(c *gin.Context) {
Token: token, Token: token,
Budgets: budgets, Budgets: budgets,
} }
c.HTML(http.StatusOK, "dashboard", d) c.HTML(http.StatusOK, "dashboard.html", d)
} }
type DashboardData struct { type DashboardData struct {

16
http/http.go
View File

@ -6,8 +6,6 @@ import (
"net/http" "net/http"
"time" "time"
"html/template"
"git.javil.eu/jacob1123/budgeteer" "git.javil.eu/jacob1123/budgeteer"
"git.javil.eu/jacob1123/budgeteer/bcrypt" "git.javil.eu/jacob1123/budgeteer/bcrypt"
"git.javil.eu/jacob1123/budgeteer/postgres" "git.javil.eu/jacob1123/budgeteer/postgres"
@ -34,8 +32,12 @@ const (
func (h *Handler) Serve() { func (h *Handler) Serve() {
router := gin.Default() router := gin.Default()
templ := template.Must(template.New("").Funcs(router.FuncMap).ParseFS(web.Templates, "*")) templates, err := NewTemplates(router.FuncMap)
router.SetHTMLTemplate(templ) if err != nil {
panic(err)
}
router.HTMLRender = templates
static, err := fs.Sub(web.Static, "static") static, err := fs.Sub(web.Static, "static")
if err != nil { if err != nil {
@ -43,7 +45,7 @@ func (h *Handler) Serve() {
} }
router.StaticFS("/static", http.FS(static)) router.StaticFS("/static", http.FS(static))
router.GET("/", func(c *gin.Context) { c.HTML(http.StatusOK, "index", nil) }) router.GET("/", func(c *gin.Context) { c.HTML(http.StatusOK, "index.html", nil) })
router.GET("/login", h.login) router.GET("/login", h.login)
router.GET("/register", h.register) router.GET("/register", h.register)
authenticatedFrontend := router.Group("") authenticatedFrontend := router.Group("")
@ -180,7 +182,7 @@ func (h *Handler) login(c *gin.Context) {
return return
} }
c.HTML(http.StatusOK, "login", nil) c.HTML(http.StatusOK, "login.html", nil)
} }
func (h *Handler) register(c *gin.Context) { func (h *Handler) register(c *gin.Context) {
@ -189,7 +191,7 @@ func (h *Handler) register(c *gin.Context) {
return return
} }
c.HTML(http.StatusOK, "register", nil) c.HTML(http.StatusOK, "register.html", nil)
} }
func logout(c *gin.Context) { func logout(c *gin.Context) {

45
http/templates.go Normal file
View File

@ -0,0 +1,45 @@
package http
import (
"fmt"
"html/template"
"io/fs"
"git.javil.eu/jacob1123/budgeteer/web"
"github.com/gin-gonic/gin/render"
)
type Templates struct {
templates map[string]*template.Template
}
func NewTemplates(funcMap template.FuncMap) (*Templates, error) {
templates, err := fs.Glob(web.Templates, "*.tpl")
if err != nil {
return nil, err
}
result := &Templates{
templates: make(map[string]*template.Template, 0),
}
pages, err := fs.Glob(web.Templates, "*.html")
for _, page := range pages {
allTemplates := append([]string{page}, templates...)
tpl, err := template.New(page).Funcs(funcMap).ParseFS(web.Templates, allTemplates...)
fmt.Printf("page: %s, templates: %v\n", page, templates)
if err != nil {
return nil, err
}
result.templates[page] = tpl
}
return result, nil
}
func (tpl *Templates) Instance(name string, obj interface{}) render.Render {
return render.HTML{
Template: tpl.templates[name],
Name: name,
Data: obj,
}
}

36
web/accounts.html
View File

@ -1,23 +1,17 @@
{{define "accounts"}} {{define "title"}}
<!DOCTYPE html> Accounts
<html> {{end}}
<head>
<title>Budgets</title>
{{template "head"}} {{define "new"}}
</head> {{end}}
<body>
<div class="container" id="head"> {{template "base" .}}
Budgeteer - {{.Token.GetName}}
</div> {{define "main"}}
<div class="container col-lg-12" id="content"> {{range .Accounts}}
{{range .Accounts}} <div class="budget-item">
<div class="budget-item"> <a href="account/{{.ID}}">{{.Name}}</a>
<a href="account/{{.ID}}">{{.Name}}</a> <span class="time"></span>
<span class="time"></span> </div>
</div> {{end}}
{{end}}
</div>
</body>
</html>
{{end}} {{end}}

31
web/base.tpl Normal file
View File

@ -0,0 +1,31 @@
{{define "base"}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/static/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="/static/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/main.js"></script>
<title>{{template "title" .}} - Budgeteer</title>
{{block "more-head" .}}{{end}}
</head>
<body>
<div class="container" id="head">
{{template "title" .}}
</div>
<div class="container col-lg-12" id="content">
{{template "main" .}}
</div>
{{block "new" .}}{{end}}
</body>
</html>
{{end}}

0
web/budget-new.html → web/budget-new.tpl
View File

54
web/budget.html
View File

@ -1,32 +1,26 @@
{{define "budget"}} {{template "base" .}}
<!DOCTYPE html>
<html>
<head>
<title>Budgets</title>
{{template "head"}} {{define "title"}}Budget{{end}}
</head>
<body> {{define "new"}}
<div class="container" id="head"> {{template "transaction-new"}}
Budgeteer - {{.Token.GetName}} - {{.Budget.Name}} {{end}}
</div>
<div class="container"><a href="/budget/{{.Budget.ID}}/accounts">Go to Accounts</a></div> {{define "main"}}
<div class="budget-item"> <div class="container"><a href="/budget/{{.Budget.ID}}/accounts">Go to Accounts</a></div>
<a href="#newbudgetmodal" data-toggle="modal" data-target="#newbudgetmodal">New Budget</a> <div class="budget-item">
<span class="time"></span> <a href="#newbudgetmodal" data-toggle="modal" data-target="#newbudgetmodal">New Budget</a>
</div> <span class="time"></span>
<table class="container col-lg-12" id="content"> </div>
{{range .Transactions}} <table class="container col-lg-12" id="content">
<tr> {{range .Transactions}}
<td>{{.Date}}</td> <tr>
<td> <td>{{.Date}}</td>
<a href="transaction/{{.ID}}">{{.Memo.String}}</a> <td>
</td> <a href="transaction/{{.ID}}">{{.Memo.String}}</a>
<td>{{.Amount}}</td> </td>
</tr> <td>{{.Amount}}</td>
{{end}} </tr>
</table> {{end}}
{{template "transaction-new"}} </table>
</body>
</html>
{{end}} {{end}}

46
web/dashboard.html
View File

@ -1,28 +1,22 @@
{{define "dashboard"}} {{define "title"}}
<!DOCTYPE html> Budgets
<html> {{end}}
<head>
<title>Budgets</title>
{{template "head"}} {{define "new"}}
</head> {{template "budget-new"}}
<body> {{end}}
<div class="container" id="head">
Budgeteer - {{.Token.GetName}} {{template "base" .}}
</div>
<div class="container col-lg-12" id="content"> {{define "main"}}
{{range .Budgets}} {{range .Budgets}}
<div class="budget-item"> <div class="budget-item">
<a href="budget/{{.ID}}">{{.Name}}</a> <a href="budget/{{.ID}}">{{.Name}}</a>
<span class="time"></span> <span class="time"></span>
</div> </div>
{{end}} {{end}}
<div class="budget-item"> <div class="budget-item">
<a href="#newbudgetmodal" data-toggle="modal" data-target="#newbudgetmodal">New Budget</a> <a href="#newbudgetmodal" data-toggle="modal" data-target="#newbudgetmodal">New Budget</a>
<span class="time"></span> <span class="time"></span>
</div> </div>
</div>
{{template "budget-new"}}
</body>
</html>
{{end}} {{end}}

13
web/head.html
View File

@ -1,13 +0,0 @@
{{define "head"}}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/static/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="/static/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/main.js"></script>
{{end}}

34
web/index.html
View File

@ -1,21 +1,17 @@
{{define "index"}} {{define "title"}}
<!DOCTYPE html> Start
<html> {{end}}
<head>
<title>Budgeteer</title>
{{template "head"}} {{define "new"}}
</head> {{end}}
<body>
<div class="container" id="head"> {{template "base" .}}
Budgeteer
</div> {{define "main"}}
<div class="container col-md-8 col-ld-8" id="content"> <div class="container col-md-8 col-ld-8" id="content">
Willkommen bei Budgeteer, der neuen App für's Budget! Willkommen bei Budgeteer, der neuen App für's Budget!
</div> </div>
<div class="container col-md-4" id="login"> <div class="container col-md-4" id="login">
<a href="/login">Login</a> <a href="/login">Login</a> or <a href="/login">register</a>
</div> </div>
</body>
</html>
{{end}} {{end}}

79
web/login.html
View File

@ -1,47 +1,38 @@
{{define "login"}} {{template "base" .}}
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
{{template "head"}} {{define "title"}}Login{{end}}
<script>
$(document).ready(function() {
$('#invalidCredentials').hide();
$('#loginForm').ajaxForm({
success: function() {
window.location.href = "/dashboard";
},
error: function() {
$('#invalidCredentials').show();
}
});
});
</script>
</head>
<body>
<div class="container" id="head">
Budgeteer
</div>
<div class="container col-lg-12" id="content">
<form id="loginForm" action="/api/v1/user/login" method="POST" class="center-block">
<div class="form-group">
<label for="username">User</label>
<input type="text" name="username" class="form-control" placeholder="User" />
</div>
<div class="form-group"> {{define "more-head"}}
<label for="password">Password</label> <script>
<input type="password" name="password" class="form-control" placeholder="Password" /> $(document).ready(function() {
<p id="invalidCredentials"> $('#invalidCredentials').hide();
The entered credentials are invalid $('#loginForm').ajaxForm({
</p> success: function() {
</div> window.location.href = "/dashboard";
},
<input type="submit" value="Login" class="btn btn-default" /> error: function() {
</form> $('#invalidCredentials').show();
</div> }
</body> });
</html> });
</script>
{{end}}
{{define "main"}}
<form id="loginForm" action="/api/v1/user/login" method="POST" class="center-block">
<div class="form-group">
<label for="username">User</label>
<input type="text" name="username" class="form-control" placeholder="User" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" />
<p id="invalidCredentials">
The entered credentials are invalid
</p>
</div>
<input type="submit" value="Login" class="btn btn-default" />
</form>
{{end}} {{end}}

136
web/register.html
View File

@ -1,78 +1,68 @@
{{define "register"}} {{define "title"}}Register{{end}}
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
{{template "head"}} {{template "base" .}}
{{define "more-head"}}
<script>
function checkPasswordMatchUi() {
if(checkPasswordMatch())
$("#divCheckPasswordMatch").html("Passwords match.");
else
$("#divCheckPasswordMatch").html("Passwords do not match!");
}
function checkPasswordMatch() {
var password = $("#password").val();
var confirmPassword = $("#password_confirm").val();
return password == confirmPassword;
}
$(document).ready(function () {
$("#password, #password_confirm").keyup(checkPasswordMatchUi);
$('#invalidCredentials').hide();
$('#loginForm').ajaxForm({
beforeSubmit: function(a, b, c) {
var match = checkPasswordMatch();
if(!match){
$("#divCheckPasswordMatch").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
}
return match;
},
success: function() {
window.location.href = "/dashboard";
},
error: function() {
$('#invalidCredentials').show();
}
});
});
</script>
{{end}}
{{define "main"}}
<form id="loginForm" action="/api/v1/user/register" method="POST" class="center-block">
<div class="form-group">
<label for="email">E-Mail</label>
<input type="text" name="email" class="form-control" placeholder="E-Mail" />
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password" />
<input type="password" id="password_confirm" class="form-control" placeholder="Verify password" />
</div>
<script> <div id="divCheckPasswordMatch"></div>
function checkPasswordMatchUi() {
if(checkPasswordMatch())
$("#divCheckPasswordMatch").html("Passwords match.");
else
$("#divCheckPasswordMatch").html("Passwords do not match!");
}
function checkPasswordMatch() { <div id="invalidCredentials">
var password = $("#password").val(); Username already exists
var confirmPassword = $("#password_confirm").val(); </div>
return password == confirmPassword;
}
$(document).ready(function () { <input type="submit" value="Login" class="form-control" />
$("#password, #password_confirm").keyup(checkPasswordMatchUi); </form>
$('#invalidCredentials').hide();
$('#loginForm').ajaxForm({
beforeSubmit: function(a, b, c) {
var match = checkPasswordMatch();
if(!match){
$("#divCheckPasswordMatch").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
}
return match;
},
success: function() {
window.location.href = "/dashboard";
},
error: function() {
$('#invalidCredentials').show();
}
});
});
</script>
</head>
<body>
<div class="container" id="head">
Budgeteer
</div>
<div class="container col-lg-12" id="content">
<form id="loginForm" action="/api/v1/user/register" method="POST" class="center-block">
<div class="form-group">
<label for="email">E-Mail</label>
<input type="text" name="email" class="form-control" placeholder="E-Mail" />
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password" />
<input type="password" id="password_confirm" class="form-control" placeholder="Verify password" />
</div>
<div id="divCheckPasswordMatch"></div>
<div id="invalidCredentials">
Username already exists
</div>
<input type="submit" value="Login" class="form-control" />
</form>
</div>
</body>
</html>
{{end}} {{end}}

2
web/templates.go
View File

@ -2,7 +2,7 @@ package web
import "embed" import "embed"
//go:embed *.html //go:embed *.html *.tpl
var Templates embed.FS var Templates embed.FS
//go:embed static //go:embed static

0
web/transaction-new.html → web/transaction-new.tpl
View File