| <!-- |
| The <ignores-page-sk> custom element declaration. |
| |
| A container element to manage the any digests that should be ignored. |
| |
| Attributes: |
| None |
| |
| Methods: |
| pageSelected: This function has to be called if the page is selected |
| via a route. It's equivalent to the ready function, when we don't |
| want to trigger loading the content unless a user selects the page. |
| |
| pageDeselected: Has to be called when the page goes out of view. |
| |
| Events: |
| None |
| |
| Mailboxes: |
| None |
| |
| --> |
| |
| <link rel="import" href="bower_components/polymer/polymer.html"> |
| <link rel="import" href="bower_components/paper-dialog/paper-dialog.html"> |
| <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="bower_components/paper-fab/paper-fab.html"> |
| <link rel="import" href="bower_components/paper-input/paper-input.html"> |
| <link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"> |
| <link rel="import" href="bower_components/paper-tooltip/paper-tooltip.html"> |
| |
| <link rel=import href="../common/imp/query.html"> |
| |
| <link rel="import" href="ignore-summary-sk.html"> |
| <link rel="import" href="shared-styles.html"> |
| |
| <dom-module id="ignores-page-sk"> |
| <template> |
| <style include="shared-styles"></style> |
| <style include="iron-flex iron-flex-alignment"> |
| paper-button { |
| min-width: 2em; |
| } |
| |
| .ignoresPageWrapper { |
| padding: 1em; |
| } |
| |
| #nameHeader, |
| #updatedByHeader, |
| #expiresHeader, |
| #queryHeader, |
| #noteHeader, |
| #countHeader { |
| display: inline-block; |
| font-weight: bold; |
| margin-right: 0.5em; |
| } |
| |
| #nameHeader { |
| width: 18em; |
| } |
| |
| #updatedByHeader { |
| width: 18em; |
| } |
| |
| #expiresHeader { |
| width: 5em; |
| } |
| |
| #countHeader { |
| width: 8em; |
| } |
| |
| #queryHeader { |
| width: 20em; |
| } |
| |
| #noteHeader { |
| width: 20em; |
| } |
| |
| ignore-summary-sk { |
| margin-bottom: 2em; |
| } |
| |
| query-sk { |
| display: block; |
| } |
| |
| paper-input { |
| display: block; |
| margin-bottom: 1em; |
| } |
| |
| #addFab { |
| --paper-fab: { |
| position: fixed; |
| right: 2em; |
| bottom: 2em; |
| background-color: #d23f31; |
| }; |
| } |
| |
| #save { |
| display: none; |
| } |
| |
| #dialog.save #save { |
| display: inline-block; |
| } |
| |
| #dialog.save #add { |
| display: none; |
| } |
| |
| </style> |
| <div class="layout vertical ignoresPageWrapper"> |
| <div class="layout horizontal"> |
| <div id=nameHeader>Name</div> |
| <div id=expiresHeader>Expires</div> |
| <div id=updatedByHeader>Updated By</div> |
| <div id=queryHeader>Filter</div> |
| <div id=noteHeader>Note</div> |
| <div id=countHeader>Ignored <iron-icon class="headerIcon" icon="icons:info-outline"></iron-icon> |
| <paper-tooltip>Number of images that match this rule: <br> |
| Exclusively matched images / All matched images |
| </paper-tooltip> |
| </div> |
| </div> |
| <div id=summaries class="vertical layout"> |
| <template is="dom-repeat" items={{ignores}}> |
| <ignore-summary-sk value="{{item}}"></ignore-summary-sk> |
| </template> |
| </div> |
| </div> |
| |
| <paper-dialog id="confirmDelete"> |
| <h2>Confirm Delete</h2> |
| <p>Are you sure you want to delete this rule?</p> |
| <div class="buttons"> |
| <paper-button raise dialog-dismiss>Cancel</paper-button> |
| <paper-button id="okDelete" raise>OK</paper-button> |
| </div> |
| </paper-dialog> |
| |
| |
| <paper-fab id="addFab" icon="add"></paper-fab> |
| |
| <paper-dialog id="addEditDialog"> |
| <paper-dialog-scrollable> |
| <paper-input id="durationInput" |
| label="Duration (1s, 5m, 2h, 3d, 5w)" value="{{_currRule.duration}}"></paper-input> |
| <paper-input label="Note" value="{{_currRule.note}}"></paper-input> |
| <query-sk id="queryInput" whitelist="[]" matches="" feedback></query-sk> |
| </paper-dialog-scrollable> |
| <div class="buttons"> |
| <paper-button id="addButton" hidden$="{{_isEdit}}" disabled$="{{_buttonDisabled}}" raised>Add</paper-button> |
| <paper-button id="saveButton" hidden$="{{!_isEdit}}" disabled$="{{_buttonDisabled}}" raised>Save</paper-button> |
| <paper-button dialog-dismiss>Cancel</paper-button> |
| </div> |
| </paper-dialog> |
| </template> |
| <script> |
| Polymer({ |
| is: "ignores-page-sk", |
| |
| properties: { |
| _currRule: { |
| type: Object, |
| value: function() { return {}; }, |
| notify: true |
| }, |
| |
| _currId: { |
| value: "" |
| }, |
| |
| _isEdit: { |
| type: Boolean, |
| value: false |
| }, |
| |
| _buttonDisabled: { |
| type: Boolean, |
| value: false |
| } |
| }, |
| |
| ready: function() { |
| this.listen(this.$.addFab, 'click', '_handleAddClick'); |
| this.listen(this.$.summaries, 'edit', '_handleItemEdit'); |
| this.listen(this.$.summaries, 'delete', '_handleItemDelete'); |
| this.listen(this.$.durationInput, 'change', '_readyToAdd'); |
| this.listen(this.$.queryInput, 'change', '_readyToAdd'); |
| this.listen(this.$.addButton, 'click', '_handleAddButton'); |
| this.listen(this.$.saveButton, 'click', '_handleSaveButton'); |
| this.listen(this.$.okDelete, 'click', '_handleDeleteButton'); |
| }, |
| |
| pageSelected: function() { |
| sk.get("/json/ignores?counts=1").then(JSON.parse).then(function (json) { |
| this._displayRules(json); |
| }.bind(this)).catch(sk.errorMessage); |
| |
| sk.get("/json/paramset").then(JSON.parse).then(function (json) { |
| this.$.queryInput.setParamSet(json); |
| }.bind(this)).catch(sk.errorMessage); |
| }, |
| |
| pageDeselected: function() { |
| if (this.$.addEditDialog.opened) { |
| this._closeDialog(); |
| } |
| if (this.$.confirmDelete.opened) { |
| this.$.confirmDelete.close(); |
| } |
| }, |
| |
| _displayRules: function(json) { |
| this.set('ignores', json); |
| }, |
| |
| _handleAddClick: function(ev) { |
| ev.stopPropagation(); |
| var v = ev.detail; |
| this.set('_currRule.duration', "4h"); |
| this.set('_currRule.note', ""); |
| this.$.queryInput.clearSelections(); |
| this._currId = ""; |
| this._openDialog(false); |
| }, |
| |
| _handleItemEdit: function(ev) { |
| ev.stopPropagation(); |
| var v = ev.detail; |
| this.set('_currRule.duration', sk.human.diffDate(v.expires)); |
| this.set('_currRule.note', v.note); |
| this.$.queryInput.setSelections(v.query); |
| this._currId = v.id; |
| this._openDialog(true); |
| }, |
| |
| _handleItemDelete: function(ev) { |
| ev.stopPropagation(); |
| this._currId = ev.detail.id; |
| this.$.confirmDelete.open(); |
| }, |
| |
| _handleAddButton: function() { |
| this._sendRule('/json/ignores/add/'); |
| }, |
| |
| _handleSaveButton: function() { |
| this._sendRule('/json/ignores/save/'+this._currId); |
| }, |
| |
| _handleDeleteButton: function() { |
| sk.post('/json/ignores/del/'+this._currId).then(function() { |
| this.$.confirmDelete.close(); |
| this.pageSelected(); |
| }.bind(this)).catch(function(e) { |
| this.$.confirmDelete.close(); |
| sk.errorMessage(e); |
| }.bind(this)); |
| }, |
| |
| _sendRule: function(url) { |
| this._currRule.filter = this.$.queryInput.currentquery; |
| sk.post(url, JSON.stringify(this._currRule)).then(function() { |
| this._closeDialog(); |
| this.pageSelected(); |
| }.bind(this)).catch(function(e) { |
| this._closeDialog(); |
| sk.errorMessage(e); |
| }.bind(this)); |
| }, |
| |
| _readyToAdd: function() { |
| var durationVal = this.$.durationInput.value; |
| var queryVal = this.$.queryInput.currentquery; |
| this._buttonDisabled = !((durationVal != '') && (queryVal != '')); |
| }, |
| |
| _closeDialog: function() { |
| this.$.addEditDialog.close(); |
| }, |
| |
| _openDialog: function(isEdit) { |
| this._isEdit = isEdit; |
| this._readyToAdd(); |
| this.$.addEditDialog.open(); |
| } |
| }); |
| </script> |
| </dom-module> |
