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"/> | |
53 <div class="title" | |
Ryan Tseng
2017/06/12 23:47:17
You can do the line break at the tag level, so
<d
cwpayton
2017/06/13 16:22:14
Done.
| |
54 main-title>Configuration Service (not fully implemented)</div> | |
55 </app-toolbar> | |
56 </app-header> | |
57 | |
58 <iron-ajax | |
59 auto | |
Ryan Tseng
2017/06/12 23:47:17
nit: 2 indents, since it's still in a tag
cwpayton
2017/06/13 16:22:14
Done.
| |
60 id="requestConfigs" | |
61 url="{{url}}" | |
62 handle-as="json" | |
63 on-response="_getConfigs"> | |
64 </iron-ajax> | |
65 | |
66 <div class="search-bar"> | |
67 <paper-search-bar query="{{search}}"></paper-search-bar> | |
68 </div> | |
69 | |
70 <div class="config-list"> | |
71 <template is="dom-if" if="{{isLoading}}"> | |
72 <config-card name="Fetching configs sets..."></config-card> | |
73 </template> | |
74 <template is="dom-if" if="{{_not(isLoading)}}"> | |
75 <template is="dom-if" if="{{isEmpty}}"> | |
76 <config-card name="No config sets found."></config-card> | |
77 </template> | |
78 <template is="dom-if" if="{{_not(isEmpty)}}"> | |
79 <template is="dom-repeat" items="[[searchList]]" as="config"> | |
80 <config-card name="[[config.config_set]]"></config-card> | |
81 </template> | |
82 </template> | |
83 </template> | |
84 </div> | |
85 </template> | |
86 | |
87 <script> | |
88 Polymer({ | |
89 is: 'front-page', | |
90 | |
91 properties: { | |
92 configList: { | |
93 type: Array, | |
94 value: [] | |
95 }, | |
96 | |
97 isEmpty: { | |
98 type: Boolean, | |
99 value: true | |
100 }, | |
101 | |
102 isLoading: { | |
103 type: Boolean, | |
104 value: true | |
105 }, | |
106 | |
107 search: { | |
108 type: String, | |
109 observer: '_searched' | |
110 }, | |
111 | |
112 searchList: { | |
113 type: Array, | |
114 value: [] | |
115 }, | |
116 | |
117 url: { | |
118 type: String, | |
119 value: "/_ah/api/config/v1/config-sets" | |
120 } | |
121 }, | |
122 | |
123 _getConfigs: function(event) { | |
124 this.configList = event.detail.response.config_sets; | |
125 this.searchList = this._searched(); | |
126 this.isLoading = false; | |
127 this.isEmpty = this.searchList.length === 0; | |
128 }, | |
129 | |
130 _not: function(bool) { | |
131 return (!(bool)); | |
132 }, | |
133 | |
134 _searched: function() { | |
135 this.searchList = []; | |
136 this.configList.forEach((elem) => { | |
137 if (elem.config_set.includes(this.search)) { | |
138 this.searchList.push(elem); | |
139 } | |
140 }); | |
141 this.isEmpty = this.searchList.length === 0; | |
142 return this.searchList; | |
143 } | |
144 }); | |
145 </script> | |
146 </dom-module> | |
OLD | NEW |