automatic reload on lists; new django decorator for ajax request

[osm/LW-UI.git] / userhandler / templates / user_list.html

diff --git a/userhandler/templates/user_list.html b/userhandler/templates/user_list.html
index 03ae70f..621df92 100644 (file)
--- a/userhandler/templates/user_list.html
+++ b/userhandler/templates/user_list.html
@@ -7,6 +7,7 @@
 {% block head_block %}
     {{ block.super }}
     <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
+    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 {% endblock %}
 {% block title_header_big %}
     {{ block.super }}
@@ -55,26 +56,7 @@
                         </tr>
                         </thead>
                         <tbody>
-                        {% for s in users %}
-                            <tr>
-
-                                <td>{{ s|get:"username" }}</td>
-                                <td>{{ s|get:"projects" }}</td>
-                                <td>{{ s|get:"_id" }}</td>
-                                <td>{{ s|get_sub:"_admin,modified"|get_date}}</td>
-                                <td>{{ s|get_sub:"_admin,created"|get_date}}</td>
-
-                                <td>
-                                    <div class="btn-group">
-
-                                        <button type="button" class="btn btn-default"
-                                                onclick="javascript:deleteUser('{% url "users:delete" user_id=s|get:"_id"  %}')" data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i
-                                                class="far fa-trash-alt" ></i></button>
-                                    </div>
-                                </td>
-
-                            </tr>
-                        {% endfor %}
+
                         </tbody>
                     </table>
                 </div>
@@ -86,9 +68,83 @@
 
 {% block resource_block %}
     {{ block.super }}
-    <!-- moment JS -->
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
     <script src="/static/bower_components/select2/dist/js/select2.js"></script>
     <script src="/static/src/userhandler/user_list.js"></script>
+    <script>
+    $(document).ready( function () {
+        var table = $('#users_table').DataTable({
+            responsive: true,
+            "ajax": {
+                "url": "/admin/users/list",
+                "dataSrc": function (json) {
+                    return json['users'];
+                },
+                statusCode: {
+                    401: function () {
+                        console.log("no auth");
+                        moveToLogin(window.location.pathname);
+                    }
+                },
+                "error": function (hxr, error, thrown) {
+                    console.log(hxr)
+                    console.log(thrown)
+                    console.log(error);
+                }
+
+            },
+            "columns": [
+                {
+                    "render": function (data, type, row) {
+                        return row["username"];
+                    },
+                    "targets": 0
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row['projects'];
+                    },
+                    "targets": 1
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row['_id'];
+                    },
+                    "targets": 2
+                },
+                {
+                    "render": function (data, type, row) {
+                        return moment.unix(row["_admin"]['modified']).format('YYYY-MM-DD hh:mm:ss a');
+                    },
+                    "targets": 3
+                },
+                {
+                    "render": function (data, type, row) {
+                        return moment.unix(row["_admin"]['created']).format('YYYY-MM-DD hh:mm:ss a');;
+                    },
+                    "targets": 4
+                },
+                {
+                    "render": function (data, type, row) {
+                        return '<div class="btn-group">' +
+                            '<button type="button" class="btn btn-default dropdown-toggle"' +
+                            'data-toggle="dropdown" aria-expanded="false">Actions ' +
+                            '<span class="fa fa-caret-down"></span></button> ' +
+                            '<ul class="dropdown-menu">' +
+                            '<li> <a href="#" onclick="javascript:deleteUser(\'' + row['_id'] + '\', \''+row['username']+'\')"' +
+                        'style="color:red"><i class="fa fa-trash"></i> Delete</a></li> </ul></div>';
+                    },
+                    "targets": 5
+                }
+            ]
+        });
+
+        setInterval(function () {
+                table.ajax.reload();
+            }, 10000);
+    });
+    </script>
 
 
 {% endblock %}