X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=sdnctrlhandler%2Ftemplate%2Fsdn_list.html;h=2d74bea9c0e947b1495931d8d23f5db82e31fc42;hb=ddc44c25bfcdd7b926819697cfce4403947fc364;hp=627278c304ae105f1d0f7c664dcdd71bf9c1e13c;hpb=2ad37de399d1f309e265c060349ce44f80d8f480;p=osm%2FLW-UI.git

diff --git a/sdnctrlhandler/template/sdn_list.html b/sdnctrlhandler/template/sdn_list.html
index 627278c..2d74bea 100644
--- a/sdnctrlhandler/template/sdn_list.html
+++ b/sdnctrlhandler/template/sdn_list.html
@@ -1,3 +1,19 @@
+<!--
+Copyright 2019 EveryUP srl
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an  BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
 {% extends "base.html" %}
 {% load get %}
 {% load staticfiles %}
@@ -5,6 +21,7 @@
 
 {% block head_block %}
     {{ block.super }}
+    <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
 
 {% endblock %}
 {% block title_header_big %}
@@ -36,11 +53,11 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <table id="projects_table" class="table table-bordered table-striped">
+                    <table id="sdns_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>IP</th>
@@ -50,27 +67,7 @@
                         </tr>
                         </thead>
                         <tbody>
-                        {% for s in sdns %}
-                            <tr>
-                                <td>{{ s|get:"_id" }}</td>
-                                <td>{{ s|get:"name" }}</td>
-                                <td>{{ s|get:"type" }}</td>
-                                <td>{{ s|get_sub:"_admin,operationalState"}}</td>
-                                <td>{{ s|get:"ip" }}</td>
-                                <td>{{ s|get:"port" }}</td>
-                                <td>
-                                    <div class="btn-group">
-                                        <button type="button" class="btn btn-default"
-                                                onclick="javascript:showSDN( '{{ s|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:deleteSDN('{{ s|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>
@@ -83,11 +80,92 @@
 {% block resource_block %}
     {{ block.super }}
     <!-- moment JS -->
-    <script src="/static/bower_components/moment/moment.js"></script>
-
+    <script src="/static/node_modules/moment/moment.js"></script>
+    <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
     <script src="/static/src/sdnctrlhandler/sdn_list.js"></script>
 
+     <script>
+    $(document).ready( function () {
+        var table = $('#sdns_table').DataTable({
+            responsive: true,
+            "ajax": {
+                "url": "/sdn/list",
+                "dataSrc": function (json) {
+                    console.log(json)
+                    return json['sdns'];
+                },
+                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["type"];
+                    },
+                    "targets": 2
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["_admin"]["operationalState"];
+                    },
+                    "targets": 3
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["ip"];
+                    },
+                    "targets": 4
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["port"];
+                    },
+                    "targets": 5
+                },
+                {
+                    "render": function (data, type, row) {
+                        return '<div class="btn-group">' +
+                            '<button type="button" class="btn btn-default" ' +
+                            'onclick="javascript:showSDN( \''+row['_id'] + '\', \''+row['name'] +'\')" 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:deleteSDN(\''+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": 6,
+                    "orderable": false
+                }
+            ]
+        });
 
+        setInterval(function () {
+                table.ajax.reload();
+            }, 10000);
+    });
+    </script>
 {% endblock %}
 
 {% block footer %}