Easy way of check amiibo from listings

amiibofindr/apps/amiibo/views.py

@@ -87,9 +87,14 @@ class UserAmiiboView(View):
         '+-trade': 'toggle_trade',
     }
 
+    ajax = {
+        'detail': 'amiibo/widgets/relation_header_buttons.html',
+        'list': 'amiibo/widgets/amiibo-card.html',
+    }
+
     def get(self, request, amiibo, action):
-        amiibo = get_object_or_404(Amiibo, pk=amiibo)
-        # amiibo = obj.as_type()
+        obj = get_object_or_404(Amiibo, pk=amiibo)
+        amiibo = obj.as_type()
         if action in self.actions:
             method = getattr(self, self.actions[action], None)
             if method:
@@ -99,13 +104,9 @@ class UserAmiiboView(View):
 
         # Handle templating
         request_from = request.GET.get('from', None)
-        if request_from == 'detail':
-            return render(request,
-                          'amiibo/widgets/relation_header_buttons.html',
-                          {
-                              'amiibo': amiibo,
-                              'item': amiibo
-                          })
+        if request_from in self.ajax:
+            return render(request, self.ajax[request_from],
+                          { 'amiibo': amiibo, 'request': request })
 
         return HttpResponseRedirect(amiibo.as_type().get_absolute_url())
 
@@ -120,12 +121,12 @@ class UserAmiiboView(View):
     def add_trade(self, request, amiibo):
         if services.is_owned_by(amiibo, request.user):
             services.user_add_trade(request.user, amiibo)
-        # TODO: Add message
+            # TODO: Add message
 
     def remove_trade(self, request, amiibo):
         if services.is_owned_by(amiibo, request.user):
             services.user_remove_trade(request.user, amiibo)
-        # TODO: Add message
+            # TODO: Add message
 
     def toggle_trade(self, request, amiibo):
         if services.is_owned_by(amiibo, request.user):

amiibofindr/static/app/global.js

@@ -16,6 +16,12 @@ $(function(){
     position: 'left center'
   });
 
