source: trunk/grails-app/views/advancedQuery/index.gsp @ 1780

Last change on this file since 1780 was 1780, checked in by robert@…, 9 years ago

Improved querying user interface

  • Property svn:keywords set to Rev Author Date
File size: 4.6 KB
Line 
1<html>
2<head>
3        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4        <meta name="layout" content="main"/>
5        <title>Query database</title>
6        <link rel="stylesheet" href="<g:resource dir="css" file="advancedQuery.css" />" type="text/css"/>
7        <link rel="stylesheet" href="<g:resource dir="css" file="buttons.css" />" type="text/css"/>
8        <g:javascript src="advancedQuery.js" />
9        <script type="text/javascript">
10                // Make a list of fields to search in
11                var queryableFields = [
12                        <g:set var="j" value="${0}" />
13                        <g:each in="${searchableFields}" var="entity">
14                                <g:each in="${entity.value}" var="field">
15                                        <g:if test="${j > 0}">,</g:if>
16                                        {
17                                                label: "${(
18                                                        entity.key.toString() + '.' + field.toString() + ' ' +
19                                                        entity.key.toString() + ' ' + field.toString() + ' ' +
20                                                        (field == '*' ? 'any field' : '')
21                                                        ).encodeAsJavaScript()}",
22                                                show: "${
23                                                        (field == '*' ?
24                                                                '[Any field in ' + entity.key.toString() + ']' :
25                                                                (field?.size() > 1 ?
26                                                                        field[0].toUpperCase() + field[1..-1] :
27                                                                        field)
28                                                        ).encodeAsJavaScript()}",
29                                                value: "${entity.key.toString().encodeAsJavaScript()}.${field.toString().encodeAsJavaScript()}",
30                                                entity: "${entity.key.toString().encodeAsJavaScript()}"
31                                        }
32                                        <g:set var="j" value="1" />
33                                </g:each>
34                        </g:each>
35                ];
36       
37                <g:if test="${criteria && criteria.size() > 0}">
38                        // Show given criteria
39                        $(function() {
40                                <g:each in="${criteria}" var="criterion">
41                                        showCriterium("${criterion.entityField().encodeAsJavaScript()}", "${criterion.value.toString().encodeAsJavaScript()}", "${criterion.operator.toString().encodeAsJavaScript()}");
42                                </g:each>
43                                                       
44                                // Show or hide the 'search mode' box (AND or OR)
45                                toggleSearchMode()
46
47                                // Enable or disable the search button
48                                toggleSearchButton()
49                        });
50                </g:if>
51        </script>
52</head>
53<body>
54
55<h1>Search database</h1>
56
57<g:if test="${flash.error}">
58        <div class="errormessage">
59                ${flash.error.toString().encodeAsHTML()}
60        </div>
61</g:if>
62<g:if test="${flash.message}">
63        <div class="message">
64                ${flash.message.toString().encodeAsHTML()}
65        </div>
66</g:if>
67
68<div id="searchForm">
69        <g:form action="search" method="get">
70
71                <h3><span class="nummer">1</span>Select criteria</h3>
72                <p class="explanation">
73                        N.B. Comparing numerical values is done without taking into
74                        account the units. E.g. a weight of 1 kg equals 1 grams.
75                </p>
76                <ul id="criteria">
77                        <li class="titlerow">
78                                <span class="entityfield">
79                                        Field
80                                </span>
81                                <span class="operator">
82                                        Operator
83                                </span>
84                                <span class="value">
85                                        Value
86                                </span>
87                        </li>
88                        <li class="newCriterion">
89                                <span class="entityfield">
90                                        <select name="criteria.0.entityfield" id="queryFieldSelect">
91                                                <option value=""></option>
92                                                <g:each in="${searchableFields}" var="entity">
93                                                        <optgroup label="${entity.key}">
94                                                                <g:each in="${entity.value}" var="field">
95                                                                        <option value="${entity.key}.${field}">
96                                                                                <g:if test="${field?.size() > 1}">
97                                                                                        ${field[0].toUpperCase() + field[1..-1]}
98                                                                                </g:if>
99                                                                                <g:else>
100                                                                                        ${field}
101                                                                                </g:else>
102                                                                        </option>
103                                                                </g:each>
104                                                        </optgroup>
105                                                </g:each>
106                                        </select>
107                                </span>
108                                <span class="operator">
109                                        <select id="operator" name="criteria.0.operator">
110                                                <option value="equals">Equals</option>
111                                                <option value="contains">Contains</option>
112                                                <option value="&gt;=">&gt;=</option>
113                                                <option value="&gt;">&gt;</option>
114                                                <option value="&lt;">&lt;</option>
115                                                <option value="&lt;=">&lt;=</option>
116                                        </select>
117                                </span>
118                                <span class="value">
119                                        <input class='text' type="text" id="value" name="criteria.0.value" />
120                                </span>
121                                <span class="addButton">
122                                        <a class="disabled" href="#" onClick="addCriterion(); return false;">
123                                                <img src="${fam.icon( name: 'add' )}" border="0">
124                                        </a>
125                                </span>
126                        </li>
127                </ul>
128               
129                <div id="searchMode">
130                        <h3><span class="nummer">1b</span>Search mode</h3>
131                        <p>
132                                Choose how to combine the given criteria:<br />
133                                <g:select from="${searchModes}" name="operator" />
134                        </p>
135                </div>
136               
137                <h3><span class="nummer">2</span>Output type</h3>
138                <p>
139                        Choose the type of output:<br />
140                        <g:select from="${entitiesToSearchFor}" optionKey="key" optionValue="value" name="entity" />
141                </p>
142
143                <h3><span class="nummer">3</span>Run query</h3>
144                <p>
145                        <input type="submit" disabled="disabled" value="Search" class="submitcriteria" />
146                </p>
147        </g:form>
148       
149        <br clear="all" />
150</div>
151<g:if test="${session.queries?.size()}">
152<p class="options">
153        <g:link class="listPrevious" action="list">Previous searches</g:link>
154</p>
155</g:if>
156<br  clear="all" />
157</body>
158</html>
Note: See TracBrowser for help on using the repository browser.