From cde87fbddf050552ad1120f1b58a9d1f66179496 Mon Sep 17 00:00:00 2001
From: Ayush Gupta <ayush@glugbot.com>
Date: Wed, 27 Jul 2011 22:31:35 -0700
Subject: [PATCH] added input fields to take in the api url and api key

---
 src/main/html/index.html                    | 13 +++--
 src/main/html/javascript/swagger-service.js | 20 +++++--
 src/main/html/javascript/swagger-ui.js      | 59 +++++++++++++++++++--
 3 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/src/main/html/index.html b/src/main/html/index.html
index 4d396c10..686660e6 100644
--- a/src/main/html/index.html
+++ b/src/main/html/index.html
@@ -29,14 +29,14 @@
         </h1>
 
         <ul id='nav'>
-            <li class="first odd"><input class="header-input" type="text" style="width: 400px" placeholder="http://awesome-api.com/rest/list.json"></li>
-            <li class="even"><input class="header-input" type="text" style="width: 200px" placeholder="(api key)"></li>
-            <li class="last odd"><a href="/support" class="active">Explore</a></li>
+            <li class="first odd"><input id="input_baseUrl" class="header-input" type="text" style="width: 400px" placeholder="http://awesome-api.com/rest/list.json"></li>
+            <li class="even"><input id="input_apiKey" class="header-input" type="text" style="width: 200px" placeholder="(api key)"></li>
+            <li class="last odd" id="button_explore"><a href="#" class="active">Explore</a></li>
         </ul>
     </div>
 </div>
 <div id='content'>
-    <div class='container'>
+    <div id="resources_container" class='container'>
         <div class='fullwidth_column'>
             <div class='heading_with_menu'>
                 <h1>
@@ -49,12 +49,15 @@
 
             </ul>
             <p>
-                <br>The latest API base URL is
+                <br>API base URL is
 <span id="api_host_url" class='code'></span>
             </p>
         </div>
 
     </div>
+
+    <div id="content_message" class='container'>
+    </div>
 </div>
 <div id='footer'>
     <div class='container'>
diff --git a/src/main/html/javascript/swagger-service.js b/src/main/html/javascript/swagger-service.js
index 4e3768b1..6febef54 100644
--- a/src/main/html/javascript/swagger-service.js
+++ b/src/main/html/javascript/swagger-service.js
@@ -1,11 +1,12 @@
 
-function SwaggerService(hostUrl, rootResourcesApi) {
+function SwaggerService(hostUrl, rootResourcesApi, statusCallback) {
     if(!hostUrl)
         throw new Error("hostUrl must be passed while creating SwaggerService");
 
 	// constants
 	var apiHost = hostUrl;
     var rootResourcesApiName = rootResourcesApi || "list";
+    var statusListener = statusCallback;
 
 	// utility functions
 	function log(m) {
@@ -15,7 +16,11 @@ function SwaggerService(hostUrl, rootResourcesApi) {
 	function error(m) {
 	    if (window.console) console.log("ERROR: " + m);
 	}
-	
+
+    function updateStatus(status) {
+        statusListener(status);
+    }
+
     // make some models public
 	this.ApiResource = function() {return ApiResource;};
 
@@ -97,6 +102,8 @@ function SwaggerService(hostUrl, rootResourcesApi) {
                 this.operations.refresh(value);
             }
 
+            updateStatus("Loading " + this.path + "...");
+
 		},
 		
 		toString: function() {
@@ -164,7 +171,7 @@ function SwaggerService(hostUrl, rootResourcesApi) {
     });
 
 	// Model: ApiModel
-	var ApiModel = Spine.Model.setup("ApiModel", ["id", "fields"]);;
+	var ApiModel = Spine.Model.setup("ApiModel", ["id", "fields"]);
 	ApiModel.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);
@@ -184,6 +191,7 @@ function SwaggerService(hostUrl, rootResourcesApi) {
 					}
 				}
 				//log("got " + this.fields.count() + " fields for " + this.id);
+
 			}
 		},
 
@@ -231,6 +239,7 @@ function SwaggerService(hostUrl, rootResourcesApi) {
 					}
 				} else
 					this.dataType = atts.type;
+
 			}
 		},
 
