RadMac/app/templates/user_list_inline_edit.html

{% extends 'base.html' %}

{% block title %}User List{% endblock %}

{% block content %}
    <h1>User List</h1>

    <table border="1">
        <thead>
            <tr>
                <th>MAC Address</th>
                <th>Description</th>
                <th>VLAN ID</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for user in results %}
                <tr>
                    <td><input type="text" id="mac_address-{{ user.mac_address }}" value="{{ user.mac_address }}"></td>
                    <td><input type="text" id="description-{{ user.mac_address }}" value="{{ user.description }}"></td>
                    <td>
                        <select id="vlan_id-{{ user.mac_address }}">
                            {% for group in groups %}
                                <option value="{{ group.groupname }}" {% if user.vlan_id == group.groupname %} selected {% endif %}>
                                    {{ group.groupname }}
                                </option>
                            {% endfor %}
                        </select>
                    </td>
                    <td>
                        <button onclick="updateUser('{{ user.mac_address }}')">✅</button>
                        <a href="/delete_user/{{ user.mac_address }}" onclick="saveScrollPosition()">🗑️</a>
                    </td>
                </tr>
            {% endfor %}
            <tr>
                <td colspan="4">
                    <button onclick="addNewUserRow()">➕ Add User</button>
                </td>
            </tr>
        </tbody>
    </table>

    <dialog id="add-user-dialog">
        <div id="add-user-dialog-content">
            <table border="1">
                <thead>
                    <tr>
                        <th>MAC Address</th>
                        <th>Description</th>
                        <th>VLAN ID</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" id="new-mac"></td>
                        <td><input type="text" id="new-description"></td>
                        <td>
                            <select id="new-vlan_id">
                                {% for group in groups %}
                                    <option value="{{ group.groupname }}">
                                        {{ group.groupname }}
                                    </option>
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
            <button id="cancel-add-user-dialog">Cancel</button>
            <button id="save-new-user">Save</button>
        </div>
    </dialog>

    <style>
        #cancel-add-user-dialog {
            border-radius: 5px;
            padding: 10px;
            background-color: #f44336;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 10px;
        }

        #cancel-add-user-dialog:hover {
            background-color: #d32f2f;
        }

        #save-new-user {
            border-radius: 5px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #save-new-user:hover {
            background-color: #45a049;
        }

        #add-user-dialog-content + div {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }
    </style>

    <script>
        const groups = {{ groups | tojson | safe }};

        function updateUser(mac_address) {
            const description = document.getElementById('description-' + mac_address).value;
            const vlan_id = document.getElementById('vlan_id-' + mac_address).value;

            fetch('/update_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `mac_address=${mac_address}&description=${description}&vlan_id=${vlan_id}`
            })
            .then(response => response.text())
            .then(data => {
                if (data === 'success') {
                    location.reload();
                } else {
                    alert('Error updating user: ' + data);
                }
            });
        }

        function saveScrollPosition() {
            sessionStorage.setItem('scrollPosition', window.scrollY);
        }

        window.onload = function () {
            const scrollPosition = sessionStorage.getItem('scrollPosition');
            if (scrollPosition) {
                window.scrollTo(0, scrollPosition);
                sessionStorage.removeItem('scrollPosition');
            }
        }

        function addNewUserRow() {
            document.getElementById('add-user-dialog').showModal();
        }

        document.getElementById('cancel-add-user-dialog').addEventListener('click', () => {
            document.getElementById('add-user-dialog').close();
        });

        document.getElementById('save-new-user').addEventListener('click', () => {
            saveNewUser();
        });

        function saveNewUser() {
            const mac = document.getElementById('new-mac').value;
            const description = document.getElementById('new-description').value;
            const vlan_id = document.getElementById('new-vlan_id').value;

            if (!mac) {
                alert('MAC Address cannot be empty.');
                return;
            }

            fetch('/add_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ mac_address: mac, description: description, vlan_id: vlan_id }),
            })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => {
                        throw new Error(`HTTP error! status: ${response.status}, body: ${text}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data && data.success) {
                    document.getElementById('add-user-dialog').close();
                    location.reload();
                } else {
                    alert('Error adding user: ' + (data && data.message ? data.message : 'Unknown error'));
                }
            })
            .catch(error => {
                console.error('Fetch error:', error);
                alert('Error adding user: ' + error.message);
            });
        }
    </script>
{% endblock %}