Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better delete modal

Browse Source
This commit is contained in:
Kobe
2025-06-25 10:40:05 +02:00
parent cc699506d3
commit 490bc05a9e
2 changed files with 86 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
templates/main/instances.html
View File

@@ -246,13 +246,10 @@
</td>
<td>
<div class="btn-group">
<button class="btn btn-sm btn-outline-primary" onclick="editInstance({{ instance.id }})">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-info" onclick="window.location.href='/instances/{{ instance.id }}/detail'">
<i class="fas fa-info-circle"></i>
</button>
<button class="btn btn-sm btn-outline-danger" onclick="deleteInstance({{ instance.id }})">
<button class="btn btn-sm btn-outline-danger" type="button" onclick="showDeleteInstanceModal({{ instance.id }})">
<i class="fas fa-trash"></i>
</button>
</div>
@@ -800,6 +797,46 @@
</div>
</div>
<!-- Delete Instance Modal -->
<div class="modal fade" id="deleteInstanceModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Instance</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="text-center mb-4">
<i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
<h4>Are you sure?</h4>
<p class="text-muted">This action cannot be undone. The instance and all its data will be permanently deleted.</p>
</div>
<div class="alert alert-warning">
<h6><i class="fas fa-info-circle me-2"></i>What will be deleted:</h6>
<ul class="mb-0">
<li>Instance configuration</li>
<li>All rooms and conversations</li>
<li>User data and files</li>
<li>Database records</li>
</ul>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="confirmDelete" required>
<label class="form-check-label" for="confirmDelete">
I understand that this action is irreversible and I want to delete this instance
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn" disabled onclick="confirmDeleteInstance()">
<i class="fas fa-trash me-1"></i>Delete Instance
</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
@@ -2504,5 +2541,48 @@ document.addEventListener('DOMContentLoaded', function() {
// Remove the payment plan fetching from here since fetchVersionInfo handles it
// The periodic refresh (every 30 seconds) will handle payment plan updates properly
});
let deleteInstanceId = null;
let deleteInstanceModal = null;
document.addEventListener('DOMContentLoaded', function() {
deleteInstanceModal = new bootstrap.Modal(document.getElementById('deleteInstanceModal'));
const confirmDeleteCheckbox = document.getElementById('confirmDelete');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
if (confirmDeleteCheckbox && confirmDeleteBtn) {
confirmDeleteCheckbox.addEventListener('change', function() {
confirmDeleteBtn.disabled = !this.checked;
});
}
});
function showDeleteInstanceModal(instanceId) {
deleteInstanceId = instanceId;
const confirmDeleteCheckbox = document.getElementById('confirmDelete');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
if (confirmDeleteCheckbox && confirmDeleteBtn) {
confirmDeleteCheckbox.checked = false;
confirmDeleteBtn.disabled = true;
}
deleteInstanceModal.show();
}
async function confirmDeleteInstance() {
if (!deleteInstanceId) return;
const csrfToken = document.querySelector('input[name="csrf_token"]').value;
try {
const response = await fetch(`/instances/${deleteInstanceId}`, {
method: 'DELETE',
headers: {
'X-CSRF-Token': csrfToken
}
});
if (!response.ok) throw new Error('Failed to delete instance');
deleteInstanceModal.hide();
location.reload();
} catch (error) {
alert('Error deleting instance: ' + error.message);
}
}
</script>
{% endblock %}