{% extends "layouts/base.html" %} {% block title %}Consumers{%endblock%}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<style>
/* Add your custom styles here */
.navbar.navbar-absolute {
z-index: 100000;
}
.card-body i {
color: #9a9a9a;
font-size: 1.4em;
}
.card-body i:hover {
color: #575757;
}
#notification-bar {
font-size: large;
font-weight: bolder;
position: fixed;
top: -100%;
left: 25%;
width: 50%;
color: #fff;
padding: 20px;
text-align: center;
z-index: 9999;
border-radius: 10px;
transition: 0.5s;
}
#notification-bar.show{
top: 10px;
}
.success {
background-color: #4caf50;
}
.error {
background-color: #f44336;
}
.table > tbody > tr > .button-td {
width: 4rem;
padding: 5px 0px;
}
.tooltip-inner {
font-size: 10.5px;
padding: 5px 10px;
}
.tooltip {
border-radius: 4px;
}
.filter-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
color: white;
}
.filter-container div {
margin: 10px;
width: 100%;
max-width: 180px;
}
.filter-container div select {
width: 100%;
max-width: 180px;
}
.filter-container #username-filter {
width: 100%;
max-width: 180px;
}
.white-content .filter-container {
color: black;
}
.white-content #show-filter-container {
color: black;
}
#show-filter-container {
display: inline;
margin: 10px;
color: white;
font-weight: bold;
cursor: pointer;
}
.filter-container {
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 1s, opacity 1s, visibility 0.5s;
}
.filter-container.show {
max-height: 1000px;
opacity: 1;
visibility: visible;
}
.card-header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.btn-primary {
/*padding: 10px 20px;*/
margin: 0 20px;
}
@media screen and (max-width: 500px) {
.filter-container div select,
.filter-container #username-filter {
font-size: 12px;
}
.btn-primary {
font-size: 12px;
padding: 8px 18px;
margin: 0 10px 0 0;
}
#notification-bar {
font-size: medium;
left: 10%;
width: 80%;
padding: 10px;
}
}
</style>
<style type="text/css">
body
{
counter-reset: Serial;
}
table
{
border-collapse: separate;
}
tr td:first-child:before
{
counter-increment: Serial;
content: counter(Serial);
}
</style>
{% endblock %} {% block content %}
<div id="notification-bar"></div>
<div class="content">
<div class="row">
<div class="col-md-12">
<div id="show-filter-container">
Show Filters <i class="tim-icons icon-minimal-down"></i>
</div>
<div class="filter-container">
<div class="username-filter">
<label for="username-filter">Filter by Username:</label>
<input type="text" id="username-filter" />
</div>
<div>
<label for="user-type-filter">Filter by User Type:</label>
<select id="user-type-filter">
<option value="">All</option>
<option value="simple">Simple</option>
<option value="outsource">Outsource</option>
</select>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">List of Consumers</h4>
{% if user_role == 'admin' %}
<a href="/add_user.html">
<button type="" class="btn btn-fill btn-primary">
Add Consumer
</button>
</a>
{% endif %}
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table tablesorter">
<thead class="text-primary">
<tr>
<th class="text-center">S No.</th>
<th class="text-center">Username</th>
<th class="text-center">Full Name</th>
<th class="text-center">Address</th>
<th class="text-center">User Type</th>
<th class="text-center">Balance</th>
<th class="text-center">Email</th>
{% if user_role == 'admin' %}
<th class="text-center">Actions</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td class = " text-center"></td>
<td class="text-center username-column">
{{ user.django_user.username }}
</td>
<td class="text-center">{{ user.full_name }}</td>
<td class="text-center">
{% for user_to_room in user_to_rooms %}
{% if user_to_room.user_id == user %}
{% if user_to_room.room_id%}
{{ user_to_room.room_id.quarter_type_id.quarter_name }} - {{ user_to_room.room_id.room_number }}
{% else %}
--
{% endif %}
{% endif %}
{% endfor %}
</td>
<td class="text-center user-type-column">
{{ user.get_user_type_display }}
</td>
<td class="text-center">
{{ user.balance }}
</td>
<td class="text-center">{{ user.email }}</td>
{% if user_role == 'admin' %}
<td class="td-actions button-td">
<a
href="{% url 'update_user.html' user.user_id %}"
class="btn btn-link"
data-toggle="tooltip"
title="Update Quarter"
>
<i class="tim-icons icon-pencil"></i>
</a>
</td>
<td class="td-actions button-td">
<a
href="{% url 'delete-user' user.user_id %}"
class="btn btn-link delete_user"
data-toggle="tooltip"
title="Delete User"
onclick="return confirmDelete()"
>
<i class="tim-icons icon-trash-simple"></i>
</a>
</td>
{%endif%}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ... -->
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
function confirmDelete() {
return confirm("Are you sure you want to delete this user?");
}
document.addEventListener("DOMContentLoaded", function () {
const notificationBar = document.getElementById("notification-bar");
function showNotification(status, message) {
notificationBar.textContent = message;
notificationBar.classList.add(status);
notificationBar.classList.add("show");
setTimeout(function () {
hideNotification();
}, 3000);
}
function hideNotification() {
notificationBar.textContent = "";
notificationBar.classList.remove("show","success", "error");
//notificationBar.classList.add("hidden");
}
const successMessage = "{{ success_message }}";
const errorMessage = "{{ error_message }}";
if (successMessage.trim() !== "") {
showNotification("success", successMessage.trim());
}
if (errorMessage.trim() !== "") {
showNotification("error", errorMessage.trim());
}
});
$(document).ready(function () {
// Function to handle table filtering
function filterTable() {
var username = $("#username-filter").val().trim();
var userType = $("#user-type-filter").val();
$(".table tbody tr").each(function () {
var row = $(this);
var usernameColumn = row
.find(".username-column")
.text()
.trim()
.toLowerCase();
var userTypeColumn = row
.find(".user-type-column")
.text()
.trim()
.toLowerCase();
var showRow =
(username === "" || usernameColumn === username) &&
(userType === "" || userTypeColumn === userType.toLowerCase());
if (showRow) {
row.show();
} else {
row.hide();
}
});
}
// Trigger filtering when any filter is changed
$("#username-filter, #user-type-filter").change(function () {
filterTable();
});
// Initial filtering on page load
filterTable();
});
const showFilterBtn = document.getElementById("show-filter-container");
const filterContainer = document.querySelector(".filter-container");
showFilterBtn.addEventListener("click", () => {
filterContainer.classList.toggle("show");
if (filterContainer.classList.contains("show")) {
showFilterBtn.innerHTML =
"Hide Filters <i class='tim-icons icon-minimal-up'></i>";
} else {
showFilterBtn.innerHTML =
"Show Filters <i class='tim-icons icon-minimal-down'></i>";
}
});
</script>
{% endblock javascripts %}