root/trunk/grails-app/views/study/show.gsp @ 1213

Revision 1213, 8.6 KB (checked in by robert@…, 4 years ago)

Improved the study overview page such that the different tabs are loaded when needed. Also rewritten parts of the code. See ticket #155
  • Property svn:keywords set to Author Date Rev
Line 
1<%@ page import="dbnp.studycapturing.Study" %>
2<%@ page import="dbnp.studycapturing.EventGroup" %>
3<%@ page import="dbnp.studycapturing.RelTime" %>
4<html>
5  <head>
6    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7    <meta name="layout" content="main" />
8    <g:set var="entityName" value="${message(code: 'study.label', default: 'Study')}" />
9    <title><g:message code="default.show.label" args="[entityName]" /></title>
10    <script type="text/javascript">
11      // Number of timelines that should be loaded
12      var numTimelines = ${studyList?.size()};
13     
14      // This method is called on the event body.onLoad
15      $(function() {
16              $("#tabs").tabs({
17                load: function(event, ui) {
18                  // If the events tab is shown, the timeline should be redrawn
19                  if( ui.tab.hash == '#Events_timeline' ) {
20                    loadTimeline( 'eventstimeline', 'eventtitles', 0 );
21                  }
22                },
23                                ajaxOptions: {
24                                        error: function( xhr, status, index, anchor ) {
25                                                $( anchor.hash ).html(
26                                                        "Couldn't load this tab. We'll try to fix this as soon as possible." );
27                                        }
28                                }
29              });
30      });
31
32      // Parameters for the SIMILE timeline
33          Timeline_ajax_url="${resource(dir: 'js', file: 'timeline-simile/timeline_ajax/simile-ajax-api.js')}";
34      Timeline_urlPrefix='${resource(dir: 'js', file: 'timeline-simile/')}';
35      Timeline_parameters='bundle=true';
36
37    </script>
38    <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'studies.css')}"/>
39
40    <!-- Include scripts for the SIMILE timeline. See http://simile-widgets.org/wiki/ -->
41    <script src="${resource(dir: 'js', file: 'timeline-simile/timeline-api.js')}" type="text/javascript"></script>
42    <script src="${resource(dir: 'js', file: 'timeline-simile/custom-timeline.js')}" type="text/javascript"></script>
43    <script src="${resource(dir: 'js', file: 'timeline-simile/relative-time.js')}" type="text/javascript"></script>
44    <script src="${resource(dir: 'js', file: 'jquery-callback-1.2.js')}" type="text/javascript"></script>
45
46    <!-- Create the JSON objects for the timeline with events -->
47    <script type="text/javascript" src="<g:createLink action="createTimelineBandsJs" id="${studyList.id.join(',')}" />" type="text/javascript"></script>
48</head>
49<body>
50
51  <div class="body" id="studies">
52    <h1><g:message code="default.show.label" args="[entityName]" /></h1>
53    <g:if test="${flash.message}">
54      <div class="message">${flash.message}</div>
55    </g:if>
56    <div class="dialog">
57      <div id="tabs">
58        <ul>
59          <li><a href="#study">Study Information</a></li>
60          <li><a href="<g:createLink action="show_subjects" id="${studyList.id.join(',')}" />" title="Subjects"><span>Subjects</span></a></li>
61          <li><a href="<g:createLink action="show_events_timeline" id="${studyList.id.join(',')}" />" title="Events timeline"><span>Events timeline</span></a></li>
62          <li><a href="<g:createLink action="show_events_table" id="${studyList.id.join(',')}" />" title="Events table"><span>Events table</span></a></li>
63          <li><a href="<g:createLink action="show_assays" id="${studyList.id.join(',')}" />" title="Assays"><span>Assays</span></a></li>
64          <li><a href="<g:createLink action="show_samples" id="${studyList.id.join(',')}" />" title="Samples"><span>Samples</span></a></li>
65          <li><a href="<g:createLink action="show_persons" id="${studyList.id.join(',')}" />" title="Persons"><span>Persons</span></a></li>
66          <li><a href="<g:createLink action="show_publications" id="${studyList.id.join(',')}" />" title="Publications"><span>Publications</span></a></li>
67        </ul>
68
69        <div id="study">
70          <table>
71            <!-- only show the head section if there are multiple studies -->
72            <g:if test="${multipleStudies}">
73              <thead>
74                <tr>
75                  <th></th>
76                  <g:each in="${studyList}" var="studyInstance">
77                    <th>${studyInstance.title}</th>
78                  </g:each>
79                </tr>
80              </thead>
81            </g:if>
82            <%
83              // Determine a union of the fields from all studies, in order
84              // to show a proper list. We want every field to appear just once,
85              // so the list is filtered for unique values
86              studyFields = studyList[0].giveDomainFields() + studyList*.giveTemplateFields()?.flatten().unique()
87            %>
88            <!-- Show all template and domain fields, if filled -->
89            <g:each in="${studyFields}" var="field">
90              <g:if test="${field.isFilledInList( studyList )}">
91                <tr>
92                  <td>${field}</td>
93                  <g:each in="${studyList}" var="studyInstance">
94                    <td>
95                                          <g:if test="${studyInstance.fieldExists(field.name)}">
96                                                <wizard:showTemplateField field="${field}" entity="${studyInstance}" />
97                                          </g:if>
98                                          <g:else>
99                                                -
100                                          </g:else>
101                                        </td>
102                  </g:each>
103                </tr>
104              </g:if>
105            </g:each>
106
107            <!-- Add some extra fields -->
108            <tr>
109              <td>Events</td>
110              <g:each in="${studyList}" var="studyInstance">
111                <td>
112                  <g:if test="${studyInstance.giveEventTemplates()?.size()==0}">
113                    -
114                  </g:if>
115                  <g:else>
116                                        ${studyInstance.giveEventTemplates().name.join(", ")}
117                  </g:else>
118                </td>
119              </g:each>
120            </tr>
121            <tr>
122              <td>Sampling events</td>
123              <g:each in="${studyList}" var="studyInstance">
124                <td>
125                  <g:if test="${studyInstance.giveSamplingEventTemplates()?.size()==0}">
126                    -
127                  </g:if>
128                  <g:else>
129                   ${studyInstance.giveSamplingEventTemplates().name.join(", ")}
130                  </g:else>
131                </td>
132              </g:each>
133            </tr>
134            <tr>
135              <td>Public</td>
136              <g:each in="${studyList}" var="studyInstance">
137                <td>
138                   ${studyInstance.publicstudy}
139                </td>
140              </g:each>
141            </tr>
142            <tr>
143              <td>Owner</td>
144              <g:each in="${studyList}" var="studyInstance">
145                <td>
146                   ${studyInstance.owner?.username}
147                </td>
148              </g:each>
149            </tr>
150            <tr>
151              <td>Readers</td>
152              <g:each in="${studyList}" var="studyInstance">
153                <td>
154                  <g:if test="${studyInstance.readers.size() == 0}">
155                    -
156                  </g:if>
157                  <g:else>
158                    ${studyInstance.readers.username.join( ", " )}
159                  </g:else>
160                </td>
161              </g:each>
162            </tr>
163            <tr>
164              <td>Writers</td>
165              <g:each in="${studyList}" var="studyInstance">
166                <td>
167                  <g:if test="${studyInstance.writers?.size()==0}">
168                    -
169                  </g:if>
170                  <g:else>
171                    ${studyInstance.writers.username.join( ", " )}
172                  </g:else>
173                </td>
174              </g:each>
175            </tr>
176          </table>
177        </div>
178
179                <% /*
180                  All other tabs are moved to separate views and are loaded using
181                  ajax calls when a tab is opened. See http://jqueryui.com/demos/tabs/#ajax
182                */ %>
183
184      </div>
185    </div>
186    <br>
187    <div class="buttons">
188      <g:form action="delete">
189        <g:if test="${studyList?.size() == 1}">
190          <g:set var="studyInstance" value="${studyList[0]}" />
191          <g:hiddenField name="id" value="${studyInstance?.id}" />
192          <g:if test="${studyInstance.canWrite(loggedInUser)}">
193            <span class="button"><g:link class="edit" controller="wizard" params="[jump:'edit']" id="${studyInstance?.id}">${message(code: 'default.button.edit.label', default: 'Edit')}</g:link></span>
194          </g:if>
195          <g:if test="${studyInstance.isOwner(loggedInUser)}">
196            <span class="button"><g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" /></span>
197          </g:if>
198          </g:if>
199        <span class="button"><g:link class="backToList" action="list">Back to list</g:link></span>
200      </g:form>
201    </div>
202
203  </div>
204</body>
205</html>
Note: See TracBrowser for help on using the browser.