aboutsummaryrefslogtreecommitdiff
path: root/src/templates
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2020-10-09 22:42:56 -0500
committerMark Powers <markppowers0@gmail.com>2020-10-09 22:42:56 -0500
commit0345f90a7baceae507f417abe30736cc95cdc0cf (patch)
tree8c9617f0a039f2c1cebe33d3ad826bb01a15b482 /src/templates
parent35b6d276bdeabdf7bf5eee59d85dfefee7531fce (diff)
Begin refactor to use server side templates
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/index.html210
-rw-r--r--src/templates/login.html49
-rw-r--r--src/templates/summary.html45
3 files changed, 304 insertions, 0 deletions
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 0000000..525f8fe
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,210 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <title>Budget</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <link rel="shortcut icon" href="/favicon.ico">
+ <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
+ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+ <script src="static/main.js"></script>
+ <link rel="stylesheet" type="text/css" href="static/styles.css">
+</head>
+
+<body>
+ <div id="data">
+ <h1 v-if="summary.username">{{summary.username}}'s budget</h1>
+ <div>
+ <button v-bind:class="{ bold: activeTab == 'ledger' }" v-on:click="setTab('ledger')">Ledger</button>
+ <button v-bind:class="{ bold: activeTab == 'summary' }" v-on:click="setTab('summary')">Summary</button>
+ <button v-bind:class="{ bold: activeTab == 'goals' }" v-on:click="setTab('goals')">Goals</button>
+ <button v-bind:class="{ bold: activeTab == 'expected' }" v-on:click="setTab('expected')">Expected</button>
+ </div>
+
+ <!-- Ledger -->
+ <div v-if="activeTab == 'ledger'">
+ <div class="newItem">
+ <input v-model="m.when" placeholder="Date" type="date">
+ <input v-model="m.where" placeholder="Where">
+ <input v-model="m.amount" placeholder="Amount" type="number" step="0.01">
+ <input v-model="m.category" placeholder="Category">
+ <input v-model="m.subcategory" placeholder="Subcategory">
+ <button v-on:click="post(m, '/transaction', 'transactions')">Add</button>
+ </div>
+ <table class="table">
+ <tr class="table-header">
+ <th class="table-index"></th>
+ <th>Date</th>
+ <th>Where</th>
+ <th>Amount</th>
+ <th>Category</th>
+ <th>Subcategory</th>
+ <th></th>
+ </tr>
+ <tr v-for="(transaction, i) in transactions">
+ <td class="table-index">{{i+1}}</td>
+ <td>{{transaction.when.substring(0,10)}}</td>
+ <td>{{transaction.where}}</td>
+ <td>{{transaction.amount}}</td>
+ <td>{{transaction.category}}</td>
+ <td>{{transaction.subcategory}}</td>
+ <td>
+ <button v-on:click="prepareEntryEdit(transaction)">&#9881;</button>
+ <button v-on:click="remove(transaction, 'transactions')">X</button>
+ </td>
+ </tr>
+
+ </table>
+ </div>
+
+ <table v-if="activeTab == 'ledger-edit'">
+ <tr>
+ <th></th>
+ <th>Date</th>
+ <th>Where</th>
+ <th>Amount</th>
+ <th>Category</th>
+ <th>Subcategory</th>
+ </tr>
+ <tr>
+ <td></td>
+ <td>
+ <input v-model="em.when" placeholder="Date" type="date">
+ </td>
+ <td>
+ <input v-model="em.where" placeholder="Where">
+ </td>
+ <td>
+ <input v-model="em.amount" placeholder="Amount" type="number" step="0.01">
+ </td>
+ <td>
+ <input v-model="em.category" placeholder="Category">
+ </td>
+ <td>
+ <input v-model="em.subcategory" placeholder="Subcategory">
+ </td>
+ <td><button v-on:click="updateMany(em, 'transactions');activeTab=0;">Update</button></td>
+ </tr>
+ </table>
+
+ <!-- Summary -->
+ <div v-if="activeTab == '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>
+ <tr v-for="(data, i) in summary.week">
+ <td>{{data.y}}</td>
+ <td>{{data.w}}</td>
+ <td>{{data.in}}</td>
+ <td>{{data.out}}</td>
+ <td v-bind:class="{'net-negative': data.negative, 'net-positive':data.positive}">{{data.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>
+ <tr v-for="(data, i) in summary.month">
+ <td>{{data.y}}</td>
+ <td>{{data.m}}</td>
+ <td>{{data.in}}</td>
+ <td>{{data.out}}</td>
+ <td v-bind:class="{'net-negative': data.negative, 'net-positive':data.positive}">{{data.net}}
+ </td v-bind:class="{'net-negative': data.negative, 'net-positive':data.positive}">
+ </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>
+ <tr v-for="(data, i) in summary.year">
+ <td>{{data.y}}</td>
+ <td>{{data.in}}</td>
+ <td>{{data.out}}</td>
+ <td v-bind:class="{'net-negative': data.negative, 'net-positive':data.positive}">{{data.net}}
+ </td v-bind:class="{'net-negative': data.negative, 'net-positive':data.positive}">
+ </tr>
+ </table>
+ </div>
+ </div>
+
+ <!-- Goals -->
+ <div v-if="activeTab == 'goals'">
+ <div>
+ <div class="newItem">
+ <span>New Goal</span>
+ <input v-model="ng.name" placeholder="Name">
+ <input v-model="ng.total" placeholder="Total" type="number" step="0.01">
+ <button v-on:click="post(ng, '/goals', 'goals')">Add</button>
+ </div>
+ <div class="newAllocation">
+ <span>Allocate funds</span>
+ <select v-model="na.name">
+ <option v-for="option in goals" v-bind:value="option.name">
+ {{ option.name }}
+ </option>
+ <input v-model="na.amount" type="number">
+ <span>out of {{total_to_allocate}}</span>
+ </select>
+ <button v-on:click="post(na, '/allocate', 'goals')">Add</button>
+ </div>
+ <table>
+ <tr><th></th><th>Name</th><th>Amount</th><th>Total</th><th>Remaining</th></tr>
+ <tr v-for="(goal, i) in goals">
+ <td class="table-index">{{i+1}}</td>
+ <td>{{goal.name}}</td>
+ <td>{{goal.amount}}</td>
+ <td>{{goal.total}}</td>
+ <td>{{goal.total - goal.amount}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+
+ <!-- Expected -->
+ <div v-if="activeTab == 'expected'">
+ <div>
+ <div class="newItem">
+ <span>New Expected</span>
+ <input v-model="e.name" placeholder="Name">
+ <input v-model="e.total" placeholder="Total" type="number" step="0.01">
+ <input v-model="e.days" placeholder="Period (days)" type="number" step="1">
+ <button v-on:click="post(e, '/expected', 'expected')">Add</button>
+ </div>
+ <table>
+ <tr><th></th><th>Name</th><th>Total</th><th>Period</th></tr>
+ <tr v-for="(e, i) in expected">
+ <td class="table-index">{{i+1}}</td>
+ <td>{{e.name}}</td>
+ <td>{{e.total}}</td>
+ <td>{{e.days}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+</body>
+
+</html> \ No newline at end of file
diff --git a/src/templates/login.html b/src/templates/login.html
new file mode 100644
index 0000000..ec41762
--- /dev/null
+++ b/src/templates/login.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <title>Mark's Database - Login</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">
+ <script>
+ let usernameEl = document.getElementById('username');
+ let passwordEl = document.getElementById('password');
+ function sendPost(){
+ let username = usernameEl.value;
+ let password = passwordEl.value;
+ fetch(new Request("/login", {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({'username':username, 'password':password})
+ }))
+ .then((response) => {
+ console.log(response);
+ window.location = "/";
+ });
+ }
+ let onEnterEvent = function(event) {
+ if (event.keyCode === 13) {
+ sendPost()
+ }
+ }
+ usernameEl.addEventListener("keyup", onEnterEvent);
+ passwordEl.addEventListener("keyup", onEnterEvent);
+ </script>
+</head>
+
+<body>
+ <div>
+ <h1>Login</h1>
+ <div class="form">
+ <input on type="text" placeholder="Enter Username" name="username" id="username" required>
+ <input type="password" placeholder="Enter Password" name="password" id="password" required>
+ <button onclick="sendPost()">Log in</button>
+ </div>
+ </div>
+</body>
+
+</html> \ No newline at end of file
diff --git a/src/templates/summary.html b/src/templates/summary.html
new file mode 100644
index 0000000..5bf828e
--- /dev/null
+++ b/src/templates/summary.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>{{name}}'s Budget</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="static/styles.css">
+</head>
+
+<body>
+ <h1>{{name}}'s Budget</h1>
+ <form method="post" action="/transaction">
+ <input id="datePicker" name="when" placeholder="date" type="date">
+ <input name="where" placeholder="where" type="text">
+ <input 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>
+ </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>
+ </tr>
+ {{/each}}
+ </table>
+ <script>
+ document.getElementById('datePicker').value = new Date().toLocaleDateString();
+ </script>
+</body>
+</html>
+
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 02:01:45 +0000