diff options
| -rw-r--r-- | pyaggr3g470r/templates/home.html | 50 | ||||
| -rw-r--r-- | pyaggr3g470r/templates/layout.html | 4 |
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> |