diff --git a/api/migrations/0004_alter_transaction_category.py b/api/migrations/0004_alter_transaction_category.py new file mode 100644 index 0000000..a8cc100 --- /dev/null +++ b/api/migrations/0004_alter_transaction_category.py @@ -0,0 +1,18 @@ +# Generated by Django 4.0 on 2021-12-25 12:11 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('api', '0003_remove_transaction_username_transaction_user'), + ] + + operations = [ + migrations.AlterField( + model_name='transaction', + name='category', + field=models.CharField(choices=[('Rent', 'Rent'), ('Travel', 'Travel'), ('Investment', 'Investment'), ('Shopping', 'Shopping'), ('Learning', 'Learning'), ('Fees', 'Fees'), ('Other', 'Other')], default='oth', max_length=10), + ), + ] diff --git a/api/models.py b/api/models.py index afb51c9..f07d04d 100644 --- a/api/models.py +++ b/api/models.py @@ -8,15 +8,15 @@ class Transaction(models.Model): name = models.CharField(max_length=500) amount = models.IntegerField() categories = [ - ('ren', 'Rent'), - ('tra', 'Travel'), - ('inv', 'Investment'), - ('sho', 'Shopping'), - ('lea', 'Learning'), - ('fee', 'Fees'), - ('oth', 'Other'), + ('Rent', 'Rent'), + ('Travel', 'Travel'), + ('Investment', 'Investment'), + ('Shopping', 'Shopping'), + ('Learning', 'Learning'), + ('Fees', 'Fees'), + ('Other', 'Other'), ] - category = models.CharField(max_length=3, default='oth', choices=categories) + category = models.CharField(max_length=10, default='oth', choices=categories) note = models.TextField() def __str__(self): diff --git a/db.sqlite3 b/db.sqlite3 index e4ccd22..192e7cf 100644 Binary files a/db.sqlite3 and b/db.sqlite3 differ diff --git a/frontend/templates/home.html b/frontend/templates/home.html index 3b78a15..ef44288 100644 --- a/frontend/templates/home.html +++ b/frontend/templates/home.html @@ -15,6 +15,115 @@ + + @@ -26,34 +135,38 @@

Spendings

- {% else %}

BudMan - BudMan is a web app that helps you track and adjust your spending so that you are in control of money.

@@ -127,24 +230,51 @@

