X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=vimhandler%2Ftemplate%2Fvim_list.html;h=ba38f6435a7c3a8f7c1ceeb66f9e98b1ee95a0a3;hb=99a3d358490e2db8feec07ddfdbf676a8c4c868a;hp=535f4db8a7f57758c286d776d67497ca00991e29;hpb=99f922f1dc8623a444930a621ce3696802d619c0;p=osm%2FLW-UI.git

diff --git a/vimhandler/template/vim_list.html b/vimhandler/template/vim_list.html
index 535f4db..ba38f64 100644
--- a/vimhandler/template/vim_list.html
+++ b/vimhandler/template/vim_list.html
@@ -5,7 +5,7 @@
 
 {% block head_block %}
     {{ block.super }}
-
+    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
 {% endblock %}
 {% block title_header_big %}
     {{ block.super }}
@@ -19,7 +19,7 @@
 
 {% block breadcrumb_body %}
     {{ block.super }}
-    <li><a href="{% url "projects:vims:list"   %}">VIMS</a></li>
+    <li><a href="{% url "vims:list"   %}">VIMS</a></li>
 {% endblock %}
 
 {% block content_body %}
@@ -33,16 +33,16 @@
                 <div class="box-header with-border">
                     <h3 class="box-title">Registered VIM</h3>
                     <div class="box-tools">
-                        <a href='{% url "projects:vims:create"   %}' class="btn btn-block btn-primary btn-sm"><i
+                        <a href='{% url "vims:create"   %}' class="btn btn-block btn-primary btn-sm"><i
                                 class="fa fa-plus"></i><span> New VIM</span></a>
                     </div>
                 </div>
                 <div class="box-body">
-                    <table id="projects_table" class="table table-bordered table-striped">
+                    <table id="vims_table" class="table table-bordered table-striped">
                         <thead>
                         <tr>
-                            <th>Id</th>
                             <th>Name</th>
+                            <th>Identifier</th>
                             <th>Type</th>
                             <th>Operational State</th>
                             <th>Description</th>
@@ -50,30 +50,7 @@
                         </tr>
                         </thead>
                         <tbody>
-                        {% for p in datacenters %}
-
-                            <tr>
-
-                                <td>{{ p|get:"_id" }}</td>
-                                <td>{{ p|get:"name" }}</td>
-                                <td>{{ p|get:"vim_type" }}</td>
-                                <td>{{ p|get_sub:"_admin,operationalState"}}</td>
-                                <td>{{ p|get_sub:"_admin,description" }}</td>
 
-
-                                <td>
-                                    <div class="btn-group">
-                                        <button type="button" class="btn btn-default"
-                                                onclick="location.href='{% url "projects:vims:show"   vim_id=p|get:"_id" %}'" data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info"><i
-                                                class="fa fa-info"></i></button>
-                                        <button type="button" class="btn btn-default"
-                                                onclick="javascript:deleteVim('{% url "projects:vims:delete"   vim_id=p|get:"_id" %}')" data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i
-                                                class="far fa-trash-alt" ></i></button>
-                                    </div>
-                                </td>
-
-                            </tr>
-                        {% endfor %}
                         </tbody>
                     </table>
                 </div>
@@ -85,21 +62,115 @@
 
 {% block resource_block %}
     {{ block.super }}
-    <!-- Utility JS -->
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
+    <script>
+    $(document).ready( function () {
+        var table = $('#vims_table').DataTable({
+            responsive: true,
+            "ajax": {
+                "url": "/vims/list/",
+                "dataSrc": function (json) {
+                    return json['datacenters'];
+                },
+                statusCode: {
+                    401: function () {
+                        console.log("no auth");
+                        moveToLogin(window.location.pathname);
+                    }
+                },
+                "error": function (hxr, error, thrown) {
+                    console.log(hxr)
+                    console.log(thrown)
+                    console.log(error);
+                }
+
+            },
+            "columns": [
+                {
+                    "render": function (data, type, row) {
+                        return row["name"];
+                    },
+                    "targets": 0
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row['_id'];
+                    },
+                    "targets": 1
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["vim_type"];
+                    },
+                    "targets": 2
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["_admin"]['operationalState'];
+                    },
+                    "targets": 3
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["_admin"]['description'] || '';
+                    },
+                    "targets": 4
+                },
+                {
+                    "render": function (data, type, row) {
+                        return '<div class="btn-group"><button type="button" class="btn btn-default" ' +
+                            'onclick="location.href=\'/vims/'+row['_id']+'\'" data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
+                        '<i class="fa fa-info"></i>' +
+                        '</button> ' +
+                        '<button type="button" class="btn btn-default"' +
+                        'onclick="javascript:deleteVim(\''+row['_id']+'\', \''+ row["name"] +'\')" data-toggle="tooltip" data-placement="top" data-container="body" title="Delete">' +
+                        '<i class="far fa-trash-alt" ></i></button></div>';
+                    },
+                    "targets": 5,
+                    "orderable": false
+                }
+            ]
+        });
 
+        setInterval(function () {
+                table.ajax.reload();
+            }, 10000);
+    });
+    </script>
     <script>
 
-        function deleteVim(url) {
-            bootbox.confirm("Are you sure want to delete?", function (result) {
+        function deleteVim(vim_id, vim_name) {
+            var url = "/vims/"+vim_id+"/delete";
+            bootbox.confirm("Are you sure want to delete " + vim_name + "?", function (result) {
                 if (result) {
-                    location.href = url//'/vims/' + vim_uuid + '/delete'
+                    var dialog = bootbox.dialog({
+                        message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
+                        closeButton: true
+                    });
+                    $.ajax({
+                        url: url,
+                        type: 'GET',
+                        dataType: "json",
+                        contentType: "application/json;charset=utf-8",
+                        success: function (result) {
+                            if (result['error'] == true) {
+                                dialog.modal('hide');
+                                bootbox.alert("An error occurred.");
+                            }
+                            else {
+                                dialog.modal('hide');
+                                location.reload();
+                            }
+                        },
+                        error: function (error) {
+                            dialog.modal('hide');
+                            bootbox.alert("An error occurred.");
+                        }
+                    });
                 }
             })
         }
     </script>
 
 {% endblock %}
-
-{% block footer %}
-    {% include "footer.html"  %}
-{% endblock %}
\ No newline at end of file