x-control-panel/api-sandbox/app/main.js

134 lines
3.6 KiB
JavaScript

import $ from 'jquery'
let apiSpec = null
async function loadApiSpec() {
try {
const response = await fetch('/api.spec.json', {
method: 'GET',
headers: {
'Cache-Control': 'no-cache',
'Accept': 'application/json'
}
})
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
}
apiSpec = await response.json()
console.log('API Spec loaded:', apiSpec)
return apiSpec
} catch (error) {
console.error('Ошибка загрузки API спецификации:', error)
$('#result').text('Ошибка загрузки API спецификации: ' + error.message)
}
}
function populateServices() {
const $serviceSelect = $('#service')
$serviceSelect.empty()
$serviceSelect.append('<option value="">Выберите сервис</option>')
Object.keys(apiSpec).forEach(serviceName => {
$serviceSelect.append(`<option value="${serviceName}">${serviceName}</option>`)
})
}
function populateMethods(serviceName) {
const $methodSelect = $('#method')
$methodSelect.empty()
$methodSelect.append('<option value="">Выберите метод</option>')
if (serviceName && apiSpec[serviceName] && apiSpec[serviceName].methods) {
apiSpec[serviceName].methods.forEach(method => {
$methodSelect.append(`<option value="${method.name}">${method.name}</option>`)
})
}
}
function createParamInputs(methodName, serviceName) {
const $paramsContainer = $('#params-container')
$paramsContainer.empty()
if (!serviceName || !methodName) return
const service = apiSpec[serviceName]
if (!service || !service.methods) return
const method = service.methods.find(m => m.name === methodName)
if (!method || !method.params) return
method.params.forEach(param => {
const required = !param.optional ? ' (обязательно)' : ''
const $paramDiv = $(`
<div class="param">
<label for="param-${param.name}">${param.name}${required} (${param.type}):</label>
<input type="text" id="param-${param.name}" data-param="${param.name}" placeholder="${param.description}">
</div>
`)
$paramsContainer.append($paramDiv)
})
}
async function sendRequest() {
const serviceName = $('#service').val()
const methodName = $('#method').val()
if (!serviceName || !methodName) {
$('#result').text('Выберите сервис и метод')
return
}
const params = {}
$('.param input').each(function() {
const paramName = $(this).data('param')
const value = $(this).val()
if (value.trim() !== '') {
params[paramName] = value
}
})
const requestData = {
jsonrpc: '2.0',
method: `${serviceName}.${methodName}`,
params: params,
id: Date.now()
}
$('#result').text('Отправка запроса...')
try {
const response = await fetch('/api', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
})
const result = await response.json()
$('#result').text(JSON.stringify(result, null, 2))
} catch (error) {
$('#result').text(`Ошибка: ${error.message}`)
}
}
$(document).ready(async () => {
await loadApiSpec()
if (apiSpec) {
populateServices()
$('#service').on('change', function() {
const serviceName = $(this).val()
populateMethods(serviceName)
$('#params-container').empty()
})
$('#method').on('change', function() {
const serviceName = $('#service').val()
const methodName = $(this).val()
createParamInputs(methodName, serviceName)
})
$('#send-btn').on('click', sendRequest)
}
})