{% extends "layouts/base.html" %} {% block title %}Add Consumer{% endblock %} <!-- Specific Page CSS goes HERE --> {% block stylesheets %} <style> .main-panel > .content { padding: 0; } .container { min-width: 100%; margin: 0; padding: 0; } .row { margin: 0; } .offset-md-3 { margin-left: 0; } .card { min-height: calc(100vh - 270px); left: 300px; min-width: calc(100vw - 400px); margin-block: 0; } .card * { font-size: large; } .card .title { font-size: 2rem; } .card label { font-size: 1rem; } .form-control { height: calc(3rem + 2px); } select option { color: black; } select option:checked { color: rgb(0, 228, 0); } #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; } @media screen and (max-width: 992px) { .card { min-width: calc(100vw - 30px); left: 0; } } @media screen and (max-width: 576px) { .card * { font-size: medium; } .card .title { font-size: 1.6rem; } .card label { font-size: 0.8rem; } .form-control { height: calc(2.7rem + 2px); } #notification-bar { font-size: medium; left: 10%; width: 80%; padding: 10px; } } </style> {% endblock %} {% block content %} <div id="notification-bar"></div> <div class="content"> <div class="container"> <div class="row pt-5"> <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5"> <div class="card"> <div class="card-header text-center py-4"> <h4 class="title">Add Consumer</h4> </div> <form role="form" method="post" action="{% url 'add-user' %}"> {% csrf_token %} <div class="card-body px-5 py-3"> <div class="form-row"> <div class="form-group col-md-6"> <label for="id_username">Username</label> <input type="text" class="form-control" id="id_username" name="username" /> <span class="text-danger"></span> </div> <div class="form-group col-md-6"> <label for="email">Email</label> <input type="email" class="form-control" id="email" name="email" /> <span class="text-danger"></span> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="id_fullname">Full Name</label> <input type="text" class="form-control" id="id_fullname" name="fullname" /> <span class="text-danger"></span> </div> <div class="form-group col-md-6"> <label for="id_department_id">Department Name</label> <select class="form-control" id="id_department_name" name="department_name" > {% for value in departmentType %} <option value="{{ value }}">{{ value }}</option> {% endfor %} </select> <span class="text-danger"></span> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="id_room_id">Address Number</label> <input type="number" class="form-control" id="id_room_id" name="room_id" value="-1" /> <span class="text-danger"></span> </div> <div class="form-group col-md-6"> <label for="id_access">Address Type</label> <select class="form-control" id="id_access" name="id_access"> <option value="select_quarter">Select Type</option> {% for quarter_type in quarterType %} <option value="{{ quarter_type.quarter_name }}"> {{ quarter_type.quarter_name }} </option> {% endfor %} </select> <span class="text-danger"></span> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="id_user_type">User Type</label> <select class="form-control" id="id_user_type" name="user_type" > <option value="simple">Simple</option> <option value="outsource">Outsource</option> </select> <span class="text-danger"></span> </div> <div class="form-group col-md-6"> <label for="id_balance">Balance</label> <input type="text" inputmode="decimal" pattern="[0-9]*[.,]?[0-9]*" class="form-control" id="id_balance" name="balance" value="{{ user.balance }}" /> <span class="text-danger"></span> </div> </div> </div> <div class="card-footer text-center"> <button type="submit" class="btn btn-fill btn-primary"> Add Consumer </button> </div> </form> </div> </div> </div> </div> </div> {% endblock content %} <!-- Specific Page JS goes HERE --> {% block javascripts %} <script> 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()); } }); </script> {% endblock javascripts %}