Village Add, Edit and Delete Messages done #12

Merged
pjpatil12 merged 1 commits from swapnil-dev into main 2026-03-24 09:47:24 +00:00
4 changed files with 298 additions and 278 deletions
Showing only changes of commit b78526ad9f - Show all commits

View File

@@ -83,17 +83,29 @@ def check_village():
return village.CheckVillage(request=request) return village.CheckVillage(request=request)
# ------------------------- Delete Village -------------------------
@village_bp.route('/delete_village/<int:village_id>') @village_bp.route('/delete_village/<int:village_id>')
@login_required @login_required
def delete_village(village_id): def delete_village(village_id):
village = Village() village = Village()
village.DeleteVillage(request=request, village_id=village_id) village.DeleteVillage(request=request, village_id=village_id)
flash(village.resultMessage, "success" if village.isSuccess else "error") # ✅ Convert resultMessage to string if it's a Response or tuple
return redirect(url_for('village.add_village')) raw_msg = village.resultMessage
if isinstance(raw_msg, tuple):
# e.g., (<Response ...>, 200)
msg = "Village deleted successfully!"
elif hasattr(raw_msg, 'get_data'):
# Flask Response object
msg = raw_msg.get_data(as_text=True) # get raw text
else:
# fallback
msg = str(raw_msg) if raw_msg else "Village deleted successfully!"
return jsonify({
"status": "success" if village.isSuccess else "error",
"message": msg
})
# ------------------------- Edit Village ------------------------- # ------------------------- Edit Village -------------------------
@village_bp.route('/edit_village/<int:village_id>', methods=['GET', 'POST']) @village_bp.route('/edit_village/<int:village_id>', methods=['GET', 'POST'])

View File

