Fix different displayed date (#315)

* Implement moment.js, fix different displayed date

* Fix displayed date for Created on column

qgis-app/plugins/templates/plugins/plugin_list.html

@@ -1,4 +1,5 @@
 {% extends 'plugins/plugin_base.html' %}{% load i18n bootstrap_pagination humanize static sort_anchor range_filter thumbnail %}
+{% load local_timezone %}
 {% block extrajs %}
   <script type="text/javascript" src="{% static "js/jquery.cookie.js" %}"></script>
   <script language="javascript">
@@ -93,8 +94,8 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>
                 {% if object.author %}
                 <td><a title="{% trans "See all plugins by"%} {{ object.author }}" href="{% url "author_plugins" object.author %}">{{ object.author }}</a></td>
                 {% endif %}
-                <td>{{ object.latest_version_date|naturalday }}</td>
-                <td>{{ object.created_on|naturalday }}</td>
+                <td>{{ object.latest_version_date|local_timezone:"SHORT_NATURAL_DAY" }}</td>
+                <td>{{ object.created_on|local_timezone:"SHORT" }}</td>
                 <td><div><div class="star-ratings"><span style="width:{% widthratio object.average_vote 5 100 %}%" class="rating"></span></div> ({{ object.rating_votes }})</div></td>
                 <td>{% if object.stable %}<a href="{% url "version_download" object.package_name object.stable.version %}" title="{% trans "Download the stable version" %}" >{{ object.stable.version }}</a>{% else %}&mdash;{% endif %}</td>
                 <td>{% if object.experimental %}<a href="{% url "version_download" object.package_name object.experimental.version %}" title="{% trans "Download the experimental version" %}" >{{ object.experimental.version }}</a>{% else %}&mdash;{% endif %}</td>

qgis-app/plugins/templates/plugins/version_detail.html

@@ -1,4 +1,5 @@
 {% extends 'plugins/plugin_base.html' %}{% load i18n %}
+{% load local_timezone %}
 {% block content %}
     <h2>{% trans "Version" %}: {{ version }}</h2>
     <div class="pull-right"><a href="{% url "version_download" version.plugin.package_name version.version %}" class="btn btn-primary"><i class="icon-download-alt icon-white"></i> {% trans "Download" %}</a></div>
@@ -21,7 +22,7 @@ <h2>{% trans "Version" %}: {{ version }}</h2>
                 {% if version.changelog %}<dt>{% trans "Changelog" %}</dt><dd><pre>{{ version.changelog|wordwrap:80 }}</pre></dd>{% endif %}
                 <dt>{% trans "Approved" %}</dt><dd>{{ version.approved|yesno }}</dd>
                 <dt>{% trans "Author" %}</dt><dd>{{ version.created_by }}</dd>
-                <dt>{% trans "Uploaded" %}</dt><dd>{{ version.created_on }}</dd>
+                <dt>{% trans "Uploaded" %}</dt><dd>{{ version.created_on|local_timezone }}</dd>
                 <dt>{% trans "Minimum QGIS version" %}</dt><dd>{{ version.min_qg_version }}</dd>
                 <dt>{% trans "Maximum QGIS version" %}</dt><dd>{{ version.max_qg_version }}</dd>
                 <dt>{% trans "External dependencies (PIP install string)" %}</dt><dd>{{ version.external_deps }}</dd>

qgis-app/plugins/templatetags/local_timezone.py

@@ -6,10 +6,15 @@
 
 
 @register.filter(name="local_timezone", is_safe=True)
-def local_timezone(date):
+def local_timezone(date, args="LONG"):
     try:
         utcdate = date.astimezone(pytz.utc).isoformat()
-        result = '<span class="user-timezone">%s</span>' % (utcdate,)
+        if args and str(args) == "SHORT":
+            result = '<span class="user-timezone-short">%s</span>' % (utcdate,)
+        elif args and str(args) == "SHORT_NATURAL_DAY":
+            result = '<span class="user-timezone-short-naturalday">%s</span>' % (utcdate,)
+        else:
+            result = '<span class="user-timezone">%s</span>' % (utcdate,)
     except AttributeError:
         result = date
     return mark_safe(result)

qgis-app/static/js/local_timezone.js

@@ -5,13 +5,32 @@ $(".user-timezone").each(function (i) {
   $(this).text(localDate);
 })
 
-function toUserTimeZone(date) {
+$(".user-timezone-short").each(function (i) {
+  let localDate = toUserTimeZone($(this).text(), withTime=false);
+  $(this).text(localDate);
+})
+
+$(".user-timezone-short-naturalday").each(function (i) {
+  let localDate = toUserTimeZone($(this).text(), withTime=false, isNaturalDay=true);
+  $(this).text(localDate);
+})
+
+function toUserTimeZone(date, withTime=true, isNaturalDay=false) {
   try {
     date = new Date(date);
     let options = {
-      year: 'numeric', month: 'short', day: 'numeric',
-      hour: '2-digit', minute: '2-digit',
-      timeZoneName: 'short'
+      year: 'numeric', month: 'short', day: 'numeric'
+    }
+    if (withTime) {
+      options['hour'] = '2-digit'
+      options['minute'] = '2-digit'
+      options['timeZoneName'] = 'short'
+    }
+    const diffInDays = moment().diff(moment(date), 'days');
+
+    if (diffInDays <= 1 && isNaturalDay) {
+      const distance = moment(date).fromNow();
+      return distance
     }
     return date.toLocaleDateString([], options);
   } catch (e) {