{% extends "otree/BaseAdmin.html" %}


{% block title %}
  CSV Data Export
{% endblock %}


{% block content %}

  {% if db_is_empty %}
    <p>No sessions have taken place yet.</p>
  {% else %}

    <div class="card">
      <h4 class="card-header">
        Citation requirement
      </h4>
      <div class="card-body">
        <p>
          If you publish research conducted using oTree,
          you are required by the oTree license to cite <a
            href="http://dx.doi.org/10.1016/j.jbef.2015.12.001">this
          paper</a>.
        </p>
        <p>
          Citation:
        </p>
        <p>
          Chen, D.L., Schonger, M., Wickens, C., 2016. oTree - An
          open-source
          platform for laboratory, online and field experiments.
          Journal of Behavioral and Experimental Finance, vol 9:
          88-97
        </p>

      </div>
    </div>

    <h3>All apps</h3>
    <p>

      <a href="javascript:void(0)" class="download-link"
         id="wide-excel"
        data-excel="1">Excel</a>
      |
      <a href="javascript:void(0)" class="download-link"
         id="wide-csv"
         >Plain</a>
    </p>
    <p>
      Data for all apps in one file.
      There is one row per participant;
      different apps and rounds are stacked horizontally.
      This format is useful if you want to correlate participants'
      behavior in one app with their behavior in another app.
    </p>

    <h3>Per-app</h3>
    <p>
      These files contain a row for each player in the given app.
      If there are multiple rounds, there will be multiple rows for the
      same participant.
      This format is useful if you are mainly interested in one app,
      or if you want to correlate data between rounds of the same app.
    </p>

    <table class="table">
      <col width="40%">
      <col width="30%">
      <col width="30%">
      {% for app in custom_export_apps %}
        <tr>
          <td>
              {{ app }} <b>(custom_export)</b>
          </td>
          <td>
            <a href="javascript:void(0)" class="download-link"
               id="app-{{ app }}-custom-excel"
               data-app="{{ app }}"
               data-excel="1"
               data-custom="1">Excel</a>
          </td>
          <td>
            <a href="javascript:void(0)" class="download-link"
               id="app-{{ app }}-custom"
               data-app="{{ app }}"
               data-custom="1"
               >Plain</a>
          </td>
        </tr>
      {% endfor %}

      {% for app in app_names %}
        <tr>
          <td>
            {{ app }}
          </td>
          <td>
            <a href="javascript:void(0)" class="download-link"
               id="app-{{ app }}-excel"
               data-excel="1"
               data-app="{{ app }}">Excel</a>
          </td>
          <td>
            <a href="javascript:void(0)" class="download-link"
               id="app-{{ app }}"
               data-app="{{ app }}">Plain</a>
          </td>
        </tr>
      {% endfor %}

    </table>

    <h3>Page times</h3>
    <p><small>
      If this data is important to you, make sure to download it before
      restarting the server. Otherwise, you might lose the latest observations.
    </small></p>
    <p><a href="{% url 'ExportPageTimes' %}">
      <img src='{% static "glyphicons/download-alt.png" %}'>
      <b>Download</b></a></p>

    {% if chat_messages_exist %}
      <h3>Chat logs</h3>
      <p><a href="{% url 'ExportChat' %}">
        <img src='{% static "glyphicons/download-alt.png" %}'>
        <b>Download</b></a></p>
    {% endif %}

  {% endif %}

  <br/>


{% endblock %}

{% block scripts %}
  <script>

      var socket;

      function initWebSocket() {
          socket = makeReconnectingWebSocket('/export');
          socket.onmessage = function (e) {
              var content = JSON.parse(e.data);
              saveReceivedFile(content);
          };
      }

      initWebSocket();

      $(function () {
          $('.download-link').click(function () {
              $this = $(this);
              var linkId = $this.attr('id');
              var content = {
                  // link_id is just roundtripped so we can use it client-side later.
                  'link_id': linkId,
                  'for_excel': $this.data('excel')
              };
              var appName = $this.data('app');
              if (appName) {
                  content['app_name'] = appName;
              }
              content['is_custom'] = Boolean($this.data('custom'));
              socket.send(JSON.stringify(content));
              $this.append('<progress></progress>');
          })
      });

      function saveReceivedFile(content) {
          var c = content;
          var data = c.data;
          var file = new Blob([data], {type: c.mime_type});
          if (window.navigator.msSaveOrOpenBlob) // IE10+
              window.navigator.msSaveOrOpenBlob(file, c.file_name);
          else { // Others
              var a = document.createElement("a"),
                  url = URL.createObjectURL(file);
              a.href = url;
              a.download = c.file_name;
              document.body.appendChild(a);
              a.click();
              setTimeout(function () {
                  document.body.removeChild(a);
                  window.URL.revokeObjectURL(url);
              }, 0);
          }
          $('#' + c.link_id + ' > ' + 'progress').remove();
      }
  </script>


{% endblock %}
