source: trunk/grails-app/views/study/createTimelineBandsJs.gsp @ 1888

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

.solves #439

  • Property svn:keywords set to Rev Author Date
File size: 4.4 KB
Line 
1<% response.contentType = "text/javascript" %>
2<%@ page import="dbnp.studycapturing.EventGroup" %>
3<%@ page import="dbnp.studycapturing.Subject" %>
4/*
5  * Creates timeline bands for displaying different timelines
6  *
7  * @returns array with BandInfo objects, as described on http://simile-widgets.org/wiki/Timeline_GettingStarted
8  */
9function createTimelineBands( timelineNr ) {
10  var bandInfos = [];
11  var eventSources = [];
12  var overviewEventSource = new Timeline.DefaultEventSource();
13
14  // The way the timeline should look. See http://www.linuxjournal.com/article/9301
15  var theme = Timeline.ClassicTheme.create();
16  var emptyEtherPainter = new Timeline.EmptyEtherPainter( { theme: theme } )
17
18  // Now create the bands for all studies, and add them to one timeline
19  // Multiple timelines on one page do not seem to work
20  <g:set var="bandNr" value="${0}" />
21  <g:each in="${studyList}" var="study" status="timelineNr">
22
23        // The date that the timeline should start on
24        var dateStr = "<g:formatDate format="yyyy/MM/dd HH:mm:ss" date="${study.startDate}"/>";
25        firstDate = new Date ( dateStr );
26
27        //------------- Eventgroup overview ---------------
28
29        <g:set var="datesBandNr" value="${bandNr}" />
30        // Add an empty band to show the dates
31        bandInfos[${bandNr}] =
32                   Timeline.createBandInfo({
33                          width:          40,
34                          intervalUnit:   Timeline.DateTime.DAY,
35                          intervalPixels: 40,
36                          showEventText:  false,
37                          date:           firstDate,
38                          timeZone:       +1,
39                          layout:         'original',
40                          theme:          theme
41                   });
42
43        // Make sure the date is printed using the relative time
44        bandInfos[${bandNr}].etherPainter = new Timeline.RelativeDateEtherPainter( { theme: theme, startDate: firstDate, unit: Timeline.DateTime.DAY } );
45        bandInfos[${bandNr}].labeller = new Timeline.RelativeDateLabeller( "en", 0, firstDate );
46
47        bandTitleInfo[ timelineNr ][ ${bandNr} ] = {
48          title: "${study.title}",
49          subjects: "",
50          className: "studytitle"
51        };
52
53        <g:set var="bandNr" value="${bandNr+1}" />
54        <%
55          def sortedEventGroups = study.eventGroups.sort( { a, b ->
56                  return a.name <=> b.name;
57          }  as Comparator );
58
59          def orphans = study.getOrphanEvents();
60          if( orphans?.size() > 0 ) {
61                sortedEventGroups.add( new EventGroup(
62                  id: -1,
63                  name: 'No group',
64                  events: orphans,
65                  subjects: []
66                ));
67          }
68
69        %>
70        <g:each in="${sortedEventGroups}" var="eventGroup" status="i">
71          //------------- Eventgroup ${bandNr} ---------------
72
73          // Create an eventsource for all events
74          eventSources[${bandNr}] = new Timeline.DefaultEventSource();
75
76          // Load events for this eventsource (using jquery)
77          var event_url = '${createLink(controller:'study', action:'events', id:( eventGroup.id ? eventGroup.id : -1 ), params: [ startDate: study.startDate.getTime(), study: study.id ])}';
78          $.getJSON(event_url, $.callback( _loadJSONEvents, [0, ${bandNr}, eventSources[${bandNr}], overviewEventSource, event_url] ) );
79
80          // Create a new timeline band
81          bandInfos[${bandNr}] =
82                         Timeline.createBandInfo({
83                                 eventSource:    eventSources[${bandNr}],
84                                 width:          30,
85                                 intervalUnit:   Timeline.DateTime.DAY,
86                                 intervalPixels: 40,
87                                 date:           firstDate,
88                                 timeZone:       +1,
89                                 syncWith:       1,
90                                 layout:         'original',
91                                 theme:          theme
92                         });
93
94          // Make sure the date isn't printed by using the empty ether painter
95          bandInfos[${bandNr}].etherPainter = emptyEtherPainter;
96
97          // Add a title to the bandinfo
98          <%
99                if (eventGroup.subjects) {
100                        ArrayList<Subject> sortedGroupSubjects = eventGroup.subjects.sort( { a, b -> a.name <=> b.name } as Comparator );
101
102                        // We can only show appr. 30 characters per line and as many lines as there are events
103                        def charsPerLine = 40;
104                        def numEvents = eventGroup.events?.size() + eventGroup.samplingEvents?.size();
105                        Integer maxChars = new Integer( numEvents * charsPerLine );
106
107                        showSubjects = Subject.trimSubjectNames( sortedGroupSubjects, maxChars );
108                } else {
109                        showSubjects = ''
110                }
111          %>
112
113          bandTitleInfo[ timelineNr ][ ${bandNr} ] = {
114                title: "${eventGroup.name}",
115                className: "<g:if test="${ eventGroup.id == -1 || !eventGroup.id  }">no_group</g:if>",
116                subjects: "${showSubjects}"
117          };
118
119          <g:set var="bandNr" value="${bandNr+1}" />
120        </g:each>
121
122        // Synchronize all bands
123        <g:each in="${sortedEventGroups}" var="eventGroup" status="i">
124          bandInfos[${i + datesBandNr +1}].syncWith = ${datesBandNr};
125        </g:each>
126
127  </g:each>
128
129  return bandInfos;
130}
Note: See TracBrowser for help on using the repository browser.