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         var dialog = bootbox.dialog({
 164             message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
 165             closeButton: false
 166         });
 167         $.ajax({
 168             url: args.domains_list_url,
 169             dataType: "json",
 170             contentType: "application/json;charset=utf-8",
 171             success: function (result_domain) {
 172                 domains_list = [];
 173                 $('#domain_name').prop('disabled', false).trigger('change');
 174                 if (result_domain['domains']) {
 175                     for (d in result_domain['domains']) {
 176                         var domain = result_domain['domains'][d];
 177                         if (domain.endsWith(':ro') === false) {
 178                             domains_list.push({ id: domain, text: domain })
 179                         }
 180
 181                     }
 182                 }
 183                 if (domains_list.length == 0) {
 184                     $('#domainNameGroupDiv').remove();
 185                 }
 186                 dialog.modal('hide');
 187
 188                 select2_groups = $('#domain_name').select2({
 189                     placeholder: 'Select Domain',
 190                     width: '100%',
 191                     "language": {
 192                         "noResults": function () {
 193                             return "No domains in the platform";
 194                         }
 195                     },
 196                     data: domains_list
 197                 });
 198
 199                 $('#modal_new_project').modal('show');
 200
 201             },
 202             error: function (result) {
 203                 dialog.modal('hide');
 204                 bootbox.alert("An error occurred.");
 205             }
 206         });
 207     }
 208
 209     function editProject(project_id){
 210         var url = "/projects/" + project_id+"/edit";
 211         $("#formEditProject").attr("action", url);
 212         $('#modal_edit_project').modal('show');
 213     }
 214
 215     function deleteProject(project_id) {
 216         var url = "/projects/" + project_id+"/delete";
 217         bootbox.confirm("Are you sure want to delete?", function (result) {
 218             if (result) {
 219                 $.ajax({
 220                     url: url,
 221                     type: 'GET',
 222                     headers: {
 223                         "Accept": 'application/json'
 224                     },
 225                     contentType: false,
 226                     processData: false
 227                 }).done(function (response,textStatus, jqXHR) {
 228                     bootbox.alert({
 229                         title: "Result",
 230                         message: "Project deleted.",
 231                         callback: function () {
 232                             table.ajax.reload();
 233                         }
 234                     });
 235                 }).fail(function(result){
 236                     var data  = result.responseJSON;
 237                     var title = "Error " + (data.code ? data.code: 'unknown');
 238                     var message = data.detail ? data.detail: 'No detail available.';
 239                     bootbox.alert({
 240                         title: title,
 241                         message: message
 242                     });
 243                 });
 244             }
 245         })
 246     }
 247
 248     $(document).ready(function () {
 249         $("#formNewProject").submit(function (event) {
 250             event.preventDefault(); //prevent default action
 251             var post_url = $(this).attr("action"); //get form action url
 252             var request_method = $(this).attr("method"); //get form GET/POST method
 253             var form_data = new FormData(this); //Encode form elements for submission
 254             console.log(post_url);
 255             $.ajax({
 256                 url: post_url,
 257                 type: request_method,
 258                 data: form_data,
 259                 headers: {
 260                     "Accept": 'application/json'
 261                 },
 262                 contentType: false,
 263                 processData: false
 264             }).done(function (response,textStatus, jqXHR) {
 265                 bootbox.alert({
 266                         title: "Result",
 267                         message: "Project created.",
 268                     callback: function () {
 269                         table.ajax.reload();
 270                         $('#modal_new_project').modal('hide');
 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         $("#formEditProject").submit(function(event){
 285             event.preventDefault(); //prevent default action
 286             var post_url = $(this).attr("action"); //get form action url
 287             var request_method = $(this).attr("method"); //get form GET/POST method
 288             var form_data = new FormData(this); //Encode form elements for submission
 289             console.log(post_url);
 290             $.ajax({
 291                 url: post_url,
 292                 type: request_method,
 293                 data: form_data,
 294                 headers: {
 295                     "Accept": 'application/json'
 296                 },
 297                 contentType: false,
 298                 processData: false
 299             }).done(function (response,textStatus, jqXHR) {
 300                 bootbox.alert({
 301                         title: "Result",
 302                         message: "Project updated.",
 303                     callback: function () {
 304                         table.ajax.reload();
 305                         $('#modal_edit_project').modal('hide');
 306                     }
 307                     });
 308             }).fail(function(result){
 309                 var data  = result.responseJSON;
 310                 var title = "Error " + (data.code ? data.code: 'unknown');
 311                     var message = data.detail ? data.detail: 'No detail available.';
 312                     bootbox.alert({
 313                         title: title,
 314                         message: message
 315                     });
 316             });
 317         });
 318     });
 319
 320
 321
 322
 323     </script>
 324
 325
 326 {% endblock %}