Download as
Browse Code »

Commit a689bd927d7ff04c8efff682eabf33c43772d6ab

Authored by Aurélio A. Heckert
Committed by Rodrigo Souto
1 parent 1a8ddee7
Exists in master and in 29 other branches add_member_task_reject_details, admin_visible_profile, article-list-template, community_notifications, contact_admin_translation, event_fixes, fix_comments_pagination, fix_rails4_organization_ratings, fix_sign_up_form, follow_step_fix, forum_topic_creation, mirror_block_improvements, multi_env_on_remote_user, new_security, noosfero_spb_ci, organization_ratings_improvements, organization_ratings_link_to_profile_stable-spb-1.3, organization_ratings_translations_fix, profile_api_improvements, ratings_minor_fixes, remote_user_fix, send_email_to_admins, stable-spb-1.3, stable-spb-1.3-fixes, stable-spb-1.4, stable-spb-1.5, suggest_rejected_value, web_steps_improvements, xss_terminate_custom_options

Style API Playground

Showing 4 changed files with 65 additions and 13 deletions   Show diff stats
app/views/api/playground.html.erb
  Diff comments   View file @a689bd9
... ... @@ -16,11 +16,17 @@ end.flatten.compact.sort{|a,b| a[:path]=='/api/v1/login' ? -1:1}.to_json %>;
16 16 </script>
17 17  
18 18 <form id="api-form">
19   - <label>Endpoint: <select name="endpoint" onchange="playground.selEndpoint()"></select></label> &nbsp;
20   - <label>Token: <input id="api-token" size="32" style="font-family:monospace"></label>
  19 + <label id="endpoint">Endpoint:
  20 + <select name="endpoint" onchange="playground.selEndpoint()"></select>
  21 + </label>
  22 + <label id="api-token">Token:
  23 + <%= tag :input, size: 32, placeholder: _('Use the login endpoint') %>
  24 + </label>
21 25 </form>
22   -<button onclick="playground.addFormParam()"><%=_('Add parameter')%></button>
23   -<button onclick="playground.run()" style="font-weight:bold">&nbsp; <%=_('Run')%> &nbsp;</button>
24   -<pre id="api-response"></pre>
  26 +<div id="playground-ctrl">
  27 + <button onclick="playground.addFormParam()"><%=_('Add parameter')%></button>
  28 + <button onclick="playground.run()" style="font-weight:bold">&nbsp; <%=_('Run')%> &nbsp;</button>
  29 +</div>
  30 +<pre id="api-response" class="empty"></pre>
25 31  
26 32 <script src="/javascripts/api-playground.js"></script>
... ...
public/javascripts/api-playground.js
  Diff comments   View file @a689bd9
... ... @@ -6,11 +6,11 @@ for (var endpoint,i=0; endpoint=endpoints[i]; i++) {
6 6 var playground = {
7 7  
8 8 getToken: function() {
9   - return jQuery('#api-token').val();
  9 + return jQuery('#api-token input').val();
10 10 },
11 11  
12 12 setToken: function(token) {
13   - jQuery('#api-token').val(token);
  13 + jQuery('#api-token input').val(token);
14 14 },
15 15  
16 16 getEndpoint: function() {
... ... @@ -39,8 +39,8 @@ var playground = {
39 39 addFormParam: function(name) {
40 40 if (!name) name = '';
41 41 jQuery('<div class="api-param">'+
42   - '<label>name: <input name="name[]" value="'+name+'"></label> &nbsp; '+
43   - '<label>value: <input name="value[]"></label>'+
  42 + '<label class="param-nane">name: <input name="name[]" value="'+name+'"></label>'+
  43 + '<label class="param-value">value: <input name="value[]"></label>'+
44 44 '</div>').appendTo('#api-form');
45 45 },
46 46  
... ... @@ -54,7 +54,7 @@ var playground = {
54 54 if ( endpoint.path != '/api/v1/login' ) {
55 55 data.private_token = this.getToken();
56 56 }
57   - jQuery('#api-response').empty();
  57 + jQuery('#api-response').empty()[0].className = 'empty';
58 58 var url = endpoint.path;
59 59 var pathParameters = endpoint.path.match(/:[^/]+/g);
60 60 if ( pathParameters ) {
... ... @@ -68,16 +68,18 @@ var playground = {
68 68 method: endpoint.method,
69 69 data: data,
70 70 success: function(data, textStatus, jqXHR) {
71   - jQuery('#api-response').text( JSON.stringify(data, null, ' ') );
  71 + jQuery('#api-response').text(
  72 + JSON.stringify(data, null, ' ')
  73 + )[0].className = 'full';
72 74 if ( endpoint.path == '/api/v1/login' ) {
73   - playground.setToken(data.private_token);
  75 + playground.setToken(data.private_token)
74 76 }
75 77 },
76 78 error: function(jqXHR, textStatus, errorThrown) {
77 79 jQuery('#api-response').html(
78 80 '<h2>'+textStatus+'</h2>' +
79 81 'Request to '+url+' fail.\n\n' + errorThrown
80   - );
  82 + )[0].className = 'fail';
81 83 }
82 84 });
83 85 }
... ...
public/stylesheets/api-playground.scss 0 → 100644
  Diff comments   View file @a689bd9
... ... @@ -0,0 +1,42 @@
  1 +.action-api-playground {
  2 +
  3 + #api-token {
  4 + margin-left: 10px;
  5 +
  6 + input {
  7 + font-family: monospace;
  8 + }
  9 + }
  10 +
  11 + .api-param {
  12 + margin: 5px 0;
  13 +
  14 + .param-value {
  15 + margin-left: 10px;
  16 + }
  17 + }
  18 +
  19 + #playground-ctrl {
  20 + * {
  21 + vertical-align: middle;
  22 + }
  23 + }
  24 +
  25 + #api-response {
  26 + color: #000;
  27 + border: 1px solid rgba(0,0,0,0.3);
  28 + padding: 10px 15px;
  29 + box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
  30 + &.empty {
  31 + border: none;
  32 + Xbox-shadow: none;
  33 + }
  34 + &.full {
  35 + background: #E0E8EF;
  36 + }
  37 + &.fail {
  38 + background: #EDD;
  39 + }
  40 + }
  41 +
  42 +}
... ...
public/stylesheets/application.scss
  Diff comments   View file @a689bd9
... ... @@ -16,6 +16,8 @@
16 16 *= require search
17 17 */
18 18  
  19 +@import "api-playground";
  20 +
19 21 /* browser fixes */
20 22  
21 23 img:-moz-broken {
... ...