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