samples/index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swagger Pet Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><a href="api-docs">Swagger API (JSON)</a></li>
<li><a href="api-docs/PetStore.yaml">Swagger API (YAML)</a></li>
</ul>
</div>
</nav>
<main class="container">
<header class="jumbotron alert alert-info">
<h1>Swagger Pet Store</h1>
<p>
This sample API is powered by the <a href="https://apitools.dev/swagger-express-middleware/docs/middleware/mock.html">Swagger Express Middleware mock</a>
in an otherwise empty Express application. There's no extra configuration, custom code, or third-party-middleware.
</p>
<p>
<a href="https://apitools.dev/swagger-express-middleware/docs/walkthroughs/" class="btn btn-info">Read the Walkthroughs</a>
</p>
</header>
<form class="well">
<fieldset>
<legend class="col-md-9 col-md-offset-2">Add/Edit a Pet</legend>
<p class="col-md-7 col-md-offset-2">
Use a tool like <a href="http://www.getpostman.com/">Postman</a> or <a href="http://curl.haxx.se/">curl</a>
to perform more advanced operations. See <a href="api-docs/PetStore.yaml">the full Swagger API</a>
for all the operations available. And be sure to <a href="pets?type=dog">try</a>
<a href="pets?tags=furry&tags=brown">a</a> <a href="pets?vet.address.state=CA">few</a>
<a href="pets?type=dog&tags=big&vet.address.city=San%20Francisco">queries</a>.
</p>
<div class="col-md-7 col-md-offset-2">
<div class="form-group">
<textarea id="pet" name="pet" cols="60" rows="15" class="form-control" style="font-family: monospace"
onkeydown="updateUI()" onkeyup="updateUI()" onchange="updateUI()">{
"name": "Fido",
"type": "dog",
"dob": "2004-02-11",
"tags": ["brown","furry","big"],
"vet": {
"name": "Acme Veterinarian Clinic",
"address": {
"street": "123 Main St.",
"city": "San Francisco",
"state": "CA",
"zipCode": 94118
}
}
} </textarea>
<div id="json-error" class="alert alert-danger">
</div>
</div>
</div>
<p>
<span class="col-xs-6 col-sm-4 col-md-2">
<button type="button" class="btn btn-success btn-block" onclick="savePet()">
<i class="glyphicon glyphicon-ok"></i>
Save <span class="pet-label">Fido</span>
</button>
</span>
<span class="col-xs-6 col-sm-4 col-md-2">
<button type="button" class="btn btn-danger btn-block" onclick="deletePet()">
<i class="glyphicon glyphicon-remove"></i>
Delete <span class="pet-label">Fido</span>
</button>
</span>
<span class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0 col-md-2">
<a href="pets" class="btn btn-default btn-block">
<i class="glyphicon glyphicon-list"></i>
All Pets
</a>
</span>
</p>
</fieldset>
</form>
<form id="pet-photos-form" class="well" action="pets/Fido/photos" method="post" enctype="multipart/form-data"
target="photo-results" onsubmit="setTimeout(savePhoto, 500)">
<fieldset>
<legend class="col-md-9 col-md-offset-2">Add Photos</legend>
<p class="col-md-7 col-md-offset-2">
You can also delete or view individual photos <a id="pet-photo-link" href="pets/Fido/photos/123456789">by their ID</a>.
See <a href="api-docs/PetStore.yaml">the full Swagger API</a> for all the operations available.
</p>
<div class="col-sm-8 col-md-7 col-md-offset-2">
<div class="form-group">
<input id="photo" name="photo" type="file" accept="image/*" required class="form-control" />
</div>
<div class="form-group">
<label for="label">Name the photo</label><br />
<input id="label" name="label" type="text" required class="form-control" />
</div>
<div class="form-group">
<label for="description">Description (optional)</label><br />
<input id="description" name="description" type="text" class="form-control" />
</div>
</div>
<p>
<span class="col-sm-4 col-xs-6 col-md-2">
<button type="submit" class="btn btn-success btn-block">
<i class="glyphicon glyphicon-camera"></i>
Add Photo
</button>
</span>
<span class="col-sm-4 col-xs-6 col-md-2">
<a id="pet-photos-link" href="pets/Fido/photos" class="btn btn-default btn-block">
<i class="glyphicon glyphicon-picture"></i>
<span class="pet-label">Fido</span>'s Photos
</a>
</span>
</p>
</fieldset>
</form>
<iframe id="photo-results" name="photo-results" style="display: none"></iframe>
</main>
<article id="results-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 id="modal-title" class="modal-title">Results</h4>
</header>
<pre id="modal-body" class="modal-body" style="width: 100%; border: none">
</pre>
</div>
</div>
</article>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
let pet, photo;
$(updateUI);
function updateUI() {
if (parsePet()) {
$('.pet-label').text(pet.name);
$('.btn').removeAttr('disabled');
$('#pet-photos-form').attr('action', 'pets/' + pet.name + '/photos');
$('#pet-photos-link').attr('href', 'pets/' + pet.name + '/photos');
photo && $('#pet-photo-link').attr('href', 'pets/' + pet.name + '/photos/' + photo.id);
}
else {
$('.pet-label').text('Pet');
$('.btn').attr('disabled', 'disabled');
$('#pet-photos-form').attr('action', '');
$('#pet-photos-link').attr('href', '');
}
}
function savePet() {
parsePet() &&
$.ajax({
type: 'POST',
url: 'pets',
headers: {
accept: 'application/json'
},
contentType: 'application/json',
data: $('#pet').val(),
dataType: 'text'
}).always(showResponse);
}
function deletePet() {
parsePet() &&
$.ajax({
type: 'DELETE',
url: 'pets/' + pet.name,
headers: {
accept: 'application/json'
},
dataType: 'text'
}).always(showResponse);
}
function savePhoto() {
let json = $('#photo-results').contents().find('body').text();
if (json) {
photo = JSON.parse(json);
$('#pet-photos-form')[0].reset();
updateUI();
}
let data = parseResponse(json);
showModal('HTTP 201 Created', data);
}
function parsePet() {
try {
pet = JSON.parse($('#pet').val());
$('#json-error').hide();
return true;
}
catch (err) {
$('#json-error')
.text('JSON Error: ' + err.message)
.show();
}
}
function parseResponse(data) {
data = typeof data === 'string' ? data : data.responseText;
if (data) {
try {
return JSON.stringify(JSON.parse(data), null, 4);
}
catch (err) {
return data;
}
}
else {
return '<< empty response >>';
}
}
function showResponse(data, status, ajax) {
data = parseResponse(data || ajax);
if (typeof ajax === 'object') {
status = 'HTTP ' + ajax.status + ' ' + ajax.statusText;
}
else if (typeof ajax === 'string') {
status = 'HTTP ' + ajax + ' Error';
}
showModal(status, data);
}
function showModal(header, text) {
$('#modal-title').text(header);
$('#modal-body').text(text);
$('#results-modal').modal();
}
</script>
</body>
</html>