{% extends "layouts/base.html" %} {% block title %}Addresses{% endblock %} <!-- Specific Page CSS goes HERE --> {% block stylesheets %} <style> .main-panel .content { min-height: calc(100vh - 155px); } .navbar.navbar-absolute { z-index: 100000; } .card-body i { color: #9a9a9a; font-size: 1.4em; } .card-body i:hover { color: #575757; } .table > tbody > tr > .button-td, .white-content .table > tbody > tr > .button-td { width: 4rem; padding: 5px 0px; } .tooltip-inner { font-size: 10.5px; padding: 5px 10px; } .tooltip { border-radius: 4px; } #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; } .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; } .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; } .footer { padding: 0; } .footer .nav { padding-left: 0; } .footer .copyright { padding-right: 0; } @media screen and (max-width: 500px) { .filter-container div select { 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; } } .hidden-column { display: none; } </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> <label for="quarter-type-filter">Filter by Address Type:</label> <select id="quarter-type-filter"> <option value="">All</option> {% for value in quarterType %} <option value="{{ value }}">{{ value }}</option> {% endfor %} </select> </div> <div> <label for="meter-type-filter">Filter by Meter Type:</label> <select id="meter-type-filter"> <option value="">All</option> <option value="metered">Metered</option> <option value="unmetered">Unmetered</option> </select> </div> </div> <div class="content"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">List of Addresses</h4> {% if user_role == 'admin' %} <a href="/create_room.html"> <button type="" class="btn btn-fill btn-primary"> Add Address </button> </a> {% endif %} </div> <div class="card-body"> <div class="table-responsive"> <table class="table tablesorter" id=""> <thead class="text-primary"> <tr> <th class="text-center">S No.</th> <th class="text-center">Address</th> <th class="text-center hidden-column">Quarter Type</th> <th class="text-center">Sanctioned Load</th> <th class="text-center">Metering Type</th> <th class="text-center">Rate name</th> {% if user_role == 'admin' %} <th class="text-center">Action</th> {% endif %} </tr> </thead> <tbody> {% for room in rooms %} <tr> <td class="text-center"> </td> <td class="text-center"> {{room.quarter_type_name }} - {{room.room_number }} </td> <td class="text-center quarter-type-column" style="display: none;" > {{ room.quarter_type_name }} </td> <td class="text-center">{{ room.sanctioned_load }}</td> <td class="text-center meter-type-column"> {% if room.is_metered %} Metered {% else %} Unmetered {%endif %} </td> <td class="text-center"> {% if room.is_metered %} {%if room.meter_rate_name%} {{ room.meter_rate_name }} {%else%} -- {%endif %} {%else%} {%if room.flat_rate_name%} {{room.flat_rate_name }} {%else%} -- {%endif %} {%endif%} </td> {% if user_role == 'admin' %} <td class="td-actions button-td"> <a href="{% url 'update_room.html' room_id=room.room_id %}" class="btn btn-link" data-toggle="tooltip" title="Edit Address" > <i class="tim-icons icon-pencil"></i> </a> </td> <td class="td-actions button-td"> <button type="button" class="btn btn-link delete-button" data-room-id="{{ room.room_id }}" data-toggle="tooltip" title="Delete Address" > <i class="tim-icons icon-trash-simple"></i> </button> </td> {%endif%} </tr> {%endfor%} </tbody> </table> </div> </div> </div> </div> </div> </div> {% endblock content %} <!-- Specific Page JS goes HERE --> {% block javascripts %} <script> $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); $(".delete-button").click(function () { var roomId = $(this).data("room-id"); if (confirm("Are you sure you want to delete this quarter?")) { $.ajax({ url: "{% url 'delete_room' %}", type: "POST", data: { room_id: roomId, csrfmiddlewaretoken: "{{ csrf_token }}", }, success: function (response) { location.reload(); }, error: function (xhr, status, error) { console.error(error); alert("Error deleting quarter. Please try again."); }, }); } }); }); window.onload = function() { var messages = [ {% for msg in messages %} "{{ msg }}" {% endfor %} ]; let tags = [{% for msg in messages %} "{{ msg.tags }}" {% endfor %}] if (messages.length === 0) { return; } let tag = tags.join('\n') var messageText = messages.join('\n'); //console.log(tag) //alert(messageText); const notificationBar = document.getElementById("notification-bar"); function showNotification(tag, message) { notificationBar.textContent = message; notificationBar.classList.add(tag); notificationBar.classList.add("show"); setTimeout(function () { hideNotification(); }, 3000); } function hideNotification() { notificationBar.textContent = ""; notificationBar.classList.remove("show","success", "error"); } if (tag.toLowerCase() == "success") { showNotification("success", messageText); } if (tag.toLowerCase() == "error") { showNotification("error", messageText); } }; // document.addEventListener("DOMContentLoaded", function () { // const notificationBar = document.getElementById("notification-bar"); // // function showNotification(status, message) { // notificationBar.textContent = message; // notificationBar.classList.add(status); // notificationBar.classList.remove("hidden"); // setTimeout(function () { // hideNotification(); // }, 3000); // } // // function hideNotification() { // notificationBar.textContent = ""; // notificationBar.classList.remove("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 () { $('[data-toggle="tooltip"]').tooltip(); function filterTable() { var quarterType = $("#quarter-type-filter").val(); var meterType = $("#meter-type-filter").val(); $(".table tbody tr").each(function () { var quarterTypeColumn = $(this) .find(".quarter-type-column") .text() .trim() .toLowerCase(); var meterTypeColumn = $(this) .find(".meter-type-column") .text() .trim() .toLowerCase(); if ( (quarterType === "" || quarterTypeColumn === quarterType.toLowerCase()) && (meterType === "" || meterTypeColumn === meterType.toLowerCase()) ) { $(this).show(); } else { $(this).hide(); } }); } $("#quarter-type-filter, #meter-type-filter").change(function () { filterTable(); }); 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 %} </div> </div> </div>