From 7296280d1e9f87cb8a360dac3322f3bd099815d2 Mon Sep 17 00:00:00 2001 From: Sarthak Date: Mon, 20 Dec 2021 06:23:09 +0530 Subject: [PATCH] Create, update, delte functions as fetch api js added in home.html full crud operations done --- .../0004_alter_transaction_category.py | 18 + api/models.py | 16 +- db.sqlite3 | Bin 147456 -> 151552 bytes frontend/templates/home.html | 462 +++++++++++++----- 4 files changed, 378 insertions(+), 118 deletions(-) create mode 100644 api/migrations/0004_alter_transaction_category.py 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 e4ccd22ec814d93f9fab82c6dcaa0f40c8e5317e..192e7cf5762d3269400c95c74c2c4ecb3b23bba1 100644 GIT binary patch delta 3014 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 + + @@ -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']} + + + + + + + + + + `); + } + });