cwinfo/powerdns-admin
5
0
Fork 0
mirror of https://github.com/cwinfo/powerdns-admin.git synced 2024-12-04 19:15:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Indicate Unsaved Changes (#1595)

Browse Source
This commit is contained in:
Tyler Todd 2023-06-22 09:49:31 -04:00 committed by GitHub
commit 6fc2279c3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 119 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
powerdnsadmin/templates/base.html
View File

@ -31,14 +31,14 @@
<!-- Sidebar toggle button-->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button">
<a class="nav-link no-prompt" data-widget="pushmenu" href="#" role="button">
<i class="fa-solid fa-bars"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<a class="nav-link no-prompt" data-widget="fullscreen" href="#" role="button">
<i class="fa-solid fa-expand-arrows-alt"></i>
</a>
</li>
@ -154,7 +154,7 @@
</a>
</li>
<li class="{{ 'nav-item active' if active_page == 'admin_settings' else 'nav-item' }}">
<a href="#" class="nav-link">
<a href="#" class="nav-link no-prompt">
<i class="nav-icon fa-solid fa-cog"></i>
<p>
Settings
@ -418,4 +418,4 @@
{% block modals %}
{% endblock %}
</body>
</html>
</html>

115
powerdnsadmin/templates/domain.html
View File

@ -22,6 +22,15 @@
{% block content %}
<section class="content">
<div class="container-fluid">
<div class="card" id="unsaved-changes-card" style="display: none; position: sticky; top: 0; z-index: 999;">
<div class="card-header" style="background-color: yellow;">
<h3 class="card-title" style="color: red;">
Warning: Unsaved Changes
</h3>
</div>
<div class="card-body" style="font-size: 1rem; color: black; background-color: yellow;">
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
@ -251,6 +260,7 @@
$("#button_delete_confirm").unbind().one('click', function (e) {
table.row(nRow).remove().draw();
detectUnsavedChanges(table);
modal.modal('hide');
});
@ -355,6 +365,7 @@
e.stopPropagation();
var table = $("#tbl_records").DataTable();
saveRow(table, nEditing);
detectUnsavedChanges(table);
nEditing = null;
nNew = false;
});
@ -368,6 +379,94 @@
}, $SCRIPT_ROOT + '/domain/' + domain + '/update', true);
});
var unsavedChanges = false;
function detectUnsavedChanges(table) {
// Reset unsavedChanges to false at the start of the function
unsavedChanges = false;
var index = 0;
var origcount = {{ records|length }};
var count = table.page.info().recordsTotal;
var changes = {}; // Dictionary to store changes
if (count != origcount) {
unsavedChanges = true; //a record was either added or deleted.
} else {
{% for record in records %}
var origrecordttl = '{{ record.ttl }}';
var origrecordname = '{{ (record.name,domain.name) | display_record_name }}';
var origrecorddata = '{{ record.data }}';
origrecorddata = origrecorddata.replace(/&#34;/g, '\"');
var origrecordtype = '{{ record.type }}';
var origrecordstatus = '{{ record.status }}';
var origrecordcomment = '{{ record.comment }}';
if (!table.row(index) || typeof table.row(index) == 'undefined') {
unsavedChanges = true; //sanity check otherwise below code throws error if row at that index doesn't exist.
} else {
var editrecordname = table.row(index).data()[0];
var editrecordtype = table.row(index).data()[1];
var editrecordstatus = table.row(index).data()[2];
var editrecordttl = table.row(index).data()[3];
var editrecorddata = table.row(index).data()[4];
var editrecordcomment = table.row(index).data()[5];
if (origrecordttl != editrecordttl || origrecordname != editrecordname || origrecorddata != editrecorddata || origrecordtype != editrecordtype |>
unsavedChanges = true;
}
}
index++;
{% endfor %}
}
unsavedChangesWarning(unsavedChanges);
// Get the modal and the navigation links
var modal = document.getElementById('WarnLeave');
var navLinks = document.querySelectorAll('.nav-link');
// Listen for clicks on navigation links
navLinks.forEach(function(link) {
if (!link.classList.contains('no-prompt')) {
link.addEventListener('click', function(event) {
if (unsavedChanges) {
event.preventDefault(); // Prevent navigation
modal.style.display = "block"; // Show the modal
// Get the buttons
var stayButton = document.getElementById('stay');
var leaveButton = document.getElementById('leave');
// When the user clicks on "Stay", close the modal
stayButton.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on "Leave", navigate away
leaveButton.onclick = function() {
unsavedChanges = false; // No unsaved changes anymore
location.href = link.href; // Navigate to the clicked link
}
}
});
}
});
}
function unsavedChangesWarning(unsavedChanges) {
var card = document.getElementById("unsaved-changes-card");
var cardBody = card.querySelector(".card-body");
if(unsavedChanges){
var message = 'There are unsaved changes for the zone. Please click Save Changes to save all of your changes.';
card.style.display = 'block'; // to show the card
cardBody.innerHTML = message;
return false;
} else {
card.style.display = 'none'; // to hide the card
}
}
{% if SETTING.get('record_helper') %}
//handle wacky record types
$(document.body).on("focus", "#current_edit_record_data", function (e) {
@ -677,4 +776,20 @@
</div>
</div>
</div>
<div class="modal" tabindex="-1" id="WarnLeave">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Unsaved Changes</h5>
</div>
<div class="modal-body">
<p>You have unsaved changes. Are you sure you want to navigate away?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="stay">Stay</button>
<button type="button" class="btn btn-secondary" id="leave">Leave</button>
</div>
</div>
</div>
</div>
{% endblock %}