Is there a way to fluidly calculating total sales using JS with Django

I'm looking for a way to take the information being entered into a database and not only calculate the overall total for a year but also calculate the total for individual months. I'm using Django and Javascript.

The Django View:

@login_required
def proposal_signed(request):
    prop = Proposal.objects.all().order_by('proposal_approved_date')

    return render(request, 'client/proposal_signed.html', {
        'prop': prop,
    })

The HTML and JS:

{% extends 'client/base.html' %}

{% block content %}
    <br>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <div class="text-center">
                <h1 class="display-4"> Sales For Signed Proposals </h1>

            </div>
        </div>
    </div>

    <head>
        <style>
            table {
                font-family: arial, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }

            td, th {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #dddddd;
            }
        </style>
        <title></title>
    </head>

    <div class="container">

    <table id="countit">
            <tr>
                <th><strong>Approval Date:</strong></th>
                <th><strong>Job Type:</strong></th>
                <th><strong>Address:</strong>
                <th><strong>Client:</strong></th>
                <th><strong>Bid/Job Total:</strong></th>

            </tr>
            {% for item in prop %}
                 {% if item.proposal_approved_date %}

                    <tr>
                        <td>{{ item.proposal_approved_date }}</td>
                        <td>{{ item.client.requested_service }}</td>
                        <td>{{ item.client.work_site_address }}</td>
                        <td>{{ item.who_to_bill_name }}</td>
                        <td class="count-me">{{ item.client.invoice_set.get.bill_amount }}</td>
                    </tr>

                {% endif %}
            {% endfor %}

        </table>

    <script language="javascript" type="text/javascript">
            var tds = document.getElementById('countit').getElementsByTagName('td');
            var sum = 0;
            for(var i = 0; i < tds.length; i ++) {
                if(tds[i].className === 'count-me') {
                    sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
                }
            }
            document.getElementById('countit').innerHTML += '<tr><td><strong>Total:</strong></td><td>' + sum + '</td></tr>';
        </script>
    

    </div>

    <br>
    <br>

{% endblock %}

This gives me the table with the values and the grand total for the items in the Bid/Job Total on the bottom but I could use some help with breaking it down by month and year. The amount per month is flexible.

Thank you for any help, Dace

Back to Top