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="https://luci-config.appspot.com/_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 <config-card name="No config sets found."></config-card> | |
Sergey Berezin (google)
2017/06/13 17:41:13
nit: I'd leave it as a plain <div>, not a config-c
| |
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: [] | |
nodir
2017/06/13 17:13:56
use a function that returns an array here too
| |
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: () => { return []; } | |
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(bool) { | |
129 return (!(bool)); | |
nodir
2017/06/13 17:13:56
nit: this parens unnecessary. This can be `return
nodir
2017/06/13 17:23:40
or even shorter
_not: b => !b
| |
130 }, | |
131 | |
132 _updateSearchResults: function() { | |
133 var query = this.query; | |
nodir
2017/06/13 17:13:56
this variable is no longer necessary
`this.query`
| |
134 this.searchResults = this.configSetList.filter(e => e.config_set.include s(query)); | |
135 } | |
136 }); | |
137 </script> | |
138 </dom-module> | |
OLD | NEW |