Refactor javascript into front-endn

website/members/locale/nl/LC_MESSAGES/djangojs.po

+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-09-21 20:03+0200\n"
+"PO-Revision-Date: 2016-09-21 20:04+0200\n"
+"Language: nl\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"X-Generator: Poedit 1.8.9\n"
+
+#: members/static/members/js/statistics.js:50
+msgid "Members per member type"
+msgstr "Leden per lidtype"
+
+#: members/static/members/js/statistics.js:59
+msgid "Members"
+msgstr "Leden"
+
+#: members/static/members/js/statistics.js:62
+msgid "Supporters"
+msgstr "Begunstigers"
+
+#: members/static/members/js/statistics.js:65
+msgid "Honorary Members"
+msgstr "Ereleden"
+
+#: members/static/members/js/statistics.js:76
+msgid "Total members per year"
+msgstr "Aantal leden per jaar"
+
+#: members/static/members/js/statistics.js:85
+#: members/static/members/js/statistics.js:120
+#: members/static/members/js/statistics.js:156
+msgid "1st year"
+msgstr "Eerstejaars"
+
+#: members/static/members/js/statistics.js:88
+#: members/static/members/js/statistics.js:123
+#: members/static/members/js/statistics.js:159
+msgid "2nd year"
+msgstr "Tweedejaars"
+
+#: members/static/members/js/statistics.js:91
+#: members/static/members/js/statistics.js:126
+#: members/static/members/js/statistics.js:162
+msgid "3rd year"
+msgstr "Derdejaars"
+
+#: members/static/members/js/statistics.js:94
+#: members/static/members/js/statistics.js:129
+#: members/static/members/js/statistics.js:165
+msgid "4th year"
+msgstr "Vierdejaars"
+
+#: members/static/members/js/statistics.js:97
+#: members/static/members/js/statistics.js:132
+#: members/static/members/js/statistics.js:168
+msgid "5th year"
+msgstr "Vijfdejaars"
+
+#: members/static/members/js/statistics.js:100
+#: members/static/members/js/statistics.js:135
+#: members/static/members/js/statistics.js:171
+msgid ">5th year"
+msgstr "Ouderejaars"
+
+#: members/static/members/js/statistics.js:111
+msgid "Members per year"
+msgstr "Leden per jaar"
+
+#: members/static/members/js/statistics.js:147
+msgid "Supporters per year"
+msgstr "Begunstigers per jaar"

website/members/static/members/js/statistics.js

