View File | Revision Log | Show Annotations | Download File | View Changeset
/hippo/hippo-cms7/repository/trunk/servlets/src/main/resources/org/hippoecm/repository/RepositoryServlet-html.ftl
Revision: 57530
Committed: Wed Jan 6 08:23:50 2016 UTC (4 years, 8 months ago) by tjeger
File size: 13820 byte(s)
Log Message:
REPO-1244: Make xpath and sql query field a text area for better UX.

File Contents

# Content
1 <!DOCTYPE html>
2 <#--
3 Copyright 2014-2015 Hippo B.V. (http://www.onehippo.com)
4
5 Licensed under the Apache License, Version 2.0 (the "License");
6 you may not use this file except in compliance with the License.
7 You may obtain a copy of the License at
8
9 http://www.apache.org/licenses/LICENSE-2.0
10
11 Unless required by applicable law or agreed to in writing, software
12 distributed under the License is distributed on an "AS IS"
13 BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 See the License for the specific language governing permissions and
15 limitations under the License.
16 -->
17
18 ${response.setContentType("text/html;charset=UTF-8")}
19
20 <html>
21
22 <head>
23 <title>Hippo Repository Browser</title>
24 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
25 <style>
26 * {font-family: tahoma, arial, helvetica, sans-serif;}
27 * {font-size: 14px;}
28 body { background-color: #efefef }
29 h3 {margin:12px 2px 2px 2px}
30 td {text-align: left}
31 th {text-align: left}
32 tt, code, code *, kbd, samp { font-family: monospace; font-size: 13px;}
33 form {margin-top: 10px}
34 a {text-decoration: none;}
35
36 #error { background-color: #efef00; font-size: large; padding: 10px }
37
38 .hippo-header {
39 background: #32629b url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAYCAYAAAAGXva8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWZJREFUeNrsVtFRwkAQ9WjA60A6MB2YEqACsQKxA6xArCBSQbQCsQPoIHQQKojv6QuzZC4hkwQ/HHbmzYW73L3s7ts9XFEUV39t7kJ6VjtFivUIGA/J9+Opc85Oegxz4BbYmvevAZJ/4P23Xk5aT+XVJ8eGTTMg1cf1I+UhIvQtNkZdiY/Ci5EhXeN503IzCRMgY8jNUsxzOI+zslOkKcZphy8fK9e0e+BV4x64Ab6sBg6kEk7eRyBl2DE8As/0Er9fzPKW5x9yCiTA5Azl6Ct6ick30voTcDd453Eu1yPJV8r3L6kWfdcyaEFeCmpz1JHk+mKgsDKUs1JoSl8a7EhK/Kpt2dQQJiohr5R5eTsNdiSzqakpLNQY4pBwKooNNodRYD4PNXiGTEJgWT2oFqsWqT4bLUTK0EwC0meRLykKCW9Xc/tkre5Te8uIZF7mwti7zbW5jaq2NKVS33svf1f+Fem3AAMA5G0u/dkz/GsAAAAASUVORK5CYII=) no-repeat 5px 0;
40 height: 25px;
41 }
42
43 .username-box { float:left; color: white; font-weight: bold; font-size: small; padding: 5px 0 0 50px;}
44 .logout { float: right; padding: 4px 10px 0 0;}
45 .logout a { color: white; font-size: small;}
46
47 .query-input {width: 100%; height: 75px;}
48
49 .search-params {padding: 20px 0 10px 0;}
50 .search-params input { margin-bottom: 4px}
51
52 .search-type-selector {position:relative; margin-bottom: 20px;}
53 .search-type-selector hr { height: 1px; margin: 0;}
54 .search-type-selector .typeInput {position:absolute;left:-9999px}
55 .search-type-selector .typeLabel {display:inline-block; padding:8px 10px 5px 10px; cursor:pointer; min-width: 40px; text-align: center;}
56 .search-type-selector .typeInput:checked+.typeLabel { font-weight:bold; border-bottom: 4px solid #32629b;}
57
58 .search-type-selector #uuid-select:checked ~ .search-params .text-tab {display:none}
59 .search-type-selector #uuid-select:checked ~ .search-params .xpath-tab {display:none}
60 .search-type-selector #uuid-select:checked ~ .search-params .sql-tab {display:none}
61
62 .search-type-selector #text-select:checked ~ .search-params .uuid-tab {display:none}
63 .search-type-selector #text-select:checked ~ .search-params .xpath-tab {display:none}
64 .search-type-selector #text-select:checked ~ .search-params .sql-tab {display:none}
65
66 .search-type-selector #xpath-select:checked ~ .search-params .uuid-tab {display:none}
67 .search-type-selector #xpath-select:checked ~ .search-params .text-tab {display:none}
68 .search-type-selector #xpath-select:checked ~ .search-params .sql-tab {display:none}
69
70 .search-type-selector #sql-select:checked ~ .search-params .uuid-tab {display:none}
71 .search-type-selector #sql-select:checked ~ .search-params .text-tab {display:none}
72 .search-type-selector #sql-select:checked ~ .search-params .xpath-tab {display:none}
73 </style>
74 </head>
75
76 <body>
77 <div class="hippo-header">
78 <#if jcrSession??>
79 <div class="username-box"><noscript>Logged in as: </noscript>${jcrSession.userID}</div>
80 </#if>
81 <div class="logout">
82 <a href="${rootRelativePath}?logout">Log out</a>
83 </div>
84 </div>
85
86 <div>
87 <h3>Search by ...</h3>
88 <form name="queryForm" method="get" action="" accept-charset="UTF-8">
89
90 <#assign searchType = request.getParameter('search-type')!'xpath'/>
91 <div class="search-type-selector">
92
93 <!-- Lynx compatibility (no css, no javascript) -->
94 <noscript><div>Please select operation:</div></noscript>
95
96 <input class="typeInput" id="uuid-select" type="radio" value="uuid" name="search-type" <#if searchType == 'uuid'>checked="checked"</#if>>
97 <label class="typeLabel" for="uuid-select">UUID</label>
98 <input class="typeInput" id="text-select" type="radio" value="text" name="search-type" <#if searchType == 'text'>checked="checked"</#if>>
99 <label class="typeLabel" for="text-select">Text</label>
100 <input class="typeInput" id="xpath-select" type="radio" value="xpath" name="search-type" <#if searchType == 'xpath'>checked="checked"</#if>>
101 <label class="typeLabel" for="xpath-select">XPath</label>
102 <input class="typeInput" id="sql-select" type="radio" value="sql" name="search-type" <#if searchType == 'sql'>checked="checked"</#if>>
103 <label class="typeLabel" for="sql-select">SQL</label>
104 <hr>
105
106 <div class="search-params">
107 <#--UUID-->
108 <div class="uuid-tab">
109 <noscript>UUID:&nbsp;</noscript>
110 <input name="uuid" type="text" size="60" value="${request.getParameter('uuid')!}" placeholder="UUID"/>
111 </div>
112
113 <#--FREE TEXT-->
114 <div class="text-tab">
115 <noscript><div>&nbsp;</div>Text:&nbsp;</noscript>
116 <input name="text" type="text" size="60" value="${request.getParameter('text')!}" placeholder="Text search"/><br/>
117 Limit<noscript> (text search)</noscript>: <input name="text-limit" type="text" size="5" value="${request.getParameter('text-limit')!1000?c}"/>
118 </div>
119
120 <#--XPATH-->
121 <div class="xpath-tab">
122 <noscript><div>&nbsp;</div>XPath:</noscript>
123 <textarea class="query-input" name="xpath" placeholder="XPath query">${request.getParameter('xpath')!}</textarea><br/>
124 Limit<noscript> (XPath query)</noscript>: <input name="xpath-limit" type="text" size="5" value="${request.getParameter('xpath-limit')!1000?c}"/>
125 </div>
126
127 <#--SQL-->
128 <div class="sql-tab">
129 <noscript><div>&nbsp;</div>SQL:&nbsp;&nbsp;</noscript>
130 <textarea class="query-input" name="sql" placeholder="SQL query">${request.getParameter('sql')!}</textarea><br/>
131 Limit<noscript> (SQL query)</noscript>: <input name="sql-limit" type="text" size="5" value="${request.getParameter('sql-limit')!1000?c}"/>
132 </div>
133 </div>
134
135 <noscript><div>&nbsp;</div></noscript>
136 <input type="submit" value="Search"/>
137 </div>
138 </form>
139 </div>
140
141 <#if exception??>
142 <div id="error">
143 ERROR: <blockquote>${exception}</blockquote>
144 </div>
145 </#if>
146
147 <hr>
148
149 <#if currentNode??>
150 <h3>Referenced node</h3>
151 Accessing node:&nbsp;
152 <code>
153 <#assign baseRelPath = "./">
154 <#if currentNode.isSame(rootNode)>/<a href="${baseRelPath}">root</a>/
155 <#else>
156 <#assign distance = ancestorNodes?size>
157 <#assign baseRelPath = "">
158 <#list 0..distance as d>
159 <#assign baseRelPath = "../${baseRelPath}">
160 </#list>
161 /<a href="${baseRelPath}">root</a>/<#t>
162 <#assign distance = ancestorNodes?size>
163 <#list ancestorNodes as ancestor>
164 <#assign ancestorLink = "">
165 <#list 1..distance as d>
166 <#assign ancestorLink = "../${ancestorLink}">
167 </#list>
168 <a href="${ancestorLink}">${ancestor.name!html}</a>/<#t>
169 <#assign distance = distance - 1>
170 </#list>
171 <a href="./">${currentNode.name!html}</a>/<#t>
172 </#if>
173 </code>
174
175
176 <ul>
177 <#list currentNode.nodes as child>
178 <li type="circle">
179 <#assign childLink = "${child.name}">
180 <#if child.index gt 1>
181 <#assign childLink = "${childLink}[${child.index}]">
182 </#if>
183 <a href="./${childLink}/">
184 ${child.name?html}
185 <#if child.hasProperty("hippo:count")>
186 [${child.getProperty("hippo:count").long}]
187 </#if>
188 </a>
189 </li>
190 </#list>
191 <#list currentNode.properties as prop>
192 <li type="disc">
193 [name="${prop.name}"] =
194 <#if prop.definition.multiple>
195 [
196 <#list prop.values as value>
197 <#if value.type != 2>
198 ${value.string!?html},
199 <#else>
200 ${prop.length} bytes.
201 </#if>
202 </#list>
203 ]
204 <#else>
205 <#if prop.type != 2>
206 ${prop.string!?html}
207 <#else>
208 ${prop.length} bytes.
209 </#if>
210 </#if>
211 </li>
212 </#list>
213 </ul>
214 </#if>
215
216 <hr>
217
218 <#if queryResult??>
219 <h3>Query executed</h3>
220
221 <blockquote>
222 <#if searchType == 'text'>
223 Text query:&nbsp;
224 <#elseif searchType == 'xpath'>
225 XPath query:&nbsp;
226 <#elseif searchType == 'sql'>
227 SQL query:&nbsp;
228 </#if>
229
230 ${originalQuery?html}
231
232 </blockquote>
233
234 <#assign queryResultNodes = queryResult.nodes>
235 Number of results found: ${queryResultTotalSize!-1}
236
237 <ol>
238 <#list queryResultNodes as node>
239 <#if node??>
240 <li>
241 <a href="${baseRelPath}${node.path?substring(1)!url}">${node.path}</a>
242 <#-- TODO
243 writer.println("<a class=\"node-link\" title=\"Open node in new cms console window\" target=\"_blank\" href=\"" + req.getContextPath() + "/console/?path=" + resultNode.getPath() + "\">c</a>");
244 writer.println("<a class=\"node-link\" title=\"Open node in new cms window\" target=\"_blank\" href=\"" + req.getContextPath() + "/?path=" + resultNode.getPath() + "\">cms</a>");
245 writer.println("<a class=\"node-link\" title=\"Open node in repository\" href=\"" + req.getContextPath() + "/repository" + resultNode.getPath() + "\">r</a>");
246 -->
247
248 </li>
249 </#if>
250 </#list>
251 </ol>
252
253 <hr/>
254
255 <table summary="searchresult" border="1">
256 <tr>
257 <th>#</th>
258 <#list queryResult.columnNames as columnName>
259 <th>${columnName}</th>
260 </#list>
261 </tr>
262 <#list queryResult.rows as row>
263 <#if row??>
264 <tr>
265 <td>${row_index + 1}</td>
266 <#assign values = row.values>
267 <#if values??>
268 <#list row.values as value>
269 <#if value?? && value.type != 2>
270 <td>${value.string!}</td>
271 <#else>
272 <td></td>
273 </#if>
274 </#list>
275 </#if>
276 </tr>
277 </#if>
278 </#list>
279 </table>
280 </#if>
281
282 <#if repositoryMap??>
283 <h3>Repository as map</h3>
284 <blockquote>
285 _name = ${repositoryMap.get("_name")!}<br/>
286 _location = ${repositoryMap.get("_location")!}<br/>
287 _path = ${repositoryMap.get("_path")!}<br/>
288 _index = ${repositoryMap.get("_index")!}<br/>
289 _size = ${repositoryMap.get("_size")!}<br/>
290 <#list repositoryMap?keys as key>
291 ${key} = ${repositoryMap.get(key)!}
292 </#list>
293 </blockquote>
294 </#if>
295
296 <#if nodeById??>
297
298 <#if request.getParameter("uuid")??>
299
300 <h3>Get node by UUID</h3>
301 <blockquote>
302 UUID: ${request.getParameter("uuid")!}
303 </blockquote>
304 <ol>
305 <li>
306 Found node: <a href="${baseRelPath}${nodeById.path?substring(1)!url}">${nodeById.path}</a>
307 <#-- TODO
308 writer.println("<a class=\"node-link\" title=\"Open node in new cms console window\" target=\"_blank\" href=\"" + req.getContextPath() + "/console/?path=" + n.getPath() + "\">c</a>");
309 writer.println("<a class=\"node-link\" title=\"Open node in new cms window\" target=\"_blank\" href=\"" + req.getContextPath() + "/?path=" + n.getPath() + "\">cms</a>");
310 writer.println("<a class=\"node-link\" title=\"Open node in repository\" href=\"" + req.getContextPath() + "/repository" + n.getPath() + "\">r</a>");-->
311 </li>
312 </ol>
313
314 <#elseif request.getParameter("deref")??>
315
316 <h3>Getting nodes having a reference to </h3>
317 <blockquote>
318 UUID = ${request.getParameter("uuid")!}
319 ( <a href="${baseRelPath}${nodeById.path?substring(1)!url}">${nodeById.path}</a> )
320 </blockquote>
321 <hr>
322 <table>
323 <tr>
324 <th align="left">Node path</th>
325 <th align="left">Property reference name</th>
326 </tr>
327 <#list nodeById.references as prop>
328 <tr>
329 <td>${prop.parent.path!}</td>
330 <td>${prop.name!}</td>
331 </tr>
332 </#list>
333 </table>
334
335 </#if>
336
337 </#if>
338
339 <br/>
340
341 </body>
342 </html>