aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--pyaggr3g470r/templates/home.html50
-rw-r--r--pyaggr3g470r/templates/layout.html4
2 files changed, 49 insertions, 5 deletions
diff --git a/pyaggr3g470r/templates/home.html b/pyaggr3g470r/templates/home.html
index 1290038d..2c9460df 100644
--- a/pyaggr3g470r/templates/home.html
+++ b/pyaggr3g470r/templates/home.html
@@ -99,11 +99,11 @@
<td class="date">{{ article.date|datetime }}</a></td>
<td>
<a href="/delete/{{ article.id }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this article') }}"></i></a>
- <a href="/like/{{ article.id }}">
+ <a href="#">
{% if article.like %}
- <i class="glyphicon glyphicon-star" title="{{ _('One of your favorites') }}"></i>
+ <i class="glyphicon glyphicon-star like" title="{{ _('One of your favorites') }}"></i>
{% else %}
- <i class="glyphicon glyphicon-star-empty" title="{{ _('Click if you like this article') }}"></i>
+ <i class="glyphicon glyphicon-star-empty like" title="{{ _('Click if you like this article') }}"></i>
{% endif %}
</a>
{% if article.readed %}
@@ -132,4 +132,48 @@
{% endif %}
</div><!-- /.container -->
{% endif %}
+
+<script type="text/javascript" class="source">
+
+$(document).ready(function() {
+
+ // Like or unlike an article
+ $('.like').on('click', function() {
+ var article_id = $(this).parent().parent().parent().attr("data-article");
+
+ var data;
+ if ($(this).hasClass("glyphicon-star")) {
+ data = JSON.stringify({
+ like: false
+ })
+ $(this).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
+ }
+ else {
+ data = JSON.stringify({
+ like: true
+ })
+ $(this).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
+ }
+
+ // sends the updates to the server
+ $.ajax({
+ type: 'PUT',
+ // Provide correct Content-Type, so that Flask will know how to process it.
+ contentType: 'application/json',
+ // Encode your data as JSON.
+ data: data,
+ // This is the type of data you're expecting back from the server.
+ url: "/api/v1.0/articles/"+article_id,
+ success: function (result) {
+ //console.log(result);
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown){
+ console.log(XMLHttpRequest.responseText);
+ }
+ }); // ajax closed
+ });
+
+})
+
+</script>
{% endblock %}
diff --git a/pyaggr3g470r/templates/layout.html b/pyaggr3g470r/templates/layout.html
index e97128f7..10b802a2 100644
--- a/pyaggr3g470r/templates/layout.html
+++ b/pyaggr3g470r/templates/layout.html
@@ -10,6 +10,8 @@ deployed on Heroku or on a traditional server." />
<title>{% if head_title %}{{ head_title }} - {% endif %}pyAggr3g470r</title>
+ <script src="{{ url_for('.static', filename = 'js/jquery.js') }}"></script>
+
<link rel="shortcut icon" href="{{ url_for('.static', filename='img/favicon.png') }}" />
<!-- Bootstrap core CSS -->
@@ -162,8 +164,6 @@ deployed on Heroku or on a traditional server." />
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
- <!-- Make sure to add jQuery - download the most recent version at http://jquery.com/ -->
- <script src="{{ url_for('.static', filename = 'js/jquery.js') }}"></script>
<script src="{{ url_for('.static', filename = 'js/bootstrap.js') }}"></script>
</body>
</html>
bgstack15