root/trunk/grails-app/views/home/index.gsp @ 1619

Revision 1619, 11.1 KB (checked in by work@…, 3 years ago)

spinner

  • Property svn:keywords set to Rev Author Date
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        <g:if test="${showstats}"><script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts.js')}"></script></g:if>
8        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.ui.autocomplete.html.js', plugin: 'gdt')}"></script>
9        <script type="text/javascript">
10                $(document).ready(function() {
11<g:if test="${showstats}">
12                        Highcharts.theme = { colors: ['#4572A7'] };
13                        var highchartsOptions = Highcharts.getOptions();
14                        var studiesPieChart, dailyStatistics;
15
16                        studiesPieChart = new Highcharts.Chart({
17                                chart: {
18                                        renderTo: 'studies-pie',
19                                        plotBackgroundColor: null,
20                                        plotBorderWidth: null,
21                                        plotShadow: false
22                                },
23                                title: {
24                                        text: '${studyCount} Studies'
25                                },
26                                tooltip: {
27                                        formatter: function() {
28                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
29                                        }
30                                },
31                                plotOptions: {
32                                        pie: {
33                                                allowPointSelect: true,
34                                                cursor: 'pointer',
35                                                dataLabels: {
36                                                        enabled: true,
37                                                        color: Highcharts.theme.textColor || '#000000',
38                                                        connectorColor: Highcharts.theme.textColor || '#000000',
39                                                        formatter: function() {
40                                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
41                                                        }
42                                                }
43                                        }
44                                },
45                                series: [
46                                        {
47                                                type: 'pie',
48                                                name: 'Your statistics',<sec:ifLoggedIn>
49                                                size: '45%',
50                                                innerSize: '25%',
51                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
52                                                innerSize: '45%',
53                                                </sec:ifNotLoggedIn>
54                                                data: [
55                                                        { name: 'Public', y: ${publicStudyCount}, color: '#89A54E' },
56                                                        { name: 'Private', y: ${privateStudyCount}, color: '#AA4643' }
57                                                ],
58                                                dataLabels: {
59                                                        enabled: <sec:ifLoggedIn>false</sec:ifLoggedIn><sec:ifNotLoggedIn>true</sec:ifNotLoggedIn>,
60                                                }
61                                        },
62                                        {
63                                                type: 'pie',
64                                                name: 'Your statistics',<sec:ifLoggedIn>
65                                                size: '25%',
66                                                innerSize: '10%',
67                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
68                                                size: '45%',
69                                                </sec:ifNotLoggedIn>
70                                                data: [
71                                                        { name: 'Published public', y: ${publishedPublicStudyCount}, color: '#89A54E' },
72                                                        { name: 'Unpublished Public', y: ${unPublishedPublicStudyCount}, color: '#bbc695' },
73                                                        { name: 'Published Private', y: ${publishedPrivateStudyCount}, color: '#AA4643' },
74                                                        { name: 'Unpublished Private', y: ${unPublishedPrivateStudyCount}, color: '#ae6e6c' }
75                                                ],
76                                                dataLabels: {
77                                                        enabled: false
78                                                }
79                                        }
80                                        <sec:ifLoggedIn>
81                                        ,
82                                        {
83                                                type: 'pie',
84                                                name: 'Total statistics',
85
86                                                innerSize: '45%',
87                                                data: [
88                                                        { name: 'Read only', y: ${readOnlyStudyCount}, color: '#80699B' },
89                                                        { name: 'Readable & writable', y: ${readWriteStudyCount}, color: '#89A54E' },
90                                                        { name: 'Not accessible', y: ${noAccessStudyCount}, color: '#AA4643' }
91                                                ],
92                                                dataLabels: {
93                                                        enabled: true
94                                                }
95                                        },
96                                        </sec:ifLoggedIn>
97                                ]
98                        });
99
100                        <g:if test="${startDate && dailyStatistics?.size()}">
101                        dailyStatistics = new Highcharts.Chart({
102                                chart: {
103                                        renderTo: 'daily-statistics',
104                                        zoomType: 'x',
105                                        spacingRight: 20
106                                },
107                                title: {
108                                        text: 'Users, studies and templates'
109                                },
110                                subtitle: {
111                                        text: document.ontouchstart === undefined ?
112                                                'Click and drag in the plot area to zoom in' :
113                                                'Drag your finger over the plot to zoom in'
114                                },
115                                xAxis: {
116                                        type: 'datetime',
117                                        maxZoom: 14 * 24 * 3600000, // fourteen days
118                                        title: {
119                                                text: null
120                                        }
121                                },
122                                yAxis: {
123                                        title: {
124                                                text: 'Total'
125                                        },
126                                        min: 0,
127                                        startOnTick: false,
128                                        showFirstLabel: false
129                                },
130                                tooltip: {
131                                        shared: true
132                                },
133                                legend: {
134                                        enabled: false
135                                },
136                                plotOptions: {
137                                        area: {
138
139                                                lineWidth: 1,
140                                                marker: {
141                                                        enabled: false,
142                                                        states: {
143                                                                hover: {
144                                                                        enabled: true,
145                                                                        radius: 5
146                                                                }
147                                                        }
148                                                },
149                                                shadow: false,
150                                                states: {
151                                                        hover: {
152                                                                lineWidth: 1
153                                                        }
154                                                }
155                                        }
156                                },
157
158                                series: [
159                                        {
160                                                type: 'area',
161                                                name: 'Studies',
162                                                pointInterval: 24 * 3600 * 1000,
163                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
164                                                data: [
165                                                        <g:each var="day" in="${dailyStatistics}">${day.value.studyTotal},</g:each>
166                                                ]
167                                        },
168                                        {
169                                                type: 'area',
170                                                name: 'Templates',
171                                                pointInterval: 24 * 3600 * 1000,
172                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
173                                                data: [
174                                                        <g:each var="day" in="${dailyStatistics}">${day.value.templateTotal},</g:each>
175                                                ]
176                                        },
177                                        {
178                                                type: 'area',
179                                                name: 'Users',
180                                                pointInterval: 24 * 3600 * 1000,
181                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
182                                                data: [
183                                                        <g:each var="day" in="${dailyStatistics}">${day.value.userTotal},</g:each>
184                                                ]
185                                        }
186                                ]
187                        });
188                        </g:if>
189</g:if>
190                        var quickSearch = $("#search_term");
191                        quickSearch.autocomplete({
192                                minLength: 2,
193                                delay: 300,
194                                search: function(event, ui) {
195                                        quickSearch.css({ 'background': 'url(${resource(dir: 'images', file: 'spinner.gif')}) no-repeat left top' });
196                                },
197                                source: function(request, response) {
198                                        quickSearch.css({ 'background': 'none' });
199
200                                        $.ajax({
201                                                //url: "http://ws.geonames.org/searchJSON",
202                                                url: "${createLink(action:'ajaxQuickSearch')}",
203                                                dataType: "jsonp",
204                                                data: {
205                                                        featureClass: "P",
206                                                        style: "full",
207                                                        maxRows: 12,
208                                                        name_startsWith: request.term
209                                                },
210                                                success: function(data) {
211                                                        response($.map(data.data, function(item) {
212                                                                return {
213                                                                        label           : '<span class="about">'+item.category+'</div> <span class="from">'+item.name+'</span>',
214                                                                        value           : item.link
215                                                                }
216                                                        }));
217                                                }
218                                        });
219                                },
220                                minLength: 2,
221                                select: function(event, ui) {
222                                        // redirect
223                                        window.location = ui.item.value;
224                                },
225                                open: function() {
226                                        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
227                                },
228                                close: function() {
229                                        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
230                                },
231                                html: true
232                        });
233                });
234        </script>
235        <style type="text/css">
236        #simpleQuery {
237        }
238
239        #simpleQuery .search {
240                display: block;
241                height: 30px;
242                margin-bottom: 10px;
243                zoom: 1; /* IE 6 & 7 hack */
244                *display: inline; /* IE 6 & 7 hack */
245        }
246
247        #simpleQuery .search .begin {
248                margin: 0px;
249                padding: 0px;
250                display: inline-block;
251                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-begin.png')});
252                height: 30px;
253                width: 140px;
254                vertical-align: top;
255                text-align: right;
256                zoom: 1; /* IE 6 & 7 hack */
257                *display: inline; /* IE 6 & 7 hack */
258        }
259
260        #simpleQuery .search .begin .label {
261                color: #fff;
262                font-face: Arial;
263                line-height: 30px;
264                text-shadow: 0px 0px 1px #006DBA;
265                font-size: 12px;
266                margin-right: 23px;
267        }
268
269        #simpleQuery .search .middle {
270                margin: 0px 0px -20px 0px;
271                padding: 0;
272                display: inline-block;
273                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-middle.png')});
274                height: 30px;
275                width: 300px;
276                vertical-align: top;
277                zoom: 1; /* IE 6 & 7 hack */
278                *display: inline; /* IE 6 & 7 hack */
279        }
280
281        #simpleQuery .search .searchfield {
282                vertical-align: middle;
283                width: 100%;
284                height: 100%;
285                color: #006DBA;
286                border-width: 0px;
287                border: none;
288                background-color: Transparent;
289                zoom: 1; /* IE 6 & 7 hack */
290                *display: inline; /* IE 6 & 7 hack */
291        }
292
293        #simpleQuery .search .end {
294                margin: 0px;
295                padding: 0px;
296                display: inline-block;
297                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-end.png')});
298                height: 30px;
299                width: 28px;
300                zoom: 1; /* IE 6 & 7 hack */
301                *display: inline; /* IE 6 & 7 hack */
302        }
303
304        </style>
305</head>
306<body>
307
308<div style="clear:both;display:block;">
309        <div style="margin:2px;width:476px;display:inline-block;float:left;zoom:1;*display:inline;">
310                <h1>Introduction</h1>
311                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.
312        </div>
313        <div style="margin:2px;width:476px;display:inline-block;float:left;zoom:1;*display:inline;">
314                <h1>Quicksearch</h1>
315                <div id="simpleQuery" class="simplequery">
316                <g:form action="pages" name="simpleQueryForm" id="simpleQueryForm">
317                        <g:if test="${search_term}"><g:set var="preterm" value="${search_term}"/></g:if>
318                        <div class="searchContainer">
319                                <div class="search">
320                                        <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>
321                                </div>
322                                <span style="font-style:italic;color:#aaa;font-size:10px;">more advanced searches can be performed <g:link controller="advancedQuery">here</g:link>...</span>
323                        </div>
324                        </g:form>
325                        <h1>Lorem ipsum 2</h1>
326                        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.
327                </div>
328        </div>
329</div>
330
331<g:if test="${showstats}">
332<div style="clear:both;display:block;padding-top:10px;">
333        <h1>Usage Statistics</h1>
334        <div id="graphs" style="display:block;border:1px solid #6c6f70;width:100%;height:300px;">
335                <div id="studies-pie" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
336                <div id="daily-statistics" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
337        </div>
338</div>
339</g:if>
340
341</body>
342</html>
Note: See TracBrowser for help on using the browser.