List serialiser fields

Author: Emmanouil Konstantinidis

rest_framework_docs/api_endpoint.py

@@ -1,3 +1,4 @@
+import json
 import inspect
 from django.contrib.admindocs.views import simplify_regex
 
@@ -15,6 +16,7 @@ def __init__(self, pattern, parent_pattern=None):
         # self.view_name = pattern.callback.__name__
         self.errors = None
         self.fields = self.__get_serializer_fields__()
+        self.fields_json = self.__get_serializer_fields_json__()
 
     def __get_path__(self, parent_pattern):
         if parent_pattern:
@@ -47,3 +49,8 @@ def __get_serializer_fields__(self):
                 # Show more attibutes of `field`?
 
         return fields
+
+    def __get_serializer_fields_json__(self):
+        # FIXME:
+        # Return JSON or not?
+        return json.dumps(self.fields)

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -94,7 +94,14 @@ $( document ).ready(function() {
   };
 
   var _setupFields = function (fields) {
-
+    $.each( fields, function( i, field ) {
+      $('#fields').append("" +
+        '<div class="form-group">' +
+          '<label for="field' + field.name + '">' + field.name + '</label>' +
+          '<input type="text" class="form-control" id="field' + field.name + '" placeholder="' + field.type + '">' +
+        '</div>' +
+      "");
+    });
   };
 
   var setupForm = function (data) {

rest_framework_docs/static/rest_framework_docs/js/index.js

@@ -194,7 +194,9 @@ body {
     }
 
     .fields {
-      
+      label {
+        text-transform: capitalize;
+      }
     }
   }
 

rest_framework_docs/static/rest_framework_docs/less/style.less

@@ -45,7 +45,7 @@ <h4 class="panel-title title">
                     data-toggle="modal"
                     data-path="{{ endpoint.path }}"
                     data-methods="{{ endpoint.allowed_methods }}"
-                    data-fields="{{ endpoint.fields }}">
+                    data-fields="{{ endpoint.fields_json }}">
                     <i class="fa fa-plug"></i></li>
               </ul>
             </div>
@@ -98,7 +98,6 @@ <h4 class="modal-title">Live API Endpoints</h4>
 
           <div class="row">
             <div class="col-md-6 request">
-
               <h3>Request</h3>
               <form id="requestForm">
                 <div class="form-group">
@@ -116,15 +115,11 @@ <h5>Headers</h5>
 
                 <h5>Data</h5>
                 <div id="fields" class="fields"></div>
-                <div class="form-group">
-                  <label for="exampleInputPassword1">Password</label>
-                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-                </div>
+
                 <button type="submit" class="btn btn-default">Send</button>
               </form>
-
-
             </div>
+
             <div class="col-md-6 response">
               <h3>Response <span id="responseStatusCode" class="label status-code pull-right"></span></h3>
               <div><strong>Status Text</strong>: <span class="status-text" id="responseStatusText"></span></div>