rolehandler/templates/role_list.html

   1 <!--
   2 Copyright 2019 EveryUP srl
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an  BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15 -->
  16
  17 {% extends "base.html" %}
  18 {% load get %}
  19 {% load date_tag %}
  20 {% load staticfiles %}
  21
  22
  23 {% block head_block %}
  24     {{ block.super }}
  25     <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
  26     <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
  27 {% endblock %}
  28 {% block title_header_big %}
  29     {{ block.super }}
  30 {% endblock %}
  31 {% block left_sidebar %}
  32     {% include 'osm/osm_project_left_sidebar.html' %}
  33 {% endblock %}
  34
  35
  36 {% block breadcrumb_body %}
  37     {{ block.super }}
  38     <li><a href="#">Roles</a></li>
  39 {% endblock %}
  40
  41 {% block content_body %}
  42     {{ block.super }}
  43     {% include 'modal/role_create.html' %}
  44     {% include 'modal/role_edit.html' %}
  45
  46     {% csrf_token %}
  47     <div class="row">
  48         <div class="col-md-12">
  49
  50             <div class="box">
  51                 <div class="box-header with-border">
  52                     <h3 class="box-title">Roles</h3>
  53                     <div class="box-tools">
  54                         <button type="button" class="btn btn-default" data-container="body"
  55                                 onclick="javascript:openModalCreateRole()"
  56                                 data-toggle="tooltip" data-placement="top" title="New role">
  57
  58                             <i class="fa fa-plus"></i> Create role
  59                         </button>
  60
  61                     </div>
  62                 </div>
  63                 <div class="box-body">
  64                     <table id="roles_table" class="table table-bordered table-striped">
  65                         <thead>
  66                         <tr>
  67                             <th>Name</th>
  68                             <th>Identifier</th>
  69                             <th>Modified</th>
  70                             <th>Created</th>
  71                             <th>Actions</th>
  72                         </tr>
  73                         </thead>
  74                         <tbody>
  75                         </tbody>
  76                     </table>
  77                 </div>
  78             </div>
  79         </div>
  80
  81     </div>
  82 {% endblock %}
  83
  84 {% block resource_block %}
  85     {{ block.super }}
  86     <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
  87     <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  88     <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  89     <script src="/static/src/rolehandler/role_list.js"></script>
  90     <script>
  91         var table;
  92
  93         $(document).ready(function () {
  94             table = $('#roles_table').DataTable({
  95                 responsive: true,
  96                 "ajax": {
  97                     "url": "/admin/roles/list",
  98                     "dataSrc": function (json) {
  99                         return json['roles'];
 100                     },
 101                     statusCode: {
 102                         401: function () {
 103                             console.log("no auth");
 104                             moveToLogin(window.location.pathname);
 105                         }
 106                     },
 107                     "error": function (hxr, error, thrown) {
 108                         console.log(hxr)
 109                         console.log(thrown)
 110                         console.log(error);
 111                     }
 112
 113                 },
 114                 "columns": [
 115                     {
 116                         "render": function (data, type, row) {
 117                             return row["name"];
 118                         },
 119                         "targets": 0
 120                     },
 121
 122                     {
 123                         "render": function (data, type, row) {
 124                             return row['_id'];
 125                         },
 126                         "targets": 1
 127                     },
 128                     {
 129                         "render": function (data, type, row) {
 130                             return moment.unix(row["_admin"]['modified']).format('YYYY-MM-DD hh:mm:ss a');
 131                         },
 132                         "targets": 2
 133                     },
 134                     {
 135                         "render": function (data, type, row) {
 136                             return moment.unix(row["_admin"]['created']).format('YYYY-MM-DD hh:mm:ss a');
 137                         },
 138                         "targets": 3
 139                     },
 140                     {
 141                         "render": function (data, type, row) {
 142                             return '<div class="btn-group">' +
 143                                 '<button type="button" class="btn btn-default dropdown-toggle"' +
 144                                 'data-toggle="dropdown" aria-expanded="false">Actions ' +
 145                                 '<span class="fa fa-caret-down"></span></button> ' +
 146                                 '<ul class="dropdown-menu">' +
 147                                 '<li> <a href="#" onclick="javascript:openModalEditRole({role_id:\'' + row['_id'] + '\'})">' +
 148                                 '<i class="fa fa-edit"></i> Edit</a></li>' +
 149                                 '<li> <a href="#" onclick="javascript:deleteRole(\'' + row['_id'] + '\', \'' + row['name'] + '\')"' +
 150                                 'style="color:red"><i class="fa fa-trash"></i> Delete</a></li> </ul></div>';
 151                         },
 152                         "targets": 4,
 153                         "orderable": false
 154                     }
 155                 ]
 156             });
 157
 158             setInterval(function () {
 159                 table.ajax.reload();
 160             }, 10000);
 161
 162             $("#formCreateRole").submit(function (event) {
 163                 event.preventDefault(); //prevent default action
 164                 var post_url = $(this).attr("action"); //get form action url
 165                 var request_method = $(this).attr("method");
 166                 var form_data = new FormData(this); //Encode form elements for submission
 167
 168                 $.ajax({
 169                     url: post_url,
 170                     type: request_method,
 171                     data: form_data,
 172                     headers: {
 173                         "Accept": 'application/json'
 174                     },
 175                     contentType: false,
 176                     processData: false
 177                 }).done(function (response, textStatus, jqXHR) {
 178                     $('#modal_new_role').modal('hide');
 179                     table.ajax.reload();
 180                     bootbox.alert({
 181                         title: "Result",
 182                         message: "role successfully created."
 183                     });
 184
 185                 }).fail(function (result) {
 186                     var data = result.responseJSON;
 187                     var title = "Error " + (data.code ? data.code : 'unknown');
 188                     var message = data.detail ? data.detail : 'No detail available.';
 189                     bootbox.alert({
 190                         title: title,
 191                         message: message
 192                     });
 193                 });
 194             });
 195
 196             $("#formEditRole").submit(function (event) {
 197                 event.preventDefault(); //prevent default action
 198                 var post_url = $(this).attr("action"); //get form action url
 199                 var request_method = $(this).attr("method");
 200                 var form_data = new FormData(this); //Encode form elements for submission
 201
 202                 $.ajax({
 203                     url: post_url,
 204                     type: request_method,
 205                     data: form_data,
 206                     headers: {
 207                         "Accept": 'application/json'
 208                     },
 209                     contentType: false,
 210                     processData: false
 211                 }).done(function (response, textStatus, jqXHR) {
 212                     $('#modal_edit_role').modal('hide');
 213                     table.ajax.reload();
 214                     bootbox.alert({
 215                         title: "Result",
 216                         message: "Role successfully modified."
 217                     });
 218
 219                 }).fail(function (result) {
 220                     var data = result.responseJSON;
 221                     var title = "Error " + (data.code ? data.code : 'unknown');
 222                     var message = data.detail ? data.detail : 'No detail available.';
 223                     bootbox.alert({
 224                         title: title,
 225                         message: message
 226                     });
 227                 });
 228             });
 229
 230         });
 231     </script>
 232
 233
 234 {% endblock %}
 235
 236 {% block footer %}
 237     {% include "footer.html"  %}
 238 {% endblock %}