Added relative time update info for shops

amiibofindr/static/app/time.js

@@ -0,0 +1,14 @@
+(function() {
+  var TimeComponent = function() {
+    this.initialize();
+  };
+
+  TimeComponent.prototype.initialize = function() {
+    [].forEach.call(document.querySelectorAll('[data-relative]'), function(item) {
+      var isoTime = item.getAttribute('data-relative');
+      item.textContent = moment(isoTime).fromNow();
+    })
+  };
+
+  SimpleViews.register('time', TimeComponent);
+})();

amiibofindr/static/less/style.less

@@ -13,3 +13,7 @@
 .underlined {
     text-decoration: underline;
 }
+
+.float-right {
+    float: right;
+}

amiibofindr/templates/amiibo/amiibo.html

@@ -12,7 +12,7 @@
 {% block meta_twitter_url %}{{ amiibo.get_absolute_url }}{% endblock %}
 {% block meta_og_url %}{{ amiibo.get_absolute_url }}{% endblock %}
 
-{% block js_views %}money{% endblock %}
+{% block js_views %}money,time{% endblock %}
 
 {% block breadcrumb %}
 {{ block.super }}
@@ -66,7 +66,14 @@
         {% for relation in amiibo.shops_set.all %}
         <tr>
           {% with price=relation.last_price.price stock=relation.last_price.stock currency=relation.last_price.currency %}
-          <td><a href="{{ relation.get_url }}" target="_blank"><i class="{% if relation.shop.flag_code == 'uk' %}gb{% else %}{{ relation.shop.flag_code }}{% endif %} flag"></i> {{ relation.shop.name }}</a></td>
+          {% spaceless %}
+          <td>
+            <a href="{{ relation.get_url }}" target="_blank">
+              <i class="{% if relation.shop.flag_code == 'uk' %}gb{% else %}{{ relation.shop.flag_code }}{% endif %} flag"></i> {{ relation.shop.name }}
+            </a>
+            <em class="float-right">{% trans "Updated " %} <span data-relative="{{ relation.last_price.date.isoformat }}"></span></em>
+          </td>
+          {% endspaceless %}
           <td class="center aligned {{ stock|yesno:'positive,negative' }}" {% if not price %}colspan="2"{% endif %}>
             <i class="icon {{ stock|yesno:'checkmark,close' }}"></i>
             {{ stock|yesno|capfirst }}

gulpfile.js

@@ -8,10 +8,12 @@ gulp.task('scripts', function() {
   return gulp.src([
       'bower_components/jquery/dist/jquery.js',
       'bower_components/money/money.js',
+      'bower_components/moment/moment.js',
       'amiibofindr/static/semantic/semantic.js',
       'amiibofindr/static/app/simpleViews.js',
       'amiibofindr/static/app/global.js',
-      'amiibofindr/static/app/money.js'
+      'amiibofindr/static/app/money.js',
+      'amiibofindr/static/app/time.js'
     ])
     .pipe(concat('app.js'))
     .pipe(gulp.dest('amiibofindr/static/dist'));