| <!-- |
| 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> |