first working version of swagger ui without the form submission/sandbox

src/main/html/index.html

@@ -18,7 +18,6 @@
     <script src="javascript/app.ext.min.js" type="text/javascript" charset="utf-8"></script>
 
     <script src="javascript/swagger-service.js" type="text/javascript" charset="utf-8"></script>
-    <script src="javascript/swagger-service-sample.js" type="text/javascript" charset="utf-8"></script>
     <script src="javascript/swagger-ui.js" type="text/javascript" charset="utf-8"></script>
 
 </head>
@@ -93,26 +92,26 @@ http://api.wordnik.com/v4
 
 <script id="apiTemplate" type="text/x-jquery-tmpl">
     <li class='endpoint'>
-        <ul class='operations'>
+        <ul id='${name}_endpoint_${id}_operations' class='operations'>
         </ul>
     </li>
 </script>
 
 <script id="operationTemplate" type="text/x-jquery-tmpl">
-    <li class='${httpMethod} operation' id='${apiName}_${nickname}'>
+    <li class='${httpMethodLowercase} operation' id='${apiName}_${nickname}_${id}'>
         <div class='heading'>
             <h3>
-                <span class='http_method'><a href="#!/${apiName}/${nickname}"
+                <span class='http_method'><a href="#!/${apiName}/${nickname}_${id}"
-                                             onclick="Docs.toggleOperationContent('${apiName}_${nickname}_content');">${httpMethod}</a></span>
+                                             onclick="Docs.toggleOperationContent('${apiName}_${nickname}_${id}_content');">${httpMethod}</a></span>
-                <span class='path'><a href="#!/${apiName}/${nickname}"
+                <span class='path'><a href="#!/${apiName}/${nickname}_${id}"
-                                      onclick="Docs.toggleOperationContent('${apiName}_${nickname}_content');">${path_json}</a></span>
+                                      onclick="Docs.toggleOperationContent('${apiName}_${nickname}_${id}_content');">${path_json}</a></span>
             </h3>
             <ul class='options'>
-                <li><a href="#!/${apiName}/${nickname}"
+                <li><a href="#!/${apiName}/${nickname}_${id}"
-                       onclick="Docs.toggleOperationContent('${apiName}_${nickname}_content');">${summary}</a></li>
+                       onclick="Docs.toggleOperationContent('${apiName}_${nickname}_${id}_content');">${summary}</a></li>
             </ul>
         </div>
-        <div class='content' id='${apiName}_${nickname}_content' style='display:none'>
+        <div class='content' id='${apiName}_${nickname}_${id}_content' style='display:none'>
             <form accept-charset="UTF-8" action="#" class="sandbox" method="post">
                 <div style="margin:0;padding:0;display:inline"></div>
                 <h4>Parameters</h4>
@@ -120,27 +119,27 @@ http://api.wordnik.com/v4
                     <thead>
                     <tr>
                         <th>Parameter</th>
-                        <th>Value</th>
+                        <th id="${apiName}_${nickname}_${id}_value_header">Value</th>
                         <th>Description</th>
                     </tr>
                     </thead>
-                    <tbody id="${apiName}_${nickname}_params">
+                    <tbody id="${apiName}_${nickname}_${id}_params">
 
                     </tbody>
                 </table>
 
-                <div class='sandbox_header' id='${apiName}_${nickname}_content_sandbox_response_header'>
+                <div class='sandbox_header' id='${apiName}_${nickname}_${id}_content_sandbox_response_header'>
-                    <input class="submit" id="${apiName}_${nickname}_content_sandbox_response_button" name="commit"
+                    <input class="submit" id="${apiName}_${nickname}_${id}_content_sandbox_response_button" name="commit"
                            type="submit" value="Try it out!"/>
-                    <a href="#" id="${apiName}_${nickname}_content_sandbox_response_hider"
+                    <a href="#" id="${apiName}_${nickname}_${id}_content_sandbox_response_hider"
-                       onclick="$('#${apiName}_${nickname}_content_sandbox_response').slideUp();$(this).fadeOut(); return false;"
+                       onclick="$('#${apiName}_${nickname}_${id}_content_sandbox_response').slideUp();$(this).fadeOut(); return false;"
                        style="display:none">Hide Response</a>
-                    <img alt="Throbber" id="${apiName}_${nickname}_content_sandbox_response_throbber"
+                    <img alt="Throbber" id="${apiName}_${nickname}_${id}_content_sandbox_response_throbber"
                          src="images/throbber.gif" style="display:none"/>
                 </div>
             </form>
 
