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 | */ |
---|
9 | function 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 | |
---|
72 | //------------- Eventgroup ${bandNr} --------------- |
---|
73 | |
---|
74 | // Create an eventsource for all events |
---|
75 | eventSources[${bandNr}] = new Timeline.DefaultEventSource(); |
---|
76 | |
---|
77 | // Load events for this eventsource (using jquery) |
---|
78 | var event_url = '${createLink(controller:'study', action:'events', id:( eventGroup.id ? eventGroup.id : -1 ), params: [ startDate: study.startDate.getTime(), study: study.id ])}'; |
---|
79 | $.getJSON(event_url, $.callback( _loadJSONEvents, [0, ${bandNr}, eventSources[${bandNr}], overviewEventSource, event_url] ) ); |
---|
80 | |
---|
81 | // Create a new timeline band |
---|
82 | bandInfos[${bandNr}] = |
---|
83 | Timeline.createBandInfo({ |
---|
84 | eventSource: eventSources[${bandNr}], |
---|
85 | width: 30, |
---|
86 | intervalUnit: Timeline.DateTime.DAY, |
---|
87 | intervalPixels: 40, |
---|
88 | date: firstDate, |
---|
89 | timeZone: +1, |
---|
90 | syncWith: 1, |
---|
91 | layout: 'original', |
---|
92 | theme: theme |
---|
93 | }); |
---|
94 | |
---|
95 | // Make sure the date isn't printed by using the empty ether painter |
---|
96 | bandInfos[${bandNr}].etherPainter = emptyEtherPainter; |
---|
97 | |
---|
98 | // Add a title to the bandinfo |
---|
99 | <% |
---|
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 = 30; |
---|
104 | def numEvents = eventGroup.events?.size(); |
---|
105 | Integer maxChars = new Integer( numEvents * charsPerLine ); |
---|
106 | |
---|
107 | showSubjects = Subject.trimSubjectNames( sortedGroupSubjects, maxChars ); |
---|
108 | %> |
---|
109 | |
---|
110 | bandTitleInfo[ timelineNr ][ ${bandNr} ] = { |
---|
111 | title: "${eventGroup.name}", |
---|
112 | className: "<g:if test="${ eventGroup.id == -1 || !eventGroup.id }">no_group</g:if>", |
---|
113 | subjects: "${showSubjects}" |
---|
114 | }; |
---|
115 | |
---|
116 | <g:set var="bandNr" value="${bandNr+1}" /> |
---|
117 | </g:each> |
---|
118 | |
---|
119 | // Synchronize all bands |
---|
120 | <g:each in="${sortedEventGroups}" var="eventGroup" status="i"> |
---|
121 | bandInfos[${i + datesBandNr +1}].syncWith = ${datesBandNr}; |
---|
122 | </g:each> |
---|
123 | |
---|
124 | </g:each> |
---|
125 | |
---|
126 | return bandInfos; |
---|
127 | } |
---|