AJAX relation handling from detail view
This commit is contained in:
parent
f8771ba610
commit
2e5b6f59e2
|
@ -84,7 +84,7 @@ class UserAmiiboView(View):
|
||||||
'-wishlist': 'remove_wishlist',
|
'-wishlist': 'remove_wishlist',
|
||||||
'+trade': 'add_trade',
|
'+trade': 'add_trade',
|
||||||
'-trade': 'remove_trade',
|
'-trade': 'remove_trade',
|
||||||
'=trade': 'toggle_trade',
|
'+-trade': 'toggle_trade',
|
||||||
}
|
}
|
||||||
|
|
||||||
def get(self, request, amiibo, action):
|
def get(self, request, amiibo, action):
|
||||||
|
@ -97,6 +97,16 @@ class UserAmiiboView(View):
|
||||||
if result:
|
if result:
|
||||||
return result
|
return result
|
||||||
|
|
||||||
|
# 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
|
||||||
|
})
|
||||||
|
|
||||||
return HttpResponseRedirect(amiibo.as_type().get_absolute_url())
|
return HttpResponseRedirect(amiibo.as_type().get_absolute_url())
|
||||||
|
|
||||||
def add_wishlist(self, request, amiibo):
|
def add_wishlist(self, request, amiibo):
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
(function() {
|
||||||
|
var RelationComponent = function() {
|
||||||
|
this.relations = document.querySelectorAll('[data-handle="relation"]');
|
||||||
|
this.initialize();
|
||||||
|
};
|
||||||
|
|
||||||
|
RelationComponent.prototype.initialize = function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
// Prepare handlers
|
||||||
|
var linkHandler = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
self.click(event.target);
|
||||||
|
};
|
||||||
|
|
||||||
|
[].forEach.call(this.relations, function(buttons) {
|
||||||
|
$(buttons).on('click', 'a', linkHandler);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
RelationComponent.prototype.click = function(element) {
|
||||||
|
var $link = element;
|
||||||
|
var href = $link.href;
|
||||||
|
var $buttons = $(element).closest('[data-amiibo]');
|
||||||
|
var from = $buttons.attr('data-from');
|
||||||
|
var amiiboId = $buttons.attr('data-amiibo');
|
||||||
|
var loader = $buttons.closest('[data-loader="' + amiiboId + '"]');
|
||||||
|
this.doGet(href, from, loader, $buttons);
|
||||||
|
};
|
||||||
|
|
||||||
|
RelationComponent.prototype.doGet = function(href, from, loader, container) {
|
||||||
|
var self = this;
|
||||||
|
// loader.addClass('loading');
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: href,
|
||||||
|
data: { from: from },
|
||||||
|
success: function(result) {
|
||||||
|
self.handleResult(loader, container, result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
RelationComponent.prototype.handleResult = function(loader, container, result) {
|
||||||
|
container.html(result)
|
||||||
|
// loader.removeClass('loading');
|
||||||
|
};
|
||||||
|
|
||||||
|
SimpleViews.register('relation', RelationComponent);
|
||||||
|
})();
|
|
@ -17,7 +17,7 @@ AMIIBO FIGURE
|
||||||
{% block meta_twitter_url %}{{ amiibo.get_absolute_url }}{% endblock %}
|
{% block meta_twitter_url %}{{ amiibo.get_absolute_url }}{% endblock %}
|
||||||
{% block meta_og_url %}{{ amiibo.get_absolute_url }}{% endblock %}
|
{% block meta_og_url %}{{ amiibo.get_absolute_url }}{% endblock %}
|
||||||
|
|
||||||
{% block js_views %}money,time{% endblock %}
|
{% block js_views %}money,time,relation{% endblock %}
|
||||||
|
|
||||||
{% block breadcrumb %}
|
{% block breadcrumb %}
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
|
@ -30,7 +30,7 @@ AMIIBO FIGURE
|
||||||
{% block main_content %}
|
{% block main_content %}
|
||||||
<div class="ui page grid">
|
<div class="ui page grid">
|
||||||
<div class="sixteen wide column">
|
<div class="sixteen wide column">
|
||||||
<div class="ui segment">
|
<div class="ui segment" data-loader="{{ amiibo.pk }}">
|
||||||
<div class="ui stackable grid">
|
<div class="ui stackable grid">
|
||||||
<div class="eight wide column ui middle aligned">
|
<div class="eight wide column ui middle aligned">
|
||||||
{% block amiibo_header %}
|
{% block amiibo_header %}
|
||||||
|
@ -40,38 +40,7 @@ AMIIBO FIGURE
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
<div class="eight wide column right aligned">
|
<div class="eight wide column right aligned">
|
||||||
{% if user.is_authenticated %}
|
{% include 'amiibo/widgets/relation_header_buttons.html' %}
|
||||||
{% if amiibo.pk in USER_AMIIBO_OWNED %}
|
|
||||||
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='=trade' %}" class="ui button {% if amiibo.pk in USER_AMIIBO_TRADE %}teal{% endif %}">
|
|
||||||
<i class="{% if amiibo.pk in USER_AMIIBO_TRADE %}check{% else %}cancel{% endif %} icon"></i> {% trans 'Available for trade' %}
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='-owned' %}" class="ui button red">{% trans 'I do not have it' %}</a>
|
|
||||||
{% else %}
|
|
||||||
<div class="ui buttons">
|
|
||||||
{% if amiibo.pk in USER_AMIIBO_WISHLIST %}
|
|
||||||
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='-wishlist' %}" class="ui button yellow">{% trans 'I do not want this' %}</a>
|
|
||||||
{% else %}
|
|
||||||
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+wishlist' %}" class="ui button">{% trans 'I want this' %}</a>
|
|
||||||
{% endif %}
|
|
||||||
<div class="or" data-text="{% trans 'or' %}"></div>
|
|
||||||
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+owned' %}" class="ui positive button">{% trans 'I have this' %}</a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<form action="{% url 'account_signup' %}" method="get">
|
|
||||||
<input type="hidden" name="next" value="{{ amiibo.get_absolute_url }}">
|
|
||||||
<button class="ui animated fade button standard">
|
|
||||||
<div class="visible content ui buttons">
|
|
||||||
<a href="#" class="ui button">{% trans 'I want this' %}</a>
|
|
||||||
<div class="or" data-text="{% trans 'or' %}"></div>
|
|
||||||
<a href="#" class="ui positive button">{% trans 'I have this' %}</a>
|
|
||||||
</div>
|
|
||||||
<div class="hidden content">
|
|
||||||
{% trans 'Register and star collecting amiibo!' %}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,42 @@
|
||||||
|
{% load i18n %}
|
||||||
|
|
||||||
|
<div data-handle="relation" data-from="detail"
|
||||||
|
data-amiibo="{{ amiibo.pk }}">
|
||||||
|
{% if user.is_authenticated %}
|
||||||
|
{% if amiibo.pk in USER_AMIIBO_OWNED %}
|
||||||
|
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+-trade' %}"
|
||||||
|
class="ui button {% if amiibo.pk in USER_AMIIBO_TRADE %}teal{% endif %}">
|
||||||
|
<i class="{% if amiibo.pk in USER_AMIIBO_TRADE %}check{% else %}cancel{% endif %} icon"></i> {% trans 'Available for trade' %}
|
||||||
|
</a>
|
||||||
|
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='-owned' %}"
|
||||||
|
class="ui button red">{% trans 'I do not have it' %}</a>
|
||||||
|
{% else %}
|
||||||
|
<div class="ui buttons">
|
||||||
|
{% if amiibo.pk in USER_AMIIBO_WISHLIST %}
|
||||||
|
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='-wishlist' %}"
|
||||||
|
class="ui button yellow">{% trans 'I do not want this' %}</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+wishlist' %}"
|
||||||
|
class="ui button">{% trans 'I want this' %}</a>
|
||||||
|
{% endif %}
|
||||||
|
<div class="or" data-text="{% trans 'or' %}"></div>
|
||||||
|
<a href="{% url 'amiibo:user-action' amiibo=amiibo.pk action='+owned' %}"
|
||||||
|
class="ui positive button">{% trans 'I have this' %}</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<form action="{% url 'account_signup' %}" method="get">
|
||||||
|
<input type="hidden" name="next" value="{{ amiibo.get_absolute_url }}">
|
||||||
|
<button class="ui animated fade button standard">
|
||||||
|
<div class="visible content ui buttons">
|
||||||
|
<a href="#" class="ui button">{% trans 'I want this' %}</a>
|
||||||
|
<div class="or" data-text="{% trans 'or' %}"></div>
|
||||||
|
<a href="#" class="ui positive button">{% trans 'I have this' %}</a>
|
||||||
|
</div>
|
||||||
|
<div class="hidden content">
|
||||||
|
{% trans 'Register and star collecting amiibo!' %}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
|
@ -14,6 +14,7 @@ gulp.task('scripts', function() {
|
||||||
'amiibofindr/static/app/simpleViews.js',
|
'amiibofindr/static/app/simpleViews.js',
|
||||||
'amiibofindr/static/app/global.js',
|
'amiibofindr/static/app/global.js',
|
||||||
'amiibofindr/static/app/money.js',
|
'amiibofindr/static/app/money.js',
|
||||||
|
'amiibofindr/static/app/relation.js',
|
||||||
'amiibofindr/static/app/collectionSearch.js',
|
'amiibofindr/static/app/collectionSearch.js',
|
||||||
'amiibofindr/static/app/time.js'
|
'amiibofindr/static/app/time.js'
|
||||||
])
|
])
|
||||||
|
|
Loading…
Reference in New Issue