| <!-- The <gold-status-sk> element displays the status of gold |
| |
| Attributes: |
| status: Input attribute that defines the current status. Should be in the format: |
| { |
| corpStatus: [ |
| {name: "svg", untriagedCount: 47, negativeCount:949 }, |
| {name: "colorImage", untriagedCount: 17, negativeCount:449 }, |
| {name: "gm", untriagedCount: 27, negativeCount:649 }, |
| {name: "image", untriagedCount: 61, negativeCount:9 } |
| ], |
| lastCommit: { |
| hash: "136baaa927877e0f7fcc97acb456ee0d63f7f343", |
| author: "username", |
| } |
| } |
| |
| The keys of corpStatus are the different corpora availalbe. |
| |
| corpus: Output attribute that reflects the currently selected corpus. |
| |
| Events: |
| corpus-change: Fired whenever the corpus is changed by the user. |
| |
| Methods: |
| setCorpus(corpus): Sets the current corpus to the given argument. It does |
| not fire a corpus-change event. |
| --> |
| <link rel="import" href="bower_components/polymer/polymer.html"> |
| <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> |
| <link rel="import" href="bower_components/paper-tabs/paper-tab.html"> |
| <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <dom-module id="gold-status-sk"> |
| <template> |
| <style> |
| .wrapper { |
| min-height: 48px; |
| display: inline-block; |
| float: left; |
| } |
| |
| #corpusSelector { |
| display: inline-block; |
| } |
| |
| .statusEntry { |
| font-size: 12pt; |
| display: inline-block; |
| float: left; |
| height: 48px; |
| line-height: 48px; |
| padding: 0 1em 0 1em; |
| position: relative; |
| } |
| |
| .statusEntry a { |
| color: white; |
| } |
| |
| /* iron-selected is applied to paper-tab when selected */ |
| paper-tab.iron-selected div.marker { |
| height: 6px; |
| background-color: white; |
| position:absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| } |
| |
| paper-tab.iron-selected { |
| font-weight: bold; |
| } |
| |
| :host { |
| --paper-tabs-selection-bar-color: white; |
| }; |
| </style> |
| <template is="dom-if" if="{{status}}"> |
| <div class="wrapper"> |
| <paper-tabs id="corpusSelector" attr-for-selected="data-tabid" selected="{{corpus}}" on-iron-select="_handleCorpusChanged" no-slide no-bar noink> |
| <template is="dom-repeat" items="{{status.corpStatus}}"> |
| <paper-tab class="statusEntry" data-tabid$="{{item.name}}"> |
| {{item.name}}:{{item.untriagedCount}} / {{item.negativeCount}} |
| <div class="marker"></marker> |
| </paper-tab> |
| </template> |
| </paper-tabs> |
| </div> |
| <div class="statusEntry"> |
| <a href$="{{_commitURL(status.lastCommit.hash)}}" target="_blank"> |
| Last Commit: {{_lastCommitText(status)}} |
| </a> |
| </div> |
| </div> |
| </template> |
| </template> |
| <script> |
| Polymer({ |
| is: "gold-status-sk", |
| |
| properties: { |
| status: { |
| type: Object, |
| value: null |
| }, |
| corpus: { |
| type: String, |
| value: sk.app_config.defaultCorpus, |
| notify: true, |
| reflectToAttribute: true |
| } |
| }, |
| |
| ready: function() { |
| this.status = null; |
| this._noFire = true; |
| this._reload(); |
| }, |
| |
| setCorpus: function(corpus) { |
| if (this.corpus === corpus) { |
| return; |
| } |
| this._noFire = true; |
| if (this.status) { |
| for(var i=0, len=this.status.corpStatus.length; i < len; i++) { |
| if (this.status.corpStatus[i].name === corpus) { |
| this.set("corpus", corpus); |
| return; |
| } |
| } |
| // Since this is not a valid status set to default. |
| this.set("corpus", "gm"); |
| return; |
| } |
| // If we have to way to validate the status, trust the client. |
| this.set("corpus", corpus); |
| }, |
| |
| // Called when the user selects a corpus. |
| _handleCorpusChanged: function(ev) { |
| if (!this._noFire) { |
| this.fire('corpus-change', ev.target.selected); |
| } |
| this._noFire = false; |
| }, |
| |
| // Load or reload the listing. |
| _reload: function() { |
| sk.get("/json/trstatus").then(JSON.parse).then(function (json) { |
| if (JSON.stringify(json) != JSON.stringify(this.status)) { |
| this.status = json; |
| } |
| |
| this.async(this._reload, 3000); |
| }.bind(this)).catch(function(errorMessage) { |
| this.status = null; |
| console.log("Status Error:", errorMessage); |
| this.async(this._reload, 3000); |
| }.bind(this)); |
| }, |
| |
| _lastCommitText: function(status) { |
| return this._limitTo(status.lastCommit.hash, 7) + " - " + this._limitTo(status.lastCommit.author, 0); |
| }, |
| |
| // _limitTo is a custom filter that returns the first len characters of |
| // a string or all characters before '(' - depending on len. |
| _limitTo: function(val, len) { |
| if (len > 0) { |
| return val.substr(0, len); |
| } |
| var idx = val.indexOf('('); |
| return val.substring(0, (idx === -1) ? val.length : idx); |
| }, |
| |
| // _commitURL returns the repository url for the given hash. |
| _commitURL: function(hash) { |
| var url = sk.app_config.baseRepoURL; |
| if (!url) { |
| // should never happen, but with Polymer, one can never be too cautious. |
| return; |
| } |
| if (url.indexOf('github.com') !== -1) { |
| return url + '/commit/' + hash; |
| } else { |
| return url + '/+show/' + hash; |
| } |
| } |
| }); |
| </script> |
| </dom-module> |