KTVManager_UI/templates/config_dashboard.html

{% extends "base.html" %}

{% block title %}Config Dashboard{% endblock %}

{% block content %}
<div class="container">
    <h2>Configuration Dashboard</h2>
    <p>Welcome to the configuration page.</p>
    <button id="send-test-notification-btn" class="btn btn-primary">Send Test Notification</button>
    <button id="check-expiring-accounts-btn" class="btn btn-info">Check Expiring Accounts</button>

    <div class="card mt-4">
        <div class="card-header">
            DNS Manager
        </div>
        <div class="card-body">
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="dns-entry-input" placeholder="Enter DNS entry">
                <div class="input-group-append">
                    <button class="btn btn-primary" id="add-dns-btn">Add</button>
                </div>
            </div>
        </div>
        <table class="table table-striped mt-3">
            <thead>
                <tr>
                    <th>DNS Entry</th>
                    <th style="width: 10%;">Actions</th>
                </tr>
            </thead>
            <tbody id="dns-list-table-body">
                <!-- DNS entries will be loaded here -->
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // DNS Manager
        const dnsListTableBody = document.getElementById('dns-list-table-body');
        const addDnsBtn = document.getElementById('add-dns-btn');
        const dnsEntryInput = document.getElementById('dns-entry-input');

        function fetchDnsList() {
            fetch("{{ config.BASE_URL }}/dns")
                .then(response => response.json())
                .then(data => {
                    dnsListTableBody.innerHTML = '';
                    if (data.length === 0) {
                        const row = dnsListTableBody.insertRow();
                        const cell = row.insertCell();
                        cell.colSpan = 2;
                        cell.textContent = 'No DNS entries found.';
                        cell.classList.add('text-center');
                    } else {
                        data.forEach(entry => {
                            const row = dnsListTableBody.insertRow();
                            const entryCell = row.insertCell();
                            entryCell.textContent = entry;
                            const actionCell = row.insertCell();
                            const removeBtn = document.createElement('button');
                            removeBtn.className = 'btn btn-danger btn-sm';
                            removeBtn.textContent = 'Delete';
                            removeBtn.addEventListener('click', () => removeDnsEntry(entry));
                            actionCell.appendChild(removeBtn);
                        });
                    }
                });
        }

        function addDnsEntry() {
            const dnsEntry = dnsEntryInput.value.trim();
            if (dnsEntry) {
                fetch("{{ config.BASE_URL }}/dns", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ dns_entry: dnsEntry })
                }).then(() => {
                    dnsEntryInput.value = '';
                    fetchDnsList();
                });
            }
        }

        function removeDnsEntry(dnsEntry) {
            fetch("{{ config.BASE_URL }}/dns", {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ dns_entry: dnsEntry })
            }).then(() => {
                fetchDnsList();
            });
        }

        addDnsBtn.addEventListener('click', addDnsEntry);
        fetchDnsList();

        // Other buttons
        document.getElementById('send-test-notification-btn').addEventListener('click', function() {
            fetch('{{ url_for("send_test_notification") }}', {
                method: 'POST'
            }).then(response => {
                if (response.ok) {
                    alert('Test notification sent successfully!');
                } else {
                    alert('Failed to send test notification.');
                }
            }).catch(err => {
                console.error('Error sending test notification:', err);
                alert('An error occurred while sending the test notification.');
            });
        });

        document.getElementById('check-expiring-accounts-btn').addEventListener('click', function() {
            fetch('{{ url_for("check_expiring_accounts") }}', {
                method: 'POST'
            }).then(response => {
                if (response.ok) {
                    alert('Expiring accounts check triggered successfully!');
                } else {
                    alert('Failed to trigger expiring accounts check.');
                }
            }).catch(err => {
                console.error('Error triggering expiring accounts check:', err);
                alert('An error occurred while triggering the expiring accounts check.');
            });
        });
    });
</script>
{% endblock %}