From: lombardof <flombardo@cnit.it>
Date: Sun, 3 Jun 2018 16:04:42 +0000 (+0200)
Subject: Onboarding drag and drop box in VNF packages and NS packages section
X-Git-Tag: BUILD_v4.0.1_1~24
X-Git-Url: https://osm.etsi.org/gitweb/?a=commitdiff_plain;h=9b8155e70a7581b776f2f576f2be707bca92e087;p=osm%2FLW-UI.git

Onboarding drag and drop box in VNF packages and NS packages section

Change-Id: Ieb93b56b7dbaccad7dc3055d257fc8c0db62b98a
Signed-off-by: lombardof <flombardo@cnit.it>
---

diff --git a/projecthandler/template/project/osm/descriptor/descriptor_new.html b/projecthandler/template/project/osm/descriptor/descriptor_new.html
index 762d931..ff93ce0 100644
--- a/projecthandler/template/project/osm/descriptor/descriptor_new.html
+++ b/projecthandler/template/project/osm/descriptor/descriptor_new.html
@@ -51,85 +51,14 @@ Onboard new {{ descriptor_type }} package
 
 <script>
     var descr_list_url = '{% url "projects:list_descriptors"  project_id=project_id descriptor_type=descriptor_type%}';
-
-    var dropZone = document.getElementById('drop-zone');
-    dropZone.ondrop = function (e) {
-        e.preventDefault();
-        this.className = 'upload-drop-zone';
-        create(e.dataTransfer.files, true);
-    };
-
-    dropZone.ondragover = function () {
-        this.className = 'upload-drop-zone drop';
-        return false;
-    };
-
-    dropZone.ondragleave = function () {
-        this.className = 'upload-drop-zone';
-        return false;
-    };
-
-
-    function create(fs, dropzone) {
-        var id = $('.nav-tabs .active').attr('id');
-        if (dropzone) id = 'file_li';
-        var type, text;
-        var data = new FormData();
-        switch (id) {
-
-            case 'file_li':
-                type = 'file';
-
-                var files = dropzone ? fs : document.getElementById('js-upload-files').files;
-                if (!files || !files.length) {
-                    files = document.getElementById('drop-zone').files;
-                    if (!files || !files.length) {
-                        alert("Select a file");
-                        return
-                    }
-                }
-                console.log(files[0])
-                var patt1 = /\.([0-9a-z]+)(?:[\?#]|$)/i;
-                console.log(files[0].name.match(patt1));
-                var extension = files[0].name.substr(files[0].name.lastIndexOf('.') + 1);
-                console.log(extension);
-                if (!(extension == 'gz' )) {
-                    alert("The file must be .tar.gz");
-                    return
-                }
-
-                data.append('file', files[0]);
-                break;
-        }
-        data.append('csrfmiddlewaretoken', '{{csrf_token}}');
-        data.append('type', type);
-        data.append('text', text);
-        data.append('id', '{{descriptor_id}}');
-        console.log(text);
-        $.ajax({
-            url: "new",
-            type: 'POST',
-            data: data,
-            cache: false,
-            contentType: false,
-            processData: false,
-            success: function (result) {
-                console.log(result);
-
-                window.location.href = descr_list_url
-
-            },
-            error: function (result) {
-                showAlert(result);
-            }
-        });
-    }
+    var csrf_token = '{{csrf_token}}';
 
     function cancel(id) {
         window.location.href = descr_list_url
     }
 
 </script>
+    <script src="/static/src/projecthandler/onboard_package.js"></script>
 {% endblock %}
 
 {% block footer %}
diff --git a/projecthandler/template/project/osm/descriptor/descriptorlist.html b/projecthandler/template/project/osm/descriptor/descriptorlist.html
index 67f4a75..fee1b86 100644
--- a/projecthandler/template/project/osm/descriptor/descriptorlist.html
+++ b/projecthandler/template/project/osm/descriptor/descriptorlist.html
@@ -10,12 +10,12 @@
 
                 <a href="{% url 'projects:new_descriptor' project_id=project_id descriptor_type=descriptor_type %}"
                    class="btn btn-block btn-primary btn-sm"><i
-                        class="fa fa-upload"></i><span> Onboard {{descriptor_type|upper}}</span></a>
+                        class="fa fa-upload"></i><span> Onboard {{ descriptor_type|upper }}</span></a>
             </div>
         </div>
         <div class="box-body">
             <table id="descriptors_table" class="table table-bordered table-striped dataTable"
-                       role="grid">
+                   role="grid">
                 <thead>
                 <tr role="row">
                     <th>Id</th>
@@ -28,26 +28,44 @@
                 </thead>
                 <tbody>
                 {% for k in descriptors %}
-                <tr role="row">
-                    <td>{{ k|get:"_id" }}</td>
-                    <td>{{ k|get:"short-name" }} </td>
-                    <td>{{ k|get:"description" }} </td>
-                    <td>{{ k|get:"vendor" }} </td>
-                    <td>{{ k|get:"version" }} </td>
-                    <td>
-                        <div class="btn-group">
-                            {% if descriptor_type == "nsd" %}
-                            <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="top" title="Instantiate NS" onclick="javascript:openModalCreateNS({ 'project_id':'{{project_id}}', 'descriptor_type': '{{descriptor_type}}', 'descriptor_name':'{{ k|get:"name" }}', 'descriptor_id':'{{ k|get:"_id" }}','vim_list_url': '{% url "projects:vims:list" project_id=project_id%}',  'nsd_list_url': '{% url "projects:list_descriptors" project_id=project_id descriptor_type=descriptor_type  %}' })"><i class="fa fa-paper-plane"></i></button>
-                            {% endif %}
-                            <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="top" title="Edit" onclick="javascript:openDescriptorView('{{project_id}}', '{{descriptor_type}}', '{{ k|get:"_id" }}')"><i class="fa fa-edit"></i></button>
-                            <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="top" title="Show content" onclick="javascript:openPackageContentList('{{project_id}}', '{{descriptor_type}}', '{{ k|get:"_id" }}')"><i class="fa fa-folder-open"></i></button>
-                            <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="top" title="Show Graph" onclick="location.href='/projects/{{project_id}}/graph?type={{descriptor_type}}&id={{ k|get:"_id" }}'" disabled><i class="fa fa-sitemap fa-fw"></i></button>
-                            <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="top" title="Download package" onclick="location.href='{% url 'projects:custom_action' project_id=project_id descriptor_type=descriptor_type descriptor_id=k|get:'_id' action_name='download_pkg' %}'"><i class="fa fa-download fa-fw"></i></button>
-                            <button type="button" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="top" title="Delete" onclick="javascript:deletePackage('{{project_id}}', '{{descriptor_type}}', '{{ k|get:"_id" }}')"><i class="fa fa-trash-o"></i></button>
-                        </div>
+                    <tr role="row">
+                        <td>{{ k|get:"_id" }}</td>
+                        <td>{{ k|get:"short-name" }} </td>
+                        <td>{{ k|get:"description" }} </td>
+                        <td>{{ k|get:"vendor" }} </td>
+                        <td>{{ k|get:"version" }} </td>
+                        <td>
+                            <div class="btn-group">
+                                {% if descriptor_type == "nsd" %}
+                                    <button type="button" class="btn btn-default" data-container="body"
+                                            data-toggle="tooltip" data-placement="top" title="Instantiate NS"
+                                            onclick="javascript:openModalCreateNS({ 'project_id':'{{ project_id }}', 'descriptor_type': '{{ descriptor_type }}', 'descriptor_name':'{{ k|get:"name" }}', 'descriptor_id':'{{ k|get:"_id" }}','vim_list_url': '{% url "projects:vims:list" project_id=project_id %}',  'nsd_list_url': '{% url "projects:list_descriptors" project_id=project_id descriptor_type=descriptor_type %}' })">
+                                        <i class="fa fa-paper-plane"></i></button>
+                                {% endif %}
+                                <button type="button" class="btn btn-default" data-container="body"
+                                        data-toggle="tooltip" data-placement="top" title="Edit"
+                                        onclick="javascript:openDescriptorView('{{ project_id }}', '{{ descriptor_type }}', '{{ k|get:"_id" }}')">
+                                    <i class="fa fa-edit"></i></button>
+                                <button type="button" class="btn btn-default" data-container="body"
+                                        data-toggle="tooltip" data-placement="top" title="Show content"
+                                        onclick="javascript:openPackageContentList('{{ project_id }}', '{{ descriptor_type }}', '{{ k|get:"_id" }}')">
+                                    <i class="fa fa-folder-open"></i></button>
+                                <button type="button" class="btn btn-default" data-container="body"
+                                        data-toggle="tooltip" data-placement="top" title="Show Graph"
+                                        onclick="location.href='/projects/{{ project_id }}/graph?type={{ descriptor_type }}&id={{ k|get:"_id" }}'"
+                                        disabled><i class="fa fa-sitemap fa-fw"></i></button>
+                                <button type="button" class="btn btn-default" data-container="body"
+                                        data-toggle="tooltip" data-placement="top" title="Download package"
+                                        onclick="location.href='{% url 'projects:custom_action' project_id=project_id descriptor_type=descriptor_type descriptor_id=k|get:'_id' action_name='download_pkg' %}'">
+                                    <i class="fa fa-download fa-fw"></i></button>
+                                <button type="button" class="btn btn-default" data-container="body"
+                                        data-toggle="tooltip" data-placement="top" title="Delete"
+                                        onclick="javascript:deletePackage('{{ project_id }}', '{{ descriptor_type }}', '{{ k|get:"_id" }}')">
+                                    <i class="fa fa-trash-o"></i></button>
+                            </div>
 
-                    </td>
-                </tr>
+                        </td>
+                    </tr>
                 {% endfor %}
                 </tbody>
 
@@ -55,3 +73,15 @@
         </div>
     </div>
 </div>
+
+<div class="col-sm-12">
+    <div class="box box-solid">
+        <div class="box-body">
+
+            <div class="upload-drop-zone" id="drop-zone">
+               <i class="fa fa-upload"></i> Just drag and drop files here
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/projecthandler/template/project/osm/osm_project_descriptors.html b/projecthandler/template/project/osm/osm_project_descriptors.html
index 81c17a7..1e35c7c 100644
--- a/projecthandler/template/project/osm/osm_project_descriptors.html
+++ b/projecthandler/template/project/osm/osm_project_descriptors.html
@@ -45,9 +45,14 @@
 
 {% block resource_block %}
   	{{ block.super }}
+    <script>
+    var csrf_token = '{{csrf_token}}';
+    var descr_list_url = '{% url "projects:list_descriptors"  project_id=project_id descriptor_type=descriptor_type%}';
+    </script>
     <script src="/static/bower_components/select2/dist/js/select2.js"></script>
     <script src="/static/src/instancehandler/instance_create.js"></script>
     <script src="/static/src/projecthandler/descriptorslist.js"></script>
+    <script src="/static/src/projecthandler/onboard_package.js"></script>
 
 {% endblock %}
 
diff --git a/static/src/projecthandler/descriptorslist.js b/static/src/projecthandler/descriptorslist.js
index 5a803da..24b7ba5 100644
--- a/static/src/projecthandler/descriptorslist.js
+++ b/static/src/projecthandler/descriptorslist.js
@@ -1,42 +1,42 @@
- function deletePackage(project_id, descriptor_type, package_id) {
-            bootbox.confirm("Are you sure want to delete?", function (result) {
-                if (result) {
-                    location.href = '/projects/' + project_id + '/descriptors/' + descriptor_type + '/' + package_id + '/delete'
-                }
-            })
+function deletePackage(project_id, descriptor_type, package_id) {
+    bootbox.confirm("Are you sure want to delete?", function (result) {
+        if (result) {
+            location.href = '/projects/' + project_id + '/descriptors/' + descriptor_type + '/' + package_id + '/delete'
         }
+    })
+}
 
 
-
-        function openPackageContentList(project_id, type, pkg_id) {
-            var dialog = bootbox.dialog({
-                message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
-                closeButton: true
-            });
-            $.ajax({
-                url: '/projects/' + project_id + '/descriptors/' + type + '/' + pkg_id + '/action/get_package_files_list',
-                type: 'GET',
-                dataType: "json",
-                contentType: "application/json;charset=utf-8",
-                success: function (result) {
-                    //$('#modal_show_vim_body').empty();
-                    dialog.modal('hide');
-                    build_file_list("Files in " + pkg_id, result.files);
-                },
-                error: function (result) {
-                    dialog.modal('hide');
-                    bootbox.alert("An error occurred while retrieving the package content.");
-                }
-            });
+function openPackageContentList(project_id, type, pkg_id) {
+    var dialog = bootbox.dialog({
+        message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
+        closeButton: true
+    });
+    $.ajax({
+        url: '/projects/' + project_id + '/descriptors/' + type + '/' + pkg_id + '/action/get_package_files_list',
+        type: 'GET',
+        dataType: "json",
+        contentType: "application/json;charset=utf-8",
+        success: function (result) {
+            //$('#modal_show_vim_body').empty();
+            dialog.modal('hide');
+            build_file_list("Files in " + pkg_id, result.files);
+        },
+        error: function (result) {
+            dialog.modal('hide');
+            bootbox.alert("An error occurred while retrieving the package content.");
         }
+    });
+}
+
 
+function build_file_list(title, list) {
+    $('#files_list_tbody').find('tr:gt(0)').remove();
+    $('#files_list_tbody_title').text(title)
+    for (var i in list) {
+        var template = '<tr><td>-</td><td>' + list[i] + '</td><td><button type="button" class="btn btn-default" onclick="" disabled><i class="fa fa-folder-open"></i></button></td></tr>'
+        $('#files_list_tbody').append(template)
+    }
+    $('#modal_files_list').modal('show');
+}
 
-        function build_file_list(title, list) {
-            $('#files_list_tbody').find('tr:gt(0)').remove();
-            $('#files_list_tbody_title').text(title)
-            for (var i in list) {
-                var template = '<tr><td>-</td><td>' + list[i] + '</td><td><button type="button" class="btn btn-default" onclick="" disabled><i class="fa fa-folder-open"></i></button></td></tr>'
-                $('#files_list_tbody').append(template)
-            }
-            $('#modal_files_list').modal('show');
-        }
\ No newline at end of file
diff --git a/static/src/projecthandler/onboard_package.js b/static/src/projecthandler/onboard_package.js
new file mode 100644
index 0000000..801acf2
--- /dev/null
+++ b/static/src/projecthandler/onboard_package.js
@@ -0,0 +1,72 @@
+var dropZone = document.getElementById('drop-zone');
+dropZone.ondrop = function (e) {
+    e.preventDefault();
+    this.className = 'upload-drop-zone';
+    create(e.dataTransfer.files, true);
+};
+
+dropZone.ondragover = function () {
+    this.className = 'upload-drop-zone drop';
+    return false;
+};
+
+dropZone.ondragleave = function () {
+    this.className = 'upload-drop-zone';
+    return false;
+};
+
+
+function create(fs, dropzone) {
+    var id = $('.nav-tabs .active').attr('id');
+    if (dropzone) id = 'file_li';
+    var type, text;
+    var data = new FormData();
+    switch (id) {
+
+        case 'file_li':
+            type = 'file';
+
+            var files = dropzone ? fs : document.getElementById('js-upload-files').files;
+            if (!files || !files.length) {
+                files = document.getElementById('drop-zone').files;
+                if (!files || !files.length) {
+                    alert("Select a file");
+                    return
+                }
+            }
+            console.log(files[0])
+            var patt1 = /\.([0-9a-z]+)(?:[\?#]|$)/i;
+            console.log(files[0].name.match(patt1));
+            var extension = files[0].name.substr(files[0].name.lastIndexOf('.') + 1);
+            console.log(extension);
+            if (!(extension == 'gz' )) {
+                alert("The file must be .tar.gz");
+                return
+            }
+
+            data.append('file', files[0]);
+            break;
+    }
+    data.append('csrfmiddlewaretoken', csrf_token);
+    data.append('type', type);
+    data.append('text', text);
+    data.append('id', '{{descriptor_id}}');
+    console.log(text);
+    $.ajax({
+        url: "new",
+        type: 'POST',
+        data: data,
+        cache: false,
+        contentType: false,
+        processData: false,
+        success: function (result) {
+            console.log(result);
+
+            window.location.href = descr_list_url
+
+        },
+        error: function (result) {
+            showAlert(result);
+        }
+    });
+}
\ No newline at end of file