merged with swagger.js-2.0-develop

This commit is contained in:
Tony Tam
2013-07-07 00:53:30 -07:00
parent 7334079535
commit 09be20c97d
13 changed files with 926 additions and 678 deletions

View File

@@ -5,12 +5,7 @@ class ContentTypeView extends Backbone.View
template = @template()
$(@el).html(template(@model))
@isParam = @model.isParam
if @isParam
$('label[for=contentType]', $(@el)).text('Parameter content type:')
else
$('label[for=contentType]', $(@el)).text('Response Content Type')
$('label[for=contentType]', $(@el)).text('Response Content Type')
@

View File

@@ -9,7 +9,7 @@ class OperationView extends Backbone.View
initialize: ->
render: ->
isMethodSubmissionSupported = jQuery.inArray(@model.httpMethod, @model.supportedSubmitMethods()) >= 0
isMethodSubmissionSupported = true #jQuery.inArray(@model.method, @model.supportedSubmitMethods) >= 0
@model.isReadOnly = true unless isMethodSubmissionSupported
$(@el).html(Handlebars.templates.operation(@model))
@@ -28,26 +28,23 @@ class OperationView extends Backbone.View
contentTypeModel =
isParam: false
# support old syntax
if @model.supportedContentTypes
contentTypeModel.produces = @model.supportedContentTypes
contentTypeModel.consumes = @model.consumes
contentTypeModel.produces = @model.produces
if @model.produces
contentTypeModel.produces = @model.produces
contentTypeView = new ContentTypeView({model: contentTypeModel})
$('.content-type', $(@el)).append contentTypeView.render().el
responseContentTypeView = new ResponseContentTypeView({model: contentTypeModel})
$('.response-content-type', $(@el)).append responseContentTypeView.render().el
# Render each parameter
@addParameter param for param in @model.parameters
@addParameter param, contentTypeModel.consumes for param in @model.parameters
# Render each response code
@addStatusCode statusCode for statusCode in @model.errorResponses
@addStatusCode statusCode for statusCode in @model.responseMessages
@
addParameter: (param) ->
addParameter: (param, consumes) ->
# Render a parameter
param.consumes = consumes
paramView = new ParameterView({model: param, tagName: 'tr', readOnly: @model.isReadOnly})
$('.operation-params', $(@el)).append paramView.render().el
@@ -71,104 +68,21 @@ class OperationView extends Backbone.View
# if error free submit it
if error_free
map = {}
map = {parent: @}
for o in form.serializeArray()
if(o.value? && jQuery.trim(o.value).length > 0)
map[o.name] = o.value
isFileUpload = form.children().find('input[type~="file"]').size() != 0
console.log map
isFormPost = false
consumes = "application/json"
if @model.consumes and @model.consumes.length > 0
# honor the consumes setting above everything else
consumes = @model.consumes[0]
else
for o in @model.parameters
if o.paramType == 'form'
isFormPost = true
consumes = false
map["responseContentType"] = $("div select[name=responseContentType]", $(@el)).val()
map["requestContentType"] = $("div select[name=parameterContentType]", $(@el)).val()
if isFileUpload
consumes = false
else if @model.httpMethod.toLowerCase() == "post" and isFormPost is false
consumes = "application/json"
@model.do(map, @showCompleteStatus, @showErrorStatus, @)
if isFileUpload
# requires HTML5 compatible browser
bodyParam = new FormData()
success: (response, parent) ->
parent.showCompleteStatus response
# add params except file
for param in @model.parameters
if (param.paramType is 'body' or 'form') and param.name isnt 'file' and param.name isnt 'File' and map[param.name]?
bodyParam.append(param.name, map[param.name])
# add files
$.each form.children().find('input[type~="file"]'), (i, el) ->
bodyParam.append($(el).attr('name'), el.files[0])
console.log(bodyParam)
else if isFormPost
bodyParam = new FormData()
for param in @model.parameters
if map[param.name]?
bodyParam.append(param.name, map[param.name])
else
bodyParam = null
for param in @model.parameters
if param.paramType is 'body'
bodyParam = map[param.name]
log "bodyParam = " + bodyParam
headerParams = null
invocationUrl =
if @model.supportHeaderParams()
headerParams = @model.getHeaderParams(map)
@model.urlify(map, false)
else
@model.urlify(map, true)
log 'submitting ' + invocationUrl
$(".request_url", $(@el)).html "<pre>" + invocationUrl + "</pre>"
$(".response_throbber", $(@el)).show()
obj =
type: @model.httpMethod
url: invocationUrl
headers: headerParams
data: bodyParam
contentType: consumes
dataType: 'json'
processData: false
error: (xhr, textStatus, error) =>
@showErrorStatus(xhr, textStatus, error)
success: (data) =>
@showResponse(data)
complete: (data) =>
@showCompleteStatus(data)
paramContentTypeField = $("td select[name=contentType]", $(@el)).val()
if paramContentTypeField
obj.contentType = paramContentTypeField
log 'content type = ' + obj.contentType
if not (obj.data or (obj.type is 'GET' or obj.type is 'DELETE')) and obj.contentType is not "application/x-www-form-urlencoded"
obj.contentType = false
log 'content type is now = ' + obj.contentType
responseContentTypeField = $('.content > .content-type > div > select[name=contentType]', $(@el)).val()
if responseContentTypeField
obj.headers = if obj.headers? then obj.headers else {}
obj.headers.accept = responseContentTypeField
jQuery.ajax(obj)
false
# $.getJSON(invocationUrl, (r) => @showResponse(r)).complete((r) => @showCompleteStatus(r)).error (r) => @showErrorStatus(r)
# handler for hide response link
hideResponse: (e) ->
@@ -182,14 +96,13 @@ class OperationView extends Backbone.View
prettyJson = JSON.stringify(response, null, "\t").replace(/\n/g, "<br>")
$(".response_body", $(@el)).html escape(prettyJson)
# Show error from server
showErrorStatus: (data) ->
@showStatus data
showErrorStatus: (data, parent) ->
parent.showStatus data
# show the status codes
showCompleteStatus: (data) ->
@showStatus data
showCompleteStatus: (data, parent) ->
parent.showStatus data
# Adapted from http://stackoverflow.com/a/2893259/454004
formatXml: (xml) ->
@@ -252,21 +165,39 @@ class OperationView extends Backbone.View
# puts the response data in UI
showStatus: (data) ->
try
code = $('<code />').text(JSON.stringify(JSON.parse(data.responseText), null, 2))
content = data.content.data
headers = data.getHeaders()
# if server is nice, and sends content-type back, we can use it
contentType = headers["Content-Type"]
if content == undefined
code = $('<code />').text("no content")
pre = $('<pre class="json" />').append(code)
catch error
code = $('<code />').text(@formatXml(data.responseText))
else if contentType.indexOf("application/json") == 0
code = $('<code />').text(JSON.stringify(JSON.parse(content), null, 2))
pre = $('<pre class="json" />').append(code)
else if contentType.indexOf("application/xml") == 0
code = $('<code />').text(@formatXml(content))
pre = $('<pre class="xml" />').append(code)
else if contentType.indexOf("text/html") == 0
code = $('<code />').html(content)
pre = $('<pre class="xml" />').append(code)
else
# don't know what to render!
code = $('<code />').text(content)
pre = $('<pre class="json" />').append(code)
response_body = pre
$(".request_url").html "<pre>" + data.request.url + "</pre>"
$(".response_code", $(@el)).html "<pre>" + data.status + "</pre>"
$(".response_body", $(@el)).html response_body
$(".response_headers", $(@el)).html "<pre>" + data.getAllResponseHeaders() + "</pre>"
$(".response_headers", $(@el)).html "<pre>" + JSON.stringify(data.getHeaders()) + "</pre>"
$(".response", $(@el)).slideDown()
$(".response_hider", $(@el)).show()
$(".response_throbber", $(@el)).hide()
hljs.highlightBlock($('.response_body', $(@el))[0])
toggleOperationContent: ->
elem = $('#' + Docs.escapeResourceName(@model.resourceName) + "_" + @model.nickname + "_" + @model.httpMethod + "_" + @model.number + "_content")
elem = $('#' + Docs.escapeResourceName(@model.resourceName) + "_" + @model.nickname + "_" + @model.method + "_" + @model.number + "_content")
if elem.is(':visible') then Docs.collapseOperation(elem) else Docs.expandOperation(elem)

