added input fields to take in the api url and api key

This commit is contained in:
Ayush Gupta
2011-07-27 22:31:35 -07:00
parent 6c22450eeb
commit cde87fbddf
3 changed files with 81 additions and 11 deletions

View File

@@ -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'>

View File

@@ -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");

View File

@@ -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();
}
});