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="/static/images/chromium.png"/> | |
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}}" | |
nodir
2017/06/13 02:10:15
why this is a property binding as opposed to a con
cwpayton
2017/06/13 16:22:15
Done.
| |
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="{{isLoading}}"> | |
71 <config-card name="Fetching configs sets..."></config-card> | |
nodir
2017/06/13 02:10:15
s/configs sets/config sets/
nodir
2017/06/13 02:10:15
why is it a config card? It does not look right. I
cwpayton
2017/06/13 16:22:14
Done.
cwpayton
2017/06/13 16:22:14
Done.
| |
72 </template> | |
73 <template is="dom-if" if="{{_not(isLoading)}}"> | |
nodir
2017/06/13 02:10:14
use [[]] for read-only data bindings
cwpayton
2017/06/13 16:22:15
Done.
| |
74 <template is="dom-if" if="{{isEmpty}}"> | |
nodir
2017/06/13 02:10:14
use [[]] for read-only data bindings
cwpayton
2017/06/13 16:22:14
Done.
| |
75 <config-card name="No config sets found."></config-card> | |
76 </template> | |
77 <template is="dom-if" if="{{_not(isEmpty)}}"> | |
nodir
2017/06/13 02:10:14
use [[]] for read-only data bindings
cwpayton
2017/06/13 16:22:14
Done.
| |
78 <template is="dom-repeat" items="[[searchList]]" as="config"> | |
79 <config-card name="[[config.config_set]]"></config-card> | |
80 </template> | |
81 </template> | |
82 </template> | |
83 </div> | |
84 </template> | |
85 | |
86 <script> | |
87 Polymer({ | |
88 is: 'front-page', | |
89 | |
90 properties: { | |
91 configList: { | |
92 type: Array, | |
93 value: [] | |
94 }, | |
95 | |
96 isEmpty: { | |
97 type: Boolean, | |
98 value: true | |
nodir
2017/06/13 02:10:15
FWIU isEmpty is true if and only if len(searchList
cwpayton
2017/06/13 16:22:14
If I implement this as a function, it only gets ca
nodir
2017/06/13 16:48:22
i meant that isEmpty should accept search results
cwpayton
2017/06/13 17:00:03
Done.
| |
99 }, | |
100 | |
101 isLoading: { | |
102 type: Boolean, | |
103 value: true | |
104 }, | |
105 | |
106 search: { | |
nodir
2017/06/13 02:10:15
responsibility of this property is not obvious fro
cwpayton
2017/06/13 16:22:15
Done.
| |
107 type: String, | |
108 observer: '_searched' | |
109 }, | |
110 | |
111 searchList: { | |
112 type: Array, | |
113 value: [] | |
nodir
2017/06/13 02:10:14
see https://www.polymer-project.org/1.0/docs/devgu
cwpayton
2017/06/13 16:22:15
Done. Does it matter whether I use arrow function
nodir
2017/06/13 16:48:22
arrow function is nice
cwpayton
2017/06/13 17:00:03
Done.
| |
114 }, | |
115 | |
116 url: { | |
117 type: String, | |
118 value: "https://luci-config.appspot.com/_ah/api/config/v1/config-sets" | |
119 } | |
nodir
2017/06/13 02:10:15
i don't think this property is needed
cwpayton
2017/06/13 16:22:15
Done.
| |
120 }, | |
121 | |
122 _getConfigs: function(event) { | |
nodir
2017/06/13 02:10:15
name "_getConfigs" looks like it will get configs
cwpayton
2017/06/13 16:22:14
Done.
| |
123 this.configList = event.detail.response.config_sets; | |
124 this.searchList = this._searched(); | |
nodir
2017/06/13 02:10:14
_searched() sets this.searchList and returns it. T
cwpayton
2017/06/13 16:22:14
Done.
| |
125 this.isLoading = false; | |
126 this.isEmpty = this.searchList.length === 0; | |
127 }, | |
128 | |
129 _not: function(bool) { | |
130 return (!(bool)); | |
131 }, | |
132 | |
133 _searched: function() { | |
nodir
2017/06/13 02:10:14
responsibility of this function is not obvious fro
cwpayton
2017/06/13 16:22:14
Done.
| |
134 this.searchList = []; | |
135 this.configList.forEach((elem) => { | |
nodir
2017/06/13 02:10:15
parens around elem are unnecessary
cwpayton
2017/06/13 16:22:14
Done.
| |
136 if (elem.config_set.includes(this.search)) { | |
137 this.searchList.push(elem); | |
138 } | |
139 }); | |
nodir
2017/06/13 02:10:14
this essentially filters this.configList. Using fi
cwpayton
2017/06/13 16:22:15
Done.
| |
140 this.isEmpty = this.searchList.length === 0; | |
141 return this.searchList; | |
nodir
2017/06/13 02:10:14
there is no need to return this.searchList. If som
cwpayton
2017/06/13 16:22:15
Done.
| |
142 } | |
143 }); | |
144 </script> | |
145 </dom-module> | |
OLD | NEW |