mirror of
https://github.com/encode/django-rest-framework.git
synced 2025-08-05 13:00:12 +03:00
Interact Modal
This commit is contained in:
Emmanouil Konstantinidis
parent
479ee056d5
commit
c11a7adb2f
|
|
@ -297,3 +297,35 @@ body {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.modal-lg {
|
||||||
|
width: 980px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-modal .modal-title .fa {
|
||||||
|
color: #93c54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-modal .modal-body .request-info {
|
||||||
|
background-color: #f8f5f0;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-modal .modal-body .meta {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-modal .modal-body .meta .label {
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-modal .modal-body .meta code {
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: .2em .6em .3em;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="https://unpkg.com/coreapi@0.0.18/dist/coreapi.js"></script>
|
<script src="https://unpkg.com/coreapi@0.0.19/dist/coreapi.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
|
<body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
|
||||||
|
|
@ -61,7 +62,6 @@
|
||||||
const codec = new coreapi.codecs.CoreJSONCodec()
|
const codec = new coreapi.codecs.CoreJSONCodec()
|
||||||
const schema = {{ schema }}
|
const schema = {{ schema }}
|
||||||
const doc = codec.decode(schema)
|
const doc = codec.decode(schema)
|
||||||
const client = new coreapi.Client(null, null, csrf)
|
|
||||||
|
|
||||||
// Language Control
|
// Language Control
|
||||||
$('.language-control li a').click(function (event) {
|
$('.language-control li a').click(function (event) {
|
||||||
|
|
@ -121,13 +121,42 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function requestCallback(request) {
|
||||||
|
var requestText = request.options.method + ' ' + request.url;
|
||||||
|
|
||||||
|
var parser = document.createElement('a');
|
||||||
|
parser.href = request.url;
|
||||||
|
|
||||||
|
form.find(".request-response").text(requestText)
|
||||||
|
form.find(".request-response").removeClass("hide")
|
||||||
|
form.find(".request-method").text(request.options.method)
|
||||||
|
form.find(".request-url").text(parser.pathname + parser.hash + parser.search)
|
||||||
|
}
|
||||||
|
|
||||||
|
function responseCallback(response) {
|
||||||
|
form.find(".response-status-code").removeClass("label-success").removeClass("label-danger")
|
||||||
|
if (response.ok) {
|
||||||
|
form.find(".response-status-code").addClass("label-success")
|
||||||
|
} else {
|
||||||
|
form.find(".response-status-code").addClass("label-danger")
|
||||||
|
}
|
||||||
|
|
||||||
|
form.find(".response-status-code").text(response.status)
|
||||||
|
|
||||||
|
form.find(".meta").removeClass("hide")
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = new coreapi.Client({csrf: csrf, requestCallback: requestCallback, responseCallback: responseCallback})
|
||||||
|
|
||||||
client.action(doc, key, params).then(function (data) {
|
client.action(doc, key, params).then(function (data) {
|
||||||
var response = JSON.stringify(data, null, 2);
|
var response = JSON.stringify(data, null, 2);
|
||||||
|
form.find(".request-info").addClass("hide")
|
||||||
form.find(".response-data").text(response)
|
form.find(".response-data").text(response)
|
||||||
form.find(".response-data").removeClass("hide")
|
form.find(".response-data").removeClass("hide")
|
||||||
form.find(".response-error").addClass("hide")
|
form.find(".response-error").addClass("hide")
|
||||||
}).catch(function (error) {
|
}).catch(function (error) {
|
||||||
var response = JSON.stringify(error.content, null, 2);
|
var response = JSON.stringify(error.content, null, 2);
|
||||||
|
form.find(".request-info").addClass("hide")
|
||||||
form.find(".response-error").text(error.message)
|
form.find(".response-error").text(error.message)
|
||||||
form.find(".response-data").text(response)
|
form.find(".response-data").text(response)
|
||||||
form.find(".response-error").removeClass("hide")
|
form.find(".response-error").removeClass("hide")
|
||||||
|
|
|
||||||
|
|
@ -6,23 +6,38 @@
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||||
<h4 class="modal-title">{{ link.title|default:link_key }}</h4>
|
<h3 class="modal-title"><i class="fa fa-exchange"></i> {{ link.title|default:link_key }}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<form data-key='["{{ section_key }}", "{{ link_key }}"]'>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form data-key='["{{ section_key }}", "{{ link_key }}"]'>
|
<div class="row">
|
||||||
{% form_for_link link %}
|
<div class="col-lg-6 request">
|
||||||
|
{% form_for_link link %}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="response">
|
<div class="col-lg-6 response" id="response">
|
||||||
<div class="response-error alert alert-danger hide"></div>
|
<div class="request-info">Awaiting request</div>
|
||||||
<pre class="response-data hide"></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-right">
|
<div class="meta hide">
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<span class="label label-primary request-method"></span>
|
||||||
</div>
|
<code class="request-url"></code>
|
||||||
</form>
|
<label class="label label-lg response-status-code pull-right"></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre class="request-response hide"></pre>
|
||||||
|
|
||||||
|
<pre class="response-data hide"></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Send Request</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
style="float: right; margin-top: 20px"
|
style="float: right; margin-top: 20px"
|
||||||
data-toggle="modal"
|
data-toggle="modal"
|
||||||
data-target="#{{ section_key }}_{{ link_key }}_modal">
|
data-target="#{{ section_key }}_{{ link_key }}_modal">
|
||||||
Interact
|
<i class="fa fa-exchange"></i> Interact
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<h3 id="{{ section_key }}-{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
|
<h3 id="{{ section_key }}-{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user