BudMan - BudMan is a web app that helps you track and adjust your spending s return cookieValue; } var csrftoken = getCookie('csrftoken'); - function updateTransaction() { - fetch("api/update-transaction", { + + function createTransaction() { + var input_name = document.getElementById('newName').value + var input_amount = document.getElementById('newAmount').value + var input_category = document.getElementById('newCategory').value + var input_note = document.getElementById('newNote').value + console.log(input_name); + + fetch("api/create-transaction", { method: "POST", body: JSON.stringify({ - id: 1, - name: "one", - amount: 888, - category: "fee", - note: "lkjal;ksdf" + name: input_name, + amount: input_amount, + category: input_category, + note: input_note }), headers: { "Content-type": "application/json; charset=UTF-8", 'X-CSRFToken': csrftoken } - }) - .then(response => response.json()) + }); } + function updateTransaction(id) { + var input_id = id + var input_name = document.getElementById('input1' + id).value + var input_amount = document.getElementById('input2' + id).value + var input_category = document.getElementById('input3' + id).value + var input_note = document.getElementById('input4' + id).value + fetch("api/update-transaction", { + method: "POST", + body: JSON.stringify({ + id: input_id, + name: input_name, + amount: input_amount, + category: input_category, + note: input_note + }), + headers: { + "Content-type": "application/json; charset=UTF-8", + 'X-CSRFToken': csrftoken + } + }); + close1(id); + } function toggleButtonNew() { document.getElementById('new').style.display = "none"; document.getElementById('newForm').style.display = "block"; @@ -154,73 +284,185 @@

BudMan - BudMan is a web app that helps you track and adjust your spending s document.getElementById('newForm').style.display = "none"; } - function edit() { - document.getElementById('edit').style.display = "none"; - document.getElementById('save').style.display = "inline"; - document.getElementById('cut').style.display = "inline"; - document.getElementById('delete').style.display = "none"; + function edit(id) { + document.getElementById('edit' + id).style.display = "none"; + document.getElementById('save' + id).style.display = "inline"; + document.getElementById('cut' + id).style.display = "inline"; + document.getElementById('delete' + id).style.display = "none"; + + + var row = document.getElementById('spendingRow' + id); + var span0 = document.getElementById('input1' + id) + var td = document.createElement('td'); + var input0 = document.createElement('input'); + input0.type = 'text'; + input0.value = span0.textContent; + input0.className = 'form-control'; + input0.id = 'input1' + id + td.appendChild(input0) + row.insertBefore(td, span0); + row.removeChild(span0); + + var span0 = document.getElementById('input2' + id) + var td = document.createElement('td'); + var input0 = document.createElement('input'); + input0.type = 'text'; + input0.value = span0.textContent; + input0.className = 'form-control'; + input0.id = 'input2' + id + td.appendChild(input0) + row.insertBefore(td, span0); + row.removeChild(span0); + + var span0 = document.getElementById('input3' + id) + var td = document.createElement('td'); + var input0 = document.createElement('select'); + input0.className = 'form-control'; + input0.id = 'input3' + id + + var option = document.createElement('option') + option.value = 'Rent' + option.innerText = 'Rent' + if (option.value === span0.textContent) { + option.setAttribute("disabled", "disabled"); + option.setAttribute("selected", "selected"); + } + input0.appendChild(option); + + var option = document.createElement('option') + option.value = 'Travel' + option.innerText = 'Travel' + if (option.value === span0.textContent) { + option.setAttribute("disabled", "disabled"); + option.setAttribute("selected", "selected"); + } + input0.appendChild(option); + + var option = document.createElement('option') + option.value = 'Investment' + option.innerText = 'Investment' + if (option.value === span0.textContent) { + option.setAttribute("disabled", "disabled"); + option.setAttribute("selected", "selected"); + } + input0.appendChild(option); + + var option = document.createElement('option') + option.value = 'Shopping' + option.innerText = 'Shopping' + if (option.value === span0.textContent) { + option.setAttribute("disabled", "disabled"); + option.setAttribute("selected", "selected"); + } + input0.appendChild(option); + + var option = document.createElement('option') + option.value = 'Learning' + option.innerText = 'Learning' + if (option.value === span0.textContent) { + option.setAttribute("disabled", "disabled"); + option.setAttribute("selected", "selected"); + } + input0.appendChild(option); + + var option = document.createElement('option') + option.value = 'Fees' + option.innerText = 'Fees' + if (option.value === span0.textContent) { + option.setAttribute("disabled", "disabled"); + option.setAttribute("selected", "selected"); + } + input0.appendChild(option); + + var option = document.createElement('option') + option.value = 'Other' + option.innerText = 'Other' + if (option.value === span0.textContent) { + option.setAttribute("disabled", "disabled"); + option.setAttribute("selected", "selected"); + } + input0.appendChild(option); + + td.appendChild(input0); + row.insertBefore(td, span0); + row.removeChild(span0); + + var span0 = document.getElementById('input4' + id) + var td = document.createElement('td'); + var input0 = document.createElement('input'); + input0.type = 'text'; + input0.value = span0.textContent; + input0.className = 'form-control'; + input0.id = 'input4' + id + td.appendChild(input0) + row.insertBefore(td, span0); + row.removeChild(span0); } - function close1() { - document.getElementById('edit').style.display = "inline"; - document.getElementById('save').style.display = "none"; - document.getElementById('cut').style.display = "none"; - document.getElementById('delete').style.display = "inline"; + function close1(id) { + document.getElementById('edit' + id).style.display = "inline"; + document.getElementById('save' + id).style.display = "none"; + document.getElementById('cut' + id).style.display = "none"; + document.getElementById('delete' + id).style.display = "inline"; location.reload(); } - - document.getElementById('spending').addEventListener('click', () => { - if (event.target.tagName === 'BUTTON') { - if (event.srcElement.id === 'edit') { - var row = document.getElementById('spendingRow'); - var span0 = row.getElementsByTagName('td')[0]; - var td = document.createElement('td'); - var input0 = document.createElement('input'); - input0.type = 'text'; - input0.value = span0.textContent; - input0.className = 'form-control'; - td.appendChild(input0) - row.insertBefore(td, span0); - row.removeChild(span0); + function confirmDelete(id) { + document.getElementById('id01').style.display = 'block'; + document.getElementById("clearfix").addEventListener("click", () => { + if (event.target.tagName === 'BUTTON') { + if (event.srcElement.id === 'deleteConfirm') { + deleteTransaction(id); + } } - if (event.srcElement.id === 'edit') { - - var row = document.getElementById('spendingRow'); - var span0 = row.getElementsByTagName('td')[2]; - var td = document.createElement('td'); - var input0 = document.createElement('input'); - input0.type = 'text'; - input0.value = span0.textContent; - input0.className = 'form-control'; - td.appendChild(input0) - row.insertBefore(td, span0); - row.removeChild(span0); - - - var row = document.getElementById('spendingRow'); - var span0 = row.getElementsByTagName('td')[3]; - var td = document.createElement('td'); - var input0 = document.createElement('input'); - input0.type = 'text'; - input0.value = span0.textContent; - input0.className = 'form-control'; - td.appendChild(input0) - row.insertBefore(td, span0); - row.removeChild(span0); - - var row = document.getElementById('spendingRow'); - var span0 = row.getElementsByTagName('td')[4]; - var td = document.createElement('td'); - var input0 = document.createElement('input'); - input0.type = 'text'; - input0.value = span0.textContent; - input0.className = 'form-control'; - td.appendChild(input0) - row.insertBefore(td, span0); - row.removeChild(span0); + }); + } + function deleteTransaction(id) { + fetch("api/delete-transaction", { + method: "POST", + body: JSON.stringify({ + id: id, + }), + headers: { + "Content-type": "application/json; charset=UTF-8", + 'X-CSRFToken': csrftoken } - } - }); - + }); + close1(id); + } + fetch('/api') + .then((response) => (response.json())) + .then((data) => { + // console.log(JSON.stringify(data)); + + var h = document.getElementById("tablebody"); + for (let i = 0; i < data['data'].length; i++) { + h.insertAdjacentHTML("afterbegin", ` + ${data['data'][i]['name']} + ${data['data'][i]['created']} + ${data['data'][i]['amount']} + ${data['data'][i]['category']} + ${data['data'][i]['note']} + + + + + + + + + + `); + } + });