+/* Render statistics on statistics page */
+var pieOptions = {
+    allowPointSlect: true,
+    cursor: 'pointer',
+    dataLabels : {
+        enabled: true,
+        formatter:function() { // Omit zero values
+            if(this.y != 0) {
+                return this.point.name + ": " + this.y; // TODO: add newline <br /> ?
+            }
+        },
+        distance: -50
+    }
+};
+$(function () {
+    Highcharts.theme = {
+        colors: ['#AE0046', '#E62272', '#E6478A', '#CC2482', '#8E1056', '#DC3472'],
+        title: {
+            style: {
+                color: '#000',
+                font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
+            }
+        },
+        subtitle: {
+            style: {
+                color: '#666666',
+                font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
+            }
+        },
+        credits: false,  // Free for non-profit
+        legend: {
+            itemStyle: {
+                font: '9pt Trebuchet MS, Verdana, sans-serif',
+                color: 'black'
+            },
+            itemHoverStyle: {
+                color: 'gray'
+            }
+        }
+    };
+
+    // Apply the theme
+    Highcharts.setOptions(Highcharts.theme);
+
+    $('#membersTypeChart').highcharts({
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: gettext('Members per member type'),
+        },
+        plotOptions: {
+            pie: pieOptions
+        },
+        series: [{
+            name: 'Thalianen',
+            colorByPoint: true,
+            data : [{
+                name: gettext('Members'),
+                y: total_stats_member_type.member
+            },{
+                name: gettext('Supporters'),
+                y: total_stats_member_type.supporter
+            },{
+                name: gettext('Honorary Members'),
+                y: total_stats_member_type.honorary
+            }]
+        }]
+    });
+
+    $('#totalYearChart').highcharts({
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: gettext("Total members per year"),
+        },
+        plotOptions: {
+            pie: pieOptions
+        },
+        series: [{
+            name: 'Thalianen',
+            colorByPoint: true,
+            data : [{
+                name: gettext("1st year"),
+                y: total_stats_year[0].member + total_stats_year[0].supporter + total_stats_year[0].honorary
+            },{
+                name: gettext("2nd year"),
+                y: total_stats_year[1].member + total_stats_year[1].supporter + total_stats_year[1].honorary
+            },{
+                name: gettext("3rd year"),
+                y: total_stats_year[2].member + total_stats_year[2].supporter + total_stats_year[2].honorary
+            },{
+                name: gettext("4th year"),
+                y: total_stats_year[3].member + total_stats_year[3].supporter + total_stats_year[3].honorary
+            },{
+                name: gettext("5th year"),
+                y: total_stats_year[4].member + total_stats_year[4].supporter + total_stats_year[4].honorary
+            },{
+                name: gettext(">5th year"),
+                y: total_stats_year[5].member + total_stats_year[5].supporter + total_stats_year[5].honorary
+            }]
+        }]
+    });
+
+    $('#membersYearChart').highcharts({
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: gettext("Members per year"),
+        },
+        plotOptions: {
+            pie: pieOptions
+        },
+        series: [{
+            name: 'Thalianen',
+            colorByPoint: true,
+            data : [{
+                name: gettext("1st year"),
+                y: total_stats_year[0].member
+            },{
+                name: gettext("2nd year"),
+                y: total_stats_year[1].member
+            },{
+                name: gettext("3rd year"),
+                y: total_stats_year[2].member
+            },{
+                name: gettext("4th year"),
+                y: total_stats_year[3].member
+            },{
+                name: gettext("5th year"),
+                y: total_stats_year[4].member
+            },{
+                name: gettext(">5th year"),
+                y: total_stats_year[5].member
+            }]
+        }]
+    });
+
+
+    $('#supportersYearChart').highcharts({
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: gettext("Supporters per year"),
+        },
+        plotOptions: {
+            pie: pieOptions
+        },
+        series: [{
+            name: 'Thalianen',
+            colorByPoint: true,
+            data : [{
+                name: gettext("1st year"),
+                y: total_stats_year[0].supporter
+            },{
+                name: gettext("2nd year"),
+                y: total_stats_year[1].supporter
+            },{
+                name: gettext("3rd year"),
+                y: total_stats_year[2].supporter
+            },{
+                name: gettext("4th year"),
+                y: total_stats_year[3].supporter
+            },{
+                name: gettext("5th year"),
+                y: total_stats_year[4].supporter
+            },{
+                name: gettext(">5th year"),
+                y: total_stats_year[5].supporter
+            }]
+        }]
+    });
+});

website/members/templates/members/statistics.html

@@ -9,184 +9,6 @@
 
 <h2>{% trans "Total amount of Thalia members" %}: {{ total_members }}</h2>
 
