From 5744eda6d96cf83bc18bcd62c90418770902d48c Mon Sep 17 00:00:00 2001 From: Kevin Paul Kalis Date: Mon, 7 Nov 2016 20:05:54 +0800 Subject: [PATCH 1/4] Create ajax version of comment submission on events --- assets/js/message.js | 22 +++++++++++++++++++++- events/models.py | 6 ++++++ events/serializers.py | 2 ++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/assets/js/message.js b/assets/js/message.js index ae269ba..669e0c9 100644 --- a/assets/js/message.js +++ b/assets/js/message.js @@ -6,7 +6,10 @@ $(function () { var data = $(this).serialize(); $.post(url, data).done(function(response){ $('#result').prepend(response); - location.reload(); + // console.log(response); + // location.reload(); + var resp = returnhtml(response); + $('#result').prepend(resp); $('.form-comments').trigger("reset"); data = {}; }); @@ -36,4 +39,21 @@ $(function () { }); }); + function returnhtml(data) { + var content = '
' + + '' + + '' + data.full_name + '' + + '
' + + '' + data.comment_date + '' + + '
' + + '
' + + '

' + data.comment + '

' + + '
', + avatar = '', + commentDiv = '
' + avatar + content + '
', + commentSection = '
' + commentDiv + '
'; + + return commentSection; + } + }); diff --git a/events/models.py b/events/models.py index 4d77371..ea945a0 100644 --- a/events/models.py +++ b/events/models.py @@ -97,3 +97,9 @@ class EventComment(models.Model): def __str__(self): return "{user} {comment}".format(user=self.user, comment=self.comment) + + def get_user_full_name(self): + return self.user.get_full_name() + + def get_user_avatar(self): + return self.user.profile_picture \ No newline at end of file diff --git a/events/serializers.py b/events/serializers.py index 0bca719..5710f63 100644 --- a/events/serializers.py +++ b/events/serializers.py @@ -19,6 +19,8 @@ class Meta: class EventCommentSerializer(serializers.ModelSerializer): + full_name = serializers.CharField(source='get_user_full_name', read_only=True) + avatar = serializers.CharField(source='get_user_avatar', read_only=True) class Meta: model = EventComment fields = '__all__' From a1aac6ab7c12f42553de10db27043513ea1d01f4 Mon Sep 17 00:00:00 2001 From: Kevin Paul Kalis Date: Tue, 8 Nov 2016 13:32:40 +0800 Subject: [PATCH 2/4] Remove reloading of page when user submits a comment --- assets/js/message.js | 23 +---------------------- events/api.py | 21 +++++++++++++++++++-- events/models.py | 8 +------- events/serializers.py | 2 -- templates/events/comment.html | 20 +++++++++++--------- 5 files changed, 32 insertions(+), 42 deletions(-) diff --git a/assets/js/message.js b/assets/js/message.js index 669e0c9..79d1736 100644 --- a/assets/js/message.js +++ b/assets/js/message.js @@ -6,10 +6,6 @@ $(function () { var data = $(this).serialize(); $.post(url, data).done(function(response){ $('#result').prepend(response); - // console.log(response); - // location.reload(); - var resp = returnhtml(response); - $('#result').prepend(resp); $('.form-comments').trigger("reset"); data = {}; }); @@ -17,7 +13,7 @@ $(function () { }); //reply to a comment - $('.reply').on('click', function (e) { + $(document).on('click', '.reply', function (e) { e.preventDefault(); var parent = $(this).parent(); @@ -39,21 +35,4 @@ $(function () { }); }); - function returnhtml(data) { - var content = '
' + - '' + - '' + data.full_name + '' + - '
' + - '' + data.comment_date + '' + - '
' + - '
' + - '

' + data.comment + '

' + - '
', - avatar = '', - commentDiv = '
' + avatar + content + '
', - commentSection = '
' + commentDiv + '
'; - - return commentSection; - } - }); diff --git a/events/api.py b/events/api.py index 62443cc..a7bc663 100644 --- a/events/api.py +++ b/events/api.py @@ -3,8 +3,10 @@ from rest_framework.viewsets import ViewSet from rest_framework.response import Response from rest_framework.permissions import AllowAny +from rest_framework.renderers import JSONRenderer, TemplateHTMLRenderer from .models import Event, EventComment, Feedback from .serializers import EventSerializer, EventCommentSerializer, FeedbackSerializer +from .forms import EventCommentForm from braces.views import LoginRequiredMixin @@ -61,6 +63,7 @@ class EventCommentsAPI(LoginRequiredMixin, ViewSet): """API endpoint for the list of comments for specific event """ serializer_class = EventCommentSerializer + renderer_classes = (TemplateHTMLRenderer, JSONRenderer) def list(self, *args, **kwargs): event_id = kwargs.get('event_id') @@ -78,8 +81,22 @@ def create_comment(self, request, **kwargs): event_title=event_id, user=self.request.user.id)) if serializer.is_valid(): - serializer.save() - return Response(serializer.data, status=201) + saved_data = serializer.save() + + # build comment dict to be used on the comment template + result_comment = { + 'event': { 'id': event_id }, + 'comment': { 'id': saved_data.id }, + 'form': EventCommentForm(), + 'profile': saved_data.user, + 'message': { + 'message': saved_data.comment, + 'get_full_name': saved_data.user.get_full_name(), + 'message_date': saved_data.comment_date + } + } + + return Response(result_comment, status=201, template_name='events/comment.html') return Response(serializer.errors, status=400) def get_comment(self, request, **kwargs): diff --git a/events/models.py b/events/models.py index ea945a0..26516ee 100644 --- a/events/models.py +++ b/events/models.py @@ -96,10 +96,4 @@ class EventComment(models.Model): comment_date = models.DateTimeField(auto_now_add=True) def __str__(self): - return "{user} {comment}".format(user=self.user, comment=self.comment) - - def get_user_full_name(self): - return self.user.get_full_name() - - def get_user_avatar(self): - return self.user.profile_picture \ No newline at end of file + return "{user} {comment}".format(user=self.user, comment=self.comment) \ No newline at end of file diff --git a/events/serializers.py b/events/serializers.py index 5710f63..0bca719 100644 --- a/events/serializers.py +++ b/events/serializers.py @@ -19,8 +19,6 @@ class Meta: class EventCommentSerializer(serializers.ModelSerializer): - full_name = serializers.CharField(source='get_user_full_name', read_only=True) - avatar = serializers.CharField(source='get_user_avatar', read_only=True) class Meta: model = EventComment fields = '__all__' diff --git a/templates/events/comment.html b/templates/events/comment.html index c581233..e65351f 100644 --- a/templates/events/comment.html +++ b/templates/events/comment.html @@ -17,22 +17,24 @@ {{ message.message }}

+
+
+
Reply 1 Favorite -
-
- {% csrf_token %} -
- - {{ form.message }} +
+ + {% csrf_token %} + + {{ form.comment }}
- +
-
- +
+
From fb3da42fa84dd209275e4d539b445bab53a75918 Mon Sep 17 00:00:00 2001 From: Kevin Paul Kalis Date: Tue, 8 Nov 2016 14:35:22 +0800 Subject: [PATCH 3/4] Remove reloading of page when submitting comment replies --- assets/css/style.css | 41 +++++++++++++++--------------------- assets/js/message.js | 2 +- events/api.py | 10 +++++++-- templates/events/detail.html | 41 ++++++++++++++++++------------------ templates/events/reply.html | 31 ++++++++++++--------------- 5 files changed, 61 insertions(+), 64 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index f9282cf..cbc9e5e 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -2,67 +2,54 @@ font-family: 'Lato-Thin'; src: url(../fonts/Lato-Thin.ttf); } - @font-face { font-family: 'Lato-Regular'; src: url(../fonts/Lato-Regular.ttf); } - @font-face { font-family: 'Lato-LightItalic'; src: url(../fonts/Lato-LightItalic.ttf); } - @font-face { font-family: 'Lato-Light'; src: url(../fonts/Lato-Light.ttf); } - @font-face { font-family: 'Montserrat-Light'; src: url(../fonts/Montserrat-Light.otf); } - @font-face { font-family: 'Montserrat-Hairline'; src: url(../fonts/Montserrat-Hairline.otf); } - @font-face { font-family: 'Montserrat-Regular'; src: url(../fonts/Montserrat-Regular.otf); } - @font-face { font-family: 'Montserrat-SemiBold'; src: url(../fonts/Montserrat-SemiBold.otf); } - @font-face { font-family: 'Montserrat-UltraLight'; src: url(../fonts/Montserrat-UltraLight.otf); } - @font-face { font-family: 'OpenSans-Light'; src: url(../fonts/OpenSans-Light.ttf); } - @font-face { font-family: 'OpenSans-Regular'; src: url(../fonts/OpenSans-Regular.ttf); } - @font-face { font-family: 'Georgia-Regular'; src: url(../fonts/georgia.ttf); } - @font-face { font-family: 'FabfeltScript'; src: url(../fonts/FabfeltScript-Bold.otf); } - /* line 56, ../sass/_typography.scss */ body { -webkit-font-smoothing: antialiased; @@ -1636,34 +1623,40 @@ body { color: #1f62ae; transition: 1s; } +/* line 232, ../sass/_event.scss */ +.comment-section .actions .author { + color: #303030; + font-weight: 700; + margin: 0; +} -/* line 236, ../sass/_event.scss */ +/* line 241, ../sass/_event.scss */ .event-sidebar .owl-carousel { background: none; margin: 0; } -/* line 241, ../sass/_event.scss */ +/* line 246, ../sass/_event.scss */ .event-sidebar .participants img { border-radius: 5px; } -/* line 245, ../sass/_event.scss */ +/* line 250, ../sass/_event.scss */ .event-sidebar .author { display: block; margin-left: 4em; line-height: 50%; margin-top: 1em; } -/* line 250, ../sass/_event.scss */ +/* line 255, ../sass/_event.scss */ .event-sidebar .author a { color: #303030; font-weight: 700; font-size: 1.2em; } -/* line 256, ../sass/_event.scss */ +/* line 261, ../sass/_event.scss */ .event-sidebar .about-author { margin: 3em 0; } -/* line 258, ../sass/_event.scss */ +/* line 263, ../sass/_event.scss */ .event-sidebar .about-author p { font-style: italic; color: #666666; @@ -1671,16 +1664,16 @@ body { line-height: 150%; text-align: justify; } -/* line 267, ../sass/_event.scss */ +/* line 272, ../sass/_event.scss */ .event-sidebar .form .form-control { border: #888888 solid 1px; border-radius: 2px; } -/* line 270, ../sass/_event.scss */ +/* line 275, ../sass/_event.scss */ .event-sidebar .form .form-control:focus { box-shadow: none; } -/* line 274, ../sass/_event.scss */ +/* line 279, ../sass/_event.scss */ .event-sidebar .form .subscribe-btn { color: #fff; background: #ed145b; @@ -1691,7 +1684,7 @@ body { .gradient1 { background: #556270; /* fallback for old browsers */ - background: -webkit-linear-gradient(to left, #556270, #ff6b6b); + background: -webkit-linear-gradient(to left, #556270, #FF6B6B); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #556270, #ff6b6b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ @@ -1701,7 +1694,7 @@ body { .reef { background: #50C9C3; /* fallback for old browsers */ - background: -webkit-linear-gradient(to left, #50c9c3, #96deda); + background: -webkit-linear-gradient(to left, #50C9C3, #96DEDA); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #50c9c3, #96deda); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ diff --git a/assets/js/message.js b/assets/js/message.js index 79d1736..3e8099b 100644 --- a/assets/js/message.js +++ b/assets/js/message.js @@ -27,7 +27,7 @@ $(function () { $.post(url, form).done(function (response) { parent.find('.reply-list').append(response); - location.reload(); + // location.reload(); $('.form-reply').trigger("reset"); data = {}; }); diff --git a/events/api.py b/events/api.py index a7bc663..aca71e6 100644 --- a/events/api.py +++ b/events/api.py @@ -122,6 +122,7 @@ class EventCommentReplyAPI(LoginRequiredMixin, ViewSet): """API endpoint for the list of replies for a specific comment """ serializer_class = EventCommentSerializer + renderer_classes = (TemplateHTMLRenderer, JSONRenderer) def list(self, *args, **kwargs): event_id = kwargs.get('event_id') @@ -142,8 +143,13 @@ def create_reply(self, request, **kwargs): user=self.request.user.id, parent=comment_id)) if serializer.is_valid(): - serializer.save() - return Response(serializer.data, status=201) + saved_data = serializer.save() + + # build comment dict to be used on the comment template + result_reply = { + 'reply': saved_data, + } + return Response(result_reply, status=201, template_name='events/reply.html') return Response(serializer.errors, status=400) def get_reply(self, request, **kwargs): diff --git a/templates/events/detail.html b/templates/events/detail.html index af83aa8..2b7c944 100644 --- a/templates/events/detail.html +++ b/templates/events/detail.html @@ -66,6 +66,26 @@

+ {% for reply in comment.replies.all %} + +
+ + + +
+ + {{ reply.user.get_full_name }} +
+ {{ reply.comment_date | timesince }} +
+
+

+ {{ reply.comment }} +

+
+
+
+ {% endfor %}
Reply 1 Favorite @@ -82,26 +102,7 @@
- {% for reply in comment.replies.all %} - -
- - - -
- - {{ reply.user.get_full_name }} -
- {{ reply.comment_date | timesince }} -
-
-

- {{ reply.comment }} -

-
-
-
- {% endfor %} + diff --git a/templates/events/reply.html b/templates/events/reply.html index a9dae88..25afdcf 100644 --- a/templates/events/reply.html +++ b/templates/events/reply.html @@ -1,23 +1,20 @@ {% load staticfiles profile %} -
-
- - - -
- - {{ message.user.get_full_name }} -
- {{ message.message_date | timesince }} -
-
-

- {{ message.message }} -

-
- +
+ + + +
+ + {{ reply.user.get_full_name }} +
+ {{ reply.comment_date | timesince }} +
+
+

+ {{ reply.comment }} +

From a7170c2ad6c6ca79297f54c737961150c2bf499e Mon Sep 17 00:00:00 2001 From: Kevin Paul Kalis Date: Thu, 10 Nov 2016 13:15:38 +0800 Subject: [PATCH 4/4] Remove commented code --- assets/js/message.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/message.js b/assets/js/message.js index 3e8099b..927d144 100644 --- a/assets/js/message.js +++ b/assets/js/message.js @@ -27,7 +27,6 @@ $(function () { $.post(url, form).done(function (response) { parent.find('.reply-list').append(response); - // location.reload(); $('.form-reply').trigger("reset"); data = {}; });