wawm-app.html

<link rel="import" href="/bower_components/app-route/app-route.html">
<link rel="import" href="/bower_components/app-route/app-location.html">
<link rel="import" href="/bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/firebase-auth.html">
<link rel='import' href='/bower_components/paper-input/paper-input.html'>
<link rel='import' href='/bower_components/iron-pages/iron-pages.html'>
<link rel="import" href="../elements/my-icons.html">
<link rel="import" href="../elements/animal-firebase-selector.html">
<link rel="import" href="../elements/edit-animal.html">
<link rel="import" href="../elements/addable-fab.html">
<link rel="import" href="../elements/config-details.html">
<link rel="import" href="../elements/users-details.html">
<link rel="import" href="../elements/welcome-page.html">
<link rel="import" href="../utils/utils-lazy.html">
<dom-module id="waw-users">
  <template>
    <style>
       :host {
        display: block;
        --app-primary-color: #ff5722;
        --app-primary-text-color: rgba(255, 255, 255, 0.87);
        --app-secondary-color: #3f51b5;
        --app-secondary-text-color: #rgba(0, 0, 0, 0.87);
        --app-toolbar-font-size: 30px;
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        --wawm-column-width: 500;
      }
      
      app-header {
        color: var(--app-primary-text-color);
        background-color: var(--app-primary-color);
        font-weight: bold;
      }
      
      app-header paper-icon-button {
        --paper-icon-button-ink-color: var( --app-primary-text-color, white);
      }
      
      app-toolbar img {
        margin: 5px;
        height: 60px;
      }
      
      .drawer-list {
        margin: 0 20px;
      }
      
      .spacer {
        @apply (--layout-flex);
      }
    </style>
    <app-location route="{{route}}"></app-location>
    <addable-fab section="[[selectedpage]]">
      <app-drawer-layout>
        <app-drawer id="drawer">
          <app-toolbar><img src='/src/images/web_logo.png'></app-toolbar>
          <div class="drawer-list">
            <pandagrove-permission permissions="can_edit_animals">
              <paper-input value="{{animalchip}}" label="Microchip Number" on-focus='_setSelected' select='animalgridchip'></paper-input>
              <paper-input value="{{animalname}}" label="Animal's Name" on-focus='_setSelected' select='animalgrid'></paper-input>
              <paper-input value="{{vetcode}}" label="Vet Code" on-focus='_setSelected' select='vetcode'></paper-input>
            </pandagrove-permission>
            <pandagrove-permission permissions="can_edit_config" select='config'>
              <paper-button on-tap="_setSelected" select='config'>Configuration</paper-button>
            </pandagrove-permission>
            <pandagrove-permission permissions="can_edit_users" select='users'>
              <paper-button on-tap="_setSelected" select='users'>Users</paper-button><br>
            </pandagrove-permission>
            <paper-button on-tap="signOut">Sign out</paper-button>
          </div>
        </app-drawer>
        <app-header-layout>
          <app-header condenses fixed effects="waterfall">
            <app-toolbar>
              <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
              <div main-title>W.A.W.M</div>
            </app-toolbar>
          </app-header>
          <iron-pages selected='{{selectedpage}}' attr-for-selected="toselect">
            <welcome-page toselect='default'></welcome-page>
            <pandagrove-permission toselect='animalgrid' permissions="can_edit_animals">
              <animal-firebase-selector app-name="wawm" path="/animals" searchstart="{{loweranimalname}}" searchkey="name"></animal-firebase-selector>
            </pandagrove-permission>
            <pandagrove-permission toselect='animalgridchip' permissions="can_edit_animals">
              <animal-firebase-selector toselect='animalgridchip' app-name="wawm" path="/animals" searchstart="{{animalchip}}" searchkey="microchip"></animal-firebase-selector>
            </pandagrove-permission>
            <pandagrove-permission toselect='vetcode' permissions="can_edit_animals">
              <animal-firebase-selector toselect='vetcode' app-name="wawm" path="/animals" searchstart="{{vetcode}}" searchkey="vetcode"></animal-firebase-selector>
            </pandagrove-permission>
            <pandagrove-permission toselect="config" permissions="can_edit_config">
              <config-details></config-details>
            </pandagrove-permission>
            <pandagrove-permission toselect="users" permissions="can_edit_users">
              <users-details></users-details>
            </pandagrove-permission>
            <edit-animal selected-animal='{{currentAnimal}}' toselect='showanimal'></edit-animal>
          </iron-pages>
        </app-header-layout>
      </app-drawer-layout>
    </addable-fab>
  </template>
  <script>
    Polymer({

      is: 'waw-users',

      properties: {
        route: {
          type: String,
          notify: true,

        },
        animalname: String,
        loweranimalname: {
          type: String,
          computed: 'toLower(animalname)'
        },
        selectedpage: {
          type: String,
          value: 'default'
        },
        currentAnimal : {
          type: String,
          value: ''
        }
      },
      listeners: {
        'show-animal': 'animalselected'
      },
      toLower: function (name) {
        return name ? name.toLowerCase() : '';
      },
      signOut: function (e) {
        this.fire("waw-signout");
      },
      _setSelected: function (event) {
        var selected = this._getValueFromObject('currentTarget.attributes.select.value', event)
        if (selected) {
          this.selectedpage = selected
        }
      },

      _getValueFromObject: function (pointer, data) {
        return Lazy(pointer.split('.')).reduce(function (data, item) {
          if (data === null || data === undefined) {
            return null
          }
          return data[item]
        }.bind(this), data)
      },
      animalselected: function (event) {
        this.currentAnimal = event.detail.$key
        this.selectedpage = 'showanimal'
      }



    });
  </script>
</dom-module>