diff options
Diffstat (limited to 'src/templates')
| -rw-r--r-- | src/templates/index.html | 210 | ||||
| -rw-r--r-- | src/templates/login.html | 49 | ||||
| -rw-r--r-- | src/templates/summary.html | 45 |
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)">⚙</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> + |