userhandler/templates/user_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 {% extends "base.html" %}
  17 {% load get %}
  18 {% load date_tag %}
  19 {% load staticfiles %}
  20
  21
  22 {% block head_block %}
  23     {{ block.super }}
  24     <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
  25     <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
  26 {% endblock %}
  27 {% block title_header_big %}
  28     {{ block.super }}
  29 {% endblock %}
  30 {% block left_sidebar %}
  31     {% include 'osm/osm_project_left_sidebar.html' %}
  32 {% endblock %}
  33
  34
  35 {% block breadcrumb_body %}
  36     {{ block.super }}
  37     <li><a href="#">Users</a></li>
  38 {% endblock %}
  39
  40 {% block content_body %}
  41     {{ block.super }}
  42     {% include 'modal/user_details.html' %}
  43     {% include 'modal/user_create.html' %}
  44     {% include 'modal/user_credentials_edit.html' %}
  45     {% include 'modal/user_proj_role_edit.html' %}
  46
  47
  48     {% csrf_token %}
  49     <div class="row">
  50         <div class="col-md-12">
  51
  52             <div class="box">
  53                 <div class="box-header with-border">
  54                     <h3 class="box-title">Users</h3>
  55                     <div class="box-tools">
  56                         <button type="button" class="btn btn-default" data-container="body"
  57                                 onclick="javascript:openModalCreateUser({'projects_list_url': '{% url "projects:projects_list" %}'})"
  58                                 data-toggle="tooltip" data-placement="top" title="New User">
  59
  60                             <i class="fa fa-plus"></i> Create User
  61                         </button>
  62
  63                     </div>
  64                 </div>
  65                 <div class="box-body">
  66                     <table id="users_table" class="table table-bordered table-striped">
  67                         <thead>
  68                         <tr>
  69                             <th>Name</th>
  70                             <th>Identifier</th>
  71                             <th>Modified</th>
  72                             <th>Created</th>
  73                             <th>Actions</th>
  74                         </tr>
  75                         </thead>
  76                         <tbody>
  77                         </tbody>
  78                     </table>
  79                 </div>
  80             </div>
  81         </div>
  82
  83     </div>
  84 {% endblock %}
  85
  86 {% block resource_block %}
  87     {{ block.super }}
  88     <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
  89     <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  90     <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  91     <script src="/static/src/userhandler/user_list.js"></script>
  92     <script>
  93         var table;
  94         $(document).ready(function () {
  95             table = $('#users_table').DataTable({
  96                 responsive: true,
  97                 "ajax": {
  98                     "url": "/admin/users/list",
  99                     "dataSrc": function (json) {
 100                         return json['users'];
 101                     },
 102                     statusCode: {
 103                         401: function () {
 104                             console.log("no auth");
 105                             moveToLogin(window.location.pathname);
 106                         }
 107                     },
 108                     "error": function (hxr, error, thrown) {
 109                         console.log(hxr)
 110                         console.log(thrown)
 111                         console.log(error);
 112                     }
 113
 114                 },
 115                 "columns": [
 116                     {
 117                         "render": function (data, type, row) {
 118                             return row["username"];
 119                         },
 120                         "targets": 0
 121                     },
 122                     {
 123                         "render": function (data, type, row) {
 124
 125                             return row['_id'];
 126                         },
 127                         "targets": 1
 128                     },
 129                     {
 130                         "render": function (data, type, row) {
 131                             return moment.unix(row["_admin"]['modified']).format('YYYY-MM-DD hh:mm:ss a');
 132                         },
 133                         "targets": 2
 134                     },
 135                     {
 136                         "render": function (data, type, row) {
 137                             return moment.unix(row["_admin"]['created']).format('YYYY-MM-DD hh:mm:ss a');
 138                         },
 139                         "targets": 3
 140                     },
 141                     {
 142                         "render": function (data, type, row) {
 143                             return '<div class="btn-group">' +
 144                                 '<button type="button" class="btn btn-default dropdown-toggle"' +
 145                                 'data-toggle="dropdown" aria-expanded="false">Actions ' +
 146                                 '<span class="fa fa-caret-down"></span></button> ' +
 147                                 '<ul class="dropdown-menu">' +
 148                                 '<li> <a href="#" onclick="javascript:openModalEditUserCredentials({user_id:\'' + row['_id'] + '\', usernarme:\'' + row['username'] + '\'})">' +
 149                                 '<i class="fa fa-lock"></i>Edit Credentials</a></li>' +
 150                                 '<li> <a href="#" onclick="javascript:openModalEditUserRoleMap(\''+row['_id']+'\')">' +
 151                                 '<i class="fa fa-user-tag"></i>Projects-Roles</a></li>' +
 152                                 '<li> <a href="#" onclick="javascript:deleteUser(\'' + row['_id'] + '\', \'' + row['username'] + '\')"' +
 153                                 'style="color:red"><i class="fa fa-trash"></i> Delete</a></li> </ul></div>';
 154                         },
 155                         "targets": 4,
 156                         "orderable": false
 157                     }
 158                 ]
 159             });
 160             /*
 161             var select2_groups = $('#projects_edit').select2({
 162                 placeholder: 'Select Projects',
 163                 width: '100%',
 164                 ajax: {
 165                     url: '/projects/list',
 166                     dataType: 'json',
 167                     processResults: function (data) {
 168                         projects = [];
 169                         if (data['projects']) {
 170                             for (d in data['projects']) {
 171                                 var project = data['projects'][d];
 172                                 projects.push({
 173                                     "id": project['_id'],
 174                                     "text": project['name']
 175                                 });
 176
 177                             }
 178                         }
 179
 180                         return {
 181                             results: projects
 182                         };
 183                     }
 184                 }
 185             });*/
 186             /*
 187             var select2_single = $('#default_project_edit').select2({
 188                 placeholder: 'Select Default Project',
 189                 width: '100%',
 190                 ajax: {
 191                     url: '/projects/list',
 192                     dataType: 'json',
 193                     processResults: function (data) {
 194                         projects = [];
 195                         if (data['projects']) {
 196                             for (d in data['projects']) {
 197                                 var project = data['projects'][d];
 198                                 projects.push({
 199                                     id: project['_id'],
 200                                     text: project['name']
 201                                 });
 202                             }
 203                         }
 204
 205                         return {
 206                             results: projects
 207                         };
 208                     }
 209                 }
 210             });*/
 211
 212             setInterval(function () {
 213                 table.ajax.reload();
 214             }, 10000);
 215
 216             $("#formCreateUser").submit(function (event) {
 217                 event.preventDefault(); //prevent default action
 218                 var post_url = $(this).attr("action"); //get form action url
 219                 var request_method = $(this).attr("method");
 220                 var form_data = new FormData(this); //Encode form elements for submission
 221
 222                 $.ajax({
 223                     url: post_url,
 224                     type: request_method,
 225                     data: form_data,
 226                     headers: {
 227                         "Accept": 'application/json'
 228                     },
 229                     contentType: false,
 230                     processData: false
 231                 }).done(function (response, textStatus, jqXHR) {
 232                     $('#modal_new_user').modal('hide');
 233                     table.ajax.reload();
 234                     bootbox.alert({
 235                         title: "Result",
 236                         message: "User successfully created."
 237                     });
 238
 239                 }).fail(function (result) {
 240                     var data = result.responseJSON;
 241                     var title = "Error " + (data.code ? data.code : 'unknown');
 242                     var message = data.detail ? data.detail : 'No detail available.';
 243                     bootbox.alert({
 244                         title: title,
 245                         message: message
 246                     });
 247                 });
 248             });
 249
 250             $("#formEditUser").submit(function (event) {
 251                 event.preventDefault(); //prevent default action
 252                 var post_url = $(this).attr("action"); //get form action url
 253                 var request_method = $(this).attr("method");
 254                 var form_data = new FormData(this); //Encode form elements for submission
 255
 256                 $.ajax({
 257                     url: post_url,
 258                     type: request_method,
 259                     data: form_data,
 260                     headers: {
 261                         "Accept": 'application/json'
 262                     },
 263                     contentType: false,
 264                     processData: false
 265                 }).done(function (response, textStatus, jqXHR) {
 266                     $('#modal_edit_user_credentials').modal('hide');
 267                     table.ajax.reload();
 268                     bootbox.alert({
 269                         title: "Result",
 270                         message: "User successfully modified."
 271                     });
 272
 273                 }).fail(function (result) {
 274                     var data = result.responseJSON;
 275                     var title = "Error " + (data.code ? data.code : 'unknown');
 276                     var message = data.detail ? data.detail : 'No detail available.';
 277                     bootbox.alert({
 278                         title: title,
 279                         message: message
 280                     });
 281                 });
 282             });
 283
 284             $("#password2").keyup(validatePswOnCreate);
 285             $("#edit_password2").keyup(validatePswOnEdit);
 286
 287             $(document).on('click', '.proj-role-map-group-head .btn-add', addMapGroup);
 288             $(document).on('click', '.proj-role-map-group .btn-remove', removeMapGroup);
 289         });
 290     </script>
 291
 292
 293 {% endblock %}
 294
 295 {% block footer %}
 296     {% include "footer.html"  %}
 297 {% endblock %}