Ignore:
Timestamp:
May 26, 2010, 10:50:53 AM (10 years ago)
Author:
roberth
Message:

Updated study view to show the events on a timeline.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/study/show.gsp

    r454 r467  
    55    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    66    <meta name="layout" content="main" />
    7   <g:set var="entityName" value="${message(code: 'study.label', default: 'Study')}" />
    8   <title><g:message code="default.show.label" args="[entityName]" /></title>
    9   <script type="text/javascript">
    10     $(function() {
    11             $("#tabs").tabs();
    12     });
    13   </script>
    14   <link rel="stylesheet" href="${resource(dir: 'css', file: 'studies.css')}"/>
    15 
     7    <g:set var="entityName" value="${message(code: 'study.label', default: 'Study')}" />
     8    <title><g:message code="default.show.label" args="[entityName]" /></title>
     9    <script type="text/javascript">
     10      // Flag whether the timelines have been loaded
     11      var timelineloaded = false;
     12     
     13      // Number of timelines that should be loaded
     14      var numTimelines = ${studyList.size()};
     15     
     16      // This method is called on the event body.onLoad
     17      $(function() {
     18              $("#tabs").tabs({
     19                show: function(event, ui) {
     20                  // If the events tab is shown, the timeline should be redrawn
     21                  if( ui.tab.hash == '#events' && !timelineloaded ) {
     22                    loadTimeline( 'eventstimeline', 'eventtitles', 0 );
     23                    timelineloaded = true;
     24                  }
     25                }
     26              });
     27      });
     28    </script>
     29    <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'studies.css')}"/>
     30
     31    <!-- Include scripts for the SIMILE timeline. See http://simile-widgets.org/wiki/ -->
     32    <script type="text/javascript">
     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    </script>
     37    <script src="${resource(dir: 'js', file: 'timeline-simile/timeline-api.js')}" type="text/javascript"></script>
     38    <script src="${resource(dir: 'js', file: 'timeline-simile/custom-timeline.js')}" type="text/javascript"></script>
     39    <script src="${resource(dir: 'js', file: 'jquery-callback-1.2.js')}" type="text/javascript"></script>
     40
     41    <!-- Create the JSON objects for the timeline with events -->
     42    <script type="text/javascript">
     43         /*
     44          * Creates timeline bands for displaying different timelines
     45          *
     46          * @returns array with BandInfo objects, as described on http://simile-widgets.org/wiki/Timeline_GettingStarted
     47          */
     48        function createTimelineBands( timelineNr ) {
     49          var bandInfos = [];
     50          var eventSources = [];
     51          var overviewEventSource = new Timeline.DefaultEventSource();
     52
     53          // The way the timeline should look. See http://www.linuxjournal.com/article/9301
     54          var theme = Timeline.ClassicTheme.create();
     55          var emptyEtherPainter = new Timeline.EmptyEtherPainter( { theme: theme } )
     56
     57          // Now create the bands for all studies, and add them to one timeline
     58          // Multiple timeline on one page do not seem to work
     59          <g:set var="bandNr" value="${0}" />
     60          <g:each in="${studyList}" var="study" status="timelineNr">
     61              // The date that the timeline should start on
     62              var dateStr = "<g:formatDate format="yyyy/MM/dd HH:mm:ss" date="${study.startDate}"/>";
     63              firstDate = new Date ( dateStr );
     64
     65              //------------- Eventgroup overview ---------------
     66
     67              <g:set var="datesBandNr" value="${bandNr}" />
     68              // Add an empty band to show the dates
     69              bandInfos[${bandNr}] =
     70                     Timeline.createBandInfo({
     71                        width:          40,
     72                        intervalUnit:   Timeline.DateTime.DAY,
     73                        intervalPixels: 40,
     74                        showEventText:  false,
     75                        date:           firstDate,
     76                        timeZone:       +1,
     77                        layout:         'original',
     78                        theme:          theme
     79                     });
     80              bandTitleInfo[ timelineNr ][ ${bandNr} ] = {
     81                title: "${study.title}",
     82                subjects: "",
     83                className: "studytitle"
     84              };
     85
     86              <g:set var="bandNr" value="${bandNr+1}" />
     87
     88              <g:each in="${study.eventGroups}" var="eventGroup" status="i">
     89
     90                //------------- Eventgroup ${bandNr} ---------------
     91
     92                // Create an eventsource for all events
     93                eventSources[${bandNr}] = new Timeline.DefaultEventSource();
     94
     95                // Load events for this eventsource (using jquery)
     96                var event_url = '${createLink(controller:'study', action:'events', id:eventGroup.id, params: [startDate: study.startDate])}';
     97                $.getJSON(event_url, $.callback( _loadJSONEvents, [0, ${bandNr}, eventSources[${bandNr}], overviewEventSource, event_url] ) );
     98
     99                // Create a new timeline band
     100                bandInfos[${bandNr}] =
     101                       Timeline.createBandInfo({
     102                           eventSource:    eventSources[${bandNr}],
     103                           width:          30,
     104                           intervalUnit:   Timeline.DateTime.DAY,
     105                           intervalPixels: 40,
     106                           date:           firstDate,
     107                           timeZone:       +1,
     108                           syncWith:       1,
     109                           layout:         'original',
     110                           theme:          theme
     111                       });
     112
     113                // Make sure the date isn't printed by using the empty ether painter
     114                bandInfos[${bandNr}].etherPainter = emptyEtherPainter;
     115
     116                // Add a title to the bandinfo
     117                <% sortedGroupSubjects = eventGroup.subjects.sort( { a, b -> a.name <=> b.name } as Comparator )  %>
     118                bandTitleInfo[ timelineNr ][ ${bandNr} ] = {
     119                  title: "${eventGroup.name}",
     120                  subjects: "${sortedGroupSubjects.name.join( ', ' )}"
     121                };
     122
     123                <g:set var="bandNr" value="${bandNr+1}" />
     124              </g:each>
     125
     126              // Synchronize all bands
     127              <g:each in="${study.eventGroups}" var="eventGroup" status="i">
     128                bandInfos[${i + datesBandNr +1}].syncWith = ${datesBandNr};
     129              </g:each>
     130
     131          </g:each>
     132
     133          return bandInfos;
     134        }
     135     </script>
    16136</head>
    17137<body>
     
    23143    </g:if>
    24144    <div class="dialog">
    25 
    26145      <div id="tabs">
    27146        <ul>
     
    36155
    37156        <div id="study">
    38 
    39157          <table>
    40158            <!-- only show the head section if there are multiple studies -->
     
    242360          </g:if>
    243361          <g:else>
    244 
     362            <g:each in="${studyList}" var="study" status="i">
     363              <div style="margin: 10px; ">
     364                <div class="eventtitles" id="eventtitles-${i}"></div>
     365                <div class="eventstimeline" id="eventstimeline-${i}"></div>
     366              </div>
     367            </g:each>
     368            <noscript>
    245369              <table>
    246370                <thead>
     
    304428                </g:each>
    305429              </table>
     430
     431            </noscript>
    306432
    307433          </g:else>
Note: See TracChangeset for help on using the changeset viewer.