res/imp/alert-sk.html

<!--
  The common.js file must be included before this file.

  This in an HTML Import-able file that contains the definition
  of the following elements:

    <alert-sk>

  To use this file import it:

    <link href="/res/imp/alert-sk.html" rel="import" />

  Usage:

    <alert-sk></alert-sk>

  Properties:
    alert: Object, Expected to have the following attributes:
        id: Number
        message: String
        name: String
        comments: Array of comment Objects.
        selected: Boolean
        snoozedUntil: Number

    allow_edit: Boolean, Whether or not to allow edits for users with edit rights.

    compact: Boolean, If true, minimal information about alerts is displayed.

  Methods:
    None

  Events:
    submit - Fired when the alert is changed by the user through the alert
        controls.
-->
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/res/common/imp/alert-controls-sk.html">
<link rel="import" href="/res/common/imp/comments-sk.html">
<link rel="import" href="/res/common/imp/human-date-sk.html">
<link rel="import" href="/res/common/imp/linkify-sk.html">
<dom-module id="alert-sk">
  <template>
    <style include="iron-flex iron-flex-alignment iron-positioning">
      #wrapper {
        padding: 20px;
        margin: 10px;
        border-radius: 10px;
        background-color: #F5F5F5;
        color: #000000;
      }
      div.message {
        overflow-wrap: word-break;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      div.message[disabled] {
        color: #AAAAAA;
      }
      h3 {
        margin-top: 0px;
      }
      #commentContainer {
        margin-top: 15px;
      }
      paper-checkbox {
        margin-right: 10px;
      }
    </style>
    <div id="wrapper" class="vertical horizontal center">
      <div class="horizontal layout start">
        <template is="dom-if" if="[[_editRights]]">
          <paper-checkbox id="checkbox" on-change="_selectedChanged" checked="{{alert.selected}}"></paper-checkbox>
        </template>
        <div class="message flex">
          <h3>[[alert.name]]</h3>
          <linkify-sk text="[[alert.message]]"></linkify-sk>
        </div>
        <template is="dom-if" if="[[_isSnoozed(alert)]]">
          <div class="message">Snoozed for <human-date-sk date="[[alert.snoozedUntil]]" diff seconds></human-date-sk></div>
        </template>
      </div>
      <template is="dom-if" if="[[!compact]]">
        <div id="commentContainer">
          <comments-sk comments="[[alert.comments]]" collapsible></comments-sk>
          <template is="dom-if" if="[[_editRights]]">
            <alert-controls-sk
                id="controls"
                alert_name="[[alert.name]]"
                alert_url="[[_getAlertUrl(alert)]]"
                show_snooze="[[!_isSnoozed(alert)]]"
                show_unsnooze="[[_isSnoozed(alert)]]"
                on-submit="_submit">
            </alert-controls-sk>
          </template>
        </div>
      </template>
    </div>
  </template>
  <script>
    Polymer({
      is: "alert-sk",

      properties: {
        /**
         * The alert object. Expected to have the following attributes:
         *     id: Number
         *     message: String
         *     name: String
         *     comments: Array of comment objects.
         *     selected: Boolean
         *     snoozedUntil: Number
         */
        alert: {
          type: Object,
          value: function() { return {}; },
        },

        /**
         * Whether or not to allow edits for users with edit rights.
         */
        allow_edit: {
          type: Boolean,
          value: false,
        },

        /**
         * If true, minimal information about alerts is displayed.
         */
        compact: {
          type: Boolean,
          value: false,
        },

        _editRights: {
          type: Boolean,
          computed: "_canEdit(allow_edit, _loggedInUser)",
        },

        _loggedInUser: {
          type: Boolean,
          value: false,
        },
      },

      ready: function() {
        sk.Login.then(function (status) {
          var email = status["Email"];
          if (sk.isGoogler(email)) {
            this._loggedInUser = true;
          }
        }.bind(this));
      },

      _canEdit: function(allow_edit, _loggedInUser) {
        return allow_edit && _loggedInUser;
      },

      _selectedChanged: function(e) {
        e.stopPropagation();
        this.fire("select-changed", {
          id: this.alert.id,
          selected: this.alert.selected
        });
        return true;
      },

      _isSnoozed: function(alert) {
        return alert.snoozedUntil > 0;
      },

      _getAlertUrl: function(alert) {
        return "/json/alerts/" + alert.id;
      },

      _submit: function(e) {
        this.dispatchEvent(new CustomEvent("submit", e));
      },
    });
  </script>
</dom-module>