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

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