-<script src="{% static 'members/js/highcharts.js' %}"></script>
-<script>
-var pieOptions = {
-            allowPointSlect: true,
-            cursor: 'pointer',
-            dataLabels : {
-                enabled: true,
-                formatter:function() { // Omit zero values
-                    if(this.y != 0) {
-                        return this.point.name + ": " + this.y; // TODO: add newline <br /> ?
-                    }
-                },
-                distance: -50
-            }
-          };
-    $(function () {
-        Highcharts.theme = {
-            colors: ['#AE0046', '#E62272', '#E6478A', '#CC2482', '#8E1056', '#DC3472'],
-            title: {
-                style: {
-                    color: '#000',
-                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
-                }
-            },
-            subtitle: {
-                style: {
-                    color: '#666666',
-                    font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
-                }
-            },
-            credits: false, // TODO: are we allowed to remove credits without a license?
-            legend: {
-                itemStyle: {
-                    font: '9pt Trebuchet MS, Verdana, sans-serif',
-                    color: 'black'
-                },
-                itemHoverStyle: {
-                    color: 'gray'
-                }
-            }
-        };
-
-        // Apply the theme
-        Highcharts.setOptions(Highcharts.theme);
-
-        $('#membersTypeChart').highcharts({
-            chart: {
-                type: 'pie'
-            },
-            title: {
-                text: '{% trans "Members per member type" %}'
-            },
-            plotOptions: {
-                pie: pieOptions
-            },
-            series: [{
-                name: 'Thalianen',
-                colorByPoint: true,
-                data : [{
-                    name: '{% trans "Members" %}',
-                    y: {{ total_stats_member_type.member }}
-                },{
-                    name: '{% trans "Supporters" %}',
-                    y: {{ total_stats_member_type.supporter }}
-                },{
-                    name: '{% trans "Honorary members" %}',
-                    y: {{ total_stats_member_type.honorary }}
-                }]
-            }]
-        });
-
-        $('#totalYearChart').highcharts({
-            chart: {
-                type: 'pie'
-            },
-            title: {
-                text: '{% trans "Total members per year" %}'
-            },
-            plotOptions: {
-                pie: pieOptions
-            },
-            series: [{
-                name: 'Thalianen',
-                colorByPoint: true,
-                data : [{
-                    name: '{% trans "1st year" %}',
-                    y: {{ total_stats_year.0.member|add:total_stats_year.0.supporter|add:total_stats_year.0.honorary }}
-                },{
-                    name: '{% trans "2nd year" %}',
-                    y: {{ total_stats_year.1.member|add:total_stats_year.1.supporter|add:total_stats_year.1.honorary }}
-                },{
-                    name: '{% trans "3rd year" %}',
-                    y: {{ total_stats_year.2.member|add:total_stats_year.2.supporter|add:total_stats_year.2.honorary }}
-                },{
-                    name: '{% trans "4th year" %}',
-                    y: {{ total_stats_year.3.member|add:total_stats_year.3.supporter|add:total_stats_year.3.honorary }}
-                },{
-                    name: '{% trans "5th year" %}',
-                    y: {{ total_stats_year.4.member|add:total_stats_year.4.supporter|add:total_stats_year.4.honorary }}
-                },{
-                    name: '{% trans ">5th year" %}',
-                    y: {{ total_stats_year.5.member|add:total_stats_year.5.supporter|add:total_stats_year.5.honorary }}
-                }]
-            }]
-        });
-
-        $('#membersYearChart').highcharts({
-            chart: {
-                type: 'pie'
-            },
-            title: {
-                text: '{% trans "Members per year" %}'
-            },
-            plotOptions: {
-                pie: pieOptions
-            },
-            series: [{
-                name: 'Thalianen',
-                colorByPoint: true,
-                data : [{
-                    name: '{% trans "1st year" %}',
-                    y: {{ total_stats_year.0.member }}
-                },{
-                    name: '{% trans "2nd year" %}',
-                    y: {{ total_stats_year.1.member }}
-                },{
-                    name: '{% trans "3rd year" %}',
-                    y: {{ total_stats_year.2.member }}
-                },{
-                    name: '{% trans "4th year" %}',
-                    y: {{ total_stats_year.3.member }}
-                },{
-                    name: '{% trans "5th year" %}',
-                    y: {{ total_stats_year.4.member }}
-                },{
-                    name: '{% trans ">5th year" %}',
-                    y: {{ total_stats_year.5.member }}
-                }]
-            }]
-        });
-
-
-        $('#supportersYearChart').highcharts({
-            chart: {
-                type: 'pie'
-            },
-            title: {
-                text: '{% trans "Supporters per year" %}'
-            },
-            plotOptions: {
-                pie: pieOptions
-            },
-            series: [{
-                name: 'Thalianen',
-                colorByPoint: true,
-                data : [{
-                    name: '{% trans "1st year" %}',
-                    y: {{ total_stats_year.0.supporter }}
-                },{
-                    name: '{% trans "2nd year" %}',
-                    y: {{ total_stats_year.1.supporter }}
-                },{
-                    name: '{% trans "3rd year" %}',
-                    y: {{ total_stats_year.2.supporter }}
-                },{
-                    name: '{% trans "4th year" %}',
-                    y: {{ total_stats_year.3.supporter }}
-                },{
-                    name: '{% trans "5th year" %}',
-                    y: {{ total_stats_year.4.supporter }}
-                },{
-                    name: '{% trans ">5th year" %}',
-                    y: {{ total_stats_year.5.supporter }}
-                }]
-            }]
-        });
-    });
-</script>
 <div id="membersTypeChart" style="width:100%; height:400px;"></div>
 <div id="totalYearChart" style="width:100%; height:400px;"></div>
 <div id="membersYearChart" style="width:100%; height:400px;"></div>
