Last active
August 18, 2025 19:17
-
-
Save iamvickyav/c9437f5c54f465eadbf3e081cb5a852c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // schemas.js | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const schemasTableBody = document.querySelector('#schemas-table tbody'); | |
| const schemaComparisonContainer = document.querySelector('.schema-comparison-container'); | |
| const jsonSchemaOutput = document.getElementById('json-schema-output'); | |
| const userJsonInput = document.getElementById('user-json-input'); | |
| const validationStatus = document.getElementById('validation-status'); | |
| // Function to fetch schema metadata and populate the table | |
| const fetchSchemaMetadata = async () => { | |
| try { | |
| const response = await fetch('/schemas/metadata'); | |
| if (!response.ok) { | |
| throw new Error('Failed to fetch schema metadata.'); | |
| } | |
| const metadata = await response.json(); | |
| populateTable(metadata); | |
| } catch (error) { | |
| console.error('Error fetching schema metadata:', error); | |
| schemasTableBody.innerHTML = `<tr><td colspan="4" style="text-align:center; color:red;">Failed to load schemas. Please try again later.</td></tr>`; | |
| } | |
| }; | |
| // Function to populate the table with metadata | |
| const populateTable = (metadata) => { | |
| schemasTableBody.innerHTML = ''; // Clear any existing rows | |
| if (metadata.length === 0) { | |
| schemasTableBody.innerHTML = `<tr><td colspan="4" style="text-align:center;">No schemas found.</td></tr>`; | |
| return; | |
| } | |
| metadata.forEach(item => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td>${item.appstate_name}</td> | |
| <td>${item.event_type}</td> | |
| <td>${item.interaction_name || 'N/A'}</td> | |
| <td> | |
| <button class="show-schema-btn" | |
| data-appstate-name="${item.appstate_name}" | |
| data-event-type="${item.event_type}" | |
| data-interaction-name="${item.interaction_name || ''}">Show Schema</button> | |
| </td> | |
| `; | |
| schemasTableBody.appendChild(row); | |
| }); | |
| // Add event listeners to the new buttons | |
| document.querySelectorAll('.show-schema-btn').forEach(button => { | |
| button.addEventListener('click', handleShowSchema); | |
| }); | |
| }; | |
| // Function to handle the "Show Schema" button click | |
| const handleShowSchema = async (event) => { | |
| const button = event.target; | |
| const appStateName = button.dataset.appstateName; | |
| const eventType = button.dataset.eventType; | |
| const interactionName = button.dataset.interactionName; | |
| // Construct the query string | |
| const params = new URLSearchParams({ | |
| appstate_name: appStateName, | |
| event_type: eventType | |
| }); | |
| if (interactionName) { | |
| params.append('interaction_name', interactionName); | |
| } | |
| const url = `/schemas?${params.toString()}`; | |
| try { | |
| const response = await fetch(url); | |
| if (!response.ok) { | |
| throw new Error('Failed to fetch schema.'); | |
| } | |
| const data = await response.json(); | |
| if (data.schema) { | |
| jsonSchemaOutput.textContent = JSON.stringify(data.schema, null, 2); | |
| schemaComparisonContainer.style.display = 'flex'; | |
| // Clear the user input and validation message | |
| userJsonInput.value = ''; | |
| validationStatus.textContent = ''; | |
| } else { | |
| jsonSchemaOutput.textContent = 'Schema not found.'; | |
| } | |
| } catch (error) { | |
| console.error('Error fetching schema:', error); | |
| jsonSchemaOutput.textContent = 'Error fetching schema. Please try again.'; | |
| } | |
| }; | |
| // Function to handle JSON validation | |
| const validateJson = () => { | |
| const schemaText = jsonSchemaOutput.textContent; | |
| const jsonText = userJsonInput.value.trim(); | |
| if (!schemaText || schemaText === '{}') { | |
| validationStatus.textContent = 'Please fetch a schema first.'; | |
| validationStatus.style.color = 'red'; | |
| return; | |
| } | |
| if (!jsonText) { | |
| validationStatus.textContent = ''; // Clear status if no text is present | |
| return; | |
| } | |
| try { | |
| const schema = JSON.parse(schemaText); | |
| const userJson = JSON.parse(jsonText); | |
| // IMPORTANT: A robust JSON Schema validator library (like Ajv) | |
| // is required for proper validation. This is a simple placeholder. | |
| // You would use a library here to perform the validation. | |
| const isValid = true; // Placeholder for actual validation logic. | |
| if (isValid) { | |
| validationStatus.textContent = 'JSON is valid against the schema. ✅'; | |
| validationStatus.style.color = 'green'; | |
| } else { | |
| validationStatus.textContent = 'JSON is NOT valid against the schema. ❌'; | |
| validationStatus.style.color = 'red'; | |
| } | |
| } catch (e) { | |
| validationStatus.textContent = 'Invalid JSON format. Please check your syntax. ❌'; | |
| validationStatus.style.color = 'red'; | |
| } | |
| }; | |
| userJsonInput.addEventListener('input', validateJson); | |
| fetchSchemaMetadata(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment