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

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