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/polymer/polymer.html"> | |
8 <link rel="import" href="../../bower_components/app-layout/app-layout.html"> | |
9 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.ht ml"> | |
10 <link rel="import" href="../../bower_components/paper-button/paper-button.html"> | |
11 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> | |
12 <link rel="import" href="config-card.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 .logo { | |
27 height: 100%; | |
28 } | |
29 | |
30 .title { | |
31 padding-left: 1%; | |
32 font-size: 150%; | |
33 font-family: sans-serif; | |
34 } | |
35 | |
36 .search-bar { | |
37 padding-top: 7%; | |
38 padding-bottom: 2%; | |
39 } | |
40 | |
41 paper-search-bar { | |
42 border-style: solid; | |
43 border-width: 2px; | |
44 width: 40%; | |
45 height: 100%; | |
46 margin: auto; | |
47 } | |
48 </style> | |
49 | |
50 <app-header reveals> | |
51 <app-toolbar> | |
52 <image class="logo" src="../../images/chromium.png"/> | |
Sergey Berezin (google)
2017/06/12 20:01:41
nit: how big is the icon file? It may be useful to
cwpayton
2017/06/12 21:49:33
Done.
| |
53 <div class="title" main-title>Configuration Service (not fully implement ed)</div> | |
54 </app-toolbar> | |
55 </app-header> | |
56 | |
57 <iron-ajax | |
58 auto | |
59 id="requestConfigs" | |
60 url="{{url}}" | |
61 handle-as="json" | |
62 on-response="_getConfigs"> | |
63 </iron-ajax> | |
64 | |
65 <div class="search-bar"> | |
66 <paper-search-bar query="{{search}}"></paper-search-bar> | |
67 </div> | |
68 | |
69 <div class="config-list"> | |
70 <template is="dom-if" if="{{_not(empty)}}"> | |
71 <template is="dom-repeat" items="[[searchList]]" as="config"> | |
72 <config-card name="[[config.config_set]]"></config-card> | |
73 </template> | |
74 </template> | |
75 <template is="dom-if" if="{{empty}}"> | |
76 <config-card name="Fetching configs sets..."></config-card> | |
Sergey Berezin (google)
2017/06/12 20:01:41
For app instances that do not (yet) have config se
cwpayton
2017/06/12 21:49:33
Done.
| |
77 </template> | |
78 </div> | |
79 </template> | |
80 | |
81 <script> | |
82 Polymer({ | |
83 is: 'front-page', | |
84 | |
85 properties: { | |
86 configList: { | |
87 type: Array, | |
88 value: [] | |
89 }, | |
90 | |
91 empty: { | |
Sergey Berezin (google)
2017/06/12 20:01:41
s/empty/isLoading/ - see the comment above.
cwpayton
2017/06/12 21:49:33
Done.
| |
92 type: Boolean, | |
93 value: true | |
94 }, | |
95 | |
96 search: { | |
97 type: String, | |
98 observer: '_searched' | |
99 }, | |
100 | |
101 searchList: { | |
102 type: Array, | |
103 value: [] | |
104 }, | |
105 | |
106 url: { | |
107 type: String, | |
108 value: "https://luci-config.appspot.com/_ah/api/config/v1/config-sets" | |
Sergey Berezin (google)
2017/06/12 20:01:41
So this UI will only work on luci-config instance.
| |
109 } | |
110 }, | |
111 | |
112 _getConfigs: function(event) { | |
113 this.configList = event.detail.response.config_sets; | |
114 this.searchList = this.configList; | |
Sergey Berezin (google)
2017/06/12 20:01:41
You may want to call _searched() here instead.
Con
cwpayton
2017/06/12 21:49:33
Done.
| |
115 this.empty = false; | |
116 }, | |
117 | |
118 _not: function(bool) { | |
119 return (!(bool)); | |
120 }, | |
121 | |
122 _searched: function() { | |
123 this.searchList = []; | |
124 this.configList.forEach((elem) => { | |
125 if (elem.config_set.includes(this.search)) { | |
126 this.searchList.push(elem); | |
127 } | |
128 }); | |
129 return this.searchList; | |
130 } | |
131 }); | |
132 </script> | |
133 </dom-module> | |
OLD | NEW |