-            <div class='response' id='${apiName}_${nickname}_content_sandbox_response' style='display:none'>
+            <div class='response' id='${apiName}_${nickname}_${id}_content_sandbox_response' style='display:none'>
                 <h4>Request URL</h4>
 
                 <div class='block request_url'></div>
@@ -161,6 +160,42 @@ http://api.wordnik.com/v4
     </li>
 </script>
 
+
+<script id="paramTemplateRequired" type="text/x-jquery-tmpl">
+    <tr>
+        <td class='code required'>${name}</td>
+        <td><input class="required" minlength="1" placeholder="(required)" type="text" value=""/></td>
+        <td width='500'><strong>${description}</strong>
+        </td>
+    </tr>
+</script>
+
+<script id="paramTemplate" type="text/x-jquery-tmpl">
+    <tr>
+        <td class='code'>${name}</td>
+        <td><input class="" minlength="0" placeholder="" type="text" value=""/></td>
+        <td width='500'>${description}</td>
+    </tr>
+</script>
+
+<script id="paramTemplateRequiredReadOnly" type="text/x-jquery-tmpl">
+    <tr>
+        <td class='code required'>${name}</td>
+        <td>-</td>
+        <td width='500'><strong>${description}</strong>
+        </td>
+    </tr>
+</script>
+
+<script id="paramTemplateReadOnly" type="text/x-jquery-tmpl">
+    <tr>
+        <td class='code'>${name}</td>
+        <td>-</td>
+        <td width='500'>${description}</td>
+    </tr>
+</script>
+
+
 </body>
 
 </html>

src/main/html/javascript/swagger-service-sample.js

@@ -2,13 +2,13 @@ jQuery(function($) {
 	// create and initialize SwaggerService
 	var swaggerService = new SwaggerService();
 	swaggerService.init();
-	
+
 	// Create convenience references to Spine models
 	var ApiResource = swaggerService.ApiResource();
 
 	// Register a callback for when apis are loaded
 	ApiResource.bind("refresh", apisLoaded);
-	
+
 	function apisLoaded() {
         for(var i = 0; i < ApiResource.all().length; i++) {
             var apiResource = ApiResource.all()[i];
@@ -20,5 +20,5 @@ jQuery(function($) {
 
 		if (window.console) console.log("apis loaded");
 	}
-	
+
 });

src/main/html/javascript/swagger-service.js

@@ -26,7 +26,7 @@ function SwaggerService(hostUrl) {
 			this.path_json = this.path + ".json";
 			this.path_xml = this.path + ".xml";
             this.baseUrl = apiHost;
-            this.name = this.path.substr(0, this.path.length);
+            this.name = this.path.substr(1, this.path.length);
             this.apiList = Api.sub();
             this.modelList = ApiModel.sub();
 		},
@@ -62,9 +62,9 @@ function SwaggerService(hostUrl) {
 				this.path_xml = prefix + ".xml" + suffix;;
 
                 if(this.path.indexOf("/") == 0) {
-                    this.name = this.path.substr(1, secondPathSeperatorIndex);
+                    this.name = this.path.substr(1, secondPathSeperatorIndex - 1);
                 } else {
-                    this.name = this.path.substr(0, secondPathSeperatorIndex);
+                    this.name = this.path.substr(0, secondPathSeperatorIndex - 1);
                 }
 			} else {
 				this.path_json = this.path + ".json";
@@ -78,16 +78,21 @@ function SwaggerService(hostUrl) {
 			}
 
 	        var value  = this.operations;
-	        this.operations = ApiOperation.sub();
-	        if (value) this.operations.refresh(value);
 
-            for(var i = 0; i < this.operations.all().length; i++) {
+	        this.operations = ApiOperation.sub();
-                var operation = this.operations.all()[i];
+	        if (value) {
-                operation.apiName = this.name;
+                for (var i = 0; i < value.length; i++) {
-                operation.path = this.path;
+                    var obj = value[i];
-                operation.path_json = this.path_json;
+                    obj.apiName = this.name;
-                operation.path_xml = this.path_xml;
+                    obj.path = this.path;
+                    obj.path_json = this.path_json;
+                    obj.path_xml = this.path_xml;
+
+                }
+
+                this.operations.refresh(value);
             }
+
 		},
 		
 		toString: function() {
@@ -106,14 +111,15 @@ function SwaggerService(hostUrl) {
     });
 
 	// Model: ApiOperation
-	var ApiOperation = Spine.Model.setup("ApiOperation", ["baseUrl", "path", "path_json", "path_xml", "summary", "deprecated", "open", "httpMethod", "nickname", "responseClass", "parameters", "apiName"]);
+	var ApiOperation = Spine.Model.setup("ApiOperation", ["baseUrl", "path", "path_json", "path_xml", "summary", "deprecated", "open", "httpMethod", "httpMethodLowercase", "nickname", "responseClass", "parameters", "apiName"]);
     ApiOperation.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);
 
             this.baseUrl = apiHost;
+            this.httpMethodLowercase = this.httpMethod.toLowerCase();
 
-	        var value  = this.parameters;
+	        var value = this.parameters;
 	        this.parameters = ApiParameter.sub();
 	        if (value) this.parameters.refresh(value);
 		},
@@ -130,7 +136,7 @@ function SwaggerService(hostUrl) {
 			}
 			paramsString += ")";
 
-			return "{" + this.nickname  + paramsString + ": " + this.summary + "}";
+			return "{" + this.path_json + "| " + this.nickname  + paramsString + ": " + this.summary + "}";
 		}
 		
     });