@@ -257,6 +266,7 @@ function SwaggerService(hostUrl, rootResourcesApi) {
 		fetchEndpoints: function() {
             var controller = this;
 
+            updateStatus("Fetching API List...");
             $.getJSON(apiHost + "/" + rootResourcesApiName + ".json", function(response) {
 				//log(response);
 				ApiResource.createAll(response.apis);
@@ -279,6 +289,7 @@ function SwaggerService(hostUrl, rootResourcesApi) {
 
         fetchResource: function(apiResource) {
             var controller = this;
+            updateStatus("Fetching " + apiResource.name + "...");
             $.getJSON(apiHost + apiResource.path_json, function(response) {
                 controller.loadResources(response, apiResource);
             });
@@ -290,6 +301,7 @@ function SwaggerService(hostUrl, rootResourcesApi) {
 //				log(response);
 
 				apiResource.addApis(response.apis);
+//                updateStatus("Parsed Apis");
 
 				//log(response.models);
 				if(response.models) {
@@ -303,6 +315,8 @@ function SwaggerService(hostUrl, rootResourcesApi) {
 //						apiResource.modelList.create(m);
 					}
 				}
+
+                updateStatus();
 			} finally {
 				if(this.countLoaded == ApiResource.count()) {
 					log("all models/api loaded");
diff --git a/src/main/html/javascript/swagger-ui.js b/src/main/html/javascript/swagger-ui.js
index 54e41304..431f7966 100644
--- a/src/main/html/javascript/swagger-ui.js
+++ b/src/main/html/javascript/swagger-ui.js
@@ -1,6 +1,10 @@
 jQuery(function($) {
 
+    this.baseUrl = "http://swagr.api.wordnik.com/v4/list.json";
+
     var ApiSelectionController = Spine.Controller.create({
+        proxied: ["showApi"],
+
         baseUrlList: new Array(),
 
         init: function() {
@@ -16,6 +20,12 @@ jQuery(function($) {
 
             this.render();
 
+            $("#button_explore").click(this.showApi);
+        },
+
+        slapOn: function() {
+            messageController.showMessage("Please enter a base url for the api that you wish to explore.");
+            $("#resources_container").hide();
         },
 
         supportsLocalStorage: function() {
@@ -28,9 +38,36 @@ jQuery(function($) {
 
         render: function() {
 //            $("#baseUrlSelector").chosen();
+        },
+
+        showApi: function() {
+            var baseUrl = jQuery.trim($("#input_baseUrl").val());
+            if(baseUrl.length == 0) {
+                $("#input_baseUrl").wiggle();
+            } else {
+                var resourceListController = ResourceListController.init({baseUrl: baseUrl})
+            }
         }
     });
 
+    var MessageController = Spine.Controller.create({
+        showMessage: function(msg) {
+            if(msg) {
+                $("#content_message").html(msg);
+                $("#content_message").show();
+            } else {
+                $("#content_message").html("");
+                $("#content_message").hide();
+            }
+
+        },
+
+        clearMessage: function() {
+            this.showMessage();
+        }
+    });
+    var messageController = MessageController.init();
+
     // The following heirarchy is followed by these view controllers
     // ResourceListController
     //     >>> ResourceController
@@ -47,6 +84,10 @@ jQuery(function($) {
                 throw new Error("A baseUrl must be passed to ResourceListController");
             }
 
+            $("#content_message").hide();
+            $("#resources_container").hide();
+            $("#resources").html("");
+
             var hostUrl = this.baseUrl.substr(0, this.baseUrl.lastIndexOf("/"));
             var resourceListApi = this.baseUrl.substr(this.baseUrl.lastIndexOf("/") + 1, this.baseUrl.length);
             log("resourceListApi=" + resourceListApi);
@@ -54,7 +95,12 @@ jQuery(function($) {
 
             // create and initialize SwaggerService
             $("#api_host_url").html(hostUrl);
-            var swaggerService = new SwaggerService(hostUrl, "list");
+            var swaggerService = new SwaggerService(hostUrl, "list", function(msg) {
+                if(msg)
+                    messageController.showMessage(msg);
+                else
+                    messageController.showMessage("Rendering page...");
+            });
             swaggerService.init();
 
             // Create convenience references to Spine models
@@ -65,6 +111,8 @@ jQuery(function($) {
 
         addAll: function() {
             this.ApiResource.each(this.addOne);
+            messageController.clearMessage();
+            $("#resources_container").slideDown();
         },
 
         addOne: function(apiResource) {
@@ -102,6 +150,7 @@ jQuery(function($) {
         renderApi: function(api) {
             var resourceApisContainer = "#" + this.apiResource.name + "_endpoint_list";
             ApiController.init({item: api, container: resourceApisContainer});
+
         }
 
     });
@@ -214,9 +263,13 @@ jQuery(function($) {
 
     });
 
-    var apiSelectionController = ApiSelectionController.init();
 
-    var resourceListController = ResourceListController.init({baseUrl: "http://swagr.api.wordnik.com/v4/list.json"});
+    var apiSelectionController = ApiSelectionController.init();
+    if(this.baseUrl) {
+        var resourceListController = ResourceListController.init({baseUrl: this.baseUrl});
+    } else {
+        apiSelectionController.slapOn();
+    }
 
 });