Search code examples
python-3.xdjangodjango-viewsdjango-templates

Total counts not displaying in template:


the app im building requires asset management section which would display the total assets, total fixed, total onsite and total booked, however the blocks shows but the amounts does not.

while debugging the print statement within the views prints to console and if i attempt to load the asset management html it displays but when including it into my base html the amounts does not display.

in the base html

in the asset dashboard

in the console

My views:

  def asset_dashboard(request):
    total_assets_count = Asset.objects.count()
    onsite_assets_count = Asset.objects.filter(status='onsite').count()
    fixed_assets_count = Asset.objects.filter(status='fixed').count()
    booked_assets_count = Asset.objects.filter(status='booked').count()

    print("Total Assets Count:", total_assets_count)
    print("Onsite Assets Count:", onsite_assets_count)
    print("Fixed Assets Count:", fixed_assets_count)
    print("Booked Assets Count:", booked_assets_count)


    context = {
        'total_assets_count': total_assets_count,
        'onsite_assets_count': onsite_assets_count,
        'fixed_assets_count': fixed_assets_count,
        'booked_assets_count': booked_assets_count,
    }

    return render(request, 'asset_dashboard.html', context)

My base.HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    {% load static %}
    <link rel="stylesheet" href="{% static './css/main.css' %}">
    <style>
    /* CSS to style the container */
    .container {
        height: 200px;
        background-image: url('static/images/VOClogo.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.2;
        color: white;
        font-size: 24px;
        text-align: center;
        padding-top: 10px;
    }
    </style>
</head>
<body>
    {% include 'navbar.html' %}

    <form class="d-flex" method="GET" action="{% url 'asset_search' %}">
        <input class="form-control me-2" type="search" name="q" placeholder="Search by tag or category" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
    </form>

    <br>
        {% include 'asset_dashboard.html' %}

        {% block content %}
        {% endblock content %}
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

my asset dashboard:

<br>
<div class="container-fluid">
        <div class="row">
            <div class="col" align="center">
                <h1>Asset Management System</h1>
                <hr> 
            </div>
        </div>
<br>

<div class="row">
    <div class="col-md">
        <div class="card text-center text-green nb-3">
            <div class="card-header">
                <h5 class="card-title">Total Orders</h5>
            </div>
            <div class="card-body">
                <h3 class="card-title">
                    {{total_assets_count}}
                </h3>
            </div>
        </div>
    </div>

    <div class="col-md">
        <div class="card text-center text-green nb-3" >
            <div class="card-header">
                <h5 class="card-title">Total fixed</h5>
            </div>
            <div class="card-body">
                <h3 class="card-title">
                    {{fixed_assets_count}}
                </h3>
            </div>
        </div>
    </div>

    <div class="col-md">
        <div class="card text-center text-green nb-3" >
            <div class="card-header">
                <h5 class="card-title">Total Onsite </h5>
            </div>
            <div class="card-body">
                <h3 class="card-title">
                    {{onsite_assets_count}}
                </h3>
            </div>
        </div>
    </div>
        <div class="col-md">
        <div class="card text-center text-green nb-3">
            <div class="card-header">
                <h5 class="card-title">Total Booked</h5>
            </div>
            <div class="card-body">
                <h3 class="card-title">
                    {{booked_assets_count}}
                </h3>
            </div>
        </div>
    </div>

</div>
<br>

I saw in the picks the wrong titles so changed it when i copied the code snippets

while debugging the print statement within the views prints to console and if i attempt to load the asset management html it displays but when including it into my base html the amounts does not display.


Solution

  • First:

    You either should render the base if you're using include:

     def asset_dashboard(request):
            total_assets_count = Asset.objects.count()
            onsite_assets_count = Asset.objects.filter(status='onsite').count()
            fixed_assets_count = Asset.objects.filter(status='fixed').count()
            booked_assets_count = Asset.objects.filter(status='booked').count()
        
            print("Total Assets Count:", total_assets_count)
            print("Onsite Assets Count:", onsite_assets_count)
            print("Fixed Assets Count:", fixed_assets_count)
            print("Booked Assets Count:", booked_assets_count)
        
        
            context = {
                'total_assets_count': total_assets_count,
                'onsite_assets_count': onsite_assets_count,
                'fixed_assets_count': fixed_assets_count,
                'booked_assets_count': booked_assets_count,
            }
        
            return render(request, 'My base.HTML', context)
    

    or use extend on the asset_dashboard.html template to extend the My base.HTML file.

    Second:

    If you're using include you should pass the data like this:

    {% include "My base.HTML" with total_assets_count=total_assets_count fixed_assets_count=fixed_assets_count onsite_assets_count =onsite_assets_count booked_assets_count=booked_assets_count %}