edx-platform/cms/templates/import.html

<%inherit file="base.html" />
<%namespace name='static' file='static_content.html'/>
<%!
  from django.core.urlresolvers import reverse
  from django.utils.translation import ugettext as _
%>
<%block name="title">${_("Course Import")}</%block>
<%block name="bodyclass">is-signedin course tools view-import</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
    <h1 class="page-header">
      <small class="subtitle">${_("Tools")}</small>
      <span class="sr">&gt; </span>${_("Course Import")}
    </h1>
  </header>
</div>

<div class="wrapper-content wrapper">
  <section class="content">
    <article class="content-primary" role="main">

      <div class="introduction">
        <p>${_("You may import existing course structure and content into Studio.")}</p>

          <p>${_("Importing is not something to take lightly as the course content you successfully upload will replace your current content and cannot be reversed. Please be certain you want to replace your course's content.")}</p>
      </div>

      <form id="fileupload" method="post" enctype="multipart/form-data"
          class="import-form" url="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}">

        <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}" />

        <h2 class="title">${_("Select a File (.tar.gz format) to Replace Your Course Content")}</h2>

        <p class="error-block"></p>

        <a href="#" class="action action-choose-file choose-file-button">${_("Choose File")}</a>

        <div class="wrapper wrapper-file-name file-name-block">
            <h3 class="title">
              <span class="label">File Chosen:</span>
              <span class="file-name"></span>
            </h3>

          <input type="file" name="course-data" class="file-input" />

          <input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" />
        </div>

        <div class="wrapper wrapper-status is-hidden">
          <h3 class="title">${_("Course Import Status")}</h3>

          <ol class="status-progress list-progress">
            <li class="item-progresspoint item-progresspoint-upload is-complete">
              <span class="deco status-visual">
                <i class="icon-cog"></i>
                <i class="icon-warning-sign"></i>
              </span>

              <div class="status-detail">
                <h3 class="title">${_("Uploading")}</h3>
                <p class="copy">${_("Transferring your file to our servers")}</p>
              </div>
            </li>

            <li class="item-progresspoint item-progresspoint-unpack is-started">
              <span class="deco status-visual">
                <i class="icon-cog icon-spin"></i>
                <i class="icon-warning-sign"></i>
              </span>

              <div class="status-detail">
                <h3 class="title">${_("Unpacking")}</h3>
                <p class="copy">${_("Expanding and preparing folder/file structure")}</p>
              </div>
            </li>

            <li class="item-progresspoint item-progresspoint-unpack has-error">
              <span class="deco status-visual">
                <i class="icon-cog"></i>
                <i class="icon-warning-sign"></i>
              </span>

              <div class="status-detail">
                <h3 class="title">${_("Unpacking")}</h3>
                <p class="copy is-updated">${_("We're sorry something went wrong with the import of your course data. Please try again.")}</p>
              </div>
            </li>

            <li class="item-progresspoint item-progresspoint-verify is-not-started">
              <span class="deco status-visual">
                <i class="icon-cog"></i>
                <i class="icon-warning-sign"></i>
              </span>

              <div class="status-detail">
                <h3 class="title">${_("Verifying")}</h3>
                <p class="copy">${_("Reviewing semantics, syntax, and required data")}</p>
              </div>
            </li>

            <li class="item-progresspoint item-progresspoint-import is-not-started">
              <span class="deco status-visual">
                <i class="icon-cog"></i>
                <i class="icon-warning-sign"></i>
              </span>

              <div class="status-detail">
                <h3 class="title">${_("Import Complete")}</h3>
                <p class="copy">${_("Replacing previous course content with imported content")}</p>
              </div>
            </li>
            <li class="item-progresspoint item-progresspoint-success is-not-started">
              <span class="deco status-visual">
                <i class="icon-check"></i>
              </span>

              <div class="status-detail">
                <h3 class="title">${_("Success")}</h3>
                <p class="copy">${_("Your imported content has now replaced all other course content")}</p>
              </div>
            </li>
          </ol>
        </div>
      </form>
    </article>

    <aside class="content-supplementary" role="complimentary">
      <div class="bit">
        <h3 class="title-3">${_("Current Content & Importing")}</h3>
        <p>${_("Importing a new course will delete all content currently associated with your course and replace it with the contents of the uploaded file.")}</p>
      </div>

      <div class="bit">
        <h3 class="title-3">${_("Gzipped Tar Files (.tar.gz) Only")}</h3>
        ## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
        <p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p>
      </div>

      <div class="bit">
        <h3 class="title-3">${_("Warning: Auto-generated Nodes")}</h3>
        ## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
        <p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p>
      </div>
    </aside>
  </section>
</div>
</%block>

<%block name="jsextra">
<script>
require(["jquery", "jquery.fileupload"], function($) {

var file;
var bar = $('.progress-bar');
var fill = $('.progress-fill');
var percent = $('.percent');
var status = $('#status');
var statusBlock = $('.status-block');
var submitBtn = $('.submit-button');

var allStats = $('#status-infos');

var feedbackUrl = "${reverse('import_status', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name='fillerName'))}"


$('#fileupload').fileupload({

    dataType: 'json',
    type: 'POST',

    maxChunkSize: 20 * 1000000, // 20 MB

    autoUpload: false,

    add: function(e, data) {
        submitBtn.unbind('click');
        file = data.files[0];
        if (file.name.match(/tar\.gz$/)) {
            submitBtn.click(function(e){
                e.preventDefault();
                submitBtn.hide();
                data.submit().complete(function(result, textStatus, xhr) {
                    if (xhr.status != 200) {
                        var errMsg = result.hasOwnProperty("ErrMsg") ? result["ErrMsg"] : "" ;
                        alert('${_("Your import has failed.")}\n\n' + errMsg);
                        submitBtn.show();
                        bar.hide();
                    }
                });
            });
        } else {
            data.files = [];
        }
    },

    progressall: function(e, data){
        var doneAt;
        var percentInt = data.loaded / data.total * 100
        var percentVal = parseInt(percentInt, 10) + "%";
        // Firefox makes ProgressEvent.loaded equal ProgressEvent.total only
        // after receiving a response from the server (see Mozilla bug 637002),
        // so for Firefox we jump the gun a little.
        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            doneAt = 95;
        } else {
            doneAt = 99;
        }
        if (percentInt >= doneAt) {
            bar.hide();
            startServerFeedback(feedbackUrl.replace("fillerName", file.name));
        } else {
            bar.show();
            fill.width(percentVal);
            percent.html(percentVal);
        }
    },
    done: function(e, data){
        bar.hide();
        window.onbeforeunload = null;
        alert('${_("Your import was successful.")}');
        window.location = '${successful_import_redirect_url}';
    },
    start: function(e) {
        window.onbeforeunload = function() {
            return '${_("Your import is in progress; navigating away will abort it.")}';
        }
    },
    sequentialUploads: true

});

}); // end define()
</script>
</%block>