projecthandler/template/project/projectlist.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 {% 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
  27 {% endblock %}
  28 {% block title_header_big %}
  29     {{ block.super }}
  30 {% endblock %}
  31 {% block left_sidebar %}
  32
  33 {% include 'osm/osm_project_left_sidebar.html' %}
  34
  35 {% endblock %}
  36
  37
  38 {% block breadcrumb_body %}
  39         {{ block.super }}
  40       {% if user.is_admin %}
  41       <li><a href="{% url 'projects:projects_list' %}">Projects</a></li>
  42       {% else%}
  43       <li><a href="#">Projects</a></li>
  44       {% endif %}
  45 {% endblock %}
  46
  47 {% block content_body %}
  48         {{ block.super }}
  49  {% csrf_token %}
  50 <div class="row">
  51 <div class="col-md-12">
  52     <div class="box">
  53         <div class="box-header with-border">
  54                   <h3 class="box-title">Projects</h3>
  55             <div class="box-tools">
  56                 <button type="button" class="btn btn-default" data-container="body"
  57                                         data-toggle="tooltip" data-placement="top" title="New Project"
  58                                         onclick="javascript:showModalNewProject({'domains_list_url': '{% url "projects:domains_list" %}'})">
  59                                     <i class="fa fa-plus"></i> New Project</button>
  60             </div>
  61         </div>
  62         <div class="box-body">
  63                         <table id="projects_table" class="table table-bordered table-striped">
  64                                 <thead>
  65                                         <tr>
  66                                                 <th>Name</th>
  67                                                 <th>Modification Date</th>
  68                                                 <th>Creation Date</th>
  69                                                 <th>Actions</th>
  70                                         </tr>
  71                                 </thead>
  72                                 <tbody>
  73
  74                                 </tbody>
  75                         </table>
  76                 </div>
  77     </div>
  78 </div>
  79
  80 </div>
  81 {% include "modal/project_new.html" %}
  82 {% include "modal/project_edit.html" %}
  83 {% endblock %}
  84
  85 {% block resource_block %}
  86         {{ block.super }}
  87     <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
  88     <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  89     <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  90
  91     <script>
  92         var table;
  93     $(document).ready( function () {
  94         table = $('#projects_table').DataTable({
  95             responsive: true,
  96             "ajax": {
  97                 "url": "/projects/list",
  98                 "dataSrc": function (json) {
  99                     return json['projects'];
 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 '<a href="/projects/'+row['name']+'/switch/" >'+row['name']+'</a>'
 118                     },
 119                     "targets": 0
 120                 },
 121                 {
 122                     "render": function (data, type, row) {
 123                         return moment.unix(row["_admin"]['modified']).format('YYYY-MM-DD hh:mm:ss a');
 124                     },
 125                     "targets": 1
 126                 },
 127                 {
 128                     "render": function (data, type, row) {
 129                         return moment.unix(row["_admin"]['created']).format('YYYY-MM-DD hh:mm:ss a');
 130                     },
 131                     "targets": 2
 132                 },
 133                 {
 134                     "render": function (data, type, row) {
 135                         return '<div class="btn-group">\n' +
 136                             ' <button type="button" class="btn btn-default dropdown-toggle"\n' +
 137                             '         data-toggle="dropdown" aria-expanded="false">Actions\n' +
 138                             '     <span class="fa fa-caret-down"></span></button>\n' +
 139                             ' <ul class="dropdown-menu">\n' +
 140                             '     <li><a href="#"\n' +
 141                             '            onclick="javascript:editProject(\''+ row['name']+'\')">\n' +
 142                             '         <i class="fa fa-edit"></i> Rename</a></li>\n' +
 143                             '     <li>\n' +
 144                             '         <a href="#" onclick="javascript:deleteProject(\''+ row['name']+'\')" style="color:red">\n' +
 145                             '             <i class="fa fa-trash"  ></i> Delete</a>\n' +
 146                             '     </li>\n' +
 147                             ' </ul>\n' +
 148                             ' </div>';
 149                     },
 150                     "targets": 3,
 151                     "orderable": false
 152                 }
 153             ]
 154         });
 155
 156         setInterval(function () {
 157                 table.ajax.reload();
 158             }, 10000);
 159     });
 160     </script>
 161     <script>
 162     function showModalNewProject(args){
 163         select2_groups = $('#domain_name').select2({
 164             placeholder: 'Select Domain',
 165             width: '100%',
 166             ajax: {
 167                 url: args.domains_list_url,
 168                 dataType: 'json',
 169                 processResults: function (data) {
 170                     domains_list = [];
 171                     if (data['domains']) {
 172                         for (d in data['domains']) {
 173                             var domain = data['domains'][d];
 174                             if( domain.endsWith(':ro') === false) {
 175                                 domains_list.push({ id: domain, text: domain })
 176                             }
 177
 178                         }
 179                     }
 180
 181                     return {
 182                         results: domains_list
 183                     };
 184                 }
 185             }
 186         });
 187         $('#modal_new_project').modal('show');
 188     }
 189
 190     function editProject(project_id){
 191         var url = "/projects/" + project_id+"/edit";
 192         $("#formEditProject").attr("action", url);
 193         $('#modal_edit_project').modal('show');
 194     }
 195
 196     function deleteProject(project_id) {
 197         var url = "/projects/" + project_id+"/delete";
 198         bootbox.confirm("Are you sure want to delete?", function (result) {
 199             if (result) {
 200                 $.ajax({
 201                     url: url,
 202                     type: 'GET',
 203                     headers: {
 204                         "Accept": 'application/json'
 205                     },
 206                     contentType: false,
 207                     processData: false
 208                 }).done(function (response,textStatus, jqXHR) {
 209                     bootbox.alert({
 210                         title: "Result",
 211                         message: "Project deleted.",
 212                         callback: function () {
 213                             table.ajax.reload();
 214                         }
 215                     });
 216                 }).fail(function(result){
 217                     var data  = result.responseJSON;
 218                     var title = "Error " + (data.code ? data.code: 'unknown');
 219                     var message = data.detail ? data.detail: 'No detail available.';
 220                     bootbox.alert({
 221                         title: title,
 222                         message: message
 223                     });
 224                 });
 225             }
 226         })
 227     }
 228
 229     $(document).ready(function () {
 230         $("#formNewProject").submit(function (event) {
 231             event.preventDefault(); //prevent default action
 232             var post_url = $(this).attr("action"); //get form action url
 233             var request_method = $(this).attr("method"); //get form GET/POST method
 234             var form_data = new FormData(this); //Encode form elements for submission
 235             console.log(post_url);
 236             $.ajax({
 237                 url: post_url,
 238                 type: request_method,
 239                 data: form_data,
 240                 headers: {
 241                     "Accept": 'application/json'
 242                 },
 243                 contentType: false,
 244                 processData: false
 245             }).done(function (response,textStatus, jqXHR) {
 246                 bootbox.alert({
 247                         title: "Result",
 248                         message: "Project created.",
 249                     callback: function () {
 250                         table.ajax.reload();
 251                         $('#modal_new_project').modal('hide');
 252                     }
 253                     });
 254             }).fail(function(result){
 255                 var data  = result.responseJSON;
 256                 var title = "Error " + (data.code ? data.code: 'unknown');
 257                     var message = data.detail ? data.detail: 'No detail available.';
 258                     bootbox.alert({
 259                         title: title,
 260                         message: message
 261                     });
 262             });
 263         });
 264
 265         $("#formEditProject").submit(function(event){
 266             event.preventDefault(); //prevent default action
 267             var post_url = $(this).attr("action"); //get form action url
 268             var request_method = $(this).attr("method"); //get form GET/POST method
 269             var form_data = new FormData(this); //Encode form elements for submission
 270             console.log(post_url);
 271             $.ajax({
 272                 url: post_url,
 273                 type: request_method,
 274                 data: form_data,
 275                 headers: {
 276                     "Accept": 'application/json'
 277                 },
 278                 contentType: false,
 279                 processData: false
 280             }).done(function (response,textStatus, jqXHR) {
 281                 bootbox.alert({
 282                         title: "Result",
 283                         message: "Project updated.",
 284                     callback: function () {
 285                         table.ajax.reload();
 286                         $('#modal_edit_project').modal('hide');
 287                     }
 288                     });
 289             }).fail(function(result){
 290                 var data  = result.responseJSON;
 291                 var title = "Error " + (data.code ? data.code: 'unknown');
 292                     var message = data.detail ? data.detail: 'No detail available.';
 293                     bootbox.alert({
 294                         title: title,
 295                         message: message
 296                     });
 297             });
 298         });
 299     });
 300
 301
 302
 303
 304     </script>
 305
 306
 307 {% endblock %}