From d142abb93461821b364cd675e7486f3385f8d9b9 Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Wed, 22 Jan 2020 20:44:24 +0100
Subject: [PATCH] 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
---
.../chronos/static/js/chronos/date_select.js | 19 +++++++------------
.../chronos/static/js/chronos/week_select.js | 6 ++++--
.../templates/chronos/my_timetable.html | 4 ----
.../chronos/partials/datepicker.html | 16 +++++++---------
.../templates/chronos/substitutions.html | 4 ----
.../chronos/templates/chronos/timetable.html | 10 +++-------
aleksis/apps/chronos/templatetags/date_js.py | 12 ------------
aleksis/apps/chronos/util/js.py | 8 ++++++++
aleksis/apps/chronos/views.py | 9 +++++++++
9 files changed, 38 insertions(+), 50 deletions(-)
delete mode 100644 aleksis/apps/chronos/templatetags/date_js.py
create mode 100644 aleksis/apps/chronos/util/js.py
diff --git a/aleksis/apps/chronos/static/js/chronos/date_select.js b/aleksis/apps/chronos/static/js/chronos/date_select.js
index 7f3e5c3c..b32309b3 100644
--- a/aleksis/apps/chronos/static/js/chronos/date_select.js
+++ b/aleksis/apps/chronos/static/js/chronos/date_select.js
@@ -1,24 +1,19 @@
-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();
});
diff --git a/aleksis/apps/chronos/static/js/chronos/week_select.js b/aleksis/apps/chronos/static/js/chronos/week_select.js
index 98db085c..3d683a88 100644
--- a/aleksis/apps/chronos/static/js/chronos/week_select.js
+++ b/aleksis/apps/chronos/static/js/chronos/week_select.js
@@ -1,9 +1,11 @@
+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 () {
diff --git a/aleksis/apps/chronos/templates/chronos/my_timetable.html b/aleksis/apps/chronos/templates/chronos/my_timetable.html
index 70d73c22..d50a194d 100644
--- a/aleksis/apps/chronos/templates/chronos/my_timetable.html
+++ b/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">
diff --git a/aleksis/apps/chronos/templates/chronos/partials/datepicker.html b/aleksis/apps/chronos/templates/chronos/partials/datepicker.html
index 796f9c9b..ede1fb06 100644
--- a/aleksis/apps/chronos/templates/chronos/partials/datepicker.html
+++ b/aleksis/apps/chronos/templates/chronos/partials/datepicker.html
@@ -1,19 +1,17 @@
-{% 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">
diff --git a/aleksis/apps/chronos/templates/chronos/substitutions.html b/aleksis/apps/chronos/templates/chronos/substitutions.html
index 52708d1f..99b85fad 100644
--- a/aleksis/apps/chronos/templates/chronos/substitutions.html
+++ b/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>
diff --git a/aleksis/apps/chronos/templates/chronos/timetable.html b/aleksis/apps/chronos/templates/chronos/timetable.html
index 879e8822..fa8d4829 100644
--- a/aleksis/apps/chronos/templates/chronos/timetable.html
+++ b/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 %}
diff --git a/aleksis/apps/chronos/templatetags/date_js.py b/aleksis/apps/chronos/templatetags/date_js.py
deleted file mode 100644
index 4492f75a..00000000
--- a/aleksis/apps/chronos/templatetags/date_js.py
+++ /dev/null
@@ -1,12 +0,0 @@
-from datetime import datetime, time
-
-from django import template
-
-
-register = template.Library()
-
-
-@register.filter
-def date_unix(value: datetime):
- value = datetime.combine(value, time(hour=0, minute=0))
- return int(value.timestamp()) * 1000
diff --git a/aleksis/apps/chronos/util/js.py b/aleksis/apps/chronos/util/js.py
new file mode 100644
index 00000000..eb9082b0
--- /dev/null
+++ b/aleksis/apps/chronos/util/js.py
@@ -0,0 +1,8 @@
+from datetime import datetime, time, date
+
+
+def date_unix(value: date) -> int:
+ """ Converts a date object to an UNIX timestamp """
+
+ value = datetime.combine(value, time(hour=0, minute=0))
+ return int(value.timestamp()) * 1000
diff --git a/aleksis/apps/chronos/views.py b/aleksis/apps/chronos/views.py
index 2e30f6a4..8b2d659c 100644
--- a/aleksis/apps/chronos/views.py
+++ b/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"
--
GitLab