@@ -140,6 +146,8 @@ function SwaggerService(hostUrl) {
 	ApiParameter.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);
+
+            this.name = this.name || this.dataType;
 		},
 
 		toString: function() {

src/main/html/javascript/swagger-ui.js

@@ -0,0 +1,81 @@
+jQuery(function($) {
+    // create and initialize SwaggerService
+    var swaggerService = new SwaggerService();
+    swaggerService.init();
+
+    // Create convenience references to Spine models
+    var ApiResource = swaggerService.ApiResource();
+
+    // Register a callback for when apis are loaded
+    ApiResource.bind("refresh", apisLoaded);
+
+    function apisLoaded() {
+        for (var i = 0; i < ApiResource.all().length; i++) {
+            var apiResource = ApiResource.all()[i];
+            log("------------- apiResource : " + apiResource.name);
+
+            $("#resourceTemplate").tmpl(apiResource).appendTo("#resources");
+
+//            apiResource.apiList.logAll();
+            var resourceApisContainer = "#" + apiResource.name + "_endpoint_list";
+            log("resourceApisContainer = " + resourceApisContainer);
+            for (var j = 0; j < apiResource.apiList.all().length; j++) {
+                var api = apiResource.apiList.all()[j];
+                $("#apiTemplate").tmpl(api).appendTo(resourceApisContainer);
+                renderOperations(api);
+            }
+
+//            apiResource.modelList.logAll();
+            for (var k = 0; k < apiResource.modelList.all().length; k++) {
+                var apiModel = apiResource.modelList.all()[k];
+            }
+        }
+
+        if (window.console) console.log("apis loaded");
+    }
+
+    function renderOperations(api) {
+        if (api.operations && api.operations.count() > 0) {
+            var operationsContainer = "#" + api.name + "_endpoint_" + api.id + "_operations";
+            for (var o = 0; o < api.operations.all().length; o++) {
+                var operation = api.operations.all()[o];
+                $("#operationTemplate").tmpl(operation).appendTo(operationsContainer);
+                renderParameters(operation, $);
+            }
+        }
+    }
+
+    function renderParameters(operation) {
+        if(operation.parameters && operation.parameters.count() > 0) {
+            var isGetOpetation = (operation.httpMethodLowercase == "get");
+
+            var operationParamsContainer = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_params";
+            log("operationParamsContainer= " + operationParamsContainer);
+            for (var p = 0; p < operation.parameters.all().length; p++) {
+                var param = operation.parameters.all()[p];
+
+                var templateName = "#paramTemplate";
+                if (param.required)
+                    templateName += "Required";
+
+                if (!isGetOpetation)
+                    templateName += "ReadOnly";
+
+                $(templateName).tmpl(param).appendTo(operationParamsContainer);
+
+                if (!isGetOpetation) {
+                    var submitButtonId = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_content_sandbox_response_button";
+                    $(submitButtonId).hide();
+
+                    var valueHeader = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_value_header";
+                    $(valueHeader).html("Default Value");
+
+                }
+
+
+            }
+        }
+    }
+
+});
+