awesome-python3-webapp/www/templates/manage_comments.html at dev · python-test-code/awesome-python3-webapp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
{% extends '__base__.html' %}

{% block title %}评论{% endblock %}

{% block beforehead %}

<script>

function initVM(data) {
    $('#vm').show();
    var vm = new Vue({
        el: '#vm',
        data: {
            comments: data.comments,
            page: data.page
        },
        methods: {
            delete_comment: function (comment) {
                var content = comment.content.length > 20 ? comment.content.substring(0, 20) + '...' : comment.content;
                if (confirm('确认要删除评论“' + comment.content + '”？删除后不可恢复！')) {
                    postJSON('/api/comments/' + comment.id + '/delete', function (err, r) {
                        if (err) {
                            return error(err);
                        }
                        refresh();
                    });
                }
            }
        }
    });
}

$(function() {
    getJSON('/api/comments', {
        page: {{ page_index }}
    }, function (err, results) {
        if (err) {
            return fatal(err);
        }
        $('#loading').hide();
        initVM(results);
    });
});

</script>

{% endblock %}

{% block content %}

    <div class="uk-width-1-1 uk-margin-bottom">
        <div class="uk-panel uk-panel-box">
            <ul class="uk-breadcrumb">
                <li class="uk-active"><span>评论</span></li>
                <li><a href="/manage/blogs">日志</a></li>
                <li><a href="/manage/users">用户</a></li>
            </ul>
        </div>
    </div>

    <div id="error" class="uk-width-1-1">
    </div>

    <div id="loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    </div>

    <div id="vm" class="uk-width-1-1" style="display:none">
        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th class="uk-width-2-10">作者</th>
                    <th class="uk-width-5-10">内容</th>
                    <th class="uk-width-2-10">创建时间</th>
                    <th class="uk-width-1-10">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-repeat="comment: comments" >
                    <td>
                        <span v-text="comment.user_name"></span>
                    </td>
                    <td>
                        <span v-text="comment.content"></span>
                    </td>
                    <td>
                        <span v-text="comment.created_at.toDateTime()"></span>
                    </td>
                    <td>
                        <a href="#0" v-on="click: delete_comment(comment)"><i class="uk-icon-trash-o"></i>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-component="pagination" v-with="page"></div>
    </div>
{% endblock %}