openapi-gui
Version:
GUI / visual editor for creating and editing OpenApi / Swagger definitions
184 lines (167 loc) • 6.95 kB
HTML
<html lang="en" class="has-navbar-fixed-top">
<head>
<title>OpenAPI-GUI v3.0.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf8">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/github.min.css">
<link href="css/buefy.min.css" rel="stylesheet">
<link href="css/balloon.min.css" rel="stylesheet">
<link href="css/jsoneditor.min.css" rel="stylesheet" type="text/css">
<link href="css/app.css" rel="stylesheet">
<script type='text/javascript' src='js/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script type='text/javascript' src="js/js-yaml.min.js"></script>
<script type='text/javascript' src="js/jsonpatch.js"></script>
<script type='text/javascript' src="js/jsoneditor.min.js"></script>
<script type='text/javascript' src="data/static.js"></script>
<script type='text/javascript' src="js/vue.min.js"></script>
<script type='text/javascript' src="js/vuelidate.min.js"></script>
<script type='text/javascript' src="js/validators.min.js"></script>
<script type='text/javascript' src="js/buefy.min.js"></script>
<script type='text/javascript' src="js/markdown-it.min.js"></script>
<script src="src/resource/resource.js"></script>
<script src="src/method/method.js"></script>
<script src="src/parameter/parameter.js"></script>
<script src="src/items/items.js"></script>
<script src="src/app/gui.js"></script>
<script src="src/api-definition/api-definition.js"></script>
<script src="src/api-yaml/api-yaml.js"></script>
<script src="src/app/app.js"></script>
</head>
<body>
<div id="loading" class="section">
<div class="container is-fluid">
<article class="message">
<div class="message-header">
<p>Loading</p>
<button class="delete"></button>
</div>
<div class="message-body">
<strong>Please wait!</strong> OpenAPI-GUI v3 is loading... <progress id="progress" class="progress is-success" value="0" max="100">0 %</progress>
<p>In case OpenAPI-GUI does not start, please use the <a href="/rescue.html">rescue utility</a>.</p>
</div>
</article>
</div>
</div>
<div id="main-container">
<gui-main :openapi='container.openapi' :importschema='importschema'></gui-main>
</div>
<script>
var def = [];
var cgData = {
clients : [],
servers : []
};
window.intelligentBackend = false;
function resolveDef(index) {
$('#progress').attr('value', parseInt($('#progress').attr('value'))+16.66);
def[index].resolve();
}
$(document).ready(function(){
$.ajax('https://generator.swagger.io/api/gen/clients',{
success: function(data) {
cgData.clients = data;
}
});
$.ajax('https://generator.swagger.io/api/gen/servers',{
success: function(data) {
cgData.servers = data;
}
});
// Create the Deferred instances that can be handed to $.when()
for (t=0;t<8;t++) {
def.push($.Deferred());
}
// Set up the chain of events...
$.when(def[0], def[1], def[2], def[3], def[4], def[5], def[6], def[7]).then(function() {
if (screen && screen.orientation) {
try {
screen.orientation.lock('landscape');
}
catch (ex) {};
}
$(function() { $.support.transition = false; });
app_main();
$('#loading').hide();
});
// And finally: Make the actual ajax calls:
$('#template-gui-main').load('src/app/gui.html', function(data,status,jqXHR) {
if (jqXHR.getResponseHeader('X-OpenAPI-GUI')) {
window.intelligentBackend = true;
}
resolveDef(0); });
$('#template-resource').load('src/resource/resource.html', function() { resolveDef(1); });
$('#template-method').load('src/method/method.html', function() { resolveDef(2); });
$('#template-parameter').load('src/parameter/parameter.html', function() { resolveDef(3); });
$('#template-definition').load('src/api-definition/output.html', function() { resolveDef(4); });
$('#template-yaml').load('src/api-yaml/output.html', function() { resolveDef(5); });
$('#template-items').load('src/items/items.html', function() { resolveDef(6); });
// def(7) is our chance to load a spec from a querystring parameter
var loadUrl = getParameterByName('url');
var resolveNow = true;
if (loadUrl) {
$.ajax(loadUrl,{
success: function(data) {
try {
if (typeof data === 'string') {
data = jsyaml.safeLoad(data);
}
if (data.swagger && (data.swagger === '2.0')) {
resolveNow = false;
convertOpenApi2(data,function(schema){
openapi = preProcessDefinition(schema);
resolveDef(7);
});
}
else {
openapi = preProcessDefinition(data);
}
}
catch (ex) {
alert(ex);
}
},
complete: function() {
if (resolveNow) resolveDef(7);
}
});
}
else {
resolveDef(7);
}
});
</script>
<div class="hidden">
<div id="template-gui-main"></div>
<div id="template-resource"></div>
<div id="template-method"></div>
<div id="template-parameter"></div>
<div id="template-definition"></div>
<div id="template-yaml"></div>
<div id="template-items"></div>
</div>
<div class="modal fade" id="schemaModal">
<div class="card">
<div class="card-header">
<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
<h3 class="title" id="schemaModalTitle">Schema Editor</h3>
</div>
<div class="card-content">
<div id="schemaContainer">
</div>
</div>
<div class="card-footer">
<p class="card-footer-item">
<a href="#" class="button is-warning" onclick="schemaEditorClose()">Close</a>
</p>
<p class="card-footer-item">
<a href="#" class="button is-primary" onclick="schemaEditorSave()">Save changes</a>
</p>
</div>
</div>
</div>
</body>
</html>