VoxIP - Downloads

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yealink Key Configurator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #handler {
            display: flex;
            flex-direction: column;
        }

        .key-container {
            display: flex;
            margin-bottom: 5px;
        }

        .key-container div {
            border: 1px solid #ccc;
            padding: 5px;
            margin-right: 5px;
            cursor: move;
        }

        #config-output {
            margin-top: 20px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div id="handler">
        <!-- The sortable div for keys -->
    </div>
    <button onclick="generateConfig()">Generate Config</button>
    <pre id="config-output"></pre>

    <script src="https://unpkg.com/sortablejs@1.14.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            loadKeys(); // Load keys on page load
        });

        function loadKeys() {
            // Assuming you have an input with type=file for uploading the XLS file
            // You need to implement this part based on your requirements

            // For now, I'll use a sample data for demonstration purposes
            const sampleData = [
                ["keynumber", "label", "value"],
                [1, "Key 1", "Value 1"],
                [2, "Key 2", "Value 2"],
                // Add more rows as needed
            ];

            renderKeys(sampleData);
        }

        function renderKeys(keysData) {
            const handlerDiv = document.getElementById('handler');
            handlerDiv.innerHTML = '';

            keysData.slice(1).forEach((row, index) => {
                const [keynumber, label, value] = row;

                const keyContainer = document.createElement('div');
                keyContainer.classList.add('key-container');

                const keynumberDiv = document.createElement('div');
                keynumberDiv.textContent = keynumber;

                const labelDiv = document.createElement('div');
                labelDiv.textContent = label;

                const valueDiv = document.createElement('div');
                valueDiv.textContent = value;

                keyContainer.appendChild(keynumberDiv);
                keyContainer.appendChild(labelDiv);
                keyContainer.appendChild(valueDiv);

                handlerDiv.appendChild(keyContainer);
            });

            // Enable sorting using SortableJS
            new Sortable(handlerDiv, {
                animation: 150,
                onUpdate: () => updateKeyNumbers(),
            });
        }

        function updateKeyNumbers() {
            const keyContainers = document.querySelectorAll('.key-container');
            keyContainers.forEach((container, index) => {
                const keynumberDiv = container.querySelector(':first-child');
                keynumberDiv.textContent = index + 1;
            });
        }

        function generateConfig() {
            const keyContainers = document.querySelectorAll('.key-container');
            let configOutput = '';

            keyContainers.forEach((container, index) => {
                const [keynumber, label, value] = Array.from(container.children).map(div => div.textContent);

                configOutput += `expansion_module.1.key.${index + 1}.label = ${label}\n`;
                configOutput += `expansion_module.1.key.${index + 1}.line = 1\n`;
                configOutput += `expansion_module.1.key.${index + 1}.type = 16\n`;
                configOutput += `expansion_module.1.key.${index + 1}.value = ${value}\n\n`;
            });

            const configOutputElement = document.getElementById('config-output');
            configOutputElement.textContent = configOutput;
        }
    </script>
</body>
</html>