View File

@@ -19,18 +19,23 @@ class ParameterView extends Backbone.View
else
$('.model-signature', $(@el)).html(@model.signature)
isParam = false
if @model.isBody
isParam = true
contentTypeModel =
isParam: false
isParam: isParam
# support old syntax
if @model.supportedContentTypes
contentTypeModel.produces = @model.supportedContentTypes
contentTypeModel.consumes = @model.consumes
if @model.produces
contentTypeModel.produces = @model.produces
if isParam
parameterContentTypeView = new ParameterContentTypeView({model: contentTypeModel})
$('.parameter-content-type', $(@el)).append parameterContentTypeView.render().el
contentTypeView = new ContentTypeView({model: contentTypeModel})
$('.content-type', $(@el)).append contentTypeView.render().el
else
responseContentTypeView = new ResponseContentTypeView({model: contentTypeModel})
$('.response-content-type', $(@el)).append responseContentTypeView.render().el
@

View File

@@ -1,74 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>Swagger UI</title>
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='css/hightlight.default.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='lib/handlebars-1.0.rc.1.js' type='text/javascript'></script>
<script src='lib/underscore-min.js' type='text/javascript'></script>
<script src='lib/backbone-min.js' type='text/javascript'></script>
<script src='lib/swagger.js' type='text/javascript'></script>
<script src='swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
<title>Swagger UI</title>
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='css/hightlight.default.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="lib/shred.bundle.js" /></script>
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='lib/handlebars-1.0.rc.1.js' type='text/javascript'></script>
<script src='lib/underscore-min.js' type='text/javascript'></script>
<script src='lib/backbone-min.js' type='text/javascript'></script>
<script src='lib/swagger.js' type='text/javascript'></script>
<script src='swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
<script type="text/javascript">
$(function () {
window.swaggerUi = new SwaggerUi({
discoveryUrl:"http://localhost:8002/api/api-docs",
dom_id:"swagger-ui-container",
supportHeaderParams: false,
supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
onComplete: function(swaggerApi, swaggerUi){
if(console) {
console.log("Loaded SwaggerUI")
console.log(swaggerApi);
console.log(swaggerUi);
}
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
},
onFailure: function(data) {
if(console) {
console.log("Unable to Load SwaggerUI");
console.log(data);
}
},
docExpansion: "none"
});
<script type="text/javascript">
$(function () {
window.swaggerUi = new SwaggerUi({
discoveryUrl:"http://petstore.swagger.wordnik.com/api/api-docs.json",
apiKey:"special-key",
dom_id:"swagger-ui-container",
supportHeaderParams: false,
supportedSubmitMethods: ['get', 'post', 'put'],
onComplete: function(swaggerApi, swaggerUi){
if(console) {
console.log("Loaded SwaggerUI")
console.log(swaggerApi);
console.log(swaggerUi);
}
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
},
onFailure: function(data) {
if(console) {
console.log("Unable to Load SwaggerUI");
console.log(data);
}
},
docExpansion: "none"
});
$('#input_apiKey').change(function() {
var key = $('#input_apiKey')[0].value;
console.log("key: " + key);
if(key && key.trim() != "") {
window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "query"));
}
})
window.swaggerUi.load();
});
window.swaggerUi.load();
});
</script>
</script>
</head>
<body>
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.wordnik.com">swagger</a>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.wordnik.com">swagger</a>
<form id='api_selector'>
<div class='input icon-btn'>
<img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
</div>
<div class='input icon-btn'>
<img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
</div>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl"
type="text"/></div>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
<div class='input'><a id="explore" href="#">Explore</a></div>
</form>
</div>
<form id='api_selector'>
<div class='input icon-btn'>
<img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
</div>
<div class='input icon-btn'>
<img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
</div>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
<div class='input'><a id="explore" href="#">Explore</a></div>
</form>
</div>
</div>
<div id="message-bar" class="swagger-ui-wrap">
&nbsp;
&nbsp;
</div>
<div id="swagger-ui-container" class="swagger-ui-wrap">

