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

36
web/accounts.html
View File

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

46
web/dashboard.html
View File

@@ -1,28 +1,22 @@
{{define "dashboard"}}
<!DOCTYPE html>
<html>
<head>
<title>Budgets</title>
{{define "title"}}
Budgets
{{end}}
{{template "head"}}
</head>
<body>
<div class="container" id="head">
Budgeteer - {{.Token.GetName}}
</div>
<div class="container col-lg-12" id="content">
{{range .Budgets}}
<div class="budget-item">
<a href="budget/{{.ID}}">{{.Name}}</a>
<span class="time"></span>
</div>
{{end}}
<div class="budget-item">
<a href="#newbudgetmodal" data-toggle="modal" data-target="#newbudgetmodal">New Budget</a>
<span class="time"></span>
</div>
</div>
{{template "budget-new"}}
</body>
</html>
{{define "new"}}
{{template "budget-new"}}
{{end}}
{{template "base" .}}
{{define "main"}}
{{range .Budgets}}
<div class="budget-item">
<a href="budget/{{.ID}}">{{.Name}}</a>
<span class="time"></span>
</div>
{{end}}
<div class="budget-item">
<a href="#newbudgetmodal" data-toggle="modal" data-target="#newbudgetmodal">New Budget</a>
<span class="time"></span>
</div>
{{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"}}
<!DOCTYPE html>
<html>
<head>
<title>Budgeteer</title>
{{define "title"}}
Start
{{end}}
{{template "head"}}
</head>
<body>
<div class="container" id="head">
Budgeteer
</div>
<div class="container col-md-8 col-ld-8" id="content">
Willkommen bei Budgeteer, der neuen App für's Budget!
</div>
<div class="container col-md-4" id="login">
<a href="/login">Login</a>
</div>
</body>
</html>
{{define "new"}}
{{end}}
{{template "base" .}}
{{define "main"}}
<div class="container col-md-8 col-ld-8" id="content">
Willkommen bei Budgeteer, der neuen App für's Budget!
</div>
<div class="container col-md-4" id="login">
<a href="/login">Login</a> or <a href="/login">register</a>
</div>
{{end}}

79
web/login.html
View File

@@ -1,47 +1,38 @@
{{define "login"}}
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
{{template "base" .}}
{{template "head"}}
<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>
{{define "title"}}Login{{end}}
<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>
</div>
</body>
</html>
{{define "more-head"}}
<script>
$(document).ready(function() {
$('#invalidCredentials').hide();
$('#loginForm').ajaxForm({
success: function() {
window.location.href = "/dashboard";
},
error: function() {
$('#invalidCredentials').show();
}
});
});
</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}}

136
web/register.html
View File

@@ -1,78 +1,68 @@
{{define "register"}}
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
{{define "title"}}Register{{end}}
{{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>
function checkPasswordMatchUi() {
if(checkPasswordMatch())
$("#divCheckPasswordMatch").html("Passwords match.");
else
$("#divCheckPasswordMatch").html("Passwords do not match!");
}
<div id="divCheckPasswordMatch"></div>
function checkPasswordMatch() {
var password = $("#password").val();
var confirmPassword = $("#password_confirm").val();
return password == confirmPassword;
}
<div id="invalidCredentials">
Username already exists
</div>
$(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>
</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>
<input type="submit" value="Login" class="form-control" />
</form>
{{end}}

2
web/templates.go
View File

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

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