+  $(document).on('click', '[data-toggle]', function(event) {
+    var $el = event.target;
+    var $target = $($el.getAttribute('data-toggle'));
+    $target.slideToggle(200);
+  });
+
   $('.right.menu.open').on("click",function(e){
     e.preventDefault();
     $('.ui.vertical.menu').toggle();

amiibofindr/static/app/relation.js

@@ -1,6 +1,6 @@
 (function() {
   var RelationComponent = function() {
-    this.relations = document.querySelectorAll('[data-handle="relation"]');
+    this.relationsQuerySelector = '[data-handle="relation"]';
     this.initialize();
   };
 
@@ -10,12 +10,18 @@
     // Prepare handlers
     var linkHandler = function(event) {
       event.preventDefault();
-      self.click(event.target);
+      event.stopPropagation();
+
+      var target = event.target;
+
+      // Handles clicking in the icon
+      if (event.target.href === undefined)
+        target = event.target.parentNode
+
+      self.click(target);
     };
 
-    [].forEach.call(this.relations, function(buttons) {
-      $(buttons).on('click', 'a', linkHandler);
-    });
+    $(document).on('click', this.relationsQuerySelector + ' a', linkHandler);
   };
 
   RelationComponent.prototype.click = function(element) {
@@ -32,17 +38,24 @@
     var self = this;
     // loader.addClass('loading');
 
+    // If list, the entire card is the container
+    if (from === "list") container = loader;
+
     $.ajax({
       url: href,
       data: { from: from },
       success: function(result) {
-        self.handleResult(loader, container, result);
+        self.handleResult(loader, from, container, result);
       }
     });
   };
 
-  RelationComponent.prototype.handleResult = function(loader, container, result) {
-    container.html(result)
+  RelationComponent.prototype.handleResult = function(loader, from, container, result) {
+    if (from === 'list') {
+      container.replaceWith(result);
+    } else {
+      container.html(result)
+    }
     // loader.removeClass('loading');
   };
 

amiibofindr/static/less/style.less

@@ -1,5 +1,5 @@
 // Semantic-UI
-@import "../semantic/semantic.css";
+@import "../semantic/semantic.min.css";
 
 
 .price-converted {
@@ -10,6 +10,10 @@
     }
 }
 
+.hidden {
+    display: none;
+}
+
 .underlined {
     text-decoration: underline;
 }
@@ -34,4 +38,14 @@
 
 .nowrap {
     white-space: nowrap;
-}
+}
+
+.relation-buttons {
+    position: absolute;
+    left: 6px;
+    right: 6px;
+    bottom: 6px;
+    width: 100%;
+    text-align: center;
+    z-index: 30;
+}

amiibofindr/templates/amiibo/collection.html

@@ -19,7 +19,7 @@
   {% endif %}
 {% endblock %}
 
-{% block js_views %}{{ block.super }},collection-search{% endblock %}
+{% block js_views %}{{ block.super }},collection-search,relation{% endblock %}
 
 {% block main_content %}
   <div class="ui page grid">

amiibofindr/templates/amiibo/widgets/amiibo-card.html

@@ -1,18 +1,32 @@
 {% load staticfiles thumbnail i18n %}
+
 <div class="ui link card
             {% if amiibo.pk in USER_AMIIBO_WISHLIST %}yellow{% endif %}
-	    {% if amiibo.pk in USER_AMIIBO_OWNED %}green{% endif %}           
-	    {% if amiibo.pk in USER_AMIIBO_TRADE %}teal{% endif %}" data-amiibo-names="{{ amiibo.get_all_names|lower }}" data-href="{{ amiibo.get_absolute_url }}">
-  <div class="image">
-    <div class="ui fluid image">
-      {% if amiibo.is_card %}
-        <img src="{% thumbnail amiibo.image "240x340" crop %}" alt="{{ amiibo.name }}">
-      {% else %}
-        <img src="{% thumbnail amiibo.image "340x340" crop %}" alt="{{ amiibo.name }}">
+            {% if amiibo.pk in USER_AMIIBO_OWNED %}green{% endif %}
+            {% if amiibo.pk in USER_AMIIBO_TRADE %}teal{% endif %}"
+     data-amiibo-names="{{ amiibo.get_all_names|lower }}"
+     data-loader="{{ amiibo.pk }}">
+  <a href="{{ amiibo.get_absolute_url }}">
+    <div class="image">
+      <div class="ui fluid image">
+        {% if amiibo.is_card %}
+          <img src="{% thumbnail amiibo.image "240x340" crop %}" alt="{{ amiibo.name }}">
+        {% else %}
+          <img src="{% thumbnail amiibo.image "340x340" crop %}" alt="{{ amiibo.name }}">
+        {% endif %}
+      </div>
+      {% if request.user.is_authenticated %}
+        <div class="relation-buttons"
+             id="amiibo-buttons-{{ amiibo.pk }}"
+             data-handle="relation"
+             data-from="list"
+             data-amiibo="{{ amiibo.pk }}">
+          {% include 'amiibo/widgets/relation_list_buttons.html' %}
+        </div>
       {% endif %}
     </div>
-  </div>
+  </a>
   <div class="content text-center">
-    <div class="header">{{ amiibo.name }}</div>
+    <a href="{{ amiibo.get_absolute_url }}" class="header">{{ amiibo.name }}</a>
   </div>
 </div>

amiibofindr/templates/amiibo/widgets/relation_list_buttons.html

@@ -0,0 +1,21 @@
+{% load i18n %}
+
+{% if amiibo.pk in USER_AMIIBO_OWNED %}
+  <a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+-trade' %}"
+     class="ui icon button tiny {% if amiibo.pk in USER_AMIIBO_TRADE %}teal{% endif %}">
+    <i class="{% if amiibo.pk in USER_AMIIBO_TRADE %}check{% else %}cancel{% endif %} icon"></i>
+    <i class="ui icon retweet"></i>
+  </a>
+  <a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='-owned' %}"
+     class="ui button icon red tiny"><i class="ui icon cancel"></i></a>
+{% else %}
+  <a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+owned' %}"
+     class="ui button icon green  tiny"><i class="ui icon check"></i></a>
+  {% if amiibo.pk in USER_AMIIBO_WISHLIST %}
+    <a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='-wishlist' %}"
+       class="ui button icon yellow tiny"><i class="ui icon star"></i></a>
+  {% else %}
+    <a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+wishlist' %}"
+       class="ui icon button tiny"><i class="ui icon star"></i></a>
+  {% endif %}
+{% endif %}