View File

@@ -1,10 +1,10 @@
<label for="contentType"></label>
<select name="contentType">
{{#if produces}}
{{#each produces}}
{{#each produces}}
<option value="{{{this}}}">{{{this}}}</option>
{{/each}}
{{else}}
<option value="application/json">application/json</option>
<option value="application/json">application/json</option>
{{/if}}
</select>

View File

@@ -1,49 +1,49 @@
<ul class='operations' >
<li class='{{httpMethod}} operation' id='{{resourceName}}_{{nickname}}_{{httpMethod}}_{{number}}'>
<li class='{{method}} operation' id='{{resourceName}}_{{nickname}}_{{method}}_{{number}}'>
<div class='heading'>
<h3>
<span class='http_method'>
<a href='#!/{{resourceName}}/{{nickname}}_{{httpMethod}}_{{number}}' class="toggleOperation">{{httpMethod}}</a>
<a href='#!/{{resourceName}}/{{nickname}}_{{method}}_{{number}}' class="toggleOperation">{{method}}</a>
</span>
<span class='path'>
<a href='#!/{{resourceName}}/{{nickname}}_{{httpMethod}}_{{number}}' class="toggleOperation">{{path}}</a>
<a href='#!/{{resourceName}}/{{nickname}}_{{method}}_{{number}}' class="toggleOperation">{{path}}</a>
</span>
</h3>
<ul class='options'>
<li>
<a href='#!/{{resourceName}}/{{nickname}}_{{httpMethod}}_{{number}}' class="toggleOperation">{{{summary}}}</a>
<a href='#!/{{resourceName}}/{{nickname}}_{{method}}_{{number}}' class="toggleOperation">{{{summary}}}</a>
</li>
</ul>
</div>
<div class='content' id='{{resourceName}}_{{nickname}}_{{httpMethod}}_{{number}}_content' style='display:none'>
<div class='content' id='{{resourceName}}_{{nickname}}_{{method}}_{{number}}_content' style='display:none'>
{{#if notes}}
<h4>Implementation Notes</h4>
<p>{{{notes}}}</p>
{{/if}}
{{#if responseClass}}
<h4>Response Class</h4>
<p><span class="model-signature" /></p>
<br/>
<div class="content-type" />
<h4>Response Class</h4>
<p><span class="model-signature" /></p>
<br/>
<div class="response-content-type" />
{{/if}}
<form accept-charset='UTF-8' class='sandbox'>
<div style='margin:0;padding:0;display:inline'></div>
{{#if parameters}}
<h4>Parameters</h4>
<table class='fullwidth'>
<thead>
<tr>
<th style="width: 100px; max-width: 100px">Parameter</th>
<th style="width: 310px; max-width: 310px">Value</th>
<th style="width: 200px; max-width: 200px">Description</th>
<th style="width: 100px; max-width: 100px">Parameter Type</th>
<th style="width: 220px; max-width: 230px">Data Type</th>
</tr>
</thead>
<tbody class="operation-params">
<div style='margin:0;padding:0;display:inline'></div>
{{#if parameters}}
<h4>Parameters</h4>
<table class='fullwidth'>
<thead>
<tr>
<th style="width: 100px; max-width: 100px">Parameter</th>
<th style="width: 310px; max-width: 310px">Value</th>
<th style="width: 200px; max-width: 200px">Description</th>
<th style="width: 100px; max-width: 100px">Parameter Type</th>
<th style="width: 220px; max-width: 230px">Data Type</th>
</tr>
</thead>
<tbody class="operation-params">
</tbody>
</tbody>
</table>
{{/if}}
{{#if errorResponses}}

View File

@@ -10,7 +10,7 @@
{{else}}
<textarea class='body-textarea' name='{{name}}'></textarea>
<br />
<div class="content-type" />
<div class="parameter-content-type" />
{{/if}}
{{/if}}
{{else}}
@@ -27,4 +27,3 @@
<td>
<span class="model-signature"></span>
</td>

View File

@@ -9,7 +9,7 @@
{{else}}
<textarea class='body-textarea' placeholder='(required)' name='{{name}}'></textarea>
<br />
<div class="content-type" />
<div class="parameter-content-type" />
{{/if}}
{{/if}}
{{else}}

View File

@@ -1,26 +1,26 @@
<div class='heading'>
<h2>
<a href='#!/{{name}}' onclick="Docs.toggleEndpointListForResource('{{name}}');">/{{name}}</a>
</h2>
<ul class='options'>
<li>
<a href='#!/{{name}}' id='endpointListTogger_{{name}}'
onclick="Docs.toggleEndpointListForResource('{{name}}');">Show/Hide</a>
</li>
<li>
<a href='#' onclick="Docs.collapseOperationsForResource('{{name}}'); return false;">
List Operations
</a>
</li>
<li>
<a href='#' onclick="Docs.expandOperationsForResource('{{name}}'); return false;">
Expand Operations
</a>
</li>
<li>
<a href='{{url}}'>Raw</a>
</li>
</ul>
<h2>
<a href='#!/{{name}}' onclick="Docs.toggleEndpointListForResource('{{name}}');">/{{name}}</a>
</h2>
<ul class='options'>
<li>
<a href='#!/{{name}}' id='endpointListTogger_{{name}}'
onclick="Docs.toggleEndpointListForResource('{{name}}');">Show/Hide</a>
</li>
<li>
<a href='#' onclick="Docs.collapseOperationsForResource('{{name}}'); return false;">
List Operations
</a>
</li>
<li>
<a href='#' onclick="Docs.expandOperationsForResource('{{name}}'); return false;">
Expand Operations
</a>
</li>
<li>
<a href='{{url}}'>Raw</a>
</li>
</ul>
</div>
<ul class='endpoints' id='{{name}}_endpoint_list' style='display:none'>