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="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu-button/core-menu-button.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/image-icons.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-transition/core-transition-css.html">
<link rel="import" href="../esri-html5/esri-map.html">
<link rel="import" href="../esri-html5/esri-layer.html">
<link rel="import" href="../esri-html5/esri-clusterlayer.html">
<link rel="import" href="../esri-html5/esri-geocoder.html">
<link rel="import" href="../esri-html5/esri-scalebar.html">
<link rel="import" href="../esri-html5/esri-symbols.html">
<link rel="import" href="../esri-html5/esri-renderers.html">
<link rel="import" href="../esri-html5/esri-infotemplate.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-item/paper-item.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      :host /deep/ input, :host /deep/ textarea {
        font: inherit;
        color: #ECE8E8;
        padding: 0;
        margin: 0.5em 0;
        background-color: transparent;
        border: none;
        outline: none;
        width: 100%;
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
        overflow: hidden;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #map {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
      }
      #core_card {
        width: 60px;
        height: 100%;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        position: absolute;
        z-index: 999;
        padding-top: 14px;
        background-color: rgb(0, 64, 128);
      }
      paper-icon-button {
        color: white;
      }
      #div2 {
        padding-bottom: 20px;
      }
      #core_animated_pages {
        width: 100%;
        height: 35%;
        overflow: hidden;
        position: absolute;
        bottom: 0px;
        z-index: 998;
        opacity: 0.9;
        margin-left: 60px;
        padding-left: 5px;
        color: white;
        background-color: rgb(0, 23, 47);
      }
    </style>
    <core-header-panel mode="waterfall" id="core_header_panel">
      <core-toolbar id="core_toolbar">
        <core-menu-button icon="more-vert" selected="0" valueattr="name" id="core_menu_button">
          <core-item label="Playgrounds" icon="settings" id="core_item" title="Playgrounds" horizontal center layout on-tap="{{ deck_change }}" active></core-item>
          <core-item label="Urban Trees" icon="settings" id="core_item1" horizontal center layout on-tap="{{ deck_change }}"></core-item>
          <core-item label="Rubbish Collection" icon="settings" id="core_item2" horizontal center layout on-tap="{{ deck_change }}"></core-item>
        </core-menu-button>
        <div id="deckType">
          <h3 id="h3">{{ deckType }}</h3>
        </div>
        <div id="div">
          <h3 id="h31">Observer</h3>
        </div>
      </core-toolbar>
      <div id="div1" flex>
        </div>
      <esri-map basemap="none" autoresize latitude="-35.326128861451885" longitude="149.10671164365243" zoom="11" id="map">
        	<esri-imageservicelayer url="http://actmapi.act.gov.au/actmapi/rest/services/mga/dopm2014mga/ImageServer" id="modisLayer"></esri-imageservicelayer>
          <esri-dynamicmapservicelayer url="http://actmapi.act.gov.au/actmapi/rest/services/mga/road_labels/MapServer" id="labels"></esri-dynamicmapservicelayer>
          <esri-featurelayer url="http://services.arcgis.com/uH2bZ8EU7r86PYdN/arcgis/rest/services/Playground_L1_ACTPG/FeatureServer/3" id="playgrounds">
            <esri-infotemplate title="Properties" id="infoTemplate">${*}</esri-infotemplate>
          </esri-featurelayer>
          <esri-clusterlayer url="http://services.arcgis.com/uH2bZ8EU7r86PYdN/arcgis/rest/services/Playground_L1_ACTPG/FeatureServer/3" singlesymbol="{{ $.esriPMS.symbol }}" id="playgroundLocations">
          </esri-clusterlayer>
          <esri-geocoder id="esri_geocoder"></esri-geocoder>
          <esri-scalebar id="esri_scalebar"></esri-scalebar>
          <esri-picture-marker-symbol url="http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png" offset_y="15" width="32" height="32" id="esriPMS">
          </esri-picture-marker-symbol>
          <esri-simple-line-symbol line_width="15" line_style="STYLE_SOLID" id="esriSLS" color="[255,0,0,0.25]">
          </esri-simple-line-symbol>
          <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS" fill_color="[255,0,0,0.5]">
          </esri-simple-marker-symbol>
          <esri-simple-line-symbol line_width="15" line_style="STYLE_SOLID" id="esriSLS_g" color="[0,148,0,0.25]">
          </esri-simple-line-symbol>
          <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS_g" fill_color="[0,148,0,0.5]">
          </esri-simple-marker-symbol>
          <esri-simple-line-symbol line_width="15" line_style="STYLE_SOLID" id="esriSLS_y" color="[255,191,0,0.25]">
          </esri-simple-line-symbol>
          <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS_y" fill_color="[255,191,0,0.5]">
          </esri-simple-marker-symbol>
          <esri-class-break-renderer default_symbol="{{ $.esriPMS.symbol }}" break_field="days_until_inspection" layer="{{ $.playgrounds.layer }}" id="classBreaks">
            <esri-class-break minvalue="-7" maxvalue="-2" label="Class Break 1" symbol="{{ $.esriSMS.symbol }}" id="esri_class_break"></esri-class-break>
            <esri-class-break minvalue="-1" maxvalue="1" label="Class Break 2" symbol="{{ $.esriSMS_y.symbol }}" id="esri_class_break2"></esri-class-break>
            <esri-class-break minvalue="2" maxvalue="7" label="Class Break 2" symbol="{{ $.esriSMS_g.symbol }}" id="esri_class_break3"></esri-class-break>
          </esri-class-break-renderer>
        
        <core-card id="core_card" layout vertical center>
          <paper-icon-button icon="check-circle-outline" tooltip="Playground Inspections" alt="Playground Inspections" title="Playground Inspections" istoggle id="inspections" on-tap="{{ stuff }}" one flex></paper-icon-button>
          <paper-icon-button icon="warning" istoggle alt="Defects" id="defect" one flex></paper-icon-button>
          <paper-icon-button icon="image:camera" alt="Visual Inspections" istoggle id="visual" one flex></paper-icon-button>
          <paper-icon-button icon="info-outline" alt="Info" istoggle id="info" one flex></paper-icon-button>
          <paper-icon-button icon="settings" alt="Settings" istoggle id="settings" one flex></paper-icon-button>
          <div id="div2" layout vertical center end-justified nine flex>
            <paper-icon-button icon="settings" id="settings"></paper-icon-button>
          </div>
        </core-card>
        <div id="core_animated_pages" hidden layout vertical>
          <div id="panelhead" flex one layout horizontal>
            <core-icon icon="check-circle-outline" id="core_icon" style="padding-right: 1px;margin-right: 5px; padding-top: 26px;"></core-icon> <h3>Inspections</h3>
          </div>
          <div id="panelbody" flex eleven layout horizontal style="padding-top:12px;">
            <div id="insp_info" flex two layout vertical>
              <paper-input label="Playground Name" floatinglabel placeholder="Playground Name" disabled readonly inputvalue="John Knight Park" value="John Knight Park" id="paper_input" style="margin-top:16px;margin-left:20px;width:90%;"></paper-input>
              <paper-input label="Last Inspection" floatinglabel placeholder="Last Inspection" disabled readonly inputvalue="Monday January 1st 2014" value="Monday January 1st 2014" id="paper_input" style="margin-left:20px;width:90%;"></paper-input>
              <paper-input label="Last Inspected By" floatinglabel placeholder="Last Inspected By" disabled readonly inputvalue="Wayne Lee-Archer" value="Wayne Lee-Archer" id="paper_input" style="margin-left:20px;width:90%;"></paper-input>
              <paper-input label="Next Inspection" floatinglabel placeholder="Next Inspection" disabled readonly inputvalue="Monday January 8th 2014" value="Monday January 8th 2014" id="paper_input" style="margin-left:20px;width:90%;"></paper-input>
            </div>
            <div id="insp_history" flex three layout vertical style="border-left:1px dotted white;">
              <div style="width:100%;" flex one><center><strong>Recent</strong></center></div>
              <div flex eleven>
                <paper-item icon="history" id="paper_item" center horizontal layout style="margin-top:10px;">
                  <div layout vertical>
                    <strong>Sheduled Inspection</strong>
                    <small>14-12-2013</small>
                    <small>Inspected By: Wayne Lee-Archer</small>
                  </div>
                </paper-item>
                <paper-item icon="warning" id="paper_item1" center horizontal layout style="margin-top:10px;">
                  <div layout vertical>
                    <strong>Urgent Inspection</strong>
                    <small>19-12-2013</small>
                    <small>Inspected By: Wayne Lee-Archer</small>
                  </div>
                </paper-item>
                <paper-item icon="history" id="paper_item2" center horizontal layout style="margin-top:10px;">
                  <div layout vertical>
                    <strong>Sheduled Inspection</strong>
                    <small>01-01-2014</small>
                    <small>Inspected By: Wayne Lee-Archer</small>
                  </div>
                </paper-item>
              </div>
            </div>
            <div id="insp_create" flex three layout vertical style="border-left:1px dotted white;">
              <div style="width:100%;" flex one><center><strong>New</strong></center></div>
              <div flex eleven>
                <paper-item icon="history" id="paper_item" center horizontal layout style="margin-top:10px;">
                  <div layout vertical>
                    <strong>Sheduled Inspection</strong>
                    <small></small>
                  </div>
                </paper-item>
                <paper-item icon="warning" id="paper_item1" center horizontal layout style="margin-top:10px;">
                  <div layout vertical>
                    <strong>Urgent Inspection</strong>
                    <small></small>
                  </div>
                </paper-item>
                <paper-item icon="today" id="paper_item2" center horizontal layout style="margin-top:10px;">
                  <div layout vertical>
                    <strong>Ad-Hoc Inspection</strong>
                    <small></small>
                  </div>
                </paper-item>
              </div>
            </div>
          </div>
        </div>
      </esri-map>
    </core-header-panel>
  </template>

  <script>
    var meta;
    var transition;
    var state = {
      opened: false
    }
 
    function getMeta() {
      if (!meta) {
        meta = document.createElement('core-meta');
        meta.type = 'transition';
      }
      return meta;
    }
 
    function setup(target) {
 
      if (transition) {
        transition.teardown(target);
      }
 
      var value = "core-transition-bottom";
      transition = getMeta().byId(value);
      transition.setup(target);
    }
 
    Polymer('my-element', {
      deckType: 'Playgrounds',
      deck_change: function (evt,dat,src){
        //console.log("Deck Change",evt,dat,src);
        this.deckType=src.label;
      },
      stuff: function (evt,dat,src){
        var target = this.$.core_animated_pages;
        state.opened = !state.opened;
        transition.go(target, state);
      },
      ready: function (){
        // initial setup
        setup(this.$.core_animated_pages);
        this.$.core_animated_pages.removeAttribute('hidden');
      }
    });

  </script>

</polymer-element>