NDOJ/templates/user/import/index.html

{% extends "user/user-base.html" %}
{% block js_media %}
  <script>
    function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i].trim();
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }

    const csrftoken = getCookie('csrftoken');

    $(function() {
      $('#load_button').on('click', function(e) {
        e.preventDefault();
        var files = $('#csv_file').prop('files');
        if (files.length == 1) {
          $('#load_button').addClass('disabled');

          var file = files[0];
          //if (file.type != 'text/csv') {
          //    alert("{{_('Upload CSV only')}}");
          //    return;
          //}
          var form_data = new FormData();
          form_data.append('csv_file', file, file.name);

          var xhr = new XMLHttpRequest();
          xhr.open('POST', "{{url('import_users_post_file')}}", true);
          xhr.setRequestHeader('X-CSRFToken', csrftoken);
          xhr.onload = function () {
            if (xhr.status === 200) {
              var json = JSON.parse(xhr.responseText);
              $('#load_button').removeClass('disabled');

              if (json.done) {
                window.import_users = json.data
                $('#table_csv').html(json.html);
                $('#confirm_button').removeClass('disabled');
              }
              else {
                window.import_users = []
                $('#table_csv').html(json.msg);
                $('#confirm_button').addClass('disabled');
              }
            } else {
              alert('Fail to read file.');
            }
          };

          xhr.send(form_data);
        }
      })

      $('#confirm_button').on('click', function() {
        $(this).addClass('disabled');
        var data = {
          'users': window.import_users
        };

        if (!data.users || data.users.length == 0) {
          alert('No valid users');
          return;
        }

        $('#table_csv').html('');
        $('#log').html('Working...');
        $.post({
          url: "{{url('import_users_submit')}}",
          data: JSON.stringify(data),
          contentType:"application/json; charset=utf-8",
          dataType:"text",
          fail: function() {alert('Fail to import')},
          success: function(data) {
            data = JSON.parse(data);
            var msg = data.msg.split('\n');
            $('#log').html('')
            for (var i of msg) {
              $('#log').append(`<p>${i}</p>`);
            }
          }
        })
      })
    });
  </script>
{% endblock %}

{% block body %}
  {% csrf_token %}
  <center>
    <label for="csv_file">{{_('User File')}}:</label>
    <input type="file" accept=".csv" id="csv_file">
    <a href="{{url('import_users_sample')}}">{{_('Sample')}}</a>
    <div style="display: inline-flex">
      <button id="load_button" style="margin-left: 1em">{{_('Load')}}</button>
      <button id="confirm_button" style="margin-left: 1em" class="disabled">{{_('Import')}}</button>
    </div>
  </center>
  <br>
  <table id="table_csv" class="table"></table>
  <p style="margin-left: 2em" id="log"></p>
{% endblock %}