bookhoard/templates/api_explorer.templ

package templates

templ APIExplorer(explorer APIExplorerData) {
	if !explorer.IsLoggedIn {
		// Show mode toggle and mock data
		<div class="border border-border rounded-lg p-6 mt-8 bg-background-secondary">
			<div class="flex gap-2 mb-4">
				<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer bg-accent text-white">Mock Data</button>
				<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary opacity-50 cursor-not-allowed" disabled>Login to Try Real</button>
			</div>
			<div class="mb-4">
				<div class="mb-4">
					<select disabled class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
						<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
						<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
						<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
						<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
					</select>
				</div>
				<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body (Example)</h4>
				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.RequestBody }</code></pre>
			</div>
			<div class="mt-4">
				<h4 class="text-text-secondary mb-2 text-sm font-medium">Response (Mock)</h4>
				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.Response }</code></pre>
			</div>
			<div class="flex gap-2 mt-4">
				<button onclick="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
				<button onclick="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
			</div>
		</div>
	} else {
		// Show interactive explorer with real execution
		<div class="border border-border rounded-lg p-6 mt-8 bg-background-secondary">
			<div class="flex gap-2 mb-4">
				<button class="mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm" id="mock-btn">Mock Data</button>
				<button class="mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm" id="real-btn">Try It Out</button>
			</div>
			<div class="mb-4">
				<div class="mb-4">
					<select id="http-method" class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
						<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
						<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
						<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
						<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
					</select>
				</div>
				<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body</h4>
				<textarea id="request-body" placeholder="Edit request body..." class="w-full min-h-[150px] px-3 py-2 font-mono text-sm bg-background-primary text-text-primary border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent">{ explorer.Endpoint.RequestBody }</textarea>
			</div>
			<button id="try-it-out" class="bg-accent text-white px-6 py-3 rounded cursor-pointer mt-4 hover:opacity-90">Try It Out</button>
			<div class="api-response mt-4 hidden">
				<div class="flex justify-between mb-2 text-sm">
					<span id="response-status" class="font-semibold"></span>
					<span id="response-time" class="text-text-secondary"></span>
				</div>
				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code id="response-body" class="text-text-primary text-sm"></code></pre>
			</div>
			<div class="flex gap-2 mt-4 flex-wrap">
				<button onclick="copyRequest()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
				<button onclick="copyResponse()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
				<button onclick="generateCURL()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Generate cURL</button>
			</div>
		</div>
	}

	<script>
		const endpointPath = '{ explorer.Endpoint.Path }';
		const exampleRequest = { explorer.Endpoint.RequestBody };
		const exampleResponse = { explorer.Endpoint.Response };

		// Mode toggle logic
		document.getElementById('mock-btn')?.addEventListener('click', () => showMode('mock'));
		document.getElementById('real-btn')?.addEventListener('click', () => showMode('real'));

		function showMode(mode) {
			const mockBtn = document.getElementById('mock-btn');
			const realBtn = document.getElementById('real-btn');
			const responseBody = document.getElementById('response-body');
			const responseStatus = document.getElementById('response-status');
			const responseTime = document.getElementById('response-time');
			const apiResponse = document.querySelector('.api-response');
			const requestBody = document.getElementById('request-body');
			const tryItOut = document.getElementById('try-it-out');

			if (mode === 'mock') {
				mockBtn.classList.add('bg-accent', 'text-white');
				mockBtn.classList.remove('bg-background-primary', 'text-text-primary');
				realBtn.classList.remove('bg-accent', 'text-white');
				realBtn.classList.add('bg-background-primary', 'text-text-primary');
				
				apiResponse.classList.remove('hidden');
				requestBody.readOnly = true;
				tryItOut.classList.add('hidden');
				responseBody.textContent = JSON.stringify(exampleResponse, null, 2);
				responseStatus.textContent = '200 OK';
				responseTime.textContent = 'Mock';
			} else {
				realBtn.classList.add('bg-accent', 'text-white');
				realBtn.classList.remove('bg-background-primary', 'text-text-primary');
				mockBtn.classList.remove('bg-accent', 'text-white');
				mockBtn.classList.add('bg-background-primary', 'text-text-primary');
				
				apiResponse.classList.add('hidden');
				requestBody.readOnly = false;
				tryItOut.classList.remove('hidden');
			}
		}

		// Try it out logic
		document.getElementById('try-it-out')?.addEventListener('click', async () => {
			const method = document.getElementById('http-method').value;
			const body = document.getElementById('request-body').value;

			const startTime = Date.now();
			try {
				const response = await fetch(endpointPath, {
					method: method,
					headers: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer ' + localStorage.getItem('token')
					},
					body: ['GET', 'DELETE'].includes(method) ? undefined : body
				});

				const duration = Date.now() - startTime;
				const data = await response.json();

				document.getElementById('response-status').textContent = `${response.status} (${response.statusText})`;
				document.getElementById('response-time').textContent = `${duration}ms`;
				document.getElementById('response-body').textContent = JSON.stringify(data, null, 2);
				document.querySelector('.api-response').classList.remove('hidden');
			} catch (error) {
				document.getElementById('response-status').textContent = 'Error';
				document.getElementById('response-body').textContent = error.message;
				document.querySelector('.api-response').classList.remove('hidden');
			}
		});

		function copyToClipboard(text) {
			navigator.clipboard.writeText(text);
		}

		function copyRequest() {
			const body = document.getElementById('request-body').value;
			navigator.clipboard.writeText(body);
		}

		function copyResponse() {
			const body = document.getElementById('response-body').textContent;
			navigator.clipboard.writeText(body);
		}

		function generateCURL() {
			const method = document.getElementById('http-method').value;
			const body = document.getElementById('request-body').value;
			const token = localStorage.getItem('token');

			let curl = `curl -X ${method} \\n  -H "Content-Type: application/json" \\n  -H "Authorization: Bearer ${token}"`;
			
			if (!['GET', 'DELETE'].includes(method) && body.trim()) {
				curl += ` \\n  -d '${body}'`;
			}
			
			curl += ` \\n  ${endpointPath}`;
			
			navigator.clipboard.writeText(curl);
		}
	</script>
}

// APIExplorerData holds data for the API explorer component
type APIExplorerData struct {
	Endpoint EndpointInfo
	IsLoggedIn bool
}

// EndpointInfo holds information about an API endpoint
type EndpointInfo struct {
	Method      string
	Path        string
	RequestBody string
	Response    string
	Description string
}