Add expected expenses

4 files changed, 97 insertions, 23 deletions

diff --git a/src/index.html b/src/index.html
index 08c5007..cba242d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,20 +16,21 @@
     <div id="data">
         <h1 v-if="summary.username">{{summary.username}}'s budget</h1>
         <div>
-            <button v-bind:class="{ bold: activeTab == 0 }" v-on:click="setTab(0)">Ledger</button>
-            <button v-bind:class="{ bold: activeTab == 1 }" v-on:click="setTab(1)">Summary</button>
-            <button v-bind:class="{ bold: activeTab == 2 }" v-on:click="setTab(2)">Goals</button>
+            <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 == 0">
+        <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')">Add</button>
+                <button v-on:click="post(m, '/transaction', 'transactions')">Add</button>
             </div>
             <table class="table">
                 <tr class="table-header">
@@ -50,14 +51,14 @@
                     <td>{{transaction.subcategory}}</td>
                     <td>
                         <button v-on:click="prepareEntryEdit(transaction)">&#9881;</button>
-                        <button v-on:click="remove(transaction)">X</button>
+                        <button v-on:click="remove(transaction, 'transactions')">X</button>
                     </td>
                 </tr>
 
             </table>
         </div>
 
-        <table v-if="activeTab == 10">
+        <table v-if="activeTab == 'ledger-edit'">
             <tr>
                 <th></th>
                 <th>Date</th>
@@ -83,12 +84,12 @@
                 <td>
                     <input v-model="em.subcategory" placeholder="Subcategory">
                 </td>
-                <td><button v-on:click="updateMany(em);activeTab=0;">Update</button></td>
+                <td><button v-on:click="updateMany(em, 'transactions');activeTab=0;">Update</button></td>
             </tr>
         </table>
 
         <!-- Summary -->
-        <div v-if="activeTab == 1">
+        <div v-if="activeTab == 'summary'">
             <div class="summary-panel">
                 <h2>Weekly</h2>
                 <table class="table">
@@ -150,13 +151,13 @@
         </div>
 
         <!-- Goals -->
-        <div v-if="activeTab == 2">
+        <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')">Add</button>
+                    <button v-on:click="post(ng, '/goals', 'goals')">Add</button>
                 </div>
                 <div class="newAllocation">
                     <span>Allocate funds</span>
@@ -167,7 +168,7 @@
                         <input v-model="na.amount" type="number">
                         <span>out of {{total_to_allocate}}</span>
                     </select>
-                    <button v-on:click="post(na, '/allocate')">Add</button>
+                    <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>
@@ -181,6 +182,28 @@
                 </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>
 
diff --git a/src/index.js b/src/index.js
index bf64586..0cbba31 100644
--- a/src/index.js
+++ b/src/index.js
@@ -90,6 +90,24 @@ function setUpModels() {
         allowNull: false,
       }
     }),
+    "expected": database.define('expected', {
+      username: {
+        type: Sequelize.STRING,
+        allowNull: false,
+      },
+      name: {
+        type: Sequelize.STRING,
+        allowNull: false,
+      },
+      total: {
+        type: Sequelize.DECIMAL,
+        allowNull: false,
+      }, 
+      days: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+      }
+    }),
     "users": database.define('user', {
       username: {
         type: Sequelize.STRING,
diff --git a/src/main.js b/src/main.js
index 78b918e..0a381b0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,12 +2,13 @@ window.onload = function () {
     var transactionData = new Vue({
         el: '#data',
         data: {
-            activeTab: 0,
+            activeTab: "ledger",
             transactions: [],
             summary: {username : ""},
             selTodoType: "all",
             total_to_allocate: 0,
-            goals: []
+            goals: [],
+            expected: []
         },
         methods: {
             setTab: function (value) {
@@ -33,17 +34,24 @@ window.onload = function () {
                     total: "",
                     amount: 0
                 }
+                this.e = {
+                    name: "",
+                    total: "",
+                    days: 7
+                }
                 this.na = {
                     selected: "",
                     amount: ""
                 }
             },
-            requestThenUpdate: function (request) {
+            requestThenUpdate: function (request, app, field) {
                 fetch(request)
                     .then(response => response.json())
-                    .then(response => this.transactions = response);
+                    .then(response => {
+                        app[field] = response
+                    });
             },
-            post: function (obj, path) {
+            post: function (obj, path, save_to) {
                 console.log(obj);
                 console.log(path);
                 this.requestThenUpdate(new Request(path, {
@@ -53,10 +61,10 @@ window.onload = function () {
                         'Content-Type': 'application/json'
                     },
                     body: JSON.stringify(obj)
-                }));
+                }), this, save_to);
                 this.clearData();
             },
-            remove: function (obj) {
+            remove: function (obj, save_to) {
                 if (confirm(`Delete transaction?`)) {
                     this.requestThenUpdate(new Request("/transaction", {
                         method: 'delete',
@@ -65,7 +73,7 @@ window.onload = function () {
                             'Content-Type': 'application/json'
                         },
                         body: JSON.stringify(obj)
-                    }))
+                    }), this, save_to)
                 }
             },
             prepareEntryEdit: function(transaction){
@@ -75,9 +83,9 @@ window.onload = function () {
                 this.em.amount=transaction.amount;
                 this.em.category=transaction.category;
                 this.em.subcategory=transaction.subcategory;
-                this.activeTab=10;
+                this.activeTab='ledger-edit';
             },
-            updateMany: function (obj) {
+            updateMany: function (obj, save_to) {
                 update = {}
                 update = obj;
                 this.requestThenUpdate(new Request("/transaction", {
@@ -87,11 +95,13 @@ window.onload = function () {
                         'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({ id: obj.id, update: update })
-                }))
+                }),  this, save_to)
             },
         },
         created() {
             this.clearData();
+            fetch(new Request(`/expected`)).then(response => response.json())
+                .then(response => this.expected = response);
             fetch(new Request(`/goals`)).then(response => response.json())
                 .then(response => this.goals = response);
             fetch(new Request(`/transaction`)).then(response => response.json())
diff --git a/src/server.js b/src/server.js
index 69d3968..f72f21b 100644
--- a/src/server.js
+++ b/src/server.js
@@ -163,6 +163,29 @@ function setUpRoutes(models, jwtFunctions, database) {
             res.status(400).send(e.message);
         }
     })
+    server.get(`/expected`, async (req, res, next) => {
+        try {
+            var result = await database.query("SELECT * FROM expecteds WHERE username = '" + res.locals.user.username + "' ORDER BY `name` DESC", { type: database.QueryTypes.SELECT })
+            res.status(200).send(result);
+            next();
+        } catch (e) {
+            console.log(e)
+            res.status(400).send(e.message);
+        }
+    })
+    server.post(`/expected`, async (req, res, next) => {
+        try {
+            let item = req.body;
+            console.log(item);
+            item.username = res.locals.user.username
+            await models.expected.create(item);
+            var result = await database.query("SELECT * FROM expecteds WHERE username = '" + res.locals.user.username + "' ORDER BY `name` DESC", { type: database.QueryTypes.SELECT })
+            res.status(200).send(result);
+        } catch (e) {
+            console.log(e);
+            res.status(400).send(e.message);
+        }
+    })
     server.get(`/summary`, async (req, res, next) => {
         try {
             res.status(200).send({