designer

designer.html

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../core-pages/core-pages.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../paper-toast/paper-toast.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_toolbar {
        right: 0px;
        left: 0px;
        background-color: rgb(43, 129, 185);
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        top: 0px;
        position: absolute;
      }
      #paper_tabs {
        background-color: rgb(43, 129, 185);
        color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
        left: 0px;
        top: 60px;
        position: absolute;
        width: 100%;
        height: auto;
      }
      #paper_tab {
        width: 120px;
        height: 40px;
      }
      #paper_tab1 {
        width: 120px;
        height: 40px;
      }
      #paper_tab2 {
        width: 120px;
        height: 40px;
      }
      #paper_tab3 {
        width: 120px;
        height: 40px;
      }
      #section {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(146, 192, 234);
        left: 0px;
        top: 0px;
      }
      #section1 {
        width: 100%;
        height: 75%;
        top: 100px;
        position: absolute;
      }
      #core_pages {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      .page {
        left: 0px;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
      }
      #app {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
      }
      .form {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;
      }
      .form .input {
        background-color: rgb(255, 255, 255);
        margin: 8px;
        padding: 8px;
        min-width: 128px;
      }
      #paper_icon_button {
        left: 1640px;
        top: 420px;
      }
      #div1 {
        left: 75%;
        top: 75%;
        position: absolute;
      }
      #paper_fab {
        left: 125px;
        top: 36px;
      }
    </style>
    <section id="section">
      <core-toolbar id="core_toolbar">
        <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
        <div id="div" flex>Application Setup</div>
      </core-toolbar>
      <paper-tabs noink nobar selected="0" selectedindex="0" id="paper_tabs" horizontal center layout>
        <paper-tab id="paper_tab" on-tap="{{ showOptionsBasic }}" inline flex center-center horizontal layout active>Basics</paper-tab>
        <paper-tab id="paper_tab1" on-tap="{{ showOptionsApp }}" inline flex center-center horizontal layout>App Credentials</paper-tab>
        <paper-tab id="paper_tab2" on-tap="{{ showOptionsSyPi }}" inline flex center-center horizontal layout>SyPi Credentials</paper-tab>
        <paper-tab id="paper_tab3" on-tap="{{ showOptionsApi }}" inline flex center-center horizontal layout>API Tokens</paper-tab>
      </paper-tabs>
      <section id="section1">
        <core-pages selected="0" selectedindex="0" notap id="core_pages">
          <section id="basic" class="page" active>
            <div id="div2" class="form" vertical layout center>
              <input id="appName" value="Marvel MasterCard App" placeholder="App Name" class="input" is="core-input">
              <input id="appId" value="com.gpshopper.marvel" placeholder="App ID" class="input" is="core-input">
              <input id="buildBranch" value="feature/GPSANDROID-325" placeholder="Branch Name" class="input" is="core-input">
              <input id="buildLane" value="release" placeholder="debug / release" class="input" is="core-input">
              <input id="buildVersionName" placeholder="Optional - Ex: 1.1.1" class="input" is="core-input">
              <input id="buildVersionCode" placeholder="Optional - Ex: 1001001" class="input" is="core-input">
              <paper-fab icon="check" id="paper_fab" on-tap="{{ submitBuild }}" end></paper-fab>
            </div>
          </section>
          <section id="app" class="page">
            <div class="form" vertical layout center>
              <input id="appCtid" value="369" placeholder="CTID" class="input" is="core-input">
              <input id="appHost" value="https://marvel.gpshopper.com" placeholder="Host" class="input" is="core-input">
              <input id="appClientName" value="Marvel Production" placeholder="Client Name" class="input" is="core-input">
              <input id="appClientKey" value="qsKX1nPT1pOXN7pSFgBBqEZzAG" placeholder="Client Key" class="input" is="core-input">
              <paper-fab icon="check" id="paper_fab" on-tap="{{ submitBuild }}" end></paper-fab>
            </div>
          </section>
          <section id="sypi" class="page" vertical layout>
            <div class="form" vertical layout center>
              <input id="sypiCtid" value="370" placeholder="CTID" class="input" is="core-input">
              <input id="sypiHost" value="https://sypi.gpshopper.com" placeholder="Host" class="input" is="core-input">
              <input id="sypiClientName" value="SyPI-Marvel Production" placeholder="Client Name" class="input" is="core-input">
              <input id="sypiClientKey" value="n_g7HBQQZSh83hwWTXZ11X3y9hdVV0" placeholder="Client Key" class="input" is="core-input">
              <paper-fab icon="check" id="paper_fab" on-tap="{{ submitBuild }}" end></paper-fab>
            </div>
          </section>
          <section id="api" class="page" vertical layout>
            <div class="form" vertical layout center>
              <input id="gcmId" value="557100429746" placeholder="GCM Sender ID" class="input" is="core-input">
              <input id="googleToken" value="AIzaSyAbqS9jh_qoeFqH934AjQLbGMDhiQvv9Lk" placeholder="Google API Token" class="input" is="core-input">
              <input id="branchToken" value="key_live_mcyDgR5C43EDndzxxWfgBgejBBf9wYsR" placeholder="Branch Token" class="input" is="core-input">
              <input id="branchScheme" value="marvel://" placeholder="Branch Scheme" class="input" is="core-input">
              <input id="branchHost" value="wsye.app.link" placeholder="Branch Host" class="input" is="core-input">
              <input id="newrelicToken" value="AA2b7c5c95fabfb5a21ecf4e5e918cb8f5e3d34a35" placeholder="NewRelic Token" class="input" is="core-input">
              <input id="worldPayToken" value="NA" placeholder="World Pay Token" class="input" is="core-input">
              <paper-fab icon="check" id="paper_fab" on-tap="{{ submitBuild }}" end></paper-fab>
            </div>
          </section>
        </core-pages>
      </section>
      <paper-toast id="toast" touch-action="none" class="core-transition-bottom core-transition"></paper-toast>
      <div id="div1" center vertical layout>
        </div>
    </section>
    <iron-ajax id="submitRequest" method="POST" body handle-as="json" content-type="application/json" on-response="onResponse" last-response="onResponse" on-error="showError" last-error="showError" url="https://jenkins-aws.gpshopper.com/job/Clients/job/Tong-playground/job/android-marvel-custom/buildWithParameters">
    </iron-ajax>
  </template>

  <script>

    Polymer({
      showOptionsBasic: function () { this.$.core_pages.selected = "0"; },
      showOptionsApp: function () { this.$.core_pages.selected = "1"; },
      showOptionsSyPi: function () { this.$.core_pages.selected = "2"; },
      showOptionsApi: function () { this.$.core_pages.selected = "3"; },
      submitBuild: function () {
        this.$.toast.text = "Build submitted.";
        this.$.toast.opened = "true";
        this.$.submitRequest.generateRequest();
      },
      onResponse: function (res) {
        this.$.toast.text = res;
        this.$.toast.opened = "true";
      },
      showError: function (error) {
        this.$.toast.text = error;
        this.$.toast.opened = "true";
      }
    });

  </script>

</polymer-element>