feat: add app code
- journal domain package - httpserver package - html templates - main.go in root dir
This commit is contained in:
parent
3cc4d28aac
commit
943922a6e1
GPG key ID:
C6827B976F17240D
20 changed files with 1032 additions and 0 deletions
16
templates/deleted-entry.html
Normal file
16
templates/deleted-entry.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{{ template "layout.html" . }}
|
||||
|
||||
{{ define "title" }}Entry deleted{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<style>
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<main class="container">
|
||||
<p>Entry has been deleted.</p>
|
||||
</main>
|
||||
{{ end }}
|
||||
61
templates/edit-entry.html
Normal file
61
templates/edit-entry.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
{{ template "layout.html" . }}
|
||||
|
||||
{{ define "title" }}Edit entry: {{ .Title }}{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* max-width: 600px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
form input,
|
||||
form textarea {
|
||||
font-size: 1rem;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
form input[type="date"] {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
form input[type="text"] {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
form textarea {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
resize: none;
|
||||
height: 24rem;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function editEntry(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById('edit-entry').submit();
|
||||
}
|
||||
</script>
|
||||
<main class="container">
|
||||
<h1>Edit entry: {{ .Title }}</h1>
|
||||
<hr />
|
||||
<p>
|
||||
[<a href="/entry/{{ .ID }}">Back to entry</a>]
|
||||
</p>
|
||||
<hr />
|
||||
<form id="edit-entry" action="/entry/{{ .ID }}/edit" method="POST">
|
||||
<input type="text" name="title" placeholder="Title" value="{{ .Title }}" required>
|
||||
<input type="date" name="date" value="{{ .FormattedDate }}" required>
|
||||
<textarea name="content" placeholder="Content" rows="12" required>{{ .Content }}</textarea>
|
||||
<div>
|
||||
[<a href="#" onclick="editEntry(event)">Save</a>]
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
{{ end }}
|
||||
29
templates/entries.html
Normal file
29
templates/entries.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{{ template "layout.html" . }}
|
||||
|
||||
{{ define "title" }}Home{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<style>
|
||||
.disabled {
|
||||
color: #aaa !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<main class="container">
|
||||
<h1>Journal entries</h1>
|
||||
<hr />
|
||||
<ul>
|
||||
<!-- Entry title [date | YYYY-MM-DD] -->
|
||||
{{ range .Entries }} <!-- begin range -->
|
||||
<li>
|
||||
<a href="/entry/{{ .ID }}">{{ .Title }} [{{ .FormattedDate }}]</a>
|
||||
</li>
|
||||
{{ end }} <!-- end range -->
|
||||
</ul>
|
||||
<hr />
|
||||
<p>
|
||||
[<a href="/?offset={{ .Pagination.Prev }}" class="{{ if eq .Pagination.Prev 0 }}disabled{{ end }}">prev</a>]
|
||||
[<a href="/?offset={{ .Pagination.Next }}" class="{{ if eq .Pagination.Next 0 }}disabled{{ end }}">next</a>]
|
||||
</p>
|
||||
</main>
|
||||
{{ end }}
|
||||
28
templates/entry.html
Normal file
28
templates/entry.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{{ template "layout.html" . }}
|
||||
|
||||
{{ define "title" }}{{ .Title }} [{{ .FormattedDate }}]{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<script>
|
||||
function deleteEntry(event) {
|
||||
event.preventDefault();
|
||||
if (window.confirm('Do you really want to delete this entry?')) {
|
||||
document.getElementById('delete-entry').submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<main class="container">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<h2>[{{ .FormattedDate }}]</h2>
|
||||
<hr />
|
||||
<p>
|
||||
[<a href="/entry/{{ .ID }}/edit">Edit</a>]
|
||||
[<a href="#" onclick="deleteEntry(event)">Delete</a>]
|
||||
</p>
|
||||
<form id="delete-entry" action="/entry/delete" method="POST">
|
||||
<input type="hidden" name="id" value="{{ .ID }}">
|
||||
</form>
|
||||
<hr />
|
||||
<p>{{ .HTMLContent }}</p>
|
||||
</main>
|
||||
{{ end }}
|
||||
91
templates/layout.html
Normal file
91
templates/layout.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ block "title" .}}{{ end }} | Journal</title>
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<style>
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 64rem;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
nav ul li {
|
||||
margin-right: 20px;
|
||||
}
|
||||
nav ul li a {
|
||||
color: #007BFF;
|
||||
}
|
||||
body {
|
||||
font-family: Consolas, monospace;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
main {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
a {
|
||||
color: #007BFF;
|
||||
}
|
||||
.container {
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
/* padding: 1rem; */
|
||||
padding-top: .5rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
border-radius: 2rem;
|
||||
border-color: #000;
|
||||
border-width: 0.25rem;
|
||||
border-style: solid;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><strong>Journal</strong></li>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/entry/new">New entry</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
{{ block "content" . }}{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
74
templates/new-entry.html
Normal file
74
templates/new-entry.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
{{ template "layout.html" . }}
|
||||
|
||||
{{ define "title" }}New entry{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* max-width: 600px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
form input,
|
||||
form textarea {
|
||||
font-size: 1rem;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
form input[type="date"] {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
form input[type="text"] {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
form textarea {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
resize: none;
|
||||
height: 24rem;
|
||||
}
|
||||
/* form button {
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
form button:hover {
|
||||
background-color: #333;
|
||||
} */
|
||||
</style>
|
||||
<script>
|
||||
function saveEntry(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById('new-entry').submit();
|
||||
}
|
||||
function clearForm(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById('new-entry').reset();
|
||||
}
|
||||
</script>
|
||||
<main class="container">
|
||||
<h1>New entry</h1>
|
||||
<hr />
|
||||
<form id="new-entry" action="/entry/new" method="POST">
|
||||
<input type="text" name="title" placeholder="Title" required>
|
||||
<input type="date" name="date" value="{{ .Today }}" required>
|
||||
<textarea name="content" placeholder="Content" rows="12" required></textarea>
|
||||
<div>
|
||||
[<a href="#" onclick="saveEntry(event)">Save</a>] [<a href="#" onclick="clearForm(event)">Clear</a>]
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
{{ end }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue