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

Revision 1886, 12.1 KB (checked in by work@…, 3 years ago)

- resolves issue #412
- make application title configurable through externalized configuration, e.g:

application.title=NMC Data Support Platform

  • Property svn:keywords set to Rev Author Date
Line 
1<html>
2<head>
3        <meta name="layout" content="main"/>
4        <g:if test="${showstats}"><script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts.js')}"></script></g:if>
5        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.ui.autocomplete.html.js', plugin: 'gdt')}"></script>
6        <script type="text/javascript">
7                $(document).ready(function() {
8<g:if test="${showstats && studyCount}">
9                        Highcharts.theme = { colors: ['#4572A7'] };
10                        var highchartsOptions = Highcharts.getOptions();
11                        var studiesPieChart, dailyStatistics;
12
13                        studiesPieChart = new Highcharts.Chart({
14                                chart: {
15                                        renderTo: 'studies-pie',
16                                        plotBackgroundColor: null,
17                                        plotBorderWidth: null,
18                                        plotShadow: false
19                                },
20                                title: {
21                                        text: '${studyCount} Studies'
22                                },
23                                tooltip: {
24                                        formatter: function() {
25                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
26                                        }
27                                },
28                                plotOptions: {
29                                        pie: {
30                                                allowPointSelect: true,
31                                                cursor: 'pointer',
32                                                dataLabels: {
33                                                        enabled: true,
34                                                        color: Highcharts.theme.textColor || '#000000',
35                                                        connectorColor: Highcharts.theme.textColor || '#000000',
36                                                        formatter: function() {
37                                                                return '<b>' + this.point.name + '</b>: ' + this.y + ' ' + ((this.y == 1) ? 'study' : 'studies');
38                                                        }
39                                                }
40                                        }
41                                },
42                                series: [
43                                        {
44                                                type: 'pie',
45                                                name: 'Your statistics',<sec:ifLoggedIn>
46                                                size: '45%',
47                                                innerSize: '25%',
48                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
49                                                innerSize: '45%',
50                                                </sec:ifNotLoggedIn>
51                                                data: [
52                                                        { name: 'Public', y: ${publicStudyCount}, color: '#89A54E' },
53                                                        { name: 'Private', y: ${privateStudyCount}, color: '#AA4643' }
54                                                ],
55                                                dataLabels: {
56                                                        enabled: <sec:ifLoggedIn>false</sec:ifLoggedIn><sec:ifNotLoggedIn>true</sec:ifNotLoggedIn>
57                                                }
58                                        },
59                                        {
60                                                type: 'pie',
61                                                name: 'Your statistics',<sec:ifLoggedIn>
62                                                size: '25%',
63                                                innerSize: '10%',
64                                                </sec:ifLoggedIn><sec:ifNotLoggedIn>
65                                                size: '45%',
66                                                </sec:ifNotLoggedIn>
67                                                data: [
68                                                        { name: 'Published public', y: ${publishedPublicStudyCount}, color: '#89A54E' },
69                                                        { name: 'Unpublished Public', y: ${unPublishedPublicStudyCount}, color: '#bbc695' },
70                                                        { name: 'Published Private', y: ${publishedPrivateStudyCount}, color: '#AA4643' },
71                                                        { name: 'Unpublished Private', y: ${unPublishedPrivateStudyCount}, color: '#ae6e6c' }
72                                                ],
73                                                dataLabels: {
74                                                        enabled: false
75                                                }
76                                        }
77                                        <sec:ifLoggedIn>
78                                        ,
79                                        {
80                                                type: 'pie',
81                                                name: 'Total statistics',
82
83                                                innerSize: '45%',
84                                                data: [
85                                                        { name: 'Read only', y: ${readOnlyStudyCount}, color: '#80699B' },
86                                                        { name: 'Readable & writable', y: ${readWriteStudyCount}, color: '#89A54E' },
87                                                        { name: 'Not accessible', y: ${noAccessStudyCount}, color: '#AA4643' }
88                                                ],
89                                                dataLabels: {
90                                                        enabled: true
91                                                }
92                                        },
93                                        </sec:ifLoggedIn>
94                                ]
95                        });
96
97                        <g:if test="${startDate && dailyStatistics?.size() && studyCount}">
98                        dailyStatistics = new Highcharts.Chart({
99                                chart: {
100                                        renderTo: 'daily-statistics',
101                                        zoomType: 'x',
102                                        spacingRight: 20
103                                },
104                                title: {
105                                        text: 'Users, studies and templates'
106                                },
107                                subtitle: {
108                                        text: document.ontouchstart === undefined ?
109                                                'Click and drag in the plot area to zoom in' :
110                                                'Drag your finger over the plot to zoom in'
111                                },
112                                xAxis: {
113                                        type: 'datetime',
114                                        maxZoom: 14 * 24 * 3600000, // fourteen days
115                                        title: {
116                                                text: null
117                                        }
118                                },
119                                yAxis: {
120                                        title: {
121                                                text: 'Total'
122                                        },
123                                        min: 0,
124                                        startOnTick: false,
125                                        showFirstLabel: false
126                                },
127                                tooltip: {
128                                        shared: true
129                                },
130                                legend: {
131                                        enabled: false
132                                },
133                                plotOptions: {
134                                        area: {
135
136                                                lineWidth: 1,
137                                                marker: {
138                                                        enabled: false,
139                                                        states: {
140                                                                hover: {
141                                                                        enabled: true,
142                                                                        radius: 5
143                                                                }
144                                                        }
145                                                },
146                                                shadow: false,
147                                                states: {
148                                                        hover: {
149                                                                lineWidth: 1
150                                                        }
151                                                }
152                                        }
153                                },
154
155                                series: [
156                                        {
157                                                type: 'area',
158                                                name: 'Studies',
159                                                pointInterval: 24 * 3600 * 1000,
160                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
161                                                data: [
162                                                        <g:each var="day" in="${dailyStatistics}">${day.value.studyTotal},</g:each>
163                                                ]
164                                        },
165                                        {
166                                                type: 'area',
167                                                name: 'Templates',
168                                                pointInterval: 24 * 3600 * 1000,
169                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
170                                                data: [
171                                                        <g:each var="day" in="${dailyStatistics}">${day.value.templateTotal},</g:each>
172                                                ]
173                                        },
174                                        {
175                                                type: 'area',
176                                                name: 'Users',
177                                                pointInterval: 24 * 3600 * 1000,
178                                                pointStart: Date.UTC(${startDate.year+1900}, ${startDate.month}, ${startDate.date}),
179                                                data: [
180                                                        <g:each var="day" in="${dailyStatistics}">${day.value.userTotal},</g:each>
181                                                ]
182                                        }
183                                ]
184                        });
185                        </g:if>
186</g:if>
187                        var quickSearch = $("#search_term");
188                        quickSearch.autocomplete({
189                                minLength: 2,
190                                delay: 300,
191                                search: function(event, ui) {
192                                        quickSearch.css({ 'background': 'url(${resource(dir: 'images', file: 'spinner.gif')}) no-repeat left top' });
193                                },
194                                source: function(request, response) {
195                                        quickSearch.css({ 'background': 'none' });
196
197                                        $.ajax({
198                                                //url: "http://ws.geonames.org/searchJSON",
199                                                url: "${createLink(action:'ajaxQuickSearch')}",
200                                                dataType: "jsonp",
201                                                data: {
202                                                        featureClass: "P",
203                                                        style: "full",
204                                                        maxRows: 12,
205                                                        name_startsWith: request.term
206                                                },
207                                                success: function(data) {
208                                                        response($.map(data.data, function(item) {
209                                                                return {
210                                                                        label           : '<span class="about">'+item.category+'</span> <span class="from">'+item.name+'</span>',
211                                                                        value           : item.link
212                                                                }
213                                                        }));
214                                                }
215                                        });
216                                },
217                                minLength: 2,
218                                select: function(event, ui) {
219                                        // redirect ?
220                                        if (ui.item.value) {
221                                                // hide, so the URL does not show in the input field
222                                                quickSearch.css( { 'display': 'none' } );
223
224                                                // and redirect
225                                                window.location = ui.item.value;
226                                        }
227                                },
228                                open: function() {
229                                        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
230                                },
231                                close: function() {
232                                        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
233                                },
234                                html: true
235                        });
236                });
237        </script>
238        <style type="text/css">
239        #simpleQuery {
240        }
241
242        #simpleQuery .search {
243                display: block;
244                height: 30px;
245                margin-bottom: 10px;
246                zoom: 1; /* IE 6 & 7 hack */
247                *display: inline; /* IE 6 & 7 hack */
248        }
249
250        #simpleQuery .search .begin {
251                margin: 0px;
252                padding: 0px;
253                display: inline-block;
254                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-begin.png')});
255                height: 30px;
256                width: 140px;
257                vertical-align: top;
258                text-align: right;
259                zoom: 1; /* IE 6 & 7 hack */
260                *display: inline; /* IE 6 & 7 hack */
261        }
262
263        #simpleQuery .search .begin .label {
264                color: #fff;
265                font-face: Arial;
266                line-height: 30px;
267                text-shadow: 0px 0px 1px #006DBA;
268                font-size: 12px;
269                margin-right: 23px;
270        }
271
272        #simpleQuery .search .middle {
273                margin: 0px 0px -20px 0px;
274                padding: 0;
275                display: inline-block;
276                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-middle.png')});
277                height: 30px;
278                width: 300px;
279                vertical-align: top;
280                zoom: 1; /* IE 6 & 7 hack */
281                *display: inline; /* IE 6 & 7 hack */
282        }
283
284        #simpleQuery .search .searchfield {
285                vertical-align: middle;
286                width: 100%;
287                height: 100%;
288                color: #006DBA;
289                border-width: 0px;
290                border: none;
291                background-color: Transparent;
292                zoom: 1; /* IE 6 & 7 hack */
293                *display: inline; /* IE 6 & 7 hack */
294        }
295
296        #simpleQuery .search .end {
297                margin: 0px;
298                padding: 0px;
299                display: inline-block;
300                background-image: url(${resource(dir: 'images', file: 'simpleQuery/spotlight-end.png')});
301                height: 30px;
302                width: 28px;
303                zoom: 1; /* IE 6 & 7 hack */
304                *display: inline; /* IE 6 & 7 hack */
305        }
306
307        </style>
308</head>
309<body>
310
311<div style="clear:both;display:block;">
312        <g:if env="development" test="${db == "org.hsqldb.jdbcDriver"}"></g:if><g:elseif test="${(db == 'org.hsqldb.jdbcDriver') as boolean}">
313        <div style="width:100%;font-size:14pt;color:#ff6f20;text-align:justify;">Warning: You are currently using the in-memory database! Click <g:link controller="home" action="setup">here</g:link> to configure your application.</div>
314        </g:elseif>
315        <div style="margin-right:8px;width:472px;display:inline-block;float:left;zoom:1;*display:inline;">
316                <h1>Introduction</h1>
317                <p>
318                        ${grailsApplication.config.application.title} is an application that can store any biological study. It contains
319                        templates which makes it possible to customize.
320                </p>
321                <p>
322                        In order to allow flexibility to capture all information you require within a study, <i>and</i> to
323                        make it possible to compare studies or study data, the system uses customizable templates and ontologies.
324                        It is especially designed to store complex study designs including cross-over designs and challenges.
325                </p>
326                <p>
327                        ${grailsApplication.config.application.title} facilitates sharing of data within a research group or consortium,
328                        as the study owner can decide who can view or access the data. In addition, ${grailsApplication.config.application.title}
329                        can stimulate collaborations by making study information publicly visible. New studies can be based on study
330                        data within the database, as standardized storage is stimulated by the system.
331                </p>
332        </div>
333        <div style="margin-left:8px;width:472px;display:inline-block;float:left;zoom:1;*display:inline;">
334                <h1>Quicksearch</h1>
335                <div id="simpleQuery" class="simplequery">
336                <g:form action="pages" name="simpleQueryForm" id="simpleQueryForm">
337                        <g:if test="${search_term}"><g:set var="preterm" value="${search_term}"/></g:if>
338                        <div class="searchContainer">
339                                <div class="search">
340                                        <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>
341                                </div>
342                                <span style="font-style:italic;color:#aaa;font-size:10px;">more advanced searches can be performed <g:link controller="advancedQuery">here</g:link>...</span>
343                        </div>
344                        </g:form>
345                        <h1>Quick Start</h1>
346                        <p>
347                                Through the <i>studies</i> menu you can either <i>create</i>, <i>view</i> or <i>import</i> studies
348                                (or study data). '<g:link controller="studyWizard" action="index" params="[jump:'create']">Create a new study</g:link>' will guide you through several steps to include your study
349                                into the system where question marks (<img src="${fam.icon(name: 'help')}">) will explain what information is
350                                required. You can (quick) save your study to complete it at another point in time, or use
351                                <i>import study data</i> to import large datasets (for example: many subjects) from an excel sheet
352                                into your study. Several data-types of different platforms (assays) can
353                                be linked to your study, like <i>simple assays</i> (e.g. clinical chemistry or Western blot)
354                                or <i>metabolomics</i>.
355                        </p>
356                        <p>
357                                <i>A more in depth quickstart guide is available for download <a href="${resource(dir:'downloads', file: 'quickstart_'+session.style+'.pdf')}">here</a>.</i>
358                        </p>
359                </div>
360        </div>
361</div>
362
363<div style="clear:both;display:block;padding-top:10px;">
364<g:if test="${showstats && studyCount}">
365        <h1>Usage Statistics</h1>
366        <div id="graphs" style="display:block;border:1px solid #6c6f70;width:100%;height:300px;">
367                <div id="studies-pie" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
368                <div id="daily-statistics" style="margin:2px;width:476px;height:296px;display:inline-block;float:left;zoom:1;*display:inline;"></div>
369        </div>
370</g:if>
371</div>
372
373</body>
374</html>
Note: See TracBrowser for help on using the browser.