OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright 2017 The LUCI Authors. All rights reserved. |
| 3 Use of this source code is governed under the Apache License, Version 2.0 |
| 4 that can be found in the LICENSE file. |
| 5 --> |
| 6 |
| 7 <link rel="import" href="../../bower_components/app-layout/app-layout.html"> |
| 8 <link rel="import" href="config-card.html"> |
| 9 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> |
| 10 <link rel="import" href="../../bower_components/paper-button/paper-button.html"> |
| 11 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.ht
ml"> |
| 12 <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 13 |
| 14 <dom-module id="front-page"> |
| 15 <template> |
| 16 <style> |
| 17 app-toolbar { |
| 18 background-color: #efefef; |
| 19 color: #232323; |
| 20 } |
| 21 |
| 22 app-header { |
| 23 @apply --layout-fixed-top; |
| 24 } |
| 25 |
| 26 .center { |
| 27 width: 50%; |
| 28 margin: auto; |
| 29 text-align: center; |
| 30 } |
| 31 |
| 32 .logo { |
| 33 height: 100%; |
| 34 } |
| 35 |
| 36 .title { |
| 37 padding-left: 1%; |
| 38 font-size: 150%; |
| 39 font-family: sans-serif; |
| 40 } |
| 41 |
| 42 .search-bar { |
| 43 padding-top: 7%; |
| 44 padding-bottom: 2%; |
| 45 } |
| 46 |
| 47 paper-search-bar { |
| 48 border-style: solid; |
| 49 border-width: 2px; |
| 50 width: 40%; |
| 51 height: 100%; |
| 52 margin: auto; |
| 53 } |
| 54 </style> |
| 55 |
| 56 <app-header reveals> |
| 57 <app-toolbar> |
| 58 <image class="logo" src="/static/images/chromium.png"/> |
| 59 <div class="title" main-title>Configuration Service (not fully implement
ed)</div> |
| 60 </app-toolbar> |
| 61 </app-header> |
| 62 |
| 63 <iron-ajax |
| 64 auto |
| 65 id="requestConfigs" |
| 66 url="/_ah/api/config/v1/config-sets" |
| 67 handle-as="json" |
| 68 on-response="_onGotConfigSets"> |
| 69 </iron-ajax> |
| 70 |
| 71 <div class="search-bar"> |
| 72 <paper-search-bar query="{{query}}"></paper-search-bar> |
| 73 </div> |
| 74 |
| 75 <div class="config-list"> |
| 76 <template is="dom-if" if="[[isLoading]]"> |
| 77 <div class="center">Fetching config sets...</div> |
| 78 </template> |
| 79 <template is="dom-if" if="[[_not(isLoading)]]"> |
| 80 <template is="dom-if" if="[[_isEmpty(searchResults)]]"> |
| 81 <div class="center">No config sets found.</div> |
| 82 </template> |
| 83 <template is="dom-if" if="[[_not(_isEmpty(searchResults))]]"> |
| 84 <template is="dom-repeat" items="[[searchResults]]" as="config"> |
| 85 <config-card name="[[config.config_set]]"></config-card> |
| 86 </template> |
| 87 </template> |
| 88 </template> |
| 89 </div> |
| 90 </template> |
| 91 |
| 92 <script> |
| 93 Polymer({ |
| 94 is: 'front-page', |
| 95 |
| 96 properties: { |
| 97 configSetList: { |
| 98 type: Array, |
| 99 value: () => [] |
| 100 }, |
| 101 |
| 102 isLoading: { |
| 103 type: Boolean, |
| 104 value: true |
| 105 }, |
| 106 |
| 107 query: { |
| 108 type: String, |
| 109 observer: '_updateSearchResults' |
| 110 }, |
| 111 |
| 112 searchResults: { |
| 113 type: Array, |
| 114 value: () => [] |
| 115 } |
| 116 }, |
| 117 |
| 118 _isEmpty: function(array) { |
| 119 return array.length === 0; |
| 120 }, |
| 121 |
| 122 _onGotConfigSets: function(event) { |
| 123 this.configSetList = event.detail.response.config_sets; |
| 124 this._updateSearchResults(); |
| 125 this.isLoading = false; |
| 126 }, |
| 127 |
| 128 _not: function(b) { |
| 129 return !b; |
| 130 }, |
| 131 |
| 132 _updateSearchResults: function() { |
| 133 this.searchResults = this.configSetList.filter(e => e.config_set.include
s(this.query)); |
| 134 } |
| 135 }); |
| 136 </script> |
| 137 </dom-module> |
OLD | NEW |