Add navigation template and logout

author: Mark Powers <markppowers0@gmail.com> 2020-10-19 21:55:02 -0500
committer: Mark Powers <markppowers0@gmail.com> 2020-10-19 21:55:02 -0500
commit: e0a4d1bb1339e80775aa37efaf8cac314278f8e9 (patch)
tree: 91c09487df6793e4faaed4c0a883cba2ae199d20 /src
parent: ad24db7fe9fca72c38caaa40d2ada8cbeb04994d (diff)
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
author	Mark Powers <markppowers0@gmail.com>	2020-10-19 21:55:02 -0500
committer	Mark Powers <markppowers0@gmail.com>	2020-10-19 21:55:02 -0500
commit	e0a4d1bb1339e80775aa37efaf8cac314278f8e9 (patch)
tree	91c09487df6793e4faaed4c0a883cba2ae199d20 /src
parent	ad24db7fe9fca72c38caaa40d2ada8cbeb04994d (diff)