messaging-topic-form.html

<link rel="import" href="../polymer/polymer.html">

<!--Paper elements-->
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-styles/color.html">

<!-- Firebase elements -->
<link rel="import" href="../polymerfire/firebase-document.html">

<!--
`<messaging-topic-form>`

@demo demo/messaging-topic-form/index.html 
-->

<dom-module id="messaging-topic-form">

  <template>

    <style>
      :host {
        display: block;
      }
      paper-button.green {
        background-color: var(--paper-green-500);
        color: white;
      }
    </style>

    <firebase-document id="nofiticationDocument"
        data="[[notificationData]]"></firebase-document>

    <paper-input
        required
        disabled
        label="Topic"
        value="{{topic}}"></paper-input>
    <paper-input
        required
        label="Title"
        value="{{title}}"></paper-input>
    <paper-input
        required
        label="Body"
        value="{{body}}"></paper-input>
    <paper-input
        label="Click action"
        placeholder="https://google.com"
        value="{{click_action}}"></paper-input>

    <paper-button class="green"
        raised
        on-tap="sendNotification">Send</paper-button>

  </template>

  <script>
    Polymer({

      is: 'messaging-topic-form',

      properties: {
        topic: {
          type: String,
          value: ''
        },
        title: {
          type: String,
          value: null
        },
        body: {
          type: String,
          value: null
        },
        click_action: {
          type: String,
          value: null
        },
        notificationData: {
          type: Object
        }
      },

      sendNotification: function() {
        this.set('notificationData', {
          topic: this.topic,
          notification: {
            title: this.title,
            body: this.body,
            click_action: this.click_action
          }
        });

        this.$.nofiticationDocument.save('/notifications').then(function() {
          this.$.nofiticationDocument.reset();
        }.bind(this));
      }

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