index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Swagger UI</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <style>
  7. body {
  8. margin: 0;
  9. padding-top: 40px;
  10. }
  11. nav {
  12. position: fixed;
  13. top: 0;
  14. width: 100%;
  15. z-index: 100;
  16. }
  17. #links_container {
  18. margin: 0;
  19. padding: 0;
  20. background-color: #0033a0;
  21. }
  22. #links_container li {
  23. display: inline-block;
  24. padding: 10px;
  25. color: white;
  26. cursor: pointer;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <nav>
  32. <ul id="links_container">
  33. </ul>
  34. </nav>
  35. <redoc scroll-y-offset="body > nav"></redoc>
  36. <script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script>
  37. <script>
  38. function insertParam(key, value) {
  39. key = encodeURIComponent(key);
  40. value = encodeURIComponent(value);
  41. var kvp = document.location.search.substr(1).split('&');
  42. let i=0;
  43. for(; i<kvp.length; i++){
  44. if (kvp[i].startsWith(key + '=')) {
  45. let pair = kvp[i].split('=');
  46. pair[1] = value;
  47. kvp[i] = pair.join('=');
  48. break;
  49. }
  50. }
  51. if(i >= kvp.length){
  52. kvp[kvp.length] = [key,value].join('=');
  53. }
  54. let params = kvp.join('&');
  55. document.location.search = params;
  56. }
  57. const apiIdx = 'apiIdx';
  58. var urlParams = new URLSearchParams(window.location.search);
  59. var apiIdxVal = urlParams.get(apiIdx);
  60. if (apiIdxVal) {
  61. apiIdxVal = parseInt(apiIdxVal);
  62. } else {
  63. apiIdxVal = 0;
  64. }
  65. var apis = [
  66. {
  67. name: 'Cloudevent API',
  68. url: './swagger_cloudevent.yaml'
  69. },
  70. {
  71. name: 'Cloudid API',
  72. url: './swagger_cloudid.yaml'
  73. },
  74. {
  75. name: 'Compute API',
  76. url: './swagger_compute.yaml'
  77. },
  78. {
  79. name: 'Identity API',
  80. url: './swagger_identity.yaml'
  81. },
  82. {
  83. name: 'Image API',
  84. url: './swagger_image.yaml'
  85. },
  86. {
  87. name: 'Monitor API',
  88. url: './swagger_monitor.yaml'
  89. },
  90. {
  91. name: 'Notify API',
  92. url: './swagger_notify.yaml'
  93. },
  94. {
  95. name: 'Yunionconf API',
  96. url: './swagger_yunionconf.yaml'
  97. },
  98. ];
  99. Redoc.init(apis[apiIdxVal].url);
  100. function onClick() {
  101. var url = this.getAttribute('data-link');
  102. Redoc.init(url);
  103. }
  104. var $list = document.getElementById('links_container');
  105. apis.forEach(function(api, idx) {
  106. var $listitem = document.createElement('li');
  107. $listitem.setAttribute('data-link', api.url);
  108. var tmpIdx = idx;
  109. $listitem.innerText = api.name;
  110. $listitem.addEventListener('click', function() {
  111. var url = this.getAttribute('data-link');
  112. insertParam(apiIdx, tmpIdx);
  113. });
  114. $list.appendChild($listitem);
  115. });
  116. </script>
  117. </body>
  118. </html>