From 9e544ec64a3c2f48592040299a90fdd96d306fbe Mon Sep 17 00:00:00 2001
From: Sara Montecino <saramontecino@outlook.com>
Date: Sun, 30 Oct 2022 20:15:48 -0700
Subject: [PATCH] Add frontend for updating transactions

---
 .vscode/launch.json  |   8 +
 app.py               | 127 ++++++++++++
 budget.db            | Bin 61440 -> 0 bytes
 database.py          |  16 +-
 main.py              |  18 +-
 model.py             |   4 +-
 templates/index.html | 455 +++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 608 insertions(+), 20 deletions(-)
 create mode 100755 app.py
 delete mode 100755 budget.db
 create mode 100755 templates/index.html

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 1c8615d..a4ddf99 100755
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -20,6 +20,14 @@
             "program": "database.py",
             "console": "integratedTerminal",
             "justMyCode": true
+        },
+        {
+            "name": "Flask",
+            "type": "python",
+            "request": "launch",
+            "program": "app.py",
+            "console": "integratedTerminal",
+            "justMyCode": true
         }
     ]
 }
\ No newline at end of file
diff --git a/app.py b/app.py
new file mode 100755
index 0000000..e436922
--- /dev/null
+++ b/app.py
@@ -0,0 +1,127 @@
+from datetime import datetime
+
+from flask import Flask, render_template, request, abort
+import peewee
+from playhouse.shortcuts import model_to_dict
+
+import database
+
+app = Flask(__name__)
+app.config["DEBUG"] = True
+
+@app.before_request
+def before_request():
+    database.instance.connect()
+
+@app.after_request
+def after_request(response):
+    database.instance.close()
+    return response
+
+@app.route("/")
+def home():
+    puppies = ['hollie', 'grace', 'loki']
+    return render_template('index.html', puppies=puppies)
+
+@app.route("/users")
+def users():
+    args = request.args.to_dict()
+    if 'username' not in args:
+        abort(400)
+    
+    username = args['username'].strip()
+    try:
+        return model_to_dict(database.User.get(database.User.username == username))
+    except peewee.DoesNotExist:
+        abort(404)
+    except:
+        abort(500)
+
+@app.route("/transactions", methods=["GET", "POST"])
+def transactions():
+    if request.method == "GET":
+        args = request.args.to_dict()
+        if 'user_id' not in args:
+            abort(400)
+
+        user_id = args['user_id'].strip()
+        try:
+            july_2022 = datetime(2022, 7, 1, 0)
+            transactions = database.Transaction.select().where(
+                (database.Transaction.user == user_id) &
+                (database.Transaction.transaction_date > july_2022)
+            )
+            return [model_to_dict(t) for t in transactions]
+        except peewee.DoesNotExist:
+            abort(404)
+        except:
+            abort(500)
+
+    if request.method == "POST":
+        body = request.get_json()
+        try:
+            user = database.User.get(database.User.uuid == body['user_id'])
+            category = database.TransactionCategory.get(database.TransactionCategory.name == body['category'])
+            database.Transaction.create(
+                user=user,
+                subcategory=category,
+                transaction_date=body['transaction_date'],
+                description=body['description'],
+                amount=body['amount'],
+                type=body['type'],
+                notes=body['notes']
+            )
+            return ('', 200)
+        except peewee.DoesNotExist:
+            abort(404)
+        except KeyError:
+            abort(400)
+
+    # Default if no method is hit
+    abort(400)
+
+@app.route("/transactions/<uuid>", methods=["PUT"])
+def transaction(uuid=None):
+    if request.method == "PUT":
+        if not uuid:
+            abort(400)
+        
+        body = request.get_json()
+        if 'category' not in body or 'notes' not in body:
+            abort(400)
+
+        try:
+            category = database.TransactionCategory.get(database.TransactionCategory.name == body['category'])
+            transaction = database.Transaction.get(database.Transaction.primary_key == uuid)
+            transaction.subcategory = category
+            transaction.notes = body['notes']
+            transaction.save()
+            return ('', 200)
+        except peewee.DoesNotExist:
+            abort(404)
+        except:
+            abort(500)
+
+    # Default if no method is hit
+    abort(400)
+
+@app.route("/categories")
+def categories():
+    try:
+        raw_categories = database.TransactionCategory.select()
+        categories = {} 
+        for category in raw_categories:
+            if not category.parent:
+                categories[category.name] = []
+
+        for category in raw_categories:
+            if category.parent:
+                categories[category.parent.name].append(category.name)
+
+        return categories
+    except peewee.DoesNotExist:
+        abort(404)
+    except:
+        abort(500)
+
+app.run()
\ No newline at end of file
diff --git a/budget.db b/budget.db
deleted file mode 100755
index c007350b3611e83134ba45e31439decd96feb3d2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 61440
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
J3-M70{|E6=SDyd?

diff --git a/database.py b/database.py
index d2f0f6f..2d45cf4 100755
--- a/database.py
+++ b/database.py
@@ -1,4 +1,5 @@
 import datetime
+import uuid
 from peewee import *
 
 DATABASE = 'budget.db'
@@ -7,7 +8,7 @@ instance = SqliteDatabase(DATABASE, pragmas=[('foreign_keys', 'on')])
 def create_tables():
     """Helper function to create database tables. Should be called manually."""
     with instance:
-        instance.create_tables([User, TransactionCategory, Transaction, Source])
+        instance.create_tables([User, TransactionCategory, Transaction])
     
 def add_user():
     # Make my user.
@@ -45,24 +46,20 @@ class BaseModel(Model):
         database = instance
 
 class User(BaseModel):
-    username = CharField(unique=True, primary_key=True)
+    uuid = UUIDField(unique=True, primary_key=True, default=uuid.uuid4())
+    username = CharField(unique=True)
 
 class TransactionCategory(BaseModel):
     primary_key = AutoField(primary_key=True)
     name = CharField(unique=True)
     parent = ForeignKeyField('self', null=True, backref='children')
 
-class Source(BaseModel):
-    filename=CharField(unique=True, primary_key=True)
-    type = IntegerField()
-    created_date = DateTimeField(default=datetime.datetime.now)
-    user = ForeignKeyField(User, backref='transactions')
-
 class Transaction(BaseModel):
     # Metadata
     primary_key = AutoField(primary_key=True)
-    source = ForeignKeyField(Source, backref='transactions')
     created_date = DateTimeField(default=datetime.datetime.now)
+    source_file=CharField(null=True)
+    type = IntegerField()
     user = ForeignKeyField(User, backref='transactions')
 
     # Real data
@@ -70,6 +67,7 @@ class Transaction(BaseModel):
     description = CharField()
     amount = FloatField()
     subcategory = ForeignKeyField(TransactionCategory, backref='+', null=True)
+    notes = CharField(null=True)
 
 if __name__ == "__main__":
     create_tables()
diff --git a/main.py b/main.py
index 9b28ebf..9a0d7de 100755
--- a/main.py
+++ b/main.py
@@ -9,10 +9,14 @@ parser = argparse.ArgumentParser(prog="BudgetBear", description="Calculate a bud
 parser.add_argument('files', type=str, nargs='+', help='File to parse transactions from.')
 args = parser.parse_args()
 
-username = 'ciphercules'
+# Get my user.
+database.instance.connect()
+user = database.User.select().where(database.User.username == 'ciphercules').get()
+database.instance.close()
 
 file_parsers = [capital_one.Parser()]
 for f in args.files:
+    filename=os.path.basename(f),
     for file_parser in file_parsers:
         # Use the first successful parser.
         transactions = file_parser.parse(f)
@@ -22,22 +26,16 @@ for f in args.files:
         # Add to database
         database.instance.connect()
         with database.instance.atomic():
-            # Add source file first.
-            source = database.Source.create(
-                filename=os.path.basename(f),
-                type=file_parser.source,
-                user=username
-            )
-
             # Add each transaction
             for transaction in transactions:
                 date, description, amount = transaction
                 database.Transaction.create(
-                    user=username,
+                    user=user,
                     transaction_date=date,
                     description=description,
                     amount=amount,
-                    source=source
+                    source_filename=filename,
+                    type=file_parser.source
                 )
         database.instance.close()
 
diff --git a/model.py b/model.py
index fbf73f5..4efc8ec 100755
--- a/model.py
+++ b/model.py
@@ -11,4 +11,6 @@ class BaseParser:
 
 class TransactionSource:
     """Enum of possible transaction sources"""
-    CAPITAL_ONE = 1
\ No newline at end of file
+    CAPITAL_ONE = 1
+    SPLITWISE = 2
+    COMPANY = 3
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100755
index 0000000..2b805b4
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,455 @@
+<!doctype html>
+<html>
+  <head>
+    <title>BudgetBear</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body {font-family: Arial, Helvetica, sans-serif;}
+      /* The Modal (background) */
+      .modal {
+        display: none; /* Hidden by default */
+        position: fixed; /* Stay in place */
+        z-index: 1; /* Sit on top */
+        padding-top: 50px; /* Location of the box */
+        left: 0;
+        top: 0;
+        width: 100%; /* Full width */
+        height: 100%; /* Full height */
+        overflow: auto; /* Enable scroll if needed */
+        background-color: rgb(0,0,0); /* Fallback color */
+        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+      }
+
+      /* Modal Content */
+      .modal-content {
+        background-color: #fefefe;
+        margin: auto;
+        padding: 30px;
+        border: 1px solid #888;
+        width: 40%;
+      }
+
+      /* The Close Button */
+      .close {
+        float: left;
+        margin: auto;
+      }
+
+      /* The Next Button */
+      .next {
+        float: right;
+        margin: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>BudgetBear</h1>
+    <p>The app for bears on a budget</p>
+    <div id="login_form">
+      <label for="login_input">Login: </label>
+      <input id="login_input" name="login">
+      <input id="login_submit" type="submit" value="Submit">
+    </div>
+    <div id="login_success" style="display:none">
+      <p>Logged in as: <span id="login_username"></span></p>
+    </div>
+    <div id="login_error" style="display:none">
+      <p style="color:red">Failed to login</p>
+    </div>
+    <h2>Transactions</h2>
+    <input id="transactions_refresh" type="submit" value="Refresh" disabled>
+     <!-- Transaction Modal -->
+    <button id="transaction_modal_btn">Let's Process!</button>
+    <div id="transaction_error" style="display:none">
+      <p style="color:blue">No transactions to process!</p>
+    </div>
+    <div id="transaction_modal" class="modal">
+      <div class="modal-content">
+        <h3>Transaction ID <span id="transaction_id"></span></h3>
+        <p><b>Remaining:</b> <span id="transactions_unprocessed"></span></p>
+        <p><b>Transaction date:</b> <span id="transaction_date"></span></p>
+        <p><b>Description:</b> <span id="transaction_description"></span></p>
+        <p><b>Amount:</b> $<span id="transaction_amount"></span></p>
+        <label for="transaction_category">Category</label>
+        <select id="transaction_category"></select>
+        <label for="transaction_subcategory">Subcategory</label>
+        <select id="transaction_subcategory" disabled></select>
+        <br><br>
+        <label for="transaction_notes">Notes:</label>
+        <textarea id="transaction_notes" rows="4" cols="50"></textarea>
+        <br><br>
+        <label for="transaction_split">Split with others?</label>
+        <input type="checkbox" id="transaction_split" value="true">
+        <br><br>
+        <div id="transaction_split_content" style="display:none">
+          <h3>Split Transaction</h3>
+          <label for="transaction_split_amount">Amount reimbursed:</label>
+          <input type="number" id="transaction_split_amount">
+          <br><br>
+          <label for="transaction_split_type">Type: </label>
+          <select id="transaction_split_type">
+            <option value="2">Splitwise</option>
+            <option value="3">SpaceX</option>
+          </select>
+          <br><br>
+          <label for="transaction_split_notes">Notes: </label>
+          <textarea id="transaction_split_notes" rows="4" cols="50"></textarea>
+          <br><br>
+        </div>
+        <button id="modal_close" class="close">Exit</button>
+        <button id="modal_next" class="next">Submit</button>
+      </div>
+    </div> 
+     <!-- Transaction Modal End -->
+  </body>
+  <script>
+    // Login HTML elements.
+    const login = 
+    {
+      form : document.getElementById('login_form'),
+      input : document.getElementById('login_input'),
+      submit : document.getElementById('login_submit'),
+      success : document.getElementById('login_success'),
+      error : document.getElementById('login_error'),
+      username : document.getElementById('login_username'),
+    };
+
+    // Transaction HTML elements.
+    const x_action = 
+    {
+      refresh : document.getElementById('transactions_refresh'),
+      modal_btn : document.getElementById('transaction_modal_btn'),
+      error : document.getElementById('transaction_error'),
+      modal : document.getElementById('transaction_modal'),
+      id : document.getElementById('transaction_id'),
+      exit: document.getElementById('modal_close'),
+      submit: document.getElementById('modal_next'),
+      unprocessed : document.getElementById('transactions_unprocessed'),
+      date: document.getElementById('transaction_date'),
+      description: document.getElementById('transaction_description'),
+      amount: document.getElementById('transaction_amount'),
+      category: document.getElementById('transaction_category'),
+      subcategory: document.getElementById('transaction_subcategory'),
+      notes: document.getElementById('transaction_notes'),
+      split: 
+      {
+        enabled: document.getElementById('transaction_split'),
+        container: document.getElementById('transaction_split_content'),
+        notes: document.getElementById('transaction_split_notes'),
+        amount: document.getElementById('transaction_split_amount'),
+        type: document.getElementById('transaction_split_type'),
+
+      },
+    };
+
+    // Global variables.
+    const global_data = 
+    {
+      current_user: null,
+      transaction:
+      {
+        unprocessed_indices: [],
+        list: [],
+        process_index: 0,
+        unprocessed_cnt: function() 
+        {
+            return this.unprocessed_indices.length;
+        },
+        get_current: function()
+        {
+          if (this.process_index < this.unprocessed_indices.length)
+          {
+            return this.list[this.unprocessed_indices[this.process_index]]
+          }
+
+          return null
+        }
+      },
+      categories: {},
+      update: function()
+      {
+        let new_indices = []
+        for (let i = 0; i < this.transaction.list.length; i++)
+        {
+          if (this.transaction.list[i].subcategory === null)
+          {
+            // Save index of first unprocessed transaction.
+            new_indices.push(i);
+          }
+        }
+        this.transaction.unprocessed_indices = new_indices;
+      }
+    };
+
+    login.input.onkeypress = function(event) {
+        if (event.key === "Enter")
+        {
+          event.preventDefault();
+          login.submit.click();
+        }
+    };
+
+    login.submit.onclick = function(_) {
+      const username = login.input.value;
+      const request_url = "/users?username=" + username;
+      const handler = 
+      {
+        success: function (data) {
+          // Cache data in browser.
+          global_data.current_user = data;
+
+          // Retrieve transactions.
+          get_transactions(global_data.current_user.uuid);
+
+          // Update UI.
+          login.form.style.display = 'none';
+          login.error.style.display = 'none';
+          login.username.innerText = data.username;
+          login.success.style.display = 'block';
+        },
+        error: function () {
+          // Update UI.
+          login.error.style.display = 'block';
+        }
+      };
+      http_request(request_url, handler);
+    };
+
+    x_action.refresh.onclick = function() {
+      get_transactions(global_data.current_user.uuid);
+    }
+
+    x_action.modal_btn.onclick = function() {
+      if (global_data.transaction.unprocessed_cnt() === 0)
+      {
+        x_action.error.style.display = "block";
+      }
+      else
+      {
+        update_transaction_ui(global_data.transaction.get_current());
+        x_action.error.style.display = "none";
+        x_action.modal.style.display = "block";
+      }
+    }
+
+    x_action.exit.onclick = function()
+    {
+      reset_transaction_ui();
+    }
+
+    x_action.submit.onclick = function()
+    {
+      const body = {}
+      if (x_action.subcategory.value !== "")
+      {
+        body.category = x_action.subcategory.value;
+      }
+      else
+      {
+        body.category = x_action.category.value;
+      }
+      body.notes = x_action.notes.value;
+      const transaction = global_data.transaction.get_current()
+      const url = "/transactions/" + transaction.primary_key;
+      const handler = 
+      {
+        success: function() {
+          console.log("Updated transaction successfully!");
+        },
+        error: function() {
+            alert("Failed to update transaction");
+        }
+      }
+      http_request(url, handler, "PUT", body);
+
+      const is_split = x_action.split.enabled.checked;
+      if (is_split)
+      {
+        const split_body = {}
+        split_body.category = body.category;
+        split_body.notes = x_action.split.notes.value;
+        split_body.amount = -1 * parseFloat(x_action.split.amount.value);
+        split_body.type = parseInt(x_action.split.type.value);
+        split_body.transaction_date = transaction.transaction_date;
+        split_body.description = transaction.description;
+        split_body.user_id = global_data.current_user.uuid;
+
+        const url = "/transactions";
+        const handler = 
+        {
+          success: function() {
+          },
+          error: function() {
+            alert("Failed to add split transaction");
+          }
+        }
+        http_request(url, handler, "POST", split_body);
+      }
+
+      global_data.transaction.process_index++;
+      if (global_data.transaction.get_current() !== null)
+      {
+        update_transaction_ui(global_data.transaction.get_current());
+      }
+      else
+      {
+        reset_transaction_ui();
+      }
+    }
+
+    x_action.split.enabled.onclick = function()
+    {
+      if (x_action.split.enabled.checked == true)
+      {
+        x_action.split.container.style.display = 'block';
+        const transaction = global_data.transaction.get_current();
+        x_action.split.amount.value = transaction.amount / 2;
+      }
+      else
+      {
+        x_action.split.container.style.display = 'none';
+      }
+    }
+
+    x_action.split.type.onchange = function()
+    {
+      const selected = x_action.split.type.value;
+      const transaction = global_data.transaction.get_current();
+      if (selected == "Splitwise")
+      {
+        x_action.split.amount.value = transaction.amount / 2;
+      }
+      else
+      {
+        x_action.split.amount.value = transaction.amount;
+      }
+    }
+
+    x_action.category.onchange = function()
+    {
+      x_action.subcategory.innerHTML = '';
+      const selected = x_action.category.value;
+      const subcategories = global_data.categories[selected]
+      if (subcategories.length == 0)
+      {
+        x_action.subcategory.disabled = true
+      }
+      else
+      {
+        x_action.subcategory.disabled = undefined
+        for (let i = 0; i < subcategories.length; i++)
+        {
+          const opt = document.createElement("option");
+          opt.value = subcategories[i];
+          opt.innerText = subcategories[i];
+
+          x_action.subcategory.appendChild(opt);
+        }
+      }
+
+    }
+
+    function reset_transaction_ui(close_modal=true)
+    {
+      // Reset all stateful inputs.
+      if (close_modal)
+      {
+        x_action.modal.style.display = "none";
+      }
+
+      x_action.split.container.style.display = 'none';
+      x_action.split.enabled.checked = false;
+      x_action.category.innerHTML = "";
+      x_action.subcategory.innerHTML = "";
+      x_action.subcategory.disabled = "true";
+      x_action.notes.value = "";
+    }
+    function update_transaction_ui(transaction)
+    {
+      // Reset old state.
+      reset_transaction_ui(false);
+
+      // Global updates first.
+      x_action.unprocessed.innerText = global_data.transaction.unprocessed_cnt();
+      for (key in global_data.categories)
+      {
+        const opt = document.createElement("option");
+        opt.value = key;
+        opt.innerText = key;
+
+        x_action.category.appendChild(opt);
+      }
+
+      // Transaction specific updates.
+      x_action.id.innerText = transaction.primary_key;
+      x_action.date.innerText = transaction.transaction_date;
+      x_action.description.innerText = transaction.description;
+      x_action.amount.innerText = transaction.amount;
+    }
+
+    function get_transactions(uuid) {
+      const request_url = "/transactions?user_id=" + uuid;
+      const handler = 
+      {
+        success: function(data) {
+          global_data.transaction.list = data;
+          x_action.refresh.disabled = undefined;
+        },
+        error: function() {
+          console.error("Failed to get transactions");
+        }
+      }
+      http_request(request_url, handler);
+    }
+
+    function get_categories() {
+      const request_url = "/categories";
+      const handler = 
+      {
+        success: function(data) {
+          global_data.categories = data
+        },
+        error: function() {
+          console.error("Failed to get categories");
+        }
+      }
+      http_request(request_url, handler);
+    }
+
+    function http_request(url, response_handler, method="GET", body=null)
+    {
+        let request = new XMLHttpRequest();
+        request.addEventListener("load", function(){
+          if (request.status !== 200)
+          {
+            response_handler.error();
+          } 
+          else
+          {
+            let response_body = ""
+            if (request.responseText !== "")
+            {
+              response_body = JSON.parse(request.responseText);
+            }
+            response_handler.success(response_body);
+            global_data.update();
+          }
+        })
+
+        const async = true;
+        request.open(method, url, async); 
+        if (method == "POST" || method == "PUT")
+        {
+          request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+          request.send(JSON.stringify(body));
+        }
+        else
+        {
+          request.send(null);
+        }
+    }
+
+    // Do every page load.
+    get_categories();
+  </script>
+</html>
\ No newline at end of file