TT#32555 swaggerui layout

Change-Id: Id1b5b8bd30450b50afaba2f8f4e695a4c6ea1148
changes/00/23200/8
Gerhard Jungwirth 8 years ago
parent 7b5c9d9fa6
commit 41fa667878

@ -54,6 +54,10 @@ sub auto :Private {
sub GET : Allow {
my ($self, $c) = @_;
if ($c->req->params->{swaggerui}) {
$c->detach('swaggerui');
}
my $blacklist = {
"DomainPreferenceDefs" => 1,
"SubscriberPreferenceDefs" => 1,
@ -275,6 +279,19 @@ sub swagger :Private {
return;
}
sub swaggerui :Private {
my ($self, $c) = @_;
$c->stash(template => 'api/swaggerui.tt');
$c->forward($c->view);
# $c->response->headers(HTTP::Headers->new(
# Content_Language => 'en',
# Content_Type => 'application/xhtml+xml',
# #$self->collections_link_headers,
# ));
}
sub HEAD : Allow {
my ($self, $c) = @_;
$c->forward(qw(GET));

@ -154,7 +154,7 @@ sub generate_swagger_datastructure {
schema => {
# '$ref' => 'http://json.schemastore.org/json-patch.json#/',
# "$ref": "https://raw.githubusercontent.com/fge/sample-json-schemas/master/json-patch/json-patch.json"
'$ref' => '/js/schemas/json-patch.json#/',
'$ref' => '/static/js/schemas/json-patch.json#/',
# type => 'array',
# items => {
# type => 'object',

@ -0,0 +1,54 @@
.sipwclass { padding: 1em }
.content .sipwclass { margin-left: 2em }
h1 { color: white; background-color: #54893B; padding: 1.7em; }
.sipwclass h6 { font-size: 1.1em; }
.sipwclass code { white-space: pre-wrap; background-color: transparent; border: none; color: #000; font-size: 0.9em; display: block; margin: 0 0 20px 0;}
.sipwclass table { width: 100%; border-collapse: collapse; }
.sipwclass th, .sipwclass td { border: 1px solid #aaa; width: 50%; padding: 20px; }
.sipwclass td { vertical-align: top; }
.sipwclass span { font-family: monospace; }
.sipwclass a { color: #54893B; border-bottom: 1px dotted #54893B; }
.sipwclass a:hover { color: #54893B; text-decoration: underline; border: none; }
.sipwclass .ui-state-active { border: 1px solid #54893B; color: #54893B; }
.sipwclass .ui-state-default { color: #54893B; }
.sipwclass .ui-widget { font-family: inherit; }
.sipwclass .ui-widget-content { background: none; }
/* toc numbering */
.sipwclass nav ol { counter-reset: item }
.sipwclass nav li { display: block }
.sipwclass nav li:before { content: counters(item, ".") " "; counter-increment: item }
/* header numbering */
.sipwclass body { counter-reset: h2counter; counter-reset: h3counter; }
h1 { counter-reset: h2counter; }
.sipwclass h2:before { content: counter(h2counter) "\0000a0\0000a0"; counter-increment: h2counter; counter-reset: h3counter; }
.sipwclass h2.nocount:before { content: none; counter-increment: none; }
.sipwclass h2 { counter-reset: h3counter; }
.sipwclass h3:before { counter-increment: h3counter; content: counter(h2counter) "." counter(h3counter) "\0000a0\0000a0"; }
/*.sipwclass h3:before { content: counter(h2counter) "." counter(h3counter) "\0000a0\0000a0"; counter-increment: h3counter; }*/
/* print properties */
@media print { .ui-accordion > *{display:block !important;} }
.pagebreak { page-break-after: always; }
.sipwclass.chapter { page-break-inside: avoid; }
.sipwclass {
font-family: 'Open Sans', sans-serif;
}
/* use same width as swagger doc for intro chapters */
body {
width: 100%;
max-width: 1460px;
margin: 8px auto;
}
/* own additions: remove servers view and swagger file URI */
.swagger-ui .global-server-container {
display: none;
}
.swagger-ui .info a {
display: none;
}

@ -0,0 +1,166 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
<defs>
<symbol viewBox="0 0 20 20" id="unlocked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
</symbol>
<symbol viewBox="0 0 20 20" id="locked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="close">
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="large-arrow">
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="large-arrow-down">
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="jump-to">
<path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="expand">
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
</symbol>
</defs>
</svg>
<!-- before div -->
<div id="chswaggerui" style="visibility: hidden"></div> <!-- for the TOC link -->
<div id="swagger-ui"></div>
<!-- after div -->
<script src="/static/js/swaggerui/swagger-ui-bundle.js"> </script>
<script src="/static/js/swaggerui/swagger-ui-standalone-preset.js"> </script>
<!-- React for Testing!!!!! -->
<!-- script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script -->
<!-- script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script -->
<!-- script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script -->
<!-- END REACT -->
<!-- script type="text/babel" -->
<script>
//----------------------------------------
// adapted from documentation: docs/customization/custom-layout.md
//import React from "react"
// Create the layout component
// class OperationsLayout extends React.Component {
// render() {
// const {
// getComponent
// } = this.props;
// const Operations = getComponent("Operations", true);
// return React.createElement(
// "div",
// null,
// React.createElement(Operations, null)
// );
// }
// }
// // Create the plugin that provides our layout component
// const OperationsLayoutPlugin = () => {
// return {
// components: {
// OperationsLayout: OperationsLayout
// }
// };
// };
function HideTopbarPlugin() {
// this plugin overrides the Topbar component to return nothing
var x = 5;
return {
components: {
Topbar: function() { return null },
Servers: function() { return null }
}
}
}
//---------------------------------------
</script>
<script>
window.onload = function() {
// Build a system
const ui = SwaggerUIBundle({
url: "/api?swagger=1",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
HideTopbarPlugin
],
layout: "StandaloneLayout",
//layout: "BaseLayout",
docExpansion: "none",
defaultModelsExpandDepth: 0,
validatorUrl: null
})
window.ui = ui
};
</script>
[% # vim: set tabstop=4 syntax=html expandtab: -%]

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sipwise NGCP HTTP API documentation (with SwaggerUI)</title>
<!-- link rel="stylesheet" href="/static/css/bootstrap/bootstrap.css"></link -->
<!-- link rel="stylesheet" href="/static/css/bootstrap/bootstrap-responsive.css"></link -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="/static/css/sipwise-apidoc.css">
<link rel="stylesheet" type="text/css" href="/static/js/swaggerui/swagger-ui.css" >
<!-- link rel="stylesheet" type="text/css" href="/static/js/swaggerui/swagger-own.css" -->
</head>
<body>
[%
chapters = [
{ level = 2, id = 'intro', title = 'Introduction', },
{ level = 2, id = 'auth', title = 'Authentication', },
{ level = 2, id = 'chswaggerui', title = 'API', noswclass = 1, },
];
-%]
<h1>Sipwise NGCP HTTP API Documentation (with SwaggerUI)</h1>
<div class="content">
<div class="chapter sipwclass">
<h2 class="nocount">Table of Contents</h2>
<nav>
<ol>
[% FOR chapter IN chapters %]
[% IF loop.prev && loop.prev.level > chapter.level -%]
</ol></li>
[% END -%]
<li><a href="#[% chapter.id %]">[% chapter.title %]</a>
[% IF loop.next && loop.next.level > chapter.level -%]
<ol>
[% ELSE -%]
</li>
[% END -%]
[% END -%]
</ol>
</nav>
</div>
[% FOR chapter IN chapters -%]
[% IF loop.prev && loop.prev.level >= chapter.level -%]
<div class="pagebreak"></div>
[% END -%]
<div class="chapter[% UNLESS chapter.noswclass; ' sipwclass'; END; %]">
[%
t = 'api/root/' _ chapter.id _ '.tt';
INCLUDE $t level=chapter.level title=chapter.title id=chapter.id uri=chapter.uri;
-%]
</div>
[% END -%]
</div>
</body>
</html>
[% # vim: set tabstop=4 syntax=html expandtab: -%]
Loading…
Cancel
Save