aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2020-10-19 21:55:02 -0500
committerMark Powers <markppowers0@gmail.com>2020-10-19 21:55:02 -0500
commite0a4d1bb1339e80775aa37efaf8cac314278f8e9 (patch)
tree91c09487df6793e4faaed4c0a883cba2ae199d20
parentad24db7fe9fca72c38caaa40d2ada8cbeb04994d (diff)
Add navigation template and logout
Diffstat
-rw-r--r--src/server.js4
-rw-r--r--src/static/styles.css38
-rw-r--r--src/templates.js7
-rw-r--r--src/templates/about.html14
-rw-r--r--src/templates/expected.html86
-rw-r--r--src/templates/goals.html75
-rw-r--r--src/templates/ledger-edit.html33
-rw-r--r--src/templates/ledger.html82
-rw-r--r--src/templates/navigation.html8
-rw-r--r--src/templates/summary.html239
10 files changed, 311 insertions, 275 deletions
diff --git a/src/server.js b/src/server.js
index 541f467..17d5372 100644
--- a/src/server.js
+++ b/src/server.js
@@ -67,6 +67,10 @@ function setUpRoutes(models, jwtFunctions, database, templates) {
let body = templates["login"]({});
res.status(200).send(body)
})
+ server.get('/logout', (req, res) => {
+ res.clearCookie('authorization');
+ res.redirect("/login");
+ });
server.get('/login/signup', async (req, res) => {
let body = templates["signup"]({});
res.status(200).send(body)
diff --git a/src/static/styles.css b/src/static/styles.css
index 4eedd0b..fb91d3b 100644
--- a/src/static/styles.css
+++ b/src/static/styles.css
@@ -7,11 +7,6 @@ table {
max-width: 100%;
}
-li {
- cursor: pointer;
- text-decoration: underline;
-}
-
tr:nth-child(2n+1) {
background-color: lightgray;
}
@@ -43,17 +38,43 @@ pre {
}
.net-negative {
- /* color: red; */
background-color: lightcoral;
}
.net-positive {
- /* color: green; */
background-color: lightgreen
}
+
+.summary {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+}
.summary-panel {
float:left;
padding-right: 2em;
}
+
+body {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.navigation {
+ flex-grow: 1;
+ max-width: 100px;
+ border-left: 1px solid #333;
+ padding-left: 10px;
+}
+
+.main {
+ flex-grow: 3;
+ max-width: 1000px;
+}
+
+p, li {
+ max-width: 70ch;
+}
+
@media only screen and (max-width: 600px) {
.newItem td {
display:block;
@@ -69,4 +90,7 @@ pre {
display: block;
width: 100%;
}
+ .navigation {
+ border-left: none;
+ }
} \ No newline at end of file
diff --git a/src/templates.js b/src/templates.js
index 28435f8..a9e3305 100644
--- a/src/templates.js
+++ b/src/templates.js
@@ -7,7 +7,13 @@ function loadTemplate(templates, name, filepath){
templates[name] = handlebars.compile(templateContent);
}
+function loadPartial(name, filepath){
+ handlebars.registerPartial(name, fs.readFileSync(filepath).toString());
+}
+
function setUpTemplates(){
+ loadPartial("navigation", path.join(__dirname, "templates/navigation.html"))
+
let templates = {};
loadTemplate(templates, "about", path.join(__dirname, 'templates/about.html'))
loadTemplate(templates, "login", path.join(__dirname, 'templates/login.html'))
@@ -17,7 +23,6 @@ function setUpTemplates(){
loadTemplate(templates, "goals", path.join(__dirname, 'templates/goals.html'))
loadTemplate(templates, "expected", path.join(__dirname, 'templates/expected.html'))
loadTemplate(templates, "summary", path.join(__dirname, 'templates/summary.html'))
-
return templates
}
diff --git a/src/templates/about.html b/src/templates/about.html
index 3a80b50..d4f215f 100644
--- a/src/templates/about.html
+++ b/src/templates/about.html
@@ -2,21 +2,14 @@
<html lang="en">
<head>
- <title>Mark's Database - Login</title>
+ <title>About</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <link rel="stylesheet" type="text/css" href="/css/styles.css">
+ <link rel="stylesheet" type="text/css" href="static/styles.css">
</head>
<body>
- <div>
- <a href="/ledger"><button class="bold">Ledger</button></a>
- <a href="/summary"><button>Summary</button></a>
- <a href="/goals"><button>Goals</button></a>
- <a href="/expected"><button>Expected</button></a>
- <a href="/about"><button>About</button></a>
- </div>
- <div>
+ <div class="main">
<h1>About</h1>
<p>Welcome to the alpha budget app! You've been given exclusive access to this secret trial</p>
<p>Here is how I use this site</p>
@@ -30,6 +23,7 @@
<li><em>Goals</em> can be used to subdivide net savings into categories. It is still W.I.P.</li>
</ol>
</div>
+ {{> navigation}}
</body>
</html> \ No newline at end of file
diff --git a/src/templates/expected.html b/src/templates/expected.html
index 64841a5..9554896 100644
--- a/src/templates/expected.html
+++ b/src/templates/expected.html
@@ -8,44 +8,54 @@
</head>
<body>
- <h1>{{name}}'s Budget</h1>
- <div>
- <a href="/ledger"><button>Ledger</button></a>
- <a href="/summary"><button>Summary</button></a>
- <a href="/goals"><button>Goals</button></a>
- <a href="/expected"><button class="bold">Expected</button></a>
- <a href="/about"><button>About</button></a>
- </div>
+ <div class="main">
+ <h1>{{name}}'s Budget</h1>
+ <div>
+ <a href="/ledger"><button>Ledger</button></a>
+ <a href="/summary"><button>Summary</button></a>
+ <a href="/goals"><button>Goals</button></a>
+ <a href="/expected"><button class="bold">Expected</button></a>
+ <a href="/about"><button>About</button></a>
+ </div>
- <form method="post" action="/expected">
- <input name="name" placeholder="name" type="text">
- <input name="total" placeholder="total" type="number">
- <input name="days" placeholder="days" type="number">
- <input type="submit" value="Add">
- </form>
- <table>
- <tr><th></th><th>Name</th><th>Total</th><th>Period</th></tr>
- {{#each expecteds}}
- <tr>
- <td class="table-index">{{this.index}}</td>
- <td>{{this.name}}</td>
- <td>{{this.total}}</td>
- <td>{{this.days}}</td>
- </tr>
- {{/each}}
- </table>
- <table>
- <tr>
- <td>Weekly:</td>
- <td>{{week}}</td>
- </tr><tr>
- <td>Monthly:</td>
- <td>{{month}}</td>
- </tr><tr>
- <td>Yearly:</td>
- <td>{{year}}</td>
- </tr>
- </table>
+ <form method="post" action="/expected">
+ <input name="name" placeholder="name" type="text">
+ <input name="total" placeholder="total" type="number">
+ <input name="days" placeholder="days" type="number">
+ <input type="submit" value="Add">
+ </form>
+ <table>
+ <tr>
+ <th></th>
+ <th>Name</th>
+ <th>Total</th>
+ <th>Period</th>
+ </tr>
+ {{#each expecteds}}
+ <tr>
+ <td class="table-index">{{this.index}}</td>
+ <td>{{this.name}}</td>
+ <td>{{this.total}}</td>
+ <td>{{this.days}}</td>
+ </tr>
+ {{/each}}
+ </table>
+ <table>
+ <tr>
+ <td>Weekly:</td>
+ <td>{{week}}</td>
+ </tr>
+ <tr>
+ <td>Monthly:</td>
+ <td>{{month}}</td>
+ </tr>
+ <tr>
+ <td>Yearly:</td>
+ <td>{{year}}</td>
+ </tr>
+ </table>
+ </div>
+ {{>navigation}}
</body>
-</html>
+</html> \ No newline at end of file
diff --git a/src/templates/goals.html b/src/templates/goals.html
index b5dbe42..e30aa62 100644
--- a/src/templates/goals.html
+++ b/src/templates/goals.html
@@ -8,44 +8,45 @@
</head>
<body>
- <h1>{{name}}'s Budget</h1>
- <div>
- <a href="/ledger"><button>Ledger</button></a>
- <a href="/summary"><button>Summary</button></a>
- <a href="/goals"><button class="bold">Goals</button></a>
- <a href="/expected"><button>Expected</button></a>
- <a href="/about"><button>About</button></a>
- </div>
-
- <form method="post" action="/goals">
- <input name="name" placeholder="name">
- <input name="total" placeholder="total" type="number" step="0.01">
- <input type="submit" value="Add">
- </form>
- <form method="post" action="/allocate">
- <span>Allocate funds</span>
- <select name="name">
+ <div class="main">
+ <h1>{{name}}'s Budget</h1>
+ <form method="post" action="/goals">
+ <input name="name" placeholder="name">
+ <input name="total" placeholder="total" type="number" step="0.01">
+ <input type="submit" value="Add">
+ </form>
+ <form method="post" action="/allocate">
+ <span>Allocate funds</span>
+ <select name="name">
+ {{#each goals}}
+ <option value="{{this.name}}">
+ {{ this.name }}
+ </option>
+ {{/each}}
+ </select>
+ <input name="amount" placeholder="amount" type="number">
+ <input type="submit" value="Add">
+ </form>
+ <table>
+ <tr>
+ <th></th>
+ <th>Name</th>
+ <th>Amount</th>
+ <th>Total</th>
+ <th>Remaining</th>
+ </tr>
{{#each goals}}
- <option value="{{this.name}}">
- {{ this.name }}
- </option>
+ <tr>
+ <td class="table-index">{{this.index}}</td>
+ <td>{{this.name}}</td>
+ <td>{{this.amount}}</td>
+ <td>{{this.total}}</td>
+ <td>{{this.remaining}}</td>
+ </tr>
{{/each}}
- </select>
- <input name="amount" placeholder="amount" type="number">
- <input type="submit" value="Add">
- </form>
- <table>
- <tr><th></th><th>Name</th><th>Amount</th><th>Total</th><th>Remaining</th></tr>
- {{#each goals}}
- <tr>
- <td class="table-index">{{this.index}}</td>
- <td>{{this.name}}</td>
- <td>{{this.amount}}</td>
- <td>{{this.total}}</td>
- <td>{{this.remaining}}</td>
- </tr>
- {{/each}}
- </table>
+ </table>
+ </div>
+ {{>navigation}}
</body>
-</html>
+</html> \ No newline at end of file
diff --git a/src/templates/ledger-edit.html b/src/templates/ledger-edit.html
index 2acc2c2..e939b6d 100644
--- a/src/templates/ledger-edit.html
+++ b/src/templates/ledger-edit.html
@@ -8,24 +8,21 @@
</head>
<body>
- <h1>{{name}}'s Budget</h1>
- <div>
- <a href="/ledger"><button class="bold">Ledger</button></a>
- <a href="/summary"><button>Summary</button></a>
- <a href="/goals"><button>Goals</button></a>
- <a href="/expected"><button>Expected</button></a>
+ <div class="main">
+ <h1>{{name}}'s Budget</h1>
+ <form method="post" action="/transaction/{{item.id}}">
+ <input id="datePicker" name="when" placeholder="date" type="date">
+ <input name="where" placeholder="where" type="text" value="{{item.where}}">
+ <input name="amount" placeholder="amount" type="number" step="0.01" value="{{item.amount}}">
+ <input name="category" placeholder="category" type="text" value="{{item.category}}">
+ <input name="subcategory" placeholder="tags (csv)" type="text" value="{{item.subcategory}}">
+ <input type="submit" value="Save">
+ </form>
+ <script>
+ document.getElementById('datePicker').value = new Date().toLocaleDateString();
+ </script>
</div>
- <form method="post" action="/transaction/{{item.id}}">
- <input id="datePicker" name="when" placeholder="date" type="date">
- <input name="where" placeholder="where" type="text" value="{{item.where}}">
- <input name="amount" placeholder="amount" type="number" step="0.01" value="{{item.amount}}">
- <input name="category" placeholder="category" type="text" value="{{item.category}}">
- <input name="subcategory" placeholder="tags (csv)" type="text" value="{{item.subcategory}}">
- <input type="submit" value="Save">
- </form>
- <script>
- document.getElementById('datePicker').value = new Date().toLocaleDateString();
- </script>
+ {{> navigation}}
</body>
-</html>
+</html> \ No newline at end of file
diff --git a/src/templates/ledger.html b/src/templates/ledger.html
index 9ffdeea..e2b7625 100644
--- a/src/templates/ledger.html
+++ b/src/templates/ledger.html
@@ -9,49 +9,45 @@
</head>
<body>
- <h1>{{name}}'s Budget</h1>
- <div>
- <a href="/ledger"><button class="bold">Ledger</button></a>
- <a href="/summary"><button>Summary</button></a>
- <a href="/goals"><button>Goals</button></a>
- <a href="/expected"><button>Expected</button></a>
- <a href="/about"><button>About</button></a>
+ <div class="main">
+ <h1>{{name}}'s Budget</h1>
+ <form method="post" action="/transaction">
+ <input id="datePicker" name="when" placeholder="date" type="date">
+ <input required name="where" placeholder="where" type="text">
+ <input required name="amount" placeholder="amount" type="number" step="0.01">
+ <input name="category" placeholder="category" type="text">
+ <input name="subcategory" placeholder="tags (csv)" type="text">
+ <input type="submit" value="Add">
+ </form>
+ <table>
+ <tr>
+ <th></th>
+ <th>When</th>
+ <th>Where</th>
+ <th>Amount</th>
+ <th>Category</th>
+ <th>Tags</th>
+ <th></th>
+ <th></th>
+ </tr>
+ {{#each ledger}}
+ <tr>
+ <td>{{this.index}}</td>
+ <td>{{this.when}}</td>
+ <td>{{this.where}}</td>
+ <td>{{this.amount}}</td>
+ <td>{{this.category}}</td>
+ <td>{{this.subcategory}}</td>
+ <td><a href="/ledger/edit/{{this.id}}"><button>&#9881;</button></a></td>
+ <td><button onclick="remove({{this.id}})">X</button></td>
+ </tr>
+ {{/each}}
+ </table>
+ <script>
+ document.getElementById('datePicker').value = new Date().toLocaleDateString();
+ </script>
</div>
- <form method="post" action="/transaction">
- <input id="datePicker" name="when" placeholder="date" type="date">
- <input required name="where" placeholder="where" type="text">
- <input required name="amount" placeholder="amount" type="number" step="0.01">
- <input name="category" placeholder="category" type="text">
- <input name="subcategory" placeholder="tags (csv)" type="text">
- <input type="submit" value="Add">
- </form>
- <table>
- <tr>
- <th></th>
- <th>When</th>
- <th>Where</th>
- <th>Amount</th>
- <th>Category</th>
- <th>Tags</th>
- <th></th>
- <th></th>
- </tr>
- {{#each ledger}}
- <tr>
- <td>{{this.index}}</td>
- <td>{{this.when}}</td>
- <td>{{this.where}}</td>
- <td>{{this.amount}}</td>
- <td>{{this.category}}</td>
- <td>{{this.subcategory}}</td>
- <td><a href="/ledger/edit/{{this.id}}"><button>&#9881;</button></a></td>
- <td><button onclick="remove({{this.id}})">X</button></td>
- </tr>
- {{/each}}
- </table>
- <script>
- document.getElementById('datePicker').value = new Date().toLocaleDateString();
- </script>
+ {{> navigation}}
</body>
-</html>
+</html> \ No newline at end of file
diff --git a/src/templates/navigation.html b/src/templates/navigation.html
new file mode 100644
index 0000000..c20ccbf
--- /dev/null
+++ b/src/templates/navigation.html
@@ -0,0 +1,8 @@
+<div class="navigation">
+ <div><a href="/ledger">Ledger</a></div>
+ <div><a href="/summary">Summary</a></div>
+ <div><a href="/goals">Goals</a></div>
+ <div><a href="/expected">Expected</a></div>
+ <div><a href="/about">About</a></div>
+ <div><a href="/logout">Log out</a></div>
+</div> \ No newline at end of file
diff --git a/src/templates/summary.html b/src/templates/summary.html
index a998be9..2759986 100644
--- a/src/templates/summary.html
+++ b/src/templates/summary.html
@@ -8,128 +8,125 @@
</head>
<body>
- <h1>{{name}}'s Budget</h1>
- <div>
- <a href="/ledger"><button>Ledger</button></a>
- <a href="/summary"><button class="bold">Summary</button></a>
- <a href="/goals"><button>Goals</button></a>
- <a href="/expected"><button>Expected</button></a>
- <a href="/about"><button>About</button></a>
- </div>
-
- <div class="summary-panel">
- <h2>Weekly</h2>
- <table class="table">
- <tr>
- <th>Year</th>
- <th>Week</th>
- <th>In</th>
- <th>Out</th>
- <th>Net</th>
- </tr>
- {{#each week}}
- <tr>
- <td>{{this.y}}</td>
- <td>{{this.w}}</td>
- <td>{{this.in}}</td>
- <td>{{this.out}}</td>
- <td class="{{this.classes}}">{{this.net}}</td>
- </tr>
- {{/each}}
- Avg:
- <tr>
- <td>Avg:</td>
- <td></td>
- <td>{{week_avg.in}}</td>
- <td>{{week_avg.out}}</td>
- <td class="{{week_avg.classes}}">{{week_avg.net}}</td>
- </tr>
- </table>
- </div>
- <div class="summary-panel">
- <h2>Monthly</h2>
- <table class="table">
- <tr>
- <th>Year</th>
- <th>Month</th>
- <th>In</th>
- <th>Out</th>
- <th>Net</th>
- </tr>
- {{#each month}}
- <tr>
- <td>{{this.y}}</td>
- <td>{{this.m}}</td>
- <td>{{this.in}}</td>
- <td>{{this.out}}</td>
- <td class="{{this.classes}}">{{this.net}}</td>
- </tr>
- {{/each}}
- <tr>
- <td>Avg:</td>
- <td></td>
- <td>{{month_avg.in}}</td>
- <td>{{month_avg.out}}</td>
- <td class="{{month_avg.classes}}">{{month_avg.net}}</td>
- </tr>
- </table>
- </div>
- <div class="summary-panel">
- <h2>Yearly</h2>
- <table class="table">
- <tr>
- <th>Year</th>
- <th>In</th>
- <th>Out</th>
- <th>Net</th>
- </tr>
- {{#each year}}
- <tr>
- <td>{{this.y}}</td>
- <td>{{this.in}}</td>
- <td>{{this.out}}</td>
- <td class="{{this.classes}}">{{this.net}}</td>
- </tr>
- {{/each}}
- Avg:
- <tr>
- <td>Avg:</td>
- <td>{{year_avg.in}}</td>
- <td>{{year_avg.out}}</td>
- <td class="{{year_avg.classes}}">{{year_avg.net}}</td>
- </tr>
- </table>
- </div>
- <div class="summary-panel">
- <h2>Categories</h2>
- <table class="table">
- <tr>
- <th>Category</th>
- <th>Total</th>
- </tr>
- {{#each categories}}
- <tr>
- <td>{{this.category}}</td>
- <td>{{this.s}}</td>
- </tr>
- {{/each}}
- </table>
- </div>
- <div class="summary-panel">
- <h2>Sub-Categories</h2>
- <table class="table">
- <tr>
- <th>Sub-Category</th>
- <th>Total</th>
- </tr>
- {{#each subcategories}}
- <tr>
- <td>{{this.subcategory}}</td>
- <td>{{this.s}}</td>
- </tr>
- {{/each}}
- </table>
+ <div class="main">
+ <h1>{{name}}'s Budget</h1>
+ <div class="summary">
+ <div class="summary-panel">
+ <h2>Weekly</h2>
+ <table class="table">
+ <tr>
+ <th>Year</th>
+ <th>Week</th>
+ <th>In</th>
+ <th>Out</th>
+ <th>Net</th>
+ </tr>
+ {{#each week}}
+ <tr>
+ <td>{{this.y}}</td>
+ <td>{{this.w}}</td>
+ <td>{{this.in}}</td>
+ <td>{{this.out}}</td>
+ <td class="{{this.classes}}">{{this.net}}</td>
+ </tr>
+ {{/each}}
+ Avg:
+ <tr>
+ <td>Avg:</td>
+ <td></td>
+ <td>{{week_avg.in}}</td>
+ <td>{{week_avg.out}}</td>
+ <td class="{{week_avg.classes}}">{{week_avg.net}}</td>
+ </tr>
+ </table>
+ </div>
+ <div class="summary-panel">
+ <h2>Monthly</h2>
+ <table class="table">
+ <tr>
+ <th>Year</th>
+ <th>Month</th>
+ <th>In</th>
+ <th>Out</th>
+ <th>Net</th>
+ </tr>
+ {{#each month}}
+ <tr>
+ <td>{{this.y}}</td>
+ <td>{{this.m}}</td>
+ <td>{{this.in}}</td>
+ <td>{{this.out}}</td>
+ <td class="{{this.classes}}">{{this.net}}</td>
+ </tr>
+ {{/each}}
+ <tr>
+ <td>Avg:</td>
+ <td></td>
+ <td>{{month_avg.in}}</td>
+ <td>{{month_avg.out}}</td>
+ <td class="{{month_avg.classes}}">{{month_avg.net}}</td>
+ </tr>
+ </table>
+ </div>
+ <div class="summary-panel">
+ <h2>Yearly</h2>
+ <table class="table">
+ <tr>
+ <th>Year</th>
+ <th>In</th>
+ <th>Out</th>
+ <th>Net</th>
+ </tr>
+ {{#each year}}
+ <tr>
+ <td>{{this.y}}</td>
+ <td>{{this.in}}</td>
+ <td>{{this.out}}</td>
+ <td class="{{this.classes}}">{{this.net}}</td>
+ </tr>
+ {{/each}}
+ Avg:
+ <tr>
+ <td>Avg:</td>
+ <td>{{year_avg.in}}</td>
+ <td>{{year_avg.out}}</td>
+ <td class="{{year_avg.classes}}">{{year_avg.net}}</td>
+ </tr>
+ </table>
+ </div>
+ <div class="summary-panel">
+ <h2>Categories</h2>
+ <table class="table">
+ <tr>
+ <th>Category</th>
+ <th>Total</th>
+ </tr>
+ {{#each categories}}
+ <tr>
+ <td>{{this.category}}</td>
+ <td>{{this.s}}</td>
+ </tr>
+ {{/each}}
+ </table>
+ </div>
+ <div class="summary-panel">
+ <h2>Sub-Categories</h2>
+ <table class="table">
+ <tr>
+ <th>Sub-Category</th>
+ <th>Total</th>
+ </tr>
+ {{#each subcategories}}
+ <tr>
+ <td>{{this.subcategory}}</td>
+ <td>{{this.s}}</td>
+ </tr>
+ {{/each}}
+ </table>
+ </div>
+ </div>
</div>
+ {{> navigation}}
</body>
</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-09 08:54:24 +0000