projecthandler/template/project/osm/descriptor/descriptor_new.html

   1 {% extends "descriptor/descriptor_view_base.html" %}
   2
   3 {% load staticfiles %}
   4
   5
   6 {% block title_header_big %}
   7 {{ block.super }}
   8 Onboard new {{ descriptor_type }} package
   9 {% endblock %}
  10
  11 {% block left_sidebar %}
  12 {% include 'osm/osm_project_left_sidebar.html' %}
  13 {% endblock %}
  14
  15 {% block breadcrumb_body %}
  16 {{ block.super }}
  17 <li><a href="{% url 'projects:open_project' project_id=project_id %}">{{project_overview_data.name}}</a></li>
  18 <li><a href="{% url 'projects:open_project' project_id=project_id %}descriptors/{{descriptor_type}}">{{ descriptor_type }}  Descriptors</a></li>
  19 <li>Create Descriptor</li>
  20 {% endblock %}
  21
  22 {% block tab_pane_button_list %}
  23 {{ block.super }}
  24 <li id="file_li" class="active"><a href="#upload" data-toggle="tab"><i class="fa fa-upload"></i> Onboard Package</a></li>
  25 {% endblock %}
  26
  27 {% block nav_buttons_list %}
  28 {{ block.super }}
  29 <li class="pull-right">
  30     <button id="cancel" type="button" class="btn btn-block btn-primary btn-sm" onclick="cancel(this.id)"><i
  31             class="fa fa-times"></i> Cancel
  32     </button>
  33 </li>
  34 {% endblock %}
  35
  36 {% block tab_pane_list %}
  37 {{ block.super }}
  38
  39 <div class="tab-pane active" id="upload">
  40
  41     <h4>Drag and drop file below</h4>
  42     <div class="upload-drop-zone" id="drop-zone">
  43             Just drag and drop files here
  44     </div>
  45 </div>
  46 {% endblock %}
  47
  48
  49 {% block resource_block %}
  50 {{ block.super }}
  51
  52 <script>
  53     var descr_list_url = '{% url "projects:list_descriptors"  project_id=project_id descriptor_type=descriptor_type%}';
  54
  55     var dropZone = document.getElementById('drop-zone');
  56     dropZone.ondrop = function (e) {
  57         e.preventDefault();
  58         this.className = 'upload-drop-zone';
  59         create(e.dataTransfer.files, true);
  60     };
  61
  62     dropZone.ondragover = function () {
  63         this.className = 'upload-drop-zone drop';
  64         return false;
  65     };
  66
  67     dropZone.ondragleave = function () {
  68         this.className = 'upload-drop-zone';
  69         return false;
  70     };
  71
  72
  73     function create(fs, dropzone) {
  74         var id = $('.nav-tabs .active').attr('id');
  75         if (dropzone) id = 'file_li';
  76         var type, text;
  77         var data = new FormData();
  78         switch (id) {
  79
  80             case 'file_li':
  81                 type = 'file';
  82
  83                 var files = dropzone ? fs : document.getElementById('js-upload-files').files;
  84                 if (!files || !files.length) {
  85                     files = document.getElementById('drop-zone').files;
  86                     if (!files || !files.length) {
  87                         alert("Select a file");
  88                         return
  89                     }
  90                 }
  91                 console.log(files[0])
  92                 var patt1 = /\.([0-9a-z]+)(?:[\?#]|$)/i;
  93                 console.log(files[0].name.match(patt1));
  94                 var extension = files[0].name.substr(files[0].name.lastIndexOf('.') + 1);
  95                 console.log(extension);
  96                 if (!(extension == 'gz' )) {
  97                     alert("The file must be .tar.gz");
  98                     return
  99                 }
 100
 101                 data.append('file', files[0]);
 102                 break;
 103         }
 104         data.append('csrfmiddlewaretoken', '{{csrf_token}}');
 105         data.append('type', type);
 106         data.append('text', text);
 107         data.append('id', '{{descriptor_id}}');
 108         console.log(text);
 109         $.ajax({
 110             url: "new",
 111             type: 'POST',
 112             data: data,
 113             cache: false,
 114             contentType: false,
 115             processData: false,
 116             success: function (result) {
 117                 console.log(result);
 118
 119                 window.location.href = descr_list_url
 120
 121             },
 122             error: function (result) {
 123                 showAlert(result);
 124             }
 125         });
 126     }
 127
 128     function cancel(id) {
 129         window.location.href = descr_list_url
 130     }
 131
 132 </script>
 133 {% endblock %}
 134
 135 {% block footer %}
 136     {% include "footer.html" %}
 137 {% endblock %}