<div class="container-fluid py-3">
<form action="<?= current_page(); ?>" method="POST" class="--api-debug no-ajax">
<div class="row --apply-increase-one border-bottom">
<div class="col-md-10">
<div class="input-group mb-3">
<select name="method" class="form-control" style="max-width:100px">
<option value="GET">
GET
</option>
<option value="POST">
POST
</option>
<option value="DELETE">
DELETE
</option>
</select>
<input type="text" name="url" class="form-control" placeholder="<?= phrase('Enter service URL'); ?>" />
</div>
</div>
<div class="col-md-2">
<div class="d-grid mb-3">
<button type="submit" class="btn btn-dark">
<i class="mdi mdi-send"></i>
<?= phrase('Send'); ?>
</button>
</div>
</div>
</div>
<div style="margin-right:-1rem; margin-left:-1rem">
<nav class="--apply-increase-two" style="margin-top:-1px">
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link rounded-0" data-bs-toggle="tab" href="#params-headers" role="tab" style="border-left:0">
<?= phrase('Request Header'); ?>
</a>
<a class="nav-item nav-link rounded-0" data-bs-toggle="tab" href="#params-body" role="tab">
<?= phrase('Request Body'); ?>
</a>
<a class="nav-item nav-link rounded-0 active response-result" data-bs-toggle="tab" href="#results-pretty" role="tab">
<?= phrase('Response'); ?>
</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent1" style="margin-top:-1px">
<div class="tab-pane border-bottom p-3" id="params-headers" role="tabpanel">
<div class="row">
<div class="col-6 col-md-4 text-muted">
<div class="mb-3">
<input type="text" name="header_key[]" class="form-control form-control-sm param-header-key" placeholder="Key" />
</div>
</div>
<div class="col-6 col-md-6 ps-0 text-muted">
<div class="mb-3">
<div class="input-group">
<input type="text" name="header_value[]" class="form-control form-control-sm param-header-value" placeholder="Value" />
<button type="button" class="btn btn-secondary btn-sm" onclick="jExec($(this).closest('.row').remove())">
<i class="mdi mdi-window-close"></i>
</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary btn-sm --add-parameter" data-parameter="header">
<i class="mdi mdi-plus"></i>
<?= phrase('Add Parameter'); ?>
</button>
</div>
<div class="tab-pane border-bottom p-3" id="params-body" role="tabpanel">
<div class="row">
<div class="col-6 col-md-4 text-muted">
<div class="mb-3">
<input type="text" name="body_key[]" class="form-control form-control-sm param-body-key" placeholder="Key" />
</div>
</div>
<div class="col-6 col-md-6 ps-0 text-muted">
<div class="mb-3">
<div class="input-group">
<input type="text" name="body_value[]" class="form-control form-control-sm param-body-value" placeholder="Value" />
<button type="button" class="btn btn-secondary btn-sm" onclick="jExec($(this).closest('.row').remove())">
<i class="mdi mdi-window-close"></i>
</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary btn-sm --add-parameter" data-parameter="body">
<i class="mdi mdi-plus"></i>
<?= phrase('Add Parameter'); ?>
</button>
</div>
<div class="tab-pane border-bottom p-3 p-3 show active" id="results-pretty" role="tabpanel">
<pre class="rounded mt-0 mb-0 language-javascript"><code>{}</code></pre>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.--add-parameter').on('click', function(e) {
e.preventDefault();
var initial = $(this).attr('data-parameter');
$(
'<div class="row">' +
'<div class="text-muted col-6 col-md-4">' +
'<div class="mb-3">' +
'<input type="text" name="' + initial + '_key[]" class="form-control form-control-sm param-' + initial + '-key" placeholder="<?= phrase('Key'); ?>" />' +
'</div>' +
'</div>' +
'<div class="text-muted col-6 col-md-6 ps-0">' +
'<div class="mb-3">' +
'<div class="input-group">' +
'<input type="text" name="' + initial + '_value[]" class="form-control form-control-sm param-' + initial + '-value" placeholder="<?= phrase('Value'); ?>" />' +
'<button type="button" class="btn btn-secondary btn-sm" onclick="jExec($(this).closest(\'.row\').remove())">' +
'<i class="mdi mdi-window-close"></i>' +
'</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
)
.insertBefore($(this))
}),
$('.--api-debug').on('submit', function(e) {
e.preventDefault();
$('.mdi.mdi-send').removeClass('mdi-send').addClass('mdi-loading mdi-spin');
$('.response-result').trigger('click');
if (! $(this).find('input[name=url]').val()) {
$('.mdi.mdi-loading.mdi-spin').removeClass('mdi-loading mdi-spin').addClass('mdi-send');
$('pre code').text(JSON.stringify({error: "<?= phrase('No service URL are given'); ?>"}, null, 4));
Prism.highlightAll();
return;
}
let header = {},
body = {},
method = $(this).find('select[name=method]').val(),
parameter = new FormData(this);
$('.param-header-key').each(function(num, value) {
let key = $(this).val(),
val = $('.param-header-value:eq(' + num + ')').val();
if (val) {
header[key] = val;
}
});
$('.param-body-key').each(function(num, value) {
let key = $(this).val(),
val = $('.param-body-value:eq(' + num + ')').val();
if (val) {
body[key] = val;
}
});
$.ajax({
url: $(this).find('input[name=url]').val(),
method: method,
data: body,
headers: header,
beforeSend: function() {
$('pre code').text('<?= phrase('Requesting'); ?>...'),
$('.result-html').html('')
}
})
.always(function(response, status, error) {
if (typeof response !== 'object') {
response = {
error: '<?= phrase('The response is not a valid object'); ?>'
};
}
$('.mdi.mdi-loading.mdi-spin').removeClass('mdi-loading mdi-spin').addClass('mdi-send');
$('pre code').text(JSON.stringify((typeof response.responseJSON !== 'undefined' ? response.responseJSON : response), null, 4));
Prism.highlightAll();
if (UA !== 'mobile' && typeof mCustomScrollbar === 'function') {
$('.pane-wrapper').mCustomScrollbar({
autoHideScrollbar: true,
axis: 'y',
scrollInertia: 170,
mouseWheelPixels: 170,
setHeight: $(window).outerHeight(true) - (($('[role=header]').outerHeight(true) ?? 0) + ($('[role=breadcrumb]').outerHeight(true) ?? 0) + ($('[role=meta]').outerHeight(true) ?? 0) + ($('.--apply-increase-one').outerHeight(true) ?? 0) + ($('.--apply-increase-two').outerHeight(true) ?? 0) + 65),
advanced: {
updateOnContentResize: true
},
autoHideScrollbar: false
})
}
})
})
})
</script>
|
Download
