Skip to content

Commit

Permalink
Update: Updating demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarrodek
jarrodek committed Aug 4, 2018
1 parent 6b852bf commit e515e98
Showing 1 changed file with 73 additions and 48 deletions.
121 changes: 73 additions & 48 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<link rel="import" href="../../oauth-authorization/oauth1-authorization.html">
<link rel="import" href="../../xhr-simple-request/xhr-simple-request.html">
<link rel="import" href="../../arc-polyfills/arc-polyfills.html">
<link rel="import" href="../../api-console-default-theme/api-console-default-theme.html">
<link rel="import" href="../api-request-editor.html">
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
Expand Down Expand Up @@ -46,11 +47,21 @@
@apply --paper-font-body1;
};
}

html,
body {
margin: 0;
padding: 0;
}

h1 {
@apply --paper-font-headline;
}

h2 {
@apply --paper-font-title;
}

header {
padding: 12px 24px;
background-color: #C5E1A5;
Expand All @@ -60,6 +71,18 @@
color: #3E2723;
};
}

.vertical-section-container {
background-color: #fff;
padding: 20px;
margin-bottom: 24px;
margin-top: 24px;
@apply --shadow-elevation-2dp;
}

paper-checkbox {
margin-bottom: 12px;
}
</style>
</custom-style>
</head>
Expand All @@ -70,39 +93,74 @@
<oauth1-authorization></oauth1-authorization>
<xhr-simple-request></xhr-simple-request>
<header>
<span id="endpointSelector"></span>
<span id="methodSelector"></span>
<!-- <paper-dropdown-menu label="Select demo endpoint">
<paper-listbox slot="dropdown-content" on-selected-changed="_endpointChanged">
<paper-dropdown-menu label="Select demo endpoint">
<paper-listbox slot="dropdown-content" on-selected-changed="_endpointChanged" id="endpointSelector">
<template is="dom-repeat" items="[[endpoints]]">
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<paper-dropdown-menu label="Select endpoint's method">
<paper-listbox slot="dropdown-content" selected="{{selectedShape}}" on-selected-changed="_methodChanged">
<paper-listbox slot="dropdown-content" selected="{{selectedShape}}" on-selected-changed="_methodChanged" id="methodSelector">
<template is="dom-repeat" items="[[operations]]">
<paper-item>[[item.label]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu> -->
</paper-dropdown-menu>
</header>
<section role="main" class="vertical-section-container centered main">
<api-request-editor narrow="[[narrow]]" amf-model="[[amfModel]]" base-uri="[[baseUri]]" selected="[[selectedAmfId]]" narrow="[[narrow]]" allow-custom="[[allowCustom]]" allow-disable-params="[[allowDisableParams]]" allow-hide-optional="[[allowHideOptional]]"></api-request-editor>
<h1>API request editor</h1>
<api-request-editor
narrow="[[narrow]]"
amf-model="[[amfModel]]"
base-uri="[[baseUri]]"
selected="[[selectedAmfId]]"
narrow="[[narrow]]"
allow-custom="[[allowCustom]]"
allow-disable-params="[[allowDisableParams]]"
allow-hide-optional="[[allowHideOptional]]"
redirect-uri="[[redirectUri]]"
no-url-editor="[[noUrlEditor]]"
no-docs="[[noDocs]]"
selected-tab="{{selectedTab}}"
content-type="{{contentType}}"
is-payload-request="{{isPayloadRequest}}"
auth-required="{{authRequired}}"
auth-valid="{{authValid}}"
auth-not-required="{{authNotRequired}}"
loading-request="{{loadingRequest}}"
params-invalid="{{paramsInvalid}}"
headers-invalid="{{headersInvalid}}"></api-request-editor>
</section>
<section class="vertical-section-container centered">
<h2>Configuration options</h2>
<paper-checkbox checked="{{narrow}}">Render narrow view</paper-checkbox>
<paper-checkbox checked="{{allowCustom}}">Allow custom properties</paper-checkbox>
<paper-checkbox checked="{{allowHideOptional}}">Allow auto hide optional headers</paper-checkbox>
<paper-checkbox checked="{{allowDisableParams}}">Allow disabling parameters</paper-checkbox>
<paper-checkbox checked="{{noUrlEditor}}">Remove URL editor</paper-checkbox>
<paper-checkbox checked="{{noDocs}}">Remove inline documentatrion</paper-checkbox>
<paper-input label="Override base uri" value="{{baseUri}}"></paper-input>
</section>
<section class="vertical-section-container centered">
<h2>Editor state</h2>
<p>Selected editor tab: [[selectedTab]]</p>
<p>Selected content type: [[contentType]]</p>
<p>Is payload requested: [[isPayloadRequest]]</p>
<p>Authorization is required: [[authRequired]]</p>
<p>Authorization is valid: [[authValid]]</p>
<p>Authorization is not required: [[authNotRequired]]</p>
<p>Request is being loaded: [[loadingRequest]]</p>
<p>Parameter form is invalid: [[paramsInvalid]]</p>
<p>Headers for is invalid: [[headersInvalid]]</p>
</section>
<paper-toast text="Request send event detected" id="rsend"></paper-toast>
<paper-toast text="Request abort event detected" id="rabort"></paper-toast>
</template>
</dom-bind>
<script>
(function(app) {
app.redirectUri = 'https://auth.advancedrestclient.com/oauth-popup.html';
app.allowCustom = true;
app.allowHideOptional = true;
app.allowDisableParams = true;
Expand Down Expand Up @@ -132,38 +190,22 @@
app._setEndpointsList = function(data) {
data = data[0][ApiElements.Amf.ns.raml.vocabularies.document + 'encodes'][0];
const endpoints = data[ApiElements.Amf.ns.raml.vocabularies.http + 'endpoint'];

const selector = document.createElement('paper-dropdown-menu');
selector.label = 'Select demo endpoint';
const list = document.createElement('paper-listbox');
list.slot = 'dropdown-content';
list.addEventListener('selected-changed', app._endpointChanged);

const labels = [];
endpoints.forEach((item) => {
const label = app._getAmfValue(item[ApiElements.Amf.ns.raml.vocabularies.http + 'path']);
labels.push(label);
const pItem = document.createElement('paper-item');
pItem.innerText = label;
list.appendChild(pItem);
});
app.endpoints = labels;
list.selected = 0;
selector.appendChild(list);
app.$.endpointSelector.appendChild(selector);
document.getElementById('endpointSelector').selected = 0;
};
app._endpointChanged = function(e) {
document.getElementById('methodSelector').selected = undefined;
const index = e.detail.value;
app._computeOperations(index);
};

app._clearOperations = function() {
const selector = document.body.querySelector('#methodDropdown');
if (selector) {
const list = app.$.methodSelector.querySelector('paper-listbox');
list.removeEventListener('selected-changed', app._methodChanged);
selector.parentNode.removeChild(selector);
}
app.operations = undefined;
};
app._computeOperations = function(index) {
app._clearOperations();
Expand All @@ -173,27 +215,16 @@
if (!operations) {
return;
}
const selector = document.createElement('paper-dropdown-menu');
selector.label = 'Select endpoint\'s method';
selector.id = 'methodDropdown';
const list = document.createElement('paper-listbox');
list.slot = 'dropdown-content';
list.addEventListener('selected-changed', app._methodChanged);
const items = [];
operations.forEach((item) => {
const label = app._getAmfValue(item[ApiElements.Amf.ns.w3.hydra.core + 'method']);
items.push({
id: item['@id'],
label: label
});
const pItem = document.createElement('paper-item');
pItem.innerText = label;
list.appendChild(pItem);
});
app.operations = items;
list.selected = 0;
selector.appendChild(list);
app.$.methodSelector.appendChild(selector);
document.getElementById('methodSelector').selected = 0;
};
app._computeApiParams = function(apiPrams) {
if (!apiPrams) {
Expand All @@ -202,19 +233,13 @@
return JSON.stringify(apiPrams, null, 1);
};
app._methodChanged = function(e) {
if (e.detail.value === undefined) {
return;
}
const id = app.operations[e.detail.value].id;
app.selectedAmfId = id;
};
app._apiRequestHandler = function(e) {
setTimeout(() => {
const ev = new CustomEvent('api-response', {
bubbles: true,
detail: {
id: e.detail.id
}
});
document.body.dispatchEvent(ev);
}, 1500);
app._apiRequestHandler = function() {
document.getElementById('rsend').opened = true;
};
app._apiAbortHandler = function() {
Expand Down

0 comments on commit e515e98

Please sign in to comment.