projecthandler/template/project/projectlist.html

   1 {% extends "base.html" %}
   2 {% load get %}
   3 {% load date_tag %}
   4 {% load staticfiles %}
   5
   6 {% block head_block %}
   7         {{ block.super }}
   8     <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
   9
  10 {% endblock %}
  11 {% block title_header_big %}
  12     {{ block.super }}
  13 {% endblock %}
  14 {% block left_sidebar %}
  15
  16 {% include 'osm/osm_project_left_sidebar.html' %}
  17
  18 {% endblock %}
  19
  20
  21 {% block breadcrumb_body %}
  22         {{ block.super }}
  23       {% if user.is_admin %}
  24       <li><a href="{% url 'projects:projects_list' %}">Projects</a></li>
  25       {% else%}
  26       <li><a href="#">Projects</a></li>
  27       {% endif %}
  28 {% endblock %}
  29
  30 {% block content_body %}
  31         {{ block.super }}
  32  {% csrf_token %}
  33 <div class="row">
  34 <div class="col-md-12">
  35     <div class="box">
  36         <div class="box-header with-border">
  37                   <h3 class="box-title">Projects</h3>
  38             <div class="box-tools">
  39                 <button type="button" class="btn btn-default" data-container="body"
  40                                         data-toggle="tooltip" data-placement="top" title="New Project"
  41                                         onclick="javascript:showModalNewProject()">
  42                                     <i class="fa fa-plus"></i> New Project</button>
  43             </div>
  44         </div>
  45         <div class="box-body">
  46                         <table id="projects_table" class="table table-bordered table-striped">
  47                                 <thead>
  48                                         <tr>
  49                                                 <th>Name</th>
  50                                                 <th>Modification Date</th>
  51                                                 <th>Creation Date</th>
  52                                                 <th>Actions</th>
  53                                         </tr>
  54                                 </thead>
  55                                 <tbody>
  56
  57                                 </tbody>
  58                         </table>
  59                 </div>
  60     </div>
  61 </div>
  62
  63 </div>
  64 {% include "modal/project_new.html" %}
  65 {% include "modal/project_edit.html" %}
  66 {% endblock %}
  67
  68 {% block resource_block %}
  69         {{ block.super }}
  70     <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
  71     <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  72
  73     <script>
  74         var table;
  75     $(document).ready( function () {
  76         table = $('#projects_table').DataTable({
  77             responsive: true,
  78             "ajax": {
  79                 "url": "/projects/list",
  80                 "dataSrc": function (json) {
  81                     return json['projects'];
  82                 },
  83                 statusCode: {
  84                     401: function () {
  85                         console.log("no auth");
  86                         moveToLogin(window.location.pathname);
  87                     }
  88                 },
  89                 "error": function (hxr, error, thrown) {
  90                     console.log(hxr)
  91                     console.log(thrown)
  92                     console.log(error);
  93                 }
  94
  95             },
  96             "columns": [
  97                 {
  98                     "render": function (data, type, row) {
  99                        return '<a href="/projects/'+row['name']+'/switch/" >'+row['name']+'</a>'
 100                     },
 101                     "targets": 0
 102                 },
 103                 {
 104                     "render": function (data, type, row) {
 105                         return moment.unix(row["_admin"]['modified']).format('YYYY-MM-DD hh:mm:ss a');
 106                     },
 107                     "targets": 1
 108                 },
 109                 {
 110                     "render": function (data, type, row) {
 111                         return moment.unix(row["_admin"]['created']).format('YYYY-MM-DD hh:mm:ss a');
 112                     },
 113                     "targets": 2
 114                 },
 115                 {
 116                     "render": function (data, type, row) {
 117                         return '<div class="btn-group">\n' +
 118                             ' <button type="button" class="btn btn-default dropdown-toggle"\n' +
 119                             '         data-toggle="dropdown" aria-expanded="false">Actions\n' +
 120                             '     <span class="fa fa-caret-down"></span></button>\n' +
 121                             ' <ul class="dropdown-menu">\n' +
 122                             '     <li><a href="#"\n' +
 123                             '            onclick="javascript:editProject(\''+ row['name']+'\')">\n' +
 124                             '         <i class="fa fa-edit"></i> Rename</a></li>\n' +
 125                             '     <li>\n' +
 126                             '         <a href="#" onclick="javascript:deleteProject(\''+ row['name']+'\')" style="color:red">\n' +
 127                             '             <i class="fa fa-trash"  ></i> Delete</a>\n' +
 128                             '     </li>\n' +
 129                             ' </ul>\n' +
 130                             ' </div>';
 131                     },
 132                     "targets": 3,
 133                     "orderable": false
 134                 }
 135             ]
 136         });
 137
 138         setInterval(function () {
 139                 table.ajax.reload();
 140             }, 10000);
 141     });
 142     </script>
 143     <script>
 144     function showModalNewProject(){
 145         $('#modal_new_project').modal('show');
 146     }
 147
 148     function editProject(project_id){
 149         var url = "/projects/" + project_id+"/edit";
 150         $("#formEditProject").attr("action", url);
 151         $('#modal_edit_project').modal('show');
 152     }
 153
 154     function deleteProject(project_id) {
 155         var url = "/projects/" + project_id+"/delete";
 156         bootbox.confirm("Are you sure want to delete?", function (result) {
 157             if (result) {
 158                 $.ajax({
 159                     url: url,
 160                     type: 'GET',
 161                     headers: {
 162                         "Accept": 'application/json'
 163                     },
 164                     contentType: false,
 165                     processData: false
 166                 }).done(function (response,textStatus, jqXHR) {
 167                     bootbox.alert({
 168                         title: "Result",
 169                         message: "Project deleted.",
 170                         callback: function () {
 171                             table.ajax.reload();
 172                         }
 173                     });
 174                 }).fail(function(result){
 175                     var data  = result.responseJSON;
 176                     var title = "Error " + (data.code ? data.code: 'unknown');
 177                     var message = data.detail ? data.detail: 'No detail available.';
 178                     bootbox.alert({
 179                         title: title,
 180                         message: message
 181                     });
 182                 });
 183             }
 184         })
 185     }
 186
 187     $(document).ready(function () {
 188         $("#formNewProject").submit(function (event) {
 189             event.preventDefault(); //prevent default action
 190             var post_url = $(this).attr("action"); //get form action url
 191             var request_method = $(this).attr("method"); //get form GET/POST method
 192             var form_data = new FormData(this); //Encode form elements for submission
 193             console.log(post_url);
 194             $.ajax({
 195                 url: post_url,
 196                 type: request_method,
 197                 data: form_data,
 198                 headers: {
 199                     "Accept": 'application/json'
 200                 },
 201                 contentType: false,
 202                 processData: false
 203             }).done(function (response,textStatus, jqXHR) {
 204                 bootbox.alert({
 205                         title: "Result",
 206                         message: "Project created.",
 207                     callback: function () {
 208                         table.ajax.reload();
 209                         $('#modal_new_project').modal('hide');
 210                     }
 211                     });
 212             }).fail(function(result){
 213                 var data  = result.responseJSON;
 214                 var title = "Error " + (data.code ? data.code: 'unknown');
 215                     var message = data.detail ? data.detail: 'No detail available.';
 216                     bootbox.alert({
 217                         title: title,
 218                         message: message
 219                     });
 220             });
 221         });
 222
 223         $("#formEditProject").submit(function(event){
 224             event.preventDefault(); //prevent default action
 225             var post_url = $(this).attr("action"); //get form action url
 226             var request_method = $(this).attr("method"); //get form GET/POST method
 227             var form_data = new FormData(this); //Encode form elements for submission
 228             console.log(post_url);
 229             $.ajax({
 230                 url: post_url,
 231                 type: request_method,
 232                 data: form_data,
 233                 headers: {
 234                     "Accept": 'application/json'
 235                 },
 236                 contentType: false,
 237                 processData: false
 238             }).done(function (response,textStatus, jqXHR) {
 239                 bootbox.alert({
 240                         title: "Result",
 241                         message: "Project updated.",
 242                     callback: function () {
 243                         table.ajax.reload();
 244                         $('#modal_edit_project').modal('hide');
 245                     }
 246                     });
 247             }).fail(function(result){
 248                 var data  = result.responseJSON;
 249                 var title = "Error " + (data.code ? data.code: 'unknown');
 250                     var message = data.detail ? data.detail: 'No detail available.';
 251                     bootbox.alert({
 252                         title: title,
 253                         message: message
 254                     });
 255             });
 256         });
 257     });
 258
 259
 260
 261
 262     </script>
 263
 264
 265 {% endblock %}