`frontend/src/test-api.html`

108 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>API Test - CyPresAwards</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; max-width: 1200px; margin: 0 auto; }
        .success { color: green; background: #e8f5e9; padding: 10px; margin: 10px 0; border-radius: 5px; }
        .error { color: red; background: #ffebee; padding: 10px; margin: 10px 0; border-radius: 5px; }
        .info { background: #e3f2fd; padding: 10px; margin: 10px 0; border-radius: 5px; }
        pre { background: #f5f5f5; padding: 10px; overflow-x: auto; border-radius: 5px; }
        button { padding: 10px 20px; margin: 5px; cursor: pointer; background: #2196F3; color: white; border: none; border-radius: 5px; }
    </style>
</head>
<body>
    <h1>🔬 CyPresAwards API Diagnostic Test</h1>
    <div class="info">
        <strong>Testing from:</strong> <span id="origin"></span><br>
        <strong>API Base URL:</strong> <span id="apiUrl"></span>
    </div>

    <button onclick="testStats()">Test /api/stats</button>
    <button onclick="testOrganizations()">Test /api/organizations</button>
    <button onclick="testCategories()">Test /api/categories</button>
    <button onclick="testAll()">Run All Tests</button>
    <button onclick="clearResults()">Clear Results</button>

    <div id="results"></div>

    <script>
        const API_BASE_URL = window.location.origin + '/api';
        document.getElementById('origin').textContent = window.location.origin;
        document.getElementById('apiUrl').textContent = API_BASE_URL;

        const resultsDiv = document.getElementById('results');

        function addResult(html) {
            resultsDiv.innerHTML += html;
        }

        function clearResults() {
            resultsDiv.innerHTML = '';
        }

        async function testStats() {
            addResult('<h2>Testing /api/stats</h2>');
            try {
                const url = `${API_BASE_URL}/stats`;
                addResult(`<div class="info">Fetching: ${url}</div>`);

                const response = await fetch(url);
                addResult(`<div class="info">Response status: ${response.status} ${response.statusText}</div>`);

                const data = await response.json();
                addResult(`<div class="success">✅ Success! Data received:</div>`);
                addResult(`<pre>${JSON.stringify(data, null, 2)}</pre>`);
            } catch (error) {
                addResult(`<div class="error">❌ Error: ${error.message}</div>`);
                addResult(`<pre>${error.stack}</pre>`);
            }
        }

        async function testOrganizations() {
            addResult('<h2>Testing /api/organizations</h2>');
            try {
                const url = `${API_BASE_URL}/organizations?limit=3&offset=0`;
                addResult(`<div class="info">Fetching: ${url}</div>`);

                const response = await fetch(url);
                addResult(`<div class="info">Response status: ${response.status} ${response.statusText}</div>`);

                const data = await response.json();
                addResult(`<div class="success">✅ Success! Received ${data.data.length} organizations</div>`);
                addResult(`<pre>${JSON.stringify(data, null, 2)}</pre>`);
            } catch (error) {
                addResult(`<div class="error">❌ Error: ${error.message}</div>`);
                addResult(`<pre>${error.stack}</pre>`);
            }
        }

        async function testCategories() {
            addResult('<h2>Testing /api/categories</h2>');
            try {
                const url = `${API_BASE_URL}/categories`;
                addResult(`<div class="info">Fetching: ${url}</div>`);

                const response = await fetch(url);
                addResult(`<div class="info">Response status: ${response.status} ${response.statusText}</div>`);

                const data = await response.json();
                addResult(`<div class="success">✅ Success! Received ${data.data.length} categories</div>`);
                addResult(`<pre>${JSON.stringify(data, null, 2)}</pre>`);
            } catch (error) {
                addResult(`<div class="error">❌ Error: ${error.message}</div>`);
                addResult(`<pre>${error.stack}</pre>`);
            }
        }

        async function testAll() {
            clearResults();
            await testStats();
            await testOrganizations();
            await testCategories();
        }
    </script>
</body>
</html>