diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css index 330aab940..3afb273ce 100644 --- a/rest_framework/static/rest_framework/docs/css/base.css +++ b/rest_framework/static/rest_framework/docs/css/base.css @@ -297,3 +297,35 @@ body { 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; +} diff --git a/rest_framework/templates/rest_framework/docs/index.html b/rest_framework/templates/rest_framework/docs/index.html index 31c340543..eab6ef86f 100644 --- a/rest_framework/templates/rest_framework/docs/index.html +++ b/rest_framework/templates/rest_framework/docs/index.html @@ -22,7 +22,8 @@ } } - + + @@ -61,7 +62,6 @@ const codec = new coreapi.codecs.CoreJSONCodec() const schema = {{ schema }} const doc = codec.decode(schema) - const client = new coreapi.Client(null, null, csrf) // Language Control $('.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) { var response = JSON.stringify(data, null, 2); + form.find(".request-info").addClass("hide") form.find(".response-data").text(response) form.find(".response-data").removeClass("hide") form.find(".response-error").addClass("hide") }).catch(function (error) { var response = JSON.stringify(error.content, null, 2); + form.find(".request-info").addClass("hide") form.find(".response-error").text(error.message) form.find(".response-data").text(response) form.find(".response-error").removeClass("hide") diff --git a/rest_framework/templates/rest_framework/docs/interact.html b/rest_framework/templates/rest_framework/docs/interact.html index 6bc67c1cd..373dca0f3 100644 --- a/rest_framework/templates/rest_framework/docs/interact.html +++ b/rest_framework/templates/rest_framework/docs/interact.html @@ -6,23 +6,38 @@
-

{{ link.title|default:link_key }}

+

{{ link.title|default:link_key }}

+
- - {% form_for_link link %} +
+
+ {% form_for_link link %} +
-
-
- 

-            

+        

+          
Awaiting request

 
-            

-                
-            

-        
+          

+            
+            
+            
+          

+
+          

+
+          

+        

+      

     

+
+    

+      
+      
+    

+    
+
   

 
 
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index 2b6d94a86..ae8c7b700 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -7,7 +7,7 @@
         style="float: right; margin-top: 20px"
         data-toggle="modal"
         data-target="#{{ section_key }}_{{ link_key }}_modal">
-        Interact
+         Interact