vimhandler/template/vim_list.html

   1 {% extends "base.html" %}
   2 {% load get %}
   3 {% load staticfiles %}
   4
   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 {% endblock %}
  10 {% block title_header_big %}
  11     {{ block.super }}
  12 {% endblock %}
  13 {% block left_sidebar %}
  14
  15    {% include 'osm/osm_project_left_sidebar.html' %}
  16
  17 {% endblock %}
  18
  19
  20 {% block breadcrumb_body %}
  21     {{ block.super }}
  22     <li><a href="{% url "vims:list"   %}">VIMS</a></li>
  23 {% endblock %}
  24
  25 {% block content_body %}
  26     {{ block.super }}
  27     {% include 'modal/vim_details.html' %}
  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">Registered VIM</h3>
  35                     <div class="box-tools">
  36                         <a href='{% url "vims:create"   %}' class="btn btn-block btn-primary btn-sm"><i
  37                                 class="fa fa-plus"></i><span> New VIM</span></a>
  38                     </div>
  39                 </div>
  40                 <div class="box-body">
  41                     <table id="vims_table" class="table table-bordered table-striped">
  42                         <thead>
  43                         <tr>
  44                             <th>Name</th>
  45                             <th>Identifier</th>
  46                             <th>Type</th>
  47                             <th>Operational State</th>
  48                             <th>Description</th>
  49                             <th>Actions</th>
  50                         </tr>
  51                         </thead>
  52                         <tbody>
  53
  54                         </tbody>
  55                     </table>
  56                 </div>
  57             </div>
  58         </div>
  59
  60     </div>
  61 {% endblock %}
  62
  63 {% block resource_block %}
  64     {{ block.super }}
  65     <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
  66     <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  67     <script>
  68     $(document).ready( function () {
  69         var table = $('#vims_table').DataTable({
  70             responsive: true,
  71             "ajax": {
  72                 "url": "/vims/list/",
  73                 "dataSrc": function (json) {
  74                     return json['datacenters'];
  75                 },
  76                 statusCode: {
  77                     401: function () {
  78                         console.log("no auth");
  79                         moveToLogin(window.location.pathname);
  80                     }
  81                 },
  82                 "error": function (hxr, error, thrown) {
  83                     console.log(hxr)
  84                     console.log(thrown)
  85                     console.log(error);
  86                 }
  87
  88             },
  89             "columns": [
  90                 {
  91                     "render": function (data, type, row) {
  92                         return row["name"];
  93                     },
  94                     "targets": 0
  95                 },
  96                 {
  97                     "render": function (data, type, row) {
  98                         return row['_id'];
  99                     },
 100                     "targets": 1
 101                 },
 102                 {
 103                     "render": function (data, type, row) {
 104                         return row["vim_type"];
 105                     },
 106                     "targets": 2
 107                 },
 108                 {
 109                     "render": function (data, type, row) {
 110                         return row["_admin"]['operationalState'];
 111                     },
 112                     "targets": 3
 113                 },
 114                 {
 115                     "render": function (data, type, row) {
 116                         return row["_admin"]['description'] || '';
 117                     },
 118                     "targets": 4
 119                 },
 120                 {
 121                     "render": function (data, type, row) {
 122                         return '<div class="btn-group"><button type="button" class="btn btn-default" ' +
 123                             'onclick="location.href=\'/vims/'+row['_id']+'\'" data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
 124                         '<i class="fa fa-info"></i>' +
 125                         '</button> ' +
 126                         '<button type="button" class="btn btn-default"' +
 127                         'onclick="javascript:deleteVim(\''+row['_id']+'\', \''+ row["name"] +'\')" data-toggle="tooltip" data-placement="top" data-container="body" title="Delete">' +
 128                         '<i class="far fa-trash-alt" ></i></button></div>';
 129                     },
 130                     "targets": 5,
 131                     "orderable": false
 132                 }
 133             ]
 134         });
 135
 136         setInterval(function () {
 137                 table.ajax.reload();
 138             }, 10000);
 139     });
 140     </script>
 141     <script>
 142
 143         function deleteVim(vim_id, vim_name) {
 144             var url = "/vims/"+vim_id+"/delete";
 145             bootbox.confirm("Are you sure want to delete " + vim_name + "?", function (result) {
 146                 if (result) {
 147                     var dialog = bootbox.dialog({
 148                         message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
 149                         closeButton: true
 150                     });
 151                     $.ajax({
 152                         url: url,
 153                         type: 'GET',
 154                         dataType: "json",
 155                         contentType: "application/json;charset=utf-8",
 156                         success: function (result) {
 157                             if (result['error'] == true) {
 158                                 dialog.modal('hide');
 159                                 bootbox.alert("An error occurred.");
 160                             }
 161                             else {
 162                                 dialog.modal('hide');
 163                                 location.reload();
 164                             }
 165                         },
 166                         error: function (error) {
 167                             dialog.modal('hide');
 168                             bootbox.alert("An error occurred.");
 169                         }
 170                     });
 171                 }
 172             })
 173         }
 174     </script>
 175
 176 {% endblock %}