MOD: 统一实体的点赞和评论数据获取和展示

static/scripts.js

@@ -1,28 +1,33 @@
-var showStatusDetail = function (e) {
-    var item = $(e.target).closest(".status-item");
+var showComments = function (e, id) {
+    var item = $(e.target).closest("div");
     if (item.data('details')) {
         return;
     }
-    $.get('/status/' + item.attr('id').split('-')[1], function (res) {
-        var likes_html = $("<div>").addClass("status-like");
+    $.get('/comments/' + id, function (res) {
+        var likes_html = $("<div>").addClass("item-like");
         $.each(res.likes, function(idx, like) {
             if (idx > 0) {
                 likes_html.append($("<span>").text("，"));
             }
             likes_html.append($("<a>").attr('href', 'http://www.renren.com/profile.do?id=' + like.uid).attr('target', '_blank').text(res.users[like.uid].name));
         });
-        likes_html.append($("<span>").text(" " + (res.status.like > 8 ? '等 ' : '') + res.status.like + " 人点赞。" + res.status.comment + " 条评论"));
+        likes_html.append($("<span>").text(" " + (res.likes.length > 8 ? '等 ' : '') + res.likes.length + " 人点赞。" + res.comments.length + " 条评论"));
 
         var popup_html = $("<div>").append(likes_html);
-        if (res.status.comment > 0) {
-            var comments_html = $("<div>").addClass("ui feed status-comment");
+        if (res.comments.length > 0) {
+            var comments_html = $("<div>").addClass("ui feed item-comment");
             $.each(res.comments, function(idx, comment) {
+                var label = $("<div>").addClass("label");
+                var head_img = $("<img>").attr("src", res.users[comment.authorId].headPic);
+                $("<a>").attr('href', 'http://www.renren.com/profile.do?id=' + comment.authorId).attr('target', '_blank').append(head_img).appendTo(label);
+
                 var content = $("<div>").addClass("content");
                 var summary = $("<div>").addClass("summary").appendTo(content);
                 $("<a>").attr('href', 'http://www.renren.com/profile.do?id=' + comment.authorId).attr('target', '_blank').text(comment.authorName).appendTo(summary);
                 $("<div>").addClass("date").text(moment(comment.t).format("YYYY-MM-DD hh:mm:ss")).appendTo(summary);
                 $("<div>").addClass("extra text").html(comment.content).appendTo(content);
-                $("<div>").addClass("event").append(content).appendTo(comments_html)
+
+                $("<div>").addClass("event").append(label).append(content).appendTo(comments_html)
             });
 
             popup_html.append($("<div>").addClass("ui divider")).append(comments_html);

static/styles.css

@@ -17,17 +17,20 @@
 
 .status-info {
     margin-top: 1em;
+}
+
+.entry-info {
     text-align: right;
 }
-.status-info:hover {
+.entry-info:hover {
     cursor: pointer;
 }
 
 .status-stat {
     margin-left: 4em;
 }
 
-.status-comment {
+.item-comment {
     max-height: 400px;
     overflow-y: auto;
 }
@@ -48,11 +51,15 @@
     margin-left: auto;
     margin-right: auto;
 }
-
 .ui.feed.gossip-list > .event {
     padding: .5em 0;
+}
+
+.ui.feed.gossip-list > .event,
+.ui.feed.item-comment > .event {
     border-bottom: 1px solid #f2f2f2;
 }
+.ui.feed.item-comment > .event:last-child,
 .ui.feed.gossip-list > .event:last-child {
     border-bottom: none;
 }

templates/album.html

@@ -14,7 +14,7 @@ <h2 class="ui dividing header">
         <a class="image" href="{{ url_for('photo_detail_page', photo_id=p.id) }}">
             <img class="photo-snapshot" src="{{ p.src }}">
         </a>
-        <div class="content">
+        <div class="content entry-info" onclick="showComments(event, {{ p.id }})">
             {{ p.like }} 赞 / {{ p.share }} 分享 / {{ p.comment }} 评论 / {{ p.view }} 浏览
         </div>
     </div>

templates/album_list.html

@@ -16,7 +16,7 @@
             <div class="image">
                 <img class="album-cover" src="{{ a.cover }}">
             </div>
-            <div class="content">
+            <div class="content entry-info" onclick="showComments(event, {{ a.id }})">
                 {{ a.like }} 赞 / {{ a.share }} 分享 / {{ a.comment }} 评论
             </div>
         </div>

templates/status_list.html

@@ -10,7 +10,7 @@
             {{ s.rootUname }}: {{ s.rootContent|safe }}
         </div>
         {% endif %}
-        <div class="status-info" onclick="showStatusDetail(event)">
+        <div class="status-info entry-info" onclick="showComments(event, {{ s.id }})">
             <span class="status-time">{{ s.t.strftime("%Y-%m-%d %H:%M:%S") }}</span>
             <span class="status-stat">
                 {{ s.like }} 赞 / {{ s.repeat }} 分享 / {{ s.comment }} 评论

web.py

@@ -19,6 +19,15 @@ def index_page():
     return render_template("index.html")
 
 
+@app.route('/comments/<int:entry_id>')
+def entry_comments_api(entry_id=0):
+    comments = list(Comment.select().where(Comment.entry_id==entry_id).order_by(Comment.t).dicts())
+    likes = list(Like.select().where(Like.entry_id==entry_id).dicts())
+    uids = list(set([c['authorId'] for c in comments] + [l['uid'] for l in likes]))
+    users = dict([(u['uid'], {'name': u['name'], 'headPic': u['headPic']}) for u in User.select().where(User.uid.in_(uids)).dicts()])
+    return jsonify(comments=comments, likes=likes, users=users)
+
+
 @app.route('/status')
 def status_entry_page():
     return redirect(url_for('status_list_page', page=1))
@@ -34,18 +43,6 @@ def status_list_page(page=0):
     return render_template("status_list.html", page=page, total_page=total_page, status_list=status_list)
 
 
-@app.route('/status/<int:status_id>')
-def status_detail_page(status_id=0):
-    status = Status.get(Status.id==status_id)
-    if not status:
-        abort(404)
-    comments = list(Comment.select().where(Comment.entry_id==status_id).order_by(Comment.t).dicts())
-    likes = list(Like.select().where(Like.entry_id==status_id).dicts())
-    uids = list(set([c['authorId'] for c in comments] + [l['uid'] for l in likes]))
-    users = dict([(u['uid'], {'name': u['name'], 'headPic': u['headPic']}) for u in User.select().where(User.uid.in_(uids)).dicts()])
-    return jsonify(status=model_to_dict(status), comments=comments, likes=likes, users=users)
-
-
 @app.route('/note')
 def note_entry_page():
     return redirect(url_for('note_list_page', page=1))