designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../google-map/google-map.html">
<link rel="import" href="../core-ajax/core-ajax.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../topeka-elements/category-icons.html">
<link rel="import" href="../core-icon/core-icon.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        opacity: 1;
      }
      #section {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: rgb(209, 209, 209);
      }
      #core_drawer_panel {
        right: 0px;
        bottom: 0px;
        margin: 0px;
        top: 40px;
        left: 0px;
        position: absolute;
        height: 100%;
        width: 100%;
      }
      #section1 {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: rgb(255, 255, 255);
      }
      #section2 {
        height: 100%;
        box-sizing: border-box;
        position: relative;
        background-color: rgb(221, 221, 221);
      }
      .label {
        font-family: Arial;
        font-size: 18px;
        color: rgb(153, 0, 0);
      }
      #paper_input {
        margin: 5px;
        width: 90%;
        left: 0px;
        top: 150px;
        position: absolute;
      }
      #core_item {
        margin: 5px;
        left: 0px;
        top: 120px;
        position: absolute;
        width: 90%;
      }
      #core_item1 {
        margin: 5px;
        left: 0px;
        top: 195px;
        position: absolute;
        width: 90%;
      }
      #paper_input1 {
        margin: 5px;
        width: 90%;
        left: 0px;
        top: 235px;
        position: absolute;
      }
      #core_item2 {
        margin: 5px;
        left: 0px;
        top: 285px;
        position: absolute;
        width: 90%;
      }
      #paper_input2 {
        margin: 5px;
      }
      #core_item3 {
        margin: 5px;
        left: 0px;
        top: 365px;
        position: absolute;
        width: 90%;
      }
      #paper_input3 {
        margin: 5px;
      }
      #paper_button {
        margin: 5px;
        width: 90%;
        opacity: 0.8;
        border-radius: 5%;
        left: 5px;
        top: 450px;
        position: absolute;
        background-color: rgb(223, 1, 1);
      }
      #google_map {
        width: 100%;
        height: 90%;
      }
      #core_ajax {
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #long {
        width: 90%;
        margin: 5px;
        left: 0px;
        top: 410px;
        position: absolute;
      }
      #lat {
        width: 90%;
        margin: 5px;
        left: 0px;
        top: 325px;
        position: absolute;
      }
      #btn {
        margin: 5px;
        width: 90%;
        left: 5px;
        top: 490px;
        position: absolute;
        background-color: rgb(121, 0, 121);
      }
      #banner {
        color: white;
        font-size: 20px;
        font-family: Georgia;
        font-weight: bold;
        position: relative;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 40px;
        background-color: red;
      }
      #core_icon {
        width: 75px;
        height: 75px;
        position: absolute;
        margin: 5px;
        left: 30%;
        top: 40px;
      }
      #core_item4 {
        margin: 5px;
      }
    </style>
    <section id="section" one flex>
      <div id="banner" horizontal layout one flex center-justified center>Find My Friend</div>
      <core-drawer-panel transition id="core_drawer_panel" touch-action one flex start-justified>
        <section id="section2" main>
          <google-map latitude="-25.7487569999998" longitude="28.267158999999992" zoom="16" fittomarkers id="google_map" fit-to-markers center>
            <google-map-marker longitude="{{ $.google_map.longitude }}" latitude="{{ $.google_map.latitude }}" id="google_map_marker" draggable="true"></google-map-marker>
          </google-map>
        </section>
        <section id="section1" drawer>
          <core-ajax url="https://www.infoscenter.comxa.com/submitdata.php" handleas="text" params='{"ID_NUM":"3334445", "NAME":"Doriane","ACTIVITY":"Manager", "AGE":"15","PASSWORD":"1001"}' response="{{ response }}" method="GET" headers='{"X-Requested-with": "XMLHttpRequest"}' id="core_ajax" verbose="true" debounce-duration="3000" hidden></core-ajax>
          <paper-button raised id="btn" on-click="{{ callAjax }}" center>Database</paper-button>
          <paper-button raised id="paper_button" on-click="{{ callIt }}" center>View</paper-button>
          <paper-input label="Longitude..." id="long" type="number" center></paper-input>
          <core-item id="core_item4" class="label" center one flex horizontal layout>Your Profile:</core-item>
          <core-item id="core_item" class="label" label="Phone Number:" one flex start horizontal center layout></core-item>
          <paper-input label="Phone Number..." id="paper_input" center></paper-input>
          <core-icon icon="category-icons:food" id="core_icon" designmeta="topeka-icon" center></core-icon>
          <core-item id="core_item1" class="label" label="Password:" horizontal center layout></core-item>
          <paper-input label="Password..." id="paper_input1" center></paper-input>
          <core-item id="core_item2" class="label" label="Latitude:" horizontal center layout></core-item>
          <paper-input label="Latitude..." id="lat" type="number" center></paper-input>
          <core-item id="core_item3" class="label" label="Longitude:" horizontal center layout></core-item>
        </section>
      </core-drawer-panel>
    </section>
  </template>

  <script>

    Polymer({
      callAjax: function (){
      this.$.core_ajax.go();
      },
      responseChanged: function (){
    	alert(this.response);
    },
      callIt: function (){
    	this.$.google_map.latitude = Number(this.$.lat.value);
      this.$.google_map.longitude = Number(this.$.long.value);
    }
    });

  </script>

</polymer-element>