Ignore:
Timestamp:
05/01/25 12:32:20 (4 weeks ago)
Author:
ManuelTrajcev <manueltrajcev7@…>
Branches:
master
Children:
59b2e9c
Parents:
611686e
Message:

rank_list_artists view update + bootstrap styling

File:
1 edited

Legend:

Unmodified
Added
Removed

  • templates/genres_per_customer.html

    r611686e r4abe330  
    22<html>
    33<head>
    4     <title>Number of tracks from each genre per Customer</title>
     4    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
     5          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
     6    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
     7            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
     8            crossorigin="anonymous"></script>
     9    <title>Number of Tracks from Each Genre per Customer</title>
    510</head>
    6 <body>
    7 <h1>Number of tracks from each genre per Customer</h1>
     11<body class="d-flex bg-light">
     12{% include 'sidebar.html' %}
     13<div class="container mt-5">
     14    <h1 class="mb-4 text-center">Number of Tracks from Each Genre per Customer</h1>
    815
    9 <form method="GET" action="">
    10     <label for="customer_id">Select Customer:</label>
    11     <select name="customer_id" id="customer_id">
    12         <option value="">All Customers</option>
    13         {% for customer in customers %}
    14             <option value="{{ customer.customer_id }}"
    15                     {% if request.GET.customer_id == customer.0|stringformat:'s' %}selected{% endif %}>
    16                 {{ customer.first_name }} {{ customer.last_name }}
    17             </option>
    18         {% endfor %}
    19     </select>
    20     <button type="submit">Filter</button>
    21 </form>
     16    <form method="GET" action="" class="row g-3 mb-4">
     17        <div class="col-md-4">
     18            <label for="customer_id" class="form-label">Select Customer:</label>
     19            <select name="customer_id" id="customer_id" class="form-select">
     20                <option value="">All Customers</option>
     21                {% for customer in customers %}
     22                    <option value="{{ customer.customer_id }}"
     23                            {% if request.GET.customer_id == customer.0|stringformat:'s' %}selected{% endif %}>
     24                        {{ customer.first_name }} {{ customer.last_name }}
     25                    </option>
     26                {% endfor %}
     27            </select>
     28        </div>
    2229
     30        <div class="col-md-4 d-flex align-items-end">
     31            <button type="submit" class="btn btn-primary w-100">Filter</button>
     32        </div>
     33    </form>
    2334
    24 <ol>
    25     <h4>First Name&nbsp;&nbsp;Last Name&nbsp;&nbsp;-&nbsp;&nbsp;Genre - Num of Tracks</h4>
    26     {% for row in data %}
    27         <li>
    28             {{ row.first_name }}&emsp;-&emsp;{{ row.last_name }}&emsp;-&emsp;{{ row.genre }}&emsp;-&emsp;{{ row.track_count }}</li>
    29     {% endfor %}
    30 </ol>
     35    {% if not data %}
     36        <div class="alert alert-warning" role="alert">
     37            No data available for the selected customer.
     38        </div>
     39    {% else %}
     40        <div class="table-responsive">
     41            <table class="table table-striped">
     42                <thead>
     43                <tr>
     44                    <th scope="col">First Name</th>
     45                    <th scope="col">Last Name</th>
     46                    <th scope="col">Genre</th>
     47                    <th scope="col">Number of Tracks</th>
     48                </tr>
     49                </thead>
     50                <tbody>
     51                {% for row in data %}
     52                    <tr>
     53                        <td>{{ row.first_name }}</td>
     54                        <td>{{ row.last_name }}</td>
     55                        <td>{{ row.genre }}</td>
     56                        <td>{{ row.track_count }}</td>
     57                    </tr>
     58                {% endfor %}
     59                </tbody>
     60            </table>
     61        </div>
     62    {% endif %}
     63</div>
    3164
    3265</body>
Note: See TracChangeset for help on using the changeset viewer.