rest-api-doc v2 w/ responsive page

DeepSpaceDev · Oct 25, 2016 · a0a835f · a0a835f
1 parent d59475d
commit a0a835f
Show file tree

Hide file tree

Showing 10 changed files with 586 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 bower_components
+.idea
diff --git a/bower.json b/bower.json
@@ -19,7 +19,10 @@
   ],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.1.0",
-    "paper-input": "^1.1.11"
+    "paper-input": "^1.1.11",
+    "paper-drawer-panel": "^1.0.10",
+    "paper-icon-button": "^1.1.3",
+    "paper-item": "^1.2.1"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

diff --git a/demo/doc.html b/demo/doc.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>rest-api-doc Demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../rest-api-doc.html">
+  </head>
+  <body unresolved>
+
+    <p>An example of <code>&lt;rest-api-doc&gt;</code>:</p>
+
+    <rest-api-doc url="http://api.apnea-core.com/login" method="post" action="signin">
+    Login to APNEA-CORE and retieve access token.
+    </rest-api-doc>
+
+    <script>
+      var seedElement = document.querySelector('rest-api-doc');
+      seedElement.body = [{
+        key: 'mail',
+        type: 'string',
+        optional: false
+      },{
+        key: 'password',
+        type: 'string',
+        optional: false
+      },{
+        key: 'type',
+        type: 'string',
+        values: 'admin, organizer, judge',
+        optional: false
+      }];
+    </script>
+
+  </body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -9,38 +9,46 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>rest-api-doc Demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../rest-api-doc.html">
-  </head>
-  <body unresolved>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>rest-api-doc Demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../rest-api-page.html">
+  <link rel="import" href="../rest-api-doc.html">
+</head>
+<body unresolved>
 
-    <p>An example of <code>&lt;rest-api-doc&gt;</code>:</p>
+<p>An example of <code>&lt;rest-api-page&gt;</code>:</p>
 
-    <rest-api-doc url="http://api.apnea-core.com/login" method="post" action="signin">
-    Login to APNEA-CORE and retieve access token.
-    </rest-api-doc>
+<rest-api-page base-url="http://api.xtrm-sports.com">
+  <rest-api-doc title="Get Location" method="GET" url="/get">
+    <rest-api-param key="id" type="Number" values="1, 12, 30">The ID for the location to fetch.</rest-api-param>
+    <rest-api-param key="language" type="String" optional values="de, en">The requested language for the result.</rest-api-param>
+    <rest-api-explanation>Get every location by ID.</rest-api-explanation>
+  </rest-api-doc>
+  <rest-api-doc title="Search"></rest-api-doc>
+  <rest-api-doc title="List Locations"></rest-api-doc>
+  <rest-api-doc title="Add Location"></rest-api-doc>
+</rest-api-page>
 
-    <script>
-      var seedElement = document.querySelector('rest-api-doc');
-      seedElement.body = [{
-        key: 'mail',
-        type: 'string',
-        optional: false
-      },{
-        key: 'password',
-        type: 'string',
-        optional: false
-      },{
-        key: 'type',
-        type: 'string',
-        values: 'admin, organizer, judge',
-        optional: false
-      }];
-    </script>
+<script>
+  var seedElement = document.querySelector('rest-api-page');
+  /*seedElement.body = [{
+    key: 'mail',
+    type: 'string',
+    optional: false
+  },{
+    key: 'password',
+    type: 'string',
+    optional: false
+  },{
+    key: 'type',
+    type: 'string',
+    values: 'admin, organizer, judge',
+    optional: false
+  }];*/
+</script>
 
-  </body>
+</body>
 </html>
diff --git a/doc-helper.html b/doc-helper.html
@@ -0,0 +1,2 @@
+<link rel="import" href="rest-api-page.html">
+<link rel="import" href="rest-api-doc.html">
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
        match the folder name, add a src="&lt;main-component&gt;.html" attribute,
        where &lt;main-component&gt;.html" is a file that imports all of the
        components you want documented. -->
-  <iron-component-page></iron-component-page>
+  <iron-component-page src="doc-helper.html"></iron-component-page>
 
 </body>
 </html>
diff --git a/rest-api-doc.html b/rest-api-doc.html
@@ -22,7 +22,7 @@
 
 @group REST Elements
 @element rest-api-doc
