[#890] Added first version of timeline

A timeline (using timeline.js) is added to the project main page. It currently shows:
- Date start / end (planned if actual is not filled in)
- Project updates
- Donations

akvo/rsr/static/rsr/v3/css/src/main.scss

@@ -162,8 +162,8 @@ header {
 	background: #ccc;
 }
 #timeline {
-	height: 200px;
-	background: #ccc;
+	height: 400px;
+	background: #FFFFFF;
 }
 
 /* UPDATE */

akvo/rsr/views/project.py

@@ -8,12 +8,67 @@
 
 import json
 
-from akvo.rsr.models import Project
-from akvo.utils import pagination
+from ..models import Invoice, Project
+from ...utils import pagination
 
 from django.shortcuts import get_object_or_404, render
 
 
+def _get_accordion_data(project):
+    accordion_data = dict()
+    accordion_data['background'] = project.background
+    accordion_data['current_status'] = project.current_status
+    accordion_data['project_plan'] = project.project_plan
+    accordion_data['target_group'] = project.target_group
+    accordion_data['sustainability'] = project.sustainability
+    return accordion_data
+
+
+def _get_timeline_data(project):
+    timeline_data = {'timeline': {'type': 'default'}}
+    timeline_dates = []
+
+    # Project start and end dates
+    date_start = (project.date_start_actual, 'Start', 'actual') if project.date_start_actual else \
+        (project.date_start_planned, 'Start', 'planned')
+    date_end = (project.date_end_actual, 'End', 'actual') if project.date_end_actual else \
+        (project.date_end_planned, 'End', 'planned') if project.date_end_planned else None
+
+    for date in (date_start, date_end):
+        if date:
+            timeline_dates.append({
+                'startDate': ','.join((str(date[0].year), str(date[0].month), str(date[0].day))),
+                'headline': date[1] + " date of project" if date[2] == 'actual' else date[1] +
+                                                                                     " date of project (planned)",
+            })
+
+    # Project updates
+    for update in project.updates_desc():
+        date = update.last_modified_at
+        timeline_dates.append({
+            'startDate': ','.join((str(date.year), str(date.month), str(date.day))),
+            'headline': 'Project update added',
+            'text': '<a href="' + update.get_absolute_url() + '">' + update.title + '</a>',
+            'asset': {
+                'thumbnail': update.photo.url if update.photo else None,
+                'media': update.photo.url if update.photo else None,
+            }
+        })
+
+    # Donations
+    for donation in Invoice.objects.filter(project=project):
+        date = donation.time
+        timeline_dates.append({
+            'startDate': ','.join((str(date.year), str(date.month), str(date.day))),
+            'headline': 'Donation added',
+            'text': 'by ' + donation.name if donation.name else 'Anonymous',
+        })
+
+    timeline_data['timeline']['date'] = timeline_dates
+
+    return timeline_data
+
+
 def directory(request):
     projects_list = Project.objects.published()
     page = request.GET.get('page')
@@ -30,19 +85,14 @@ def directory(request):
 
 def main(request, project_id):
     project = get_object_or_404(Project, pk=project_id)
-
-    accordion_data = dict()
-    accordion_data['background'] = project.background
-    accordion_data['current_status'] = project.current_status
-    accordion_data['project_plan'] = project.project_plan
-    accordion_data['target_group'] = project.target_group
-    accordion_data['sustainability'] = project.sustainability
-
     updates = project.project_updates.all().order_by('-created_at')
+    accordion_data = _get_accordion_data(project)
+    timeline_data = _get_timeline_data(project)
 
     context = {
         'accordion_data': json.dumps(accordion_data),
         'project': project,
+        'timeline_data': json.dumps(timeline_data),
         'updates': updates,
     }
 

akvo/templates/project_main.html

@@ -22,6 +22,25 @@
             }
         };
     </script>
+
+    <!-- Timeline -->
+    <link rel="stylesheet" type="text/css" href="http://cdn.knightlab.com/libs/timeline/latest/css/timeline.css">
+    <script type="text/javascript" src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
+
+    <script>
+        $(document).ready(function() {
+            var timeline_data = {{ timeline_data|safe }}
+
+            createStoryJS({
+                type:       'timeline',
+                width:      '100%',
+                height:     '400',
+                source:     timeline_data,
+                embed_id:   'timeline',
+                debug:      true
+            });
+        });
+    </script>
 {% endblock %}
 
 {% block maincontent %}
@@ -72,9 +91,7 @@ <h4 class="section">Finance</h4>
         </div>
         <div class="row">
             <div class="col-sm-12">
-                <div id="timeline">
-                    TIMELINE
-                </div>
+                <div id="timeline"></div>
             </div>
         </div>
         <div class="row">