@@ -194,3 +16,20 @@ var pieOptions = {
 <br/><br/>
 
 {% endblock %}
+
+{% block js_head %}
+{{ block.super }}
+<script src="{% static 'members/js/highcharts.js' %}"></script>
+{% endblock %}
+
+{% block js_footer %}
+{{ block.super }}
+<script>
+    {% autoescape off %}
+    var total_stats_year = {{ total_stats_year }};
+    var total_stats_member_type = {{ total_stats_member_type }};
+    {% endautoescape %}
+</script>
+
+<script src="{% static 'members/js/statistics.js' %}"></script>
+{% endblock %}

website/members/views.py

 import os
 from datetime import date
 from sendfile import sendfile
+import json
 
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 from django.shortcuts import get_object_or_404, render
@@ -165,15 +166,16 @@ def get_become_a_member_document(request, pk):
 
 
 def statistics(request):
-    member_types = ["member", "supporter", "honorary"]
+    member_types = ("member", "supporter", "honorary")
 
     # The numbers
     total = models.Member.active_members.count()
 
     context = {
         "total_members": total,
-        "total_stats_year": models.gen_stats_year(member_types),
-        "total_stats_member_type": models.gen_stats_member_type(member_types)
+        "total_stats_year": json.dumps(models.gen_stats_year(member_types)),
+        "total_stats_member_type": json.dumps(
+            models.gen_stats_member_type(member_types)),
     }
 
     return render(request, 'members/statistics.html', context)

website/thaliawebsite/templates/base.html

@@ -30,7 +30,9 @@
 {% endcompress %}{% endblock %}
 
 <!-- js head -->
-{% block js_head %}{% compress js %}
+{% block js_head %}
+<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
+{% compress js %}
 <script type="text/javascript" src="{% static "plugins/jquery-1.8.3.min.js" %}"></script>
 <script type="text/javascript" src="{% static "js/jquery.jscroll.min.js" %}"></script>
 <script type="text/javascript" src="{% static "js/jquery.fancybox.js" %}"></script>

website/thaliawebsite/urls.py

@@ -21,6 +21,7 @@ from django.conf.urls.static import static
 from django.contrib import admin
 from django.contrib.sitemaps.views import sitemap
 from django.views.generic import TemplateView
+from django.views.i18n import JavaScriptCatalog
 
 from utils.views import private_thumbnails
 import members
@@ -82,5 +83,7 @@ urlpatterns = [
         name='django.contrib.sitemaps.views.sitemap'),
     # Dependencies
     url(r'^tinymce/', include('tinymce.urls')),
+    # Javascript translation catalog
+    url(r'jsi18n/$', JavaScriptCatalog.as_view(), name='javascript-catalog'),
 ] + static(settings.MEDIA_URL + 'public/',
            document_root=os.path.join(settings.MEDIA_ROOT, 'public'))