-@demo demo/index.html
+@demo demo/doc.html
 @hero hero.svg
 -->
 <dom-module id="rest-api-doc">
@@ -49,17 +49,6 @@
       #description {
         padding: 8px;
       }
-      paper-input {
-        display: inline-block;
-      }
-      .keyValueHeader {
-        background-color: rgb(220, 220, 220);
-        padding: 8px;
-        margin: 8px 0;
-      }
-      .keyValueContainer {
-        margin-left: 16px;
-      }
       paper-button {
         position: absolute;
         top: 8px;
@@ -73,44 +62,11 @@
         padding: 8px;
       }
     </style>
-    <div id="request">
+    <!--<div id="request">
       <span id="method">[[method]]</span>
       <span id="url">[[url]]</span>
     </div>
-    <div id="description"><content></content></div>
-    <div id="params">
-      <template is="dom-if" if="[[params]]">
-        <div class="keyValueHeader">Params</div>
-        <div class="keyValueContainer">
-          <template id="paramRepeat" is="dom-repeat" items="[[params]]">
-            <paper-input label="[[item.key]]"></paper-input>
-          </template>
-        </template>
-      </div>
-    </div>
-    <div id="headers">
-      <template is="dom-if" if="[[headers]]">
-        <div class="keyValueHeader">Headers</div>
-        <div class="keyValueContainer">
-          <template id="headerRepeat" is="dom-repeat" items="[[headers]]">
-            <paper-input label="[[item.key]]"></paper-input>
-          </template>
-        </template>
-      </div>
-    </div>
-    <div id="body">
-      <template is="dom-if" if="[[body]]">
-        <div class="keyValueHeader">Body</div>
-        <div class="keyValueContainer">
-          <template id="bodyRepeat" is="dom-repeat" items="[[body]]">
-            <paper-input label="[[item.key]]"></paper-input>
-          </template>
-        </template>
-      </div>
-    </div>
-    <paper-button raised on-tap="sendRequest">Send Request</paper-button>
-    <div class="keyValueHeader">Response</div>
-    <x-json id="jsonResponse"></x-json>
+    <div id="description"><content></content></div>-->
   </template>
 </dom-module>
 
@@ -122,6 +78,11 @@
 
     properties: {
 
+      /**
+       * The `title` of the request
+       */
+      title: String,
+
       /**
        * The `url` to send the request to
        */
@@ -153,6 +114,8 @@
        */
       body: Array,
 
+      explanation: String,
+
       /**
        * The `response` of the HTTP Request after it has been performed
        */
@@ -162,6 +125,45 @@
       }
     },
 
+    ready: function () {
+      this.set('params', []);
+      this.set('headers', []);
+      this.set('body', null);
+      this.set('explanation', '');
+
+      this._observer = Polymer.dom(this).observeNodes(function (info) {
+        this._setRequestInfos();
+      });
+    },
+
+    _setRequestInfos: function () {
+      var params = this.queryAllEffectiveChildren('rest-api-param');
+      var headers = this.queryAllEffectiveChildren('rest-api-header');
+      var body = this.queryAllEffectiveChildren('rest-api-body');
+      var kvBody = this.queryAllEffectiveChildren('rest-api-kv-body');
+      var explanation = this.queryAllEffectiveChildren('rest-api-explanation');
+      // Check for duplicate body declaration
+      if (body.length > 0 && kvBody > 0) {
+        console.warn('Only use either <rest-api-body> or <rest-api-kv-body>, ' +
+            'but not both for one api. Now using: <rest-api-body>');
+        this.set('body', body[0]);
+      } else if (body.length > 0) {
+        this.set('body', body[0]);
+      } else if (kvBody.length > 0) {
+        this.set('body', kvBody);
+      } else {
+        this.set('body', null);
+      }
+
+      this.set('params', params);
+      this.set('headers', headers);
+      this.set('explanation', explanation[0].innerHTML);
+      console.log(this.params);
+      console.log(this.headers);
+      console.log(this.explanation);
+      console.log(this.body);
+    },
+
     sendRequest: function() {
       var url = this.url + '?';
       var method = this.method.toUpperCase();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<link rel="import" href="rest-api-page.html">
		<link rel="import" href="rest-api-doc.html">