Add edit comment feature

This is handled in javascript. When clicking the edit link:

1. a form is shown to edit the RST source of the comment.
2. on submit, an AJAX POST request is sent to the new "comment" endpoint in the
   flask app.
3. the endpoint compiles the RST source, update the comment in the database and
   sends back formatted content to the client.
4. the client then updates the comment content and hides the form.

4 files changed, 66 insertions, 4 deletions

diff --git a/famille.py b/famille.py
index c1cedd3..d958bcb 100644
--- a/famille.py
+++ b/famille.py
@@ -2,7 +2,7 @@
 import sqlite3
 #all the imports
 from flask import Flask, request, session, g, redirect,\
-    url_for, render_template, flash
+    url_for, render_template, flash, jsonify
 from functools import wraps
 import hashlib
 from pytz import timezone
@@ -203,6 +203,22 @@ def show_news(news_id):
         return redirect(url_for('show_news', news_id=news_id))
 
 
+@app.route('/comment/<int:comment_id>', methods=['POST'])
+@login_required
+def update_comment(comment_id):
+    comment = query_db("SELECT * FROM comments WHERE comments.id = ?",
+                       (comment_id,), True)
+    if comment["user_id"] == session["user_id"]:
+        content = request.form['content']
+        content_cache = rstify(content)
+        db = get_db()
+        db.execute("UPDATE comments set content=?, content_cache=? "
+                   "WHERE comments.id=?",
+                   (content, content_cache, comment_id))
+        db.commit()
+        return jsonify(content=content, content_cache=content_cache)
+
+
 @app.route('/news/<int:news_id>/edit', methods=['GET', 'POST'])
 @login_required
 def edit_news(news_id):
diff --git a/static/famille.js b/static/famille.js
index b460392..3bb9e51 100644
--- a/static/famille.js
+++ b/static/famille.js
@@ -24,5 +24,23 @@ $(document).ready(function(){
     });
     $('span.timeago').timeago();
     var addr = $(location).attr('pathname');
-    $("#"+addr.replace(/\//g,"")).addClass("active")
+    $("#"+addr.replace(/\//g,"")).addClass("active");
+
+    $(".edit").click(function(e){
+        e.preventDefault();
+        $(this).parents(".media-heading").siblings(".comment-content").hide();
+        $(this).parents(".media-heading").siblings(".comment-source").show();
+    });
+
+    $(".comment-source").submit(function(e){
+        e.preventDefault();
+        var comment_id = $(this).data("id");
+        var form = $(this);
+        $.post("/comment/" + comment_id, {content: form.find("textarea").val()}, function(data) {
+            var comment_content = form.parents(".media-body").find(".comment-content");
+            comment_content.html(data.content_cache);
+            comment_content.show();
+            form.hide();
+        });
+    });
 });
diff --git a/static/main.css b/static/main.css
index 5ae7b30..88598a7 100644
--- a/static/main.css
+++ b/static/main.css
@@ -13,6 +13,19 @@
     font-size: 14px;
 }
 
+.media-body .edit {
+    display: none;
+    margin-right: 1em;
+}
+
+.media-body:hover .edit {
+    display: initial;
+}
+
+.comment-source {
+    display: none;
+}
+
 article > header {
     margin-bottom: 2em;
 }
@@ -44,4 +57,4 @@ p.kadoscope{
 
 .media-left img{
     width: 64px;
-}
\ No newline at end of file
+}
diff --git a/templates/news/show.html b/templates/news/show.html
index 3bdaa9b..8667f5d 100644
--- a/templates/news/show.html
+++ b/templates/news/show.html
@@ -21,9 +21,24 @@
                   'gfx/'+comment.user_name+'.jpg') }}" alt="{{comment.user_name}}" class="img-circle">
       </div>
       <div class="media-body" style="width:100%">
-        <h4 class="media-heading"><p class="pull-right date">{{comment.date|format_date}}</p>
+        <h4 class="media-heading"><p class="pull-right date">
+            {% if news.user_name==session.user_name %}
+            <a class="edit" href="#">Modifier</a>
+            {% endif %}
+            {{comment.date|format_date}}
+            </p>
         <a href="{{url_for('view_user', user_id=comment.user_id)}}">{{comment.user_name}}</a></h4>
+        <div class="comment-content">
         {{comment.content_cache|safe}}
+        </div>
+        {% if news.user_name==session.user_name %}
+        <form class="comment-source" data-id="{{comment.id}}">
+            <div class="form-group">
+                <textarea name="content" class="form-control" rows="3">{{comment.content}}</textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">Modifier</button>
+        </form>
+        {% endif %}
       </div>
     </div>
     {% endfor %}