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