{% extends "layouts/base.html" %} {% block title %}Update/Set Readings
{%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: 0;
left: 0;
width: 100%;
color: #fff;
padding: 20px;
text-align: center;
z-index: 9999;
}
.hidden {
display: none;
}
.success {
background-color: #4caf50;
}
.error {
background-color: #f44336;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
color: white;
}
.white-content .form-control[readonly],
.white-content fieldset[disabled] .form-control {
color: black;
}
.modal-dialog {
max-width: 50%;
}
.modal {
outline: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 1;
}
.modal-content {
padding: 10px;
background: #27293d;
color: white;
}
.list-group-item {
background-color: #27293d;
border: 0.0625rem solid #e9ecef26;
}
.modal-content .modal-header .modal-title {
font-weight: bold;
color: white;
}
.modal.show .modal-dialog {
transform: translate(0, 0%);
}
.modal.show {
display: flex !important;
align-items: center;
justify-content: center;
}
#file-name-display {
color: rgb(137, 240, 97);
}
.white-content #file-name-display {
color: rgb(0, 0, 255);
}
.white-content .modal-content,
.white-content .list-group-item {
background-color: #ffffff;
}
.white-content .list-group-item {
color: #222a42;
border: 0.0625rem solid #d7d8da;
}
.white-content .modal-content .modal-header .modal-title {
color: #222a42;
}
.enter-button {
font-size: 1rem;
padding: 10px 20px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #007bff;
cursor: pointer;
transition: background-color 0.3s ease;
}
.enter-button:hover {
background-color: #0056b3;
}
.enter-button:focus {
outline: none;
}
@media screen and (max-width: 992px) {
.card {
left: 200px;
}
.modal-dialog {
max-width: 100%;
margin: 0 10px;
}
}
@media screen and (max-width: 768px) {
.card {
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);
}
/*.modal-dialog {
}*/
.modal-content .modal-body {
line-height: 1.5;
padding: 10px;
}
.list-group-item {
font-size: 15px;
}
}
@media screen and (max-width: 400px) {
.list-group-item {
font-size: 12px;
padding: 0.5rem 0.5rem;
}
.download-btn {
font-size: small;
margin: 0;
padding: 10px 15px;
}
}
</style>
{% endblock %} {% block content %}
<div id="notification-bar" class="hidden"></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">
<div class="d-flex justify-content-between align-items-center">
<h4 class="title" style="padding-left: 3%;">Update/Set Readings</h4>
<a href="{% url 'manual_set_reading.html' %}">
<button type="" class="btn btn-fill btn-primary">
Enter Manually
</button>
</a>
</div>
</div>
<div
class="modal fade"
id="invalidEntriesModal"
tabindex="-1"
role="dialog"
aria-labelledby="invalidEntriesModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="invalidEntriesModalLabel">
Invalid Entries
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul id="invalidEntriesList" class="list-group"></ul>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<form
role="form"
method="post"
action="{% url 'update-readings' %}"
enctype="multipart/form-data"
>
{% csrf_token %}
<div class="card-body px-5 py-3">
<div class="form-row">
<div class="form-group col-md-6">
<label for="id_month_selection">Select a Month</label>
<select
class="form-control"
id="id_month_selection"
name="selected_month"
required
>
<option value="" disabled selected>Select Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<span class="text-danger"></span>
</div>
<div class="form-group col-md-6">
<label for="id_selected_year">Select a Year</label>
<div class="input-group">
<input
type="number"
class="form-control"
id="id_selected_year"
name="selected_year"
min="2023"
value=""
readonly
/>
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
onclick="decreaseYear()"
>
-
</button>
<button
type="button"
class="btn btn-default"
onclick="increaseYear()"
>
+
</button>
</span>
</div>
<span class="text-danger"></span>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const yearInput =
document.getElementById("id_selected_year");
const currentYear = new Date().getFullYear();
yearInput.value = currentYear;
});
function increaseYear() {
const yearInput =
document.getElementById("id_selected_year");
let currentYear = parseInt(yearInput.value, 10);
if (currentYear < 3000) {
yearInput.value = currentYear + 1;
}
}
function decreaseYear() {
const yearInput =
document.getElementById("id_selected_year");
let currentYear = parseInt(yearInput.value, 10);
if (currentYear > 2023) {
yearInput.value = currentYear - 1;
}
}
</script>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label
for="id_uploaded_file"
style="
border: 1px solid pink;
border-radius: 24px;
padding: 10px;
"
>Upload Excel File</label
>
<input
type="file"
class="form-control"
id="id_uploaded_file"
name="uploaded_file"
onchange="displayFileName()"
/>
<span class="text-danger"></span>
</div>
<!-- Element to display the selected file name -->
<div id="file-name-display"></div>
</div>
<a href="../../static/assets/excel/demoExcel.xlsx" download>
<button type="button" class="btn btn-primary download-btn">
Download Excel Format
</button>
</a>
</div>
<div class="card-footer text-center">
<button type="submit" class="btn btn-fill btn-primary">
Submit
</button>
<button
type="button"
class="btn btn-secondary"
id="invalidEntriesBtn"
data-toggle="modal"
data-target="#invalidEntriesModal"
style="display: none"
></button>
</div>
</form>
<script>
$(document).ready(function () {
$("form").on("submit", function (e) {
e.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
data: new FormData(this),
processData: false,
contentType: false,
dataType: "json",
success: function (response) {
if (response.status === "success") {
alert(response.message);
} else if (response.status === "error") {
const invalidEntriesModal = $("#invalidEntriesModal");
const invalidEntriesList = $("#invalidEntriesList");
invalidEntriesList.empty();
if (response.invalid_entries.length > 0) {
for (const entry of response.invalid_entries) {
invalidEntriesList.append(
`<li class="list-group-item">${entry}</li>`
);
}
$("#invalidEntriesBtn").trigger("click");
} else {
alert(response.message);
}
}
},
error: function () {
alert("An error occurred while submitting the form.");
},
});
});
});
</script>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
function toggleFields() {
const userSelect = document.getElementById("id_user_type");
const initialReadingRow = document.getElementById("initialReadingRow");
const meterRateRow = document.getElementById("meterRateRow");
const flatRateRow = document.getElementById("flatRateRow");
if (userSelect.value === "metered") {
initialReadingRow.style.display = "block";
meterRateRow.style.display = "block";
flatRateRow.style.display = "none";
} else if (userSelect.value === "un-metered") {
initialReadingRow.style.display = "none";
meterRateRow.style.display = "none";
flatRateRow.style.display = "block";
}
}
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());
}
});
</script>
<!-- file name -->
<script>
function displayFileName() {
const fileInput = document.getElementById("id_uploaded_file");
const fileNameDisplay = document.getElementById("file-name-display");
if (fileInput.files.length > 0) {
const fileName = fileInput.files[0].name;
fileNameDisplay.textContent = "Selected File: " + fileName;
} else {
fileNameDisplay.textContent = "No file selected.";
}
}
</script>
{% endblock javascripts %}