source: trunk/grails-app/views/home/index.gsp @ 1584

Last change on this file since 1584 was 1584, checked in by work@…, 9 years ago
  • did some more restyling of the home page (ticket #339)
    • statistics
    • introductionary texts
    • quick search
  • Property svn:keywords set to Rev Author Date
File size: 10.6 KB
Line 
1<html>
2<head>
3        <title>Generic Study Capture Framework</title>
4        <meta property="og:title" content="Generic Study Capture Framework"/>
5        <meta property="og:description" content="A generic tool for planning scientific studies, and capturing study meta-data, integrating with analysis platform(s) / LIMS systems and searching relevant studies."/>
6        <meta name="layout" content="main"/>
7        <script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts.js')}"></script>
8        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.ui.autocomplete.html.js', plugin: 'gdt')}"></script>
9        <script type="text/javascript">
10                Highcharts.theme = { colors: ['#4572A7'] };
11                var highchartsOptions = Highcharts.getOptions();
12                var studiesPieChart, dailyStatistics;
13
14                $(document).ready(function() {
15                        studiesPieChart = new Highcharts.Chart({
16                                chart: {
17                                        renderTo: 'studies-pie',
18                                        plotBackgroundColor: null,
19                                        plotBorderWidth: null,
20                                        plotShadow: false
21                                },
22                                title: {
23                                        text: '${studyCount} Studies'
24                                },
25                                tooltip: {
26                                        formatter: function() {
27                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
28                                        }
29                                },
30                                plotOptions: {
31                                        pie: {
32                                                allowPointSelect: true,
33                                                cursor: 'pointer',
34                                                dataLabels: {
35                                                        enabled: true,
36                                                        color: Highcharts.theme.textColor || '#000000',
37                                                        connectorColor: Highcharts.theme.textColor || '#000000',
38                                                        formatter: function() {
39                                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
40                                                        }
41                                                }
42                                        }
43                                },
44                                series: [
45                                        {
46                                                type: 'pie',
47                                                name: 'Your statistics',<sec:ifLoggedIn>
48                                                size: '45%',
49                                                innerSize: '25%',
50                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
51                                                innerSize: '45%',
52                                                </sec:ifNotLoggedIn>
53                                                data: [
54                                                        { name: 'Public', y: ${publicStudyCount}, color: '#89A54E' },
55                                                        { name: 'Private', y: ${privateStudyCount}, color: '#AA4643' }
56                                                ],
57                                                dataLabels: {
58                                                        enabled: <sec:ifLoggedIn>false</sec:ifLoggedIn><sec:ifNotLoggedIn>true</sec:ifNotLoggedIn>,
59                                                }
60                                        },
61                                        {
62                                                type: 'pie',
63                                                name: 'Your statistics',<sec:ifLoggedIn>
64                                                size: '25%',
65                                                innerSize: '10%',
66                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
67                                                size: '45%',
68                                                </sec:ifNotLoggedIn>
69                                                data: [
70                                                        { name: 'Published public', y: ${publishedPublicStudyCount}, color: '#89A54E' },
71                                                        { name: 'Unpublished Public', y: ${unPublishedPublicStudyCount}, color: '#bbc695' },
72                                                        { name: 'Published Private', y: ${publishedPrivateStudyCount}, color: '#AA4643' },
73                                                        { name: 'Unpublished Private', y: ${unPublishedPrivateStudyCount}, color: '#ae6e6c' }
74                                                ],
75                                                dataLabels: {
76                                                        enabled: false
77                                                }
78                                        }
79                                        <sec:ifLoggedIn>
80                                        ,
81                                        {
82                                                type: 'pie',
83                                                name: 'Total statistics',
84
85                                                innerSize: '45%',
86                                                data: [
87                                                        { name: 'Read only', y: ${readOnlyStudyCount}, color: '#80699B' },
88                                                        { name: 'Readable & writable', y: ${readWriteStudyCount}, color: '#89A54E' },
89                                                        { name: 'Not accessible', y: ${noAccessStudyCount}, color: '#AA4643' }
90                                                ],
91                                                dataLabels: {
92                                                        enabled: true
93                                                }
94                                        },
95                                        </sec:ifLoggedIn>
96                                ]
97                        });
98
99                        <g:if test="${startDate && dailyStatistics?.size()}">
100                        dailyStatistics = new Highcharts.Chart({
101                                chart: {
102                                        renderTo: 'daily-statistics',
103                                        zoomType: 'x',
104                                        spacingRight: 20
105                                },
106                                title: {
107                                        text: 'Users, studies and templates'
108                                },
109                                subtitle: {
110                                        text: document.ontouchstart === undefined ?
111                                                'Click and drag in the plot area to zoom in' :
112                                                'Drag your finger over the plot to zoom in'
113                                },
114                                xAxis: {
115                                        type: 'datetime',
116                                        maxZoom: 14 * 24 * 3600000, // fourteen days
117                                        title: {
118                                                text: null
119                                        }
120                                },
121                                yAxis: {
122                                        title: {
123                                                text: 'Total'
124                                        },
125                                        min: 0,
126                                        startOnTick: false,
127                                        showFirstLabel: false
128                                },
129                                tooltip: {
130                                        shared: true
131                                },
132                                legend: {
133                                        enabled: false
134                                },
135                                plotOptions: {
136                                        area: {
137
138                                                lineWidth: 1,
139                                                marker: {
140                                                        enabled: false,
141                                                        states: {
142                                                                hover: {
143                                                                        enabled: true,
144                                                                        radius: 5
145                                                                }
146                                                        }
147                                                },
148                                                shadow: false,
149                                                states: {
150                                                        hover: {
151                                                                lineWidth: 1
152                                                        }
153                                                }
154                                        }
155                                },
156
157                                series: [
158                                        {
159                                                type: 'area',
160                                                name: 'Studies',
161                                                pointInterval: 24 * 3600 * 1000,
162                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
163                                                data: [
164                                                        <g:each var="day" in="${dailyStatistics}">${day.value.studyTotal},</g:each>
165                                                ]
166                                        },
167                                        {
168                                                type: 'area',
169                                                name: 'Templates',
170                                                pointInterval: 24 * 3600 * 1000,
171                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
172                                                data: [
173                                                        <g:each var="day" in="${dailyStatistics}">${day.value.templateTotal},</g:each>
174                                                ]
175                                        },
176                                        {
177                                                type: 'area',
178                                                name: 'Users',
179                                                pointInterval: 24 * 3600 * 1000,
180                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
181                                                data: [
182                                                        <g:each var="day" in="${dailyStatistics}">${day.value.userTotal},</g:each>
183                                                ]
184                                        }
185                                ]
186                        });
187                        </g:if>
188
189                        $("#search_term").autocomplete({
190                                source: function(request, response) {
191                                        $.ajax({
192                                                //url: "http://ws.geonames.org/searchJSON",
193                                                url: "${createLink(action:'ajaxQuickSearch')}",
194                                                dataType: "jsonp",
195                                                data: {
196                                                        featureClass: "P",
197                                                        style: "full",
198                                                        maxRows: 12,
199                                                        name_startsWith: request.term
200                                                },
201                                                success: function(data) {
202                                                        response($.map(data.data, function(item) {
203                                                                return {
204                                                                        label           : '<span class="about">'+item.category+'</div> <span class="from">'+item.name+'</span>',
205                                                                        value           : item.link
206                                                                }
207                                                        }));
208                                                }
209                                        });
210                                },
211                                minLength: 2,
212                                select: function(event, ui) {
213                                        // redirect
214                                        window.location = ui.item.value;
215                                },
216                                open: function() {
217                                        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
218                                },
219                                close: function() {
220                                        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
221                                },
222                                html: true
223                        });
224                });
225        </script>
226        <style type="text/css">
227        #simpleQuery {
228        }
229
230        #simpleQuery .search {
231                display: block;
232                height: 30px;
233                margin-bottom: 10px;
234                zoom: 1; /* IE 6 & 7 hack */
235                *display: inline; /* IE 6 & 7 hack */
236        }
237
238        #simpleQuery .search .begin {
239                margin: 0px;
240                padding: 0px;
241                display: inline-block;
242                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-begin.png')});
243                height: 30px;
244                width: 140px;
245                vertical-align: top;
246                text-align: right;
247                zoom: 1; /* IE 6 & 7 hack */
248                *display: inline; /* IE 6 & 7 hack */
249        }
250
251        #simpleQuery .search .begin .label {
252                color: #fff;
253                font-face: Arial;
254                line-height: 30px;
255                text-shadow: 0px 0px 1px #006DBA;
256                font-size: 12px;
257                margin-right: 23px;
258        }
259
260        #simpleQuery .search .middle {
261                margin: 0px 0px -20px 0px;
262                padding: 0;
263                display: inline-block;
264                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-middle.png')});
265                height: 30px;
266                width: 300px;
267                vertical-align: top;
268                zoom: 1; /* IE 6 & 7 hack */
269                *display: inline; /* IE 6 & 7 hack */
270        }
271
272        #simpleQuery .search .searchfield {
273                vertical-align: middle;
274                width: 100%;
275                height: 100%;
276                color: #006DBA;
277                border-width: 0px;
278                border: none;
279                background-color: Transparent;
280                zoom: 1; /* IE 6 & 7 hack */
281                *display: inline; /* IE 6 & 7 hack */
282        }
283
284        #simpleQuery .search .end {
285                margin: 0px;
286                padding: 0px;
287                display: inline-block;
288                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-end.png')});
289                height: 30px;
290                width: 28px;
291                zoom: 1; /* IE 6 & 7 hack */
292                *display: inline; /* IE 6 & 7 hack */
293        }
294
295        </style>
296</head>
297<body>
298
299<div style="clear:both;display:block;padding-top:10px;">
300        <div style="margin:2px;width:476px;display:inline-block;float:left;zoom:1;*display:inline;">
301                <h1>Lorem ipsum 1</h1>
302                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt auctor suscipit. Nam ultricies condimentum pulvinar. In magna orci, eleifend sit amet tincidunt eget, ultricies a justo. Vestibulum purus lorem, laoreet sit amet rutrum et, sollicitudin eget augue. Nulla consequat, mauris eget ornare fringilla, arcu enim mattis odio, rhoncus rutrum ante turpis vitae nulla. Sed et turpis vel urna venenatis sagittis. Sed sagittis vestibulum felis, vel ultricies tellus dictum ac. Nunc non massa et ligula gravida rutrum. Fusce porttitor, eros ac dictum suscipit, risus lacus aliquam justo, ut lobortis erat nulla sit amet risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse fermentum ultricies ipsum, at consequat elit pharetra auctor.
303        </div>
304        <div style="">
305                <h1>Quicksearch</h1>
306                <div id="simpleQuery" class="simplequery">
307                <g:form action="pages" name="simpleQueryForm" id="simpleQueryForm">
308                        <g:if test="${search_term}"><g:set var="preterm" value="${search_term}"/></g:if>
309                        <div class="searchContainer">
310                                <div class="search">
311                                        <div class="begin"><span class="label">Search term</span></div><div class="middle"><g:textField name="search_term" id="search_term" class="searchfield" value="${preterm}"/></div><div class="end"><a onClick="$('#search_term').val('');"><img src="${resource(dir: 'images', file: 'simpleQuery/spotlight-end.png')}" value="Reset" alt="Reset" border="0"></a></div>
312                                </div>
313                        </div>
314                        </g:form>
315                        <h1>Lorem ipsum 2</h1>
316                        Vivamus varius ullamcorper neque, sit amet mollis lacus accumsan vel. Pellentesque in augue a arcu pretium egestas vel at elit. Duis nunc odio, mollis et faucibus vel, aliquam vel quam. Sed laoreet pharetra urna, venenatis porttitor neque sagittis et. Aenean at nisl nunc, in mattis mauris. Proin iaculis nunc in erat rhoncus consectetur. Nullam sit amet risus vitae eros condimentum pellentesque. Vestibulum sollicitudin turpis id felis viverra a bibendum magna varius. Ut tristique pellentesque convallis. Maecenas id sollicitudin lacus.
317                </div>
318        </div>
319</div>
320
321
322<div style="clear:both;display:block;padding-top:10px;">
323        <h1>Usage Statistics</h1>
324        <div id="graphs" style="display:block;border:1px solid #6c6f70;width:100%;height:300px;">
325                <div id="studies-pie" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
326                <div id="daily-statistics" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
327        </div>
328</div>
329
330</body>
331</html>
Note: See TracBrowser for help on using the repository browser.