From adfc3eb9cbcb7989ac24ced6bcc8c9a97c1c9659 Mon Sep 17 00:00:00 2001 From: Olesia Date: Wed, 8 Oct 2014 17:48:30 +0300 Subject: [PATCH] Likes through ajax --- trip_journal_app/static/javascript/story.js | 69 +++++++++++++++++++ trip_journal_app/templates/story.html | 6 +- trip_journal_app/templates/story_content.html | 6 +- trip_journal_app/urls.py | 12 ++-- trip_journal_app/views.py | 22 ++---- 5 files changed, 88 insertions(+), 27 deletions(-) diff --git a/trip_journal_app/static/javascript/story.js b/trip_journal_app/static/javascript/story.js index 78c8a66..5d8a0ac 100644 --- a/trip_journal_app/static/javascript/story.js +++ b/trip_journal_app/static/javascript/story.js @@ -1,11 +1,31 @@ window.onload = function() { add_markers(); + + var likes = likeObjectsArray(); + for (var i = 0; i < likes.length; i++) { + ( function (i) { + likes[i].likeLink.addEventListener('click', function(e){ + e.preventDefault(); + likeRequest(likes[i]); + }, 'false'); + })(i); + } } var map; var geocoder; var markers = []; +function getCookie(name) { + var value = '; ' + document.cookie; + var parts = value.split('; ' + name + '='); + if (parts.length === 2) { + return parts.pop().split(';').shift(); + } else { + return undefined; + } +} + function add_markers() { var marker; var blocks = document.getElementsByClassName('saved'); @@ -63,3 +83,52 @@ function centerMap(pos) { map.setCenter(pos); } +function likeObjectsArray () { + var likes = [].slice.call( + document.getElementsByClassName('like') + ); + likes.push(document.getElementById('like_story')); + var likesObjects = []; + for (var i = 0; i < likes.length; i++) { + console.log(likes[i]); + likesObjects.push(formObjectToLike(likes[i])); + } + return likesObjects; +} + +function formObjectToLike(element) { + var objToLike = {}, + children = element.childNodes; + for (var i = 0; i < children.length; i++) { + if (children[i].className === "likes_count") { + objToLike.likesCount = children[i]; + } + else if (children[i].tagName === 'A') { + objToLike.url = children[i].getAttribute("href"); + objToLike.likeLink = children[i]; + } + } + return objToLike; +} + +/* +* Sends like POST request to picture or story url with id of that item. +* When the response is returned adds 'liked' class to corresponding heart. +* objToLike should have the following properties: url, element that contains +* like count and link element to which class "liked" should be added. +* */ +function likeRequest(objToLike) { + function showNewLike() { + if (xhr.readyState === 4 && xhr.status === 200) { + var likesCount = xhr.responseText; + objToLike.likesCount.innerHTML = likesCount; + objToLike.likeLink.classList.add("liked"); + } + } + var xhr = new XMLHttpRequest(); + xhr.open('POST', objToLike.url); + xhr.onreadystatechange = showNewLike; + xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken')); + xhr.setRequestHeader('X_REQUESTED_WITH', 'XMLHttpRequest'); + xhr.send(); +} diff --git a/trip_journal_app/templates/story.html b/trip_journal_app/templates/story.html index 51aab47..8dff208 100644 --- a/trip_journal_app/templates/story.html +++ b/trip_journal_app/templates/story.html @@ -26,9 +26,9 @@ by {{ story.user }} - {{ story.likes_count }} - + +

diff --git a/trip_journal_app/templates/story_content.html b/trip_journal_app/templates/story_content.html index 29f420a..0ee43fd 100644 --- a/trip_journal_app/templates/story_content.html +++ b/trip_journal_app/templates/story_content.html @@ -12,10 +12,10 @@

{{story_block.marker}}

- - {{ story_block.pic.likes_count }} +

{% elif page == 'edit' %}

{{ story_block.pic|get_stored_pic_by_size:800 }}

diff --git a/trip_journal_app/urls.py b/trip_journal_app/urls.py index 1bf7d4f..b097bf8 100755 --- a/trip_journal_app/urls.py +++ b/trip_journal_app/urls.py @@ -15,11 +15,13 @@ # list of user stories url(r'^my_stories/$', views.user_stories, name='user_stories'), # add likes to stories - url(r'^story/addrating/(?P\d+)/$', views.addrating, - name='addrating'), + url(r'^story/like/(?P\d+)/$', views.like, + {'item_to_like': 'Story'}, + name='like_story'), # add likes to pictures - url(r'^story/addrating_to_pictures/$', views.addrating_to_pictures, - name='addrating_to_pictures'), + url(r'^picture/like/(?P\d+)/$', views.like, + {'item_to_like': 'Picture'}, + name='like_picture'), # list of near by pictures url(r'^pictures_near_by/$', views.show_picture_near_by_page, name='pictures_near_by'), @@ -27,7 +29,7 @@ url(r'^stories_near_by/$', views.show_story_near_by_page, name='stories_near_by'), url(r'^search_items_near_by/', views.search_items_near_by, - name='search_items_near_by'), + name='search_items_near_by'), url(r'^$', views.home, name='home'), # toggling publish state for story url(r'^publish/(?P\d+)$', views.publish, name='publish'), diff --git a/trip_journal_app/views.py b/trip_journal_app/views.py index 920b496..27df931 100755 --- a/trip_journal_app/views.py +++ b/trip_journal_app/views.py @@ -164,23 +164,13 @@ def make_paging_for_items_search(request): @login_required -def addrating(request, story_id): - story = get_object_or_404(Story, pk=int(story_id)) - user = auth.get_user(request) - story.likes.add(user) - story.save() - return redirect('/story/' + str(story_id)) - - -@login_required -def addrating_to_pictures(request): - story_id = request.GET['story'] - picture_id = request.GET['picture'] - pic = get_object_or_404(Picture, pk=int(picture_id)) +@require_POST +def like(request, item_id, item_to_like): + item = get_object_or_404(globals()[item_to_like], pk=int(item_id)) user = auth.get_user(request) - pic.likes.add(user) - pic.save() - return redirect('/story/' + str(story_id)) + item.likes.add(user) + item.save() + return HttpResponse(item.likes_count()) @login_required