HEX

File: /var/www/html/calendar-planning/app/templates/api/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar Planning</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .loader {
            display: none;
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #34db66;
            width: 20px;
            height: 20px;
            animation: spin 2s linear infinite;
            margin: 10px auto;
        }
        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }
        .response {
            margin-top: 20px;
            white-space: pre-wrap;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <h1>Events</h1>
    <form id="query-form">
        <!-- CSRF token for Django -->
        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

        <input type="text" id="categories" placeholder="Categories (comma-separated)" required>
        <input type="text" id="country" placeholder="Country" required>
        <input type="text" id="year" placeholder="Year" required>
        <button type="submit">Submit</button>
    </form>
    <div class="loader" id="loader"></div>
    <div class="response" id="response"></div>

    <script>
        const form = document.getElementById('query-form');
        const loader = document.getElementById('loader');
        const responseDiv = document.getElementById('response');

        form.addEventListener('submit', async (event) => {
            event.preventDefault(); // Prevent form submission reload
            loader.style.display = 'block';
            responseDiv.textContent = '';

            // Get CSRF token from the hidden input field
            const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

            // Gather form input values
            const categories = document.getElementById('categories').value.split(',').map(item => item.trim());
            const country = document.getElementById('country').value;
            const year = parseInt(document.getElementById('year').value, 10);

            try {
                // Send POST request to the API endpoint
                const response = await fetch('generate/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrftoken
                    },
                    body: JSON.stringify({ categories, country, year })
                });

                const data = await response.json();
                loader.style.display = 'none';

                if (response.ok) {
                    // Display success response
                    responseDiv.textContent = JSON.stringify(data, null, 2);
                } else {
                    // Display error response
                    responseDiv.textContent = `Error: ${JSON.stringify(data.errors || 'Unknown error', null, 2)}`;
                }
            } catch (error) {
                loader.style.display = 'none';
                responseDiv.textContent = `Error: ${error.message}`;
            }
        });
    </script>
</body>
</html>