Select the method from the radio buttons

Author: Emmanouil Konstantinidis

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -76,6 +76,32 @@ $( document ).ready(function() {
   var setupForm = function (data) {
     $('#urlInput').val(data.path);
 
+    // List Methods (Radio Buttons)
+    // FIXME: Use regex - conver to JSON
+    var methods = data.methods.replace("[", "").replace("]", "").replace(/'/g, "").replace(/\s/g, "").split(',');
+
+    $.each( methods, function( i, method ) {
+      var methodClass = "radio-inline method " + method.toLowerCase();
+      $('#methods').append("" +
+        "<label class='" + methodClass + "'>"+
+        "<input type='radio' name='methodRadio' value='" + method + "'>" + method +
+        "</label>" +
+      "")
+    });
+
+    $(".radio-inline.method").off().on('click', function (evt) {
+      // Prevent the event firing twice
+      evt.stopPropagation();
+      evt.preventDefault();
+
+      // Uncheck all checkboxes and
+      // Check the clicked radio
+      $('.radio-inline.method').removeClass('active');
+      $('.radio-inline.method').children('input').attr('checked', false);
+      $(this).addClass("active");
+      $(this).children('input').first().attr('checked', true);
+    });
+
     $('#requestForm').submit(function (e) {
       // Prevent Submit
       e.preventDefault();

rest_framework_docs/static/rest_framework_docs/js/index.js

@@ -172,6 +172,29 @@ body {
 
   .request {
 
+
+    .methods {
+
+      .method {
+        padding: 4px 8px;
+        color: #FFF;
+
+        &.get { background-color: @GetColor; }
+        &.post { background-color: @PostColor; }
+        &.patch { background-color: @PutColor; }
+        &.put { background-color: @PatchColor; }
+        &.delete { background-color: @DeleteColor; }
+        &.options { background-color: @OptionsColor; }
+
+        &.active {
+          border: 2px solid red;
+        }
+
+        input[type='radio'] {
+          display: none;
+        }
+      }
+    }
   }
 
   .response {

rest_framework_docs/static/rest_framework_docs/less/style.less

@@ -106,6 +106,8 @@ <h3>Request</h3>
                   <input type="text" class="form-control" id="urlInput" placeholder="Url">
                 </div>
 
+                <div id="methods" class="methods"></div>
+
                 <h5>Headers</h5>
                 <div class="form-group">
                   <label for="exampleInputPassword1">Authorization</label>