Use json_script to provide date for date and week pickers

- Remove some unnecessary stuff from JavaScript files
- Reverse URLs on server-side
- Include JS for datepicker only if needed
- Remove JS unix date template tag and add it as an util helper instead

aleksis/apps/chronos/static/js/chronos/date_select.js

-function updateDatepicker() {
-    if (!displayDateOnly) {
-        $("#date").val(formatDate(activeDate));
-    }
-}
+var data = getJSONScript("datepicker_data");
+var activeDate = new Date(data.date);
 
-function update() {
-    console.log("Render new.");
-
-    updateDatepicker();
+function updateDatepicker() {
+    $("#date").val(formatDate(activeDate));
 }
 
 function loadNew() {
-    window.location.href = dest + formatDateForDjango(activeDate);
+    window.location.href = data.dest + formatDateForDjango(activeDate);
 }
 
 function onDateChanged() {
     var str = $("#date").val();
     var split = str.split(".");
     activeDate = new Date(split[2], split[1] - 1, split[0]);
-    update();
+    updateDatepicker();
     loadNew();
 }
 
@@ -26,5 +21,5 @@ function onDateChanged() {
 $(document).ready(function () {
     $("#date").change(onDateChanged);
 
-    update();
+    updateDatepicker();
 });

aleksis/apps/chronos/static/js/chronos/week_select.js

+var data = getJSONScript("week_select");
+
 function goToCalendarWeek(cw, year) {
-    window.location.href = dest + year + "/" + cw;
+    window.location.href = data.dest + year + "/" + cw;
 }
 
 function onCalendarWeekChanged(where) {
-    goToCalendarWeek($(where).val(), year);
+    goToCalendarWeek($(where).val(), data.year);
 }
 
 $(document).ready(function () {

aleksis/apps/chronos/templates/chronos/my_timetable.html

@@ -27,10 +27,6 @@
     </div>
   </div>
 
-  <script type="text/javascript">
-    var dest = Urls.myTimetable();
-  </script>
-
   <div class="row">
     <div class="timetable-plan col s12 m12 xl4">
 

aleksis/apps/chronos/templates/chronos/partials/datepicker.html

-{% load date_js static %}
-
-<script type="text/javascript" src="{% static "js/helper.js" %}"></script>
-<script type="text/javascript">
-  var activeDate = new Date({{ day|date_unix }});
-  var displayDateOnly = {% if display_date_only %}true{% else %}false{% endif %};
-</script>
-<script type="text/javascript" src="{% static "js/chronos/date_select.js" %}"></script>
+{% load static %}
 
+{% if not display_date_only %}
+  <script type="text/javascript" src="{% static "js/helper.js" %}"></script>
+  {{ datepicker|json_script:"datepicker_data" }}
+  <script type="text/javascript" src="{% static "js/chronos/date_select.js" %}"></script>
+{% endif %}
 
 <div class="col s2 no-padding">
     <a class="waves-effect waves-teal btn-flat btn-flat-medium left" href="{{ url_prev }}">
         <i class="material-icons center">navigate_before</i>
     </a>
-
 </div>
+
 {% if display_date_only %}
     <div class="col s8">
     <span class="card-title center-block" id="date">

aleksis/apps/chronos/templates/chronos/substitutions.html

@@ -9,10 +9,6 @@
 {% block no_page_title %}{% endblock %}
 
 {% block content %}
-  <script type="text/javascript">
-    var dest = Urls.substitutions();
-  </script>
-
   <div class="row no-margin">
     <div class="col s10 m6 no-padding">
       <h4>{% trans "Substitutions" %}</h4>

aleksis/apps/chronos/templates/chronos/timetable.html

@@ -7,14 +7,10 @@
 {% endblock %}
 
 {% block content %}
+
   {% if smart %}
-    <script type="text/javascript">
-      var week = {{ week.week }};
-      var year = {{ week.year }};
-      var type = "{{ type }}";
-      var pk = {{ pk }};
-      var dest = Urls.timetable(type, pk);
-    </script>
+    <script type="text/javascript" src="{% static "js/helper.js" %}"></script>
+    {{ week_select|json_script:"week_select" }}
     <script type="text/javascript" src="{% static "js/chronos/week_select.js" %}"></script>
   {% endif %}
 

aleksis/apps/chronos/templatetags/date_js.py → aleksis/apps/chronos/util/js.py

-from datetime import datetime, time
+from datetime import datetime, time, date
 
-from django import template
 
+def date_unix(value: date) -> int:
+    """ Converts a date object to an UNIX timestamp """
 
-register = template.Library()
-
-
-@register.filter
-def date_unix(value: datetime):
     value = datetime.combine(value, time(hour=0, minute=0))
     return int(value.timestamp()) * 1000

aleksis/apps/chronos/views.py

@@ -17,6 +17,7 @@ from aleksis.core.util import messages
 from .forms import LessonSubstitutionForm
 from .models import LessonPeriod, LessonSubstitution, TimePeriod, Room
 from .tables import LessonsTable
+from .util.js import date_unix
 from .util.min_max import (
     period_min,
     period_max,
@@ -183,6 +184,10 @@ def timetable(
     context["pk"] = pk
     context["el"] = el
     context["smart"] = is_smart
+    context["week_select"] = {
+        "year": wanted_week.year,
+        "dest": reverse("timetable", args=[type_, pk])
+    }
 
     week_prev = wanted_week - 1
     week_next = wanted_week + 1
@@ -306,6 +311,10 @@ def substitutions(
 
     context["substitutions"] = substitutions
     context["day"] = wanted_day
+    context["datepicker"] = {
+        "date": date_unix(wanted_day),
+        "dest": reverse("substitutions")
+    }
 
     context["url_prev"], context["url_next"] = get_prev_next_by_day(
         wanted_day, "substitutions_by_date"