@@ -1,264 +1,250 @@
window.onload = function () { window.onload = function () {
document.getElementById('Village_Name').focus(); if (document.getElementById('Village_Name')) {
document.getElementById('Village_Name').focus();
}
}; };
$(document).ready(function () { $(document).ready(function () {
// 🔥 RESTORE VIEW MODE AFTER RELOAD // RUN ONLY IF THIS PAGE HAS FORM/TABLE
var viewMode = localStorage.getItem("viewMode"); if ($('#addForm').length && $('#addTable').length) {
if (viewMode === "table") { // ✅ DEFAULT VIEW → SHOW FORM
$('#addForm').hide();
$('#addTable').show();
} else {
$('#addForm').show(); $('#addForm').show();
$('#addTable').hide(); $('#addTable').hide();
// 🔥 BUTTON TOGGLE
$('#addButton').click(function () {
$('#addForm').show();
$('#addTable').hide();
});
$('#displayButton').click(function () {
$('#addForm').hide();
$('#addTable').show();
});
} }
// 🔥 BUTTON TOGGLE LOGIC // ===============================
$('#addButton').click(function () {
$('#addForm').show();
$('#addTable').hide();
localStorage.setItem("viewMode", "form");
});
$('#displayButton').click(function () {
$('#addForm').hide();
$('#addTable').show();
localStorage.setItem("viewMode", "table");
});
// STATE → DISTRICT // STATE → DISTRICT
$('#state_Id').change(function () { // ===============================
if ($('#state_Id').length) {
var stateId = $(this).val(); $('#state_Id').change(function () {
if (stateId) { var stateId = $(this).val();
$.ajax({ if (stateId) {
url: '/get_districts/' + stateId,
type: 'GET',
success: function (data) { $.ajax({
url: '/get_districts/' + stateId,
type: 'GET',
var districtDropdown = $('#district_Id'); success: function (data) {
districtDropdown.empty(); var districtDropdown = $('#district_Id');
districtDropdown.append('<option value="" disabled selected>Select District</option>');
data.forEach(function (district) { districtDropdown.empty();
districtDropdown.append('<option value="" disabled selected>Select District</option>');
districtDropdown.append( data.forEach(function (district) {
'<option value="' + district.id + '">' + district.name + '</option>' districtDropdown.append(
); '<option value="' + district.id + '">' + district.name + '</option>'
);
});
}); districtDropdown.prop('disabled', false);
}
districtDropdown.prop('disabled', false); });
}
} });
}
});
}
});
// ===============================
// DISTRICT → BLOCK // DISTRICT → BLOCK
$('#district_Id').change(function () { // ===============================
if ($('#district_Id').length) {
var districtId = $(this).val(); $('#district_Id').change(function () {
if (districtId) { var districtId = $(this).val();
$.ajax({ if (districtId) {
url: '/get_blocks/' + districtId,
type: 'GET',
success: function (data) { $.ajax({
url: '/get_blocks/' + districtId,
type: 'GET',
var blockDropdown = $('#block_Id'); success: function (data) {
blockDropdown.empty(); var blockDropdown = $('#block_Id');
blockDropdown.append('<option value="" disabled selected>Select Block</option>');
data.forEach(function (block) { blockDropdown.empty();
blockDropdown.append('<option value="" disabled selected>Select Block</option>');
blockDropdown.append( data.forEach(function (block) {
'<option value="' + block.id + '">' + block.name + '</option>' blockDropdown.append(
); '<option value="' + block.id + '">' + block.name + '</option>'
);
});
}); blockDropdown.prop('disabled', false);
}
blockDropdown.prop('disabled', false); });
}
} });
}
});
}
});
// ===============================
// VILLAGE NAME VALIDATION // VILLAGE NAME VALIDATION
$('#Village_Name').on('input', function () { // ===============================
if ($('#Village_Name').length) {
var villageName = $(this).val(); $('#Village_Name').on('input', function () {
var validPattern = /^[A-Za-z ]*$/;
if (!validPattern.test(villageName)) { var villageName = $(this).val();
var validPattern = /^[A-Za-z ]*$/;
$('#villageMessage') if (!validPattern.test(villageName)) {
.text('Only letters and spaces are allowed!')
.css('color', 'red');
$('#submitVillage').prop('disabled', true); $('#villageMessage')
.text('Only letters and spaces are allowed!')
.css('color', 'red');
} else { $('#submitVillage').prop('disabled', true);
$('#villageMessage').text(''); } else {
$('#submitVillage').prop('disabled', false);
} $('#villageMessage').text('');
$('#submitVillage').prop('disabled', false);
}); }
});
}
// ===============================
// CHECK DUPLICATE VILLAGE // CHECK DUPLICATE VILLAGE
$('#Village_Name, #block_Id').on('change keyup', function () { // ===============================
if ($('#Village_Name').length && $('#block_Id').length) {
var blockId = $('#block_Id').val(); $('#Village_Name, #block_Id').on('change keyup', function () {
var villageName = $('#Village_Name').val().trim();
if (blockId && villageName) { var blockId = $('#block_Id').val();
var villageName = $('#Village_Name').val().trim();
$.ajax({ if (blockId && villageName) {
url: '/check_village', $.ajax({
type: 'POST', url: '/check_village',
type: 'POST',
data: { data: {
block_Id: blockId, block_Id: blockId,
Village_Name: villageName Village_Name: villageName
}, },
success: function (response) { success: function (response) {
if (response.status === 'exists') { if (response.status === 'exists') {
$('#villageMessage')
.text(response.message)
.css('color', 'red');
$('#submitVillage').prop('disabled', true);
} else {
$('#villageMessage')
.text(response.message)
.css('color', 'green');
$('#submitVillage').prop('disabled', false);
}
},
error: function () {
$('#villageMessage') $('#villageMessage')
.text(response.message) .text('Error checking village name')
.css('color', 'red'); .css('color', 'red');
$('#submitVillage').prop('disabled', true); $('#submitVillage').prop('disabled', true);
}
});
}
});
}
// ===============================
// ADD VILLAGE (SAFE SCOPE FIX)
// ===============================
if ($('#villageForm').length) {
$('#villageForm').submit(function (event) {
event.preventDefault();
$.ajax({
url: '/add_village',
type: 'POST',
data: $(this).serialize(),
success: function (response) {
if (response && response.status === 'success') {
alert(response.message || 'Village added successfully!');
// ✅ clear form
$('#villageForm')[0].reset();
// ✅ switch to table
$('#addForm').hide();
$('#addTable').show();
// optional refresh
location.reload();
} else { } else {
alert(response.message || 'Error adding village. Please try again.');
$('#villageMessage')
.text(response.message)
.css('color', 'green');
$('#submitVillage').prop('disabled', false);
} }
}, },
error: function () { error: function () {
alert('An error occurred. Please try again.');
$('#villageMessage')
.text('Error checking village name')
.css('color', 'red');
$('#submitVillage').prop('disabled', true);
} }
}); });
}
});
// ADD VILLAGE
$('#villageForm').submit(function (event) {
event.preventDefault();
$.ajax({
url: '/add_village',
type: 'POST',
data: $(this).serialize(),
success: function (response) {
if (response.status === 'success') {
alert('Village added successfully!');
location.reload();
} else {
alert(response.message || 'Error adding village. Please try again.');
}
},
error: function () {
alert('An error occurred. Please try again.');
}
}); });
}
});
}); });
// 🔥 DELETE FUNCTION (UPDATED)
function deleteVillage(villageId) {
if (!confirm("Are you sure you want to delete this village?")) {
return;
}
// ✅ save that user is on table // ===============================
localStorage.setItem("viewMode", "table"); // DELETE FUNCTION (SAFE)
// ===============================
function deleteVillage(villageId, element) {
if (!confirm("Are you sure you want to delete this village?")) return;
$.ajax({ $.ajax({
url: '/delete_village/' + villageId, url: '/delete_village/' + villageId,
type: 'GET', type: 'GET',
dataType: 'json',
success: function () { success: function (response) {
alert(response.message); // ✅ now shows "Village deleted successfully!"
setTimeout(function () { if (element) $(element).closest("tr").remove();
alert("Village deleted successfully!");
// reload but stay on table
location.reload();
}, 1000);
}, },
error: function () { error: function () {
alert("Error deleting village. Please try again."); alert("Error deleting village. Please try again.");
} }
}); });
} }

View File

@@ -1,99 +1,129 @@
{% extends 'base.html' %} {% extends 'base.html' %} {% block content %}
{% block content %}
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Village Management</title> <title>Village Management</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}"> <link
<script src="{{ url_for('static', filename='js/village.js') }}"></script> rel="stylesheet"
<script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script> type="text/css"
href="{{ url_for('static', filename='css/style.css') }}"
/>
<script src="{{ url_for('static', filename='js/village.js') }}"></script>
<script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script>
</head> </head>
<body> <body>
<!-- Button Container to Center Buttons -->
<!-- Button Container to Center Buttons --> <div class="button-container">
<div class="button-container">
<button id="addButton" class="action-button">Add</button> <button id="addButton" class="action-button">Add</button>
<button id="displayButton" class="action-button">Display</button> <button id="displayButton" class="action-button">Display</button>
</div> </div>
<div id="addForm" style="display: none;"> <div id="addForm" style="display: none">
<div class="container"> <div class="container">
<div class="form-block"> <div class="form-block">
<h2>Add a New Village</h2> <h2>Add a New Village</h2>
<form id="villageForm" method="POST"> <form id="villageForm" method="POST">
<label for="state_Id">State:</label> <label for="state_Id">State:</label>
<select id="state_Id" name="state_Id" required> <select id="state_Id" name="state_Id" required>
<option value="" disabled selected>Select State</option> <option value="" disabled selected>Select State</option>
{% for state in states %} {% for state in states %}
<option value="{{ state[0] }}">{{ state[1] }}</option> <option value="{{ state[0] }}">{{ state[1] }}</option>
{% endfor %} {% endfor %}
</select> </select>
<label for="district_Id">District:</label>
<select id="district_Id" name="district_Id" required disabled>
<option value="" disabled selected>Select District</option>
</select>
<label for="block_Id">Block:</label> <label for="district_Id">District:</label>
<select id="block_Id" name="block_Id" required disabled> <select id="district_Id" name="district_Id" required disabled>
<option value="" disabled selected>Select Block</option> <option value="" disabled selected>Select District</option>
</select> </select>
<label for="Village_Name">Village Name:</label> <label for="block_Id">Block:</label>
<input type="text" id="Village_Name" name="Village_Name" placeholder="Enter Village Name" required> <select id="block_Id" name="block_Id" required disabled>
<span id="villageMessage"></span> <option value="" disabled selected>Select Block</option>
</select>
<button type="submit" id="submitVillage" disabled>Add Village</button> <label for="Village_Name">Village Name:</label>
</form> <input
</div> type="text"
id="Village_Name"
name="Village_Name"
placeholder="Enter Village Name"
required
/>
<span id="villageMessage"></span>
<button type="submit" id="submitVillage" disabled>Add Village</button>
</form>
</div>
</div> </div>
</div> </div>
<div id="addTable" style="display: none;"> <div id="addTable" style="display: none">
<div class="search-container"> <div class="search-container">
<h2>Display Villages</h2> <h2>Display Villages</h2>
<input type="text" id="searchBar" placeholder="Searching..." onkeyup="searchTable()"> <input
type="text"
id="searchBar"
placeholder="Searching..."
onkeyup="searchTable()"
/>
</div> </div>
<table id="sortableTable" border="1"> <table id="sortableTable" border="1">
<tr> <tr>
<th>Village Sr No</th> <th>Village Sr No</th>
<th class="sortable-header"> <th class="sortable-header">
Village Name Village Name
<span class="sort-buttons"> <span class="sort-buttons">
<span class="sort-asc">⬆️</span> <span class="sort-asc">⬆️</span>
<span class="sort-desc">⬇️</span> <span class="sort-desc">⬇️</span>
</span></th> </span>
<th class="sortable-header">Block Name </th>
<span class="sort-buttons"> <th class="sortable-header">
<span class="sort-asc">⬆️</span> Block Name
<span class="sort-desc">⬇️</span> <span class="sort-buttons">
</span></th> <span class="sort-asc">⬆️</span>
<th>Update</th> <span class="sort-desc">⬇️</span>
<th>Delete</th> </span>
</tr> </th>
{% for village in villages %} <th>Update</th>
<tr> <th>Delete</th>
<td>{{ village[0] }}</td> </tr>
<td>{{ village[1] }}</td> {% for village in villages %}
<td>{{ village[2] }}</td> <tr>
<td> <td>{{ village[0] }}</td>
<a href="{{ url_for('village.edit_village', village_id=village[0]) }}"> <td>{{ village[1] }}</td>
<img src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}" alt="Edit" <td>{{ village[2] }}</td>
class="icon"> <td>
</a> <a
</td> href="{{ url_for('village.edit_village', village_id=village[0]) }}"
<td> >
<a href="#" <img
onclick="deleteVillage({{ village[0] }}); return false;"> src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}"
alt="Edit"
class="icon"
/>
</a>
</td>
<td>
<a href="javascript:void(0);"
onclick="deleteVillage({{ village[0] }}, this)">
<img src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}" <img src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}"
alt="Delete" class="icon"> class="icon">
</a> </a>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
</div> </div>
<!-- Flash Alerts -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<script>
{% for category, message in messages %}
alert("{{ message }}");
{% endfor %}
</script>
{% endif %}
{% endwith %}
</body> </body>
{% endblock %} {% endblock %}

View File

@@ -28,25 +28,17 @@
<button type="submit">Update Village</button> <button type="submit">Update Village</button>
</form> </form>
</div> <!-- Flash Messages (hidden, used for JS popup) -->
<div id="flash-messages-container" style="display:none;">
<!-- Flash Message (Hidden, used for JS popup) -->
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}
{% for category, message in messages %} {% for category, message in messages %}
<div id="flash-message" data-category="{{ category }}" style="display:none;">{{ message }}</div> <div class="flash-message" data-category="{{ category }}">{{ message }}</div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% endwith %} {% endwith %}
</div> </div>
<script>
window.onload = function () {
const flash = document.getElementById('flash-message');
if (flash && flash.innerText.trim() !== "") {
alert(flash.innerText);
}
};
</script>
</body> </body>
{% endblock %} {% endblock %}