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