diff options
Diffstat (limited to 'src/templates')
| -rw-r--r-- | src/templates/index.html | 210 | ||||
| -rw-r--r-- | src/templates/ledger-edit.html | 31 | ||||
| -rw-r--r-- | src/templates/ledger.html | 5 |
3 files changed, 36 insertions, 210 deletions
diff --git a/src/templates/index.html b/src/templates/index.html deleted file mode 100644 index 525f8fe..0000000 --- a/src/templates/index.html +++ /dev/null @@ -1,210 +0,0 @@ -<!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)">⚙</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/ledger-edit.html b/src/templates/ledger-edit.html new file mode 100644 index 0000000..2acc2c2 --- /dev/null +++ b/src/templates/ledger-edit.html @@ -0,0 +1,31 @@ +<!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> + <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> + <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> +</body> +</html> + diff --git a/src/templates/ledger.html b/src/templates/ledger.html index 0ac9b0e..f5c46de 100644 --- a/src/templates/ledger.html +++ b/src/templates/ledger.html @@ -5,6 +5,7 @@ <title>{{name}}'s Budget</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="static/styles.css"> + <script src="/static/main.js"></script> </head> <body> @@ -31,6 +32,8 @@ <th>Amount</th> <th>Category</th> <th>Tags</th> + <th></th> + <th></th> </tr> {{#each ledger}} <tr> @@ -40,6 +43,8 @@ <td>{{this.amount}}</td> <td>{{this.category}}</td> <td>{{this.subcategory}}</td> + <td><a href="/ledger/edit/{{this.id}}"><button>⚙</button></a></td> + <td><button onclick="remove({{this.id}})">X</button></td> </tr